/* =============================================
       PAKET C v2 - AKILLI TAHTA DEFTERİ STİLLERİ
       Satır aralıkları düzeltildi
       ============================================= */

  
    /* Sayfa genelinde kaydırmayı serbest bırak */
    html, body { 
        overflow-x: hidden; 
        overflow-y: auto; 
        touch-action: pan-y;
    } 
	
	/* Eski kaba başlığı gizle */
.bd-elements-breadcrumb-area {
    display: none !important;
}

  .board-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    /* Header ve yeni Başlık alanı için pay bırakıyoruz */
    min-height: calc(100vh - 180px); 
    background-color: #e2e8f0 !important; 
    align-items: flex-start;
    padding-top: 20px !important; 
}

    /* =============================================
       SOL MENÜ (SIDEBAR) - GLASSMORPHISM
       ============================================= */
  .board-sidebar {
    width: 300px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.08), 
                0 0 40px rgba(102, 126, 234, 0.05);
    position: relative;
    margin-left: 100px;
    margin-top: 20px;
    height: auto;
    min-height: auto;
    overflow: visible;
    border-radius: 12px;
}

    .board-sidebar-header {
        padding: 16px 18px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
        backdrop-filter: blur(10px);
        flex-shrink: 0;
    }

    .board-sidebar-header h5 {
        color: #ffffff;
        font-weight: 600;
        font-size: 15px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        margin: 0;
        letter-spacing: 0.3px;
        transition: all 0.3s ease;
    }

    .board-sidebar-header .btn {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: #ffffff;
        font-size: 13px;
        padding: 6px 12px;
        border-radius: 8px;
        transition: all 0.25s ease;
        backdrop-filter: blur(4px);
    }

    .board-sidebar-header .btn:hover {
        background: rgba(255, 255, 255, 0.35);
        transform: translateX(-3px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    /* ÜST EYLEM ÇUBUĞU - GLASS */
    .top-action-bar {
        display: flex;
        gap: 8px;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: rgba(248, 250, 252, 0.5);
        backdrop-filter: blur(10px);
        flex-shrink: 0;
        transition: all 0.3s ease;
    }

    .action-btn {
        flex: 1;
        height: 42px;
        border: 1px solid rgba(255, 255, 255, 0.6);
        background: rgba(255, 255, 255, 0.7);
        border-radius: 10px;
        cursor: pointer;
        color: #64748b;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04),
                    inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .action-btn:hover {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #ffffff;
        border-color: transparent;
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4),
                    0 0 15px rgba(102, 126, 234, 0.2);
    }

    .action-btn.danger:hover {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
        box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4),
                    0 0 15px rgba(255, 107, 107, 0.2);
    }

    /* MENÜ İÇERİK ALANI */
  .board-sidebar-content {
    flex: 1;
    overflow-y: visible;
    overflow-x: visible;
    padding: 10px 12px;
    padding-bottom: 80px; /* Alt butonlar için boşluk */
}

/* Accordion içeriği düzgün görünsün */
.board-sidebar-content .accordion-collapse {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
}

.board-sidebar-content .accordion-body {
    max-height: none; /* Accordion içeriği kısıtlanmasın */
}

    /* MENÜ SCROLL GİZLEME */
 
    .board-sidebar.closed {
        margin-left: -300px;
    }

    /* =============================================
       ARAÇ GRUPLARI - KOMPAKT (DÜZENLEME)
       ============================================= */
    .tool-group {
        margin-bottom: 8px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04);
        padding-bottom: 8px;
        transition: all 0.3s ease;
    }

    .tool-group:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .tool-label {
        font-size: 10px;
        font-weight: 700;
        margin-bottom: 8px;
        color: #94a3b8;
        display: block;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        transition: all 0.3s ease;
    }

    /* =============================================
       ARAÇ BUTONLARI - KOMPAKT + GLASS
       ============================================= */
    .tool-btn {
        width: 100%;
        margin-bottom: 4px;
        text-align: left;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        background: rgba(255, 255, 255, 0.5);
        color: #475569;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        font-weight: 500;
        font-size: 13px;
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(5px);
    }

    .tool-btn:last-child {
        margin-bottom: 0;
    }

    .tool-btn::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 3px;
        background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
        transform: scaleY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border-radius: 0 3px 3px 0;
    }

    .tool-btn:hover {
        background: rgba(255, 255, 255, 0.8);
        color: #334155;
        transform: translateX(4px);
        border-color: rgba(102, 126, 234, 0.3);
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
    }

    .tool-btn:hover::before {
        transform: scaleY(1);
    }

    /* STATUS INDICATOR - Aktif araç için */
    .tool-btn.active {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
        color: #667eea;
        border-color: rgba(102, 126, 234, 0.4);
        font-weight: 600;
        box-shadow: 0 3px 12px rgba(102, 126, 234, 0.15),
                    inset 0 0 15px rgba(102, 126, 234, 0.05);
    }

    .tool-btn.active::before {
        transform: scaleY(1);
    }

    /* Aktif buton için status dot */
    .tool-btn.active::after {
        content: '';
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 7px;
        height: 7px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(102, 126, 234, 0.6),
                    0 0 16px rgba(102, 126, 234, 0.3);
        animation: pulse-dot 2s ease-in-out infinite;
    }

    @keyframes pulse-dot {
        0%, 100% {
            box-shadow: 0 0 8px rgba(102, 126, 234, 0.6),
                        0 0 16px rgba(102, 126, 234, 0.3);
            transform: translateY(-50%) scale(1);
        }
        50% {
            box-shadow: 0 0 12px rgba(102, 126, 234, 0.8),
                        0 0 24px rgba(102, 126, 234, 0.5);
            transform: translateY(-50%) scale(1.15);
        }
    }

    .tool-btn i {
        margin-right: 10px;
        width: 20px;
        text-align: center;
        font-size: 1.1em;
        transition: all 0.3s ease;
    }

    .tool-btn:hover i {
        transform: scale(1.15);
        color: #667eea;
    }

    .tool-btn.active i {
        color: #667eea;
    }

    /* =============================================
       RENK SEÇİCİ - GLASS KOMPAKT
       ============================================= */
    .color-options {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        padding: 10px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.6);
        backdrop-filter: blur(10px);
    }

    .color-btn {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        border: 3px solid transparent;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 
                    inset 0 -2px 4px rgba(0, 0, 0, 0.1),
                    inset 0 2px 4px rgba(255, 255, 255, 0.3);
    }

    .color-btn:hover {
        transform: scale(1.15) translateY(-2px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2),
                    0 0 12px currentColor;
    }

    .color-btn.active {
        border-color: #334155;
        transform: scale(1.1);
        box-shadow: 0 0 0 3px rgba(51, 65, 85, 0.2),
                    0 4px 12px rgba(0, 0, 0, 0.2),
                    inset 0 0 8px rgba(255, 255, 255, 0.3);
    }

    #customColor {
        width: 34px;
        height: 34px;
        border: none;
        padding: 0;
        background: none;
        border-radius: 10px;
        cursor: pointer;
        overflow: hidden;
    }

    #customColor::-webkit-color-swatch-wrapper {
        padding: 0;
    }

    #customColor::-webkit-color-swatch {
        border: 2px dashed #cbd5e1;
        border-radius: 8px;
    }

    /* =============================================
       KALINLIK SLIDER - MODERN KOMPAKT
       ============================================= */
    .tool-group input[type=range] {
        width: 100%;
        height: 6px;
        border-radius: 3px;
        background: linear-gradient(90deg, rgba(226, 232, 240, 0.8) 0%, rgba(203, 213, 225, 0.8) 100%);
        outline: none;
        -webkit-appearance: none;
        margin-top: 6px;
    }

    .tool-group input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.5),
                    0 0 12px rgba(102, 126, 234, 0.3);
        transition: all 0.25s ease;
    }

    .tool-group input[type=range]::-webkit-slider-thumb:hover {
        transform: scale(1.2);
        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.6),
                    0 0 20px rgba(102, 126, 234, 0.4);
    }

    .tool-group input[type=range]::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        cursor: pointer;
        border: none;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.5);
    }

    /* =============================================
       SELECT DROPDOWN - GLASS KOMPAKT
       ============================================= */
    .custom-select {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.6);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        cursor: pointer;
        font-size: 13px;
        color: #475569;
        transition: all 0.25s ease;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        backdrop-filter: blur(5px);
    }

    .custom-select:hover {
        border-color: rgba(102, 126, 234, 0.5);
        background-color: rgba(255, 255, 255, 0.8);
    }

    .custom-select:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15),
                    0 3px 12px rgba(102, 126, 234, 0.1);
    }

    /* =============================================
       ACCORDION STİLLERİ - GLASS KOMPAKT (DÜZENLEME)
       ============================================= */
    .accordion-item {
        border: none !important;
        background: transparent;
        margin-bottom: 6px;
    }

    .accordion-item:last-child {
        margin-bottom: 0;
    }

    .accordion-button {
        background: rgba(255, 255, 255, 0.6) !important;
        backdrop-filter: blur(10px) !important;
        border-radius: 10px !important;
        padding: 12px 14px !important;
        font-weight: 600 !important;
        font-size: 13px !important;
        color: #475569 !important;
        box-shadow: none !important;
        border: 1px solid rgba(255, 255, 255, 0.5) !important;
        transition: all 0.3s ease !important;
    }

    .accordion-button:not(.collapsed) {
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
        color: #667eea !important;
        border-color: rgba(102, 126, 234, 0.3) !important;
        box-shadow: 0 3px 12px rgba(102, 126, 234, 0.1) !important;
        border-radius: 10px 10px 0 0 !important;
    }

    .accordion-button:hover {
        background: rgba(255, 255, 255, 0.8) !important;
        transform: translateX(2px);
    }

    .accordion-button::after {
        background-size: 11px;
        transition: transform 0.35s ease;
    }

    /* ACCORDION BODY - DÜZENLEME: Arka plan tüm içeriği kapsasın */
    .accordion-body {
        padding: 8px 10px 10px !important;
        background: rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-top: none;
        border-radius: 0 0 10px 10px;
        margin-top: -1px;
    }

    /* Accordion body içindeki tool-group'lar daha kompakt */
    .accordion-body .tool-group {
        margin-bottom: 2px;
        padding-bottom: 2px;
        border-bottom: none;
    }

    .accordion-body .tool-group:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
    }

    /* Accordion body içindeki tool-btn'ler daha kompakt */
    .accordion-body .tool-btn {
        margin-bottom: 4px;
        padding: 10px 12px;
    }

    .accordion-body .tool-btn:last-child {
        margin-bottom: 0;
    }

    .accordion-collapse {
        border: none;
    }

/* =============================================
   İNDİR & YAZDIR & VERİ BUTONLARI - 4'LÜ GRID (GÜNCELLENMİŞ)
   ============================================= */
.action-buttons-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Yardım ve Güncelleme Linkleri */
.sidebar-info-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #e2e8f0;
}

.sidebar-info-link {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s;
    padding: 4px 8px;
    border-radius: 6px;
    background: transparent;
    border: none;
}

.sidebar-info-link:hover {
    color: #3b82f6;
    background: #f1f5f9;
}

.sidebar-info-link i {
    font-size: 13px;
}

.action-buttons-grid .tool-btn {
    flex: 1 1 calc(50% - 4px);
    min-width: calc(50% - 4px);
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #fff;
}

/* ÖNEMLİ DÜZELTME: İkonun sağındaki boşluğu sıfırlıyoruz */
.action-buttons-grid .tool-btn i {
    font-size: 16px;
    color: #ffffff;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.action-buttons-grid .tool-btn.btn-download {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
}
.action-buttons-grid .tool-btn.btn-download:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

.action-buttons-grid .tool-btn.btn-print {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.3);
}
.action-buttons-grid .tool-btn.btn-print:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(236, 72, 153, 0.4);
}

.action-buttons-grid .tool-btn.btn-export {
    background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.action-buttons-grid .tool-btn.btn-export:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

.action-buttons-grid .tool-btn.btn-import {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}
.action-buttons-grid .tool-btn.btn-import:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.4);
}

.action-buttons-grid .tool-btn span {
    white-space: nowrap;
}

.action-buttons-grid .tool-btn::before,
.action-buttons-grid .tool-btn::after {
    display: none;
}

/* =============================================
   İKON PANEL POPUP - DÜZELTİLMİŞ
   ============================================= */
.icon-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.icon-panel-overlay.active {
    display: flex;
}

.icon-panel {
    background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
    border-radius: 20px;
    width: 90%;
    max-width: 500px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    overflow: hidden;
}

.icon-panel-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.icon-panel-header h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-panel-header h3 i {
    color: #f59e0b;
}

.icon-panel-close {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-panel-close:hover {
    background: #ef4444;
    transform: rotate(90deg);
}

.icon-search-box {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.icon-search-box input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    color: #fff;
    font-size: 14px;
    box-sizing: border-box;
}

.icon-search-box input::placeholder {
    color: rgba(255,255,255,0.4);
}

.icon-search-box input:focus {
    outline: none;
    border-color: #f59e0b;
    background: rgba(255,255,255,0.1);
}

.icon-category-tabs {
    display: flex;
    gap: 5px;
    padding: 15px 20px;
    overflow-x: auto;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.icon-category-tabs::-webkit-scrollbar {
    height: 4px;
}

.icon-category-tabs::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}

.icon-tab {
    padding: 8px 16px;
    border: none;
    border-radius: 20px;
    background: rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    font-size: 13px;
}

.icon-tab:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

.icon-tab.active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    font-weight: 600;
}

.icon-panel-body {
    padding: 15px 20px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.icon-panel-body::-webkit-scrollbar {
    width: 6px;
}

.icon-panel-body::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.icon-item {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.05);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    padding: 8px 4px;
}

.icon-item:hover {
    background: rgba(255,255,255,0.15);
    transform: scale(1.05);
    border-color: rgba(245, 158, 11, 0.5);
}

.icon-item.selected {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
}

.icon-item i {
    font-size: 22px;
    color: #fff;
    margin-bottom: 4px;
}

.icon-item span {
    font-size: 9px;
    color: rgba(255,255,255,0.5);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}

.icon-panel-footer {
    padding: 15px 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.2);
    flex-shrink: 0;
}

.icon-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.icon-color-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-color-control label {
    color: rgba(255,255,255,0.6);
    font-size: 13px;
}

.icon-color-control input[type="color"] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    background: none;
    padding: 0;
}

.icon-size-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-size-control label {
    color: rgba(255,255,255,0.6);
    font-size: 13px;
}

.icon-size-control input[type="range"] {
    width: 80px;
}

.icon-size-control .size-value {
    color: #f59e0b;
    font-weight: 600;
    min-width: 40px;
    font-size: 13px;
}

.icon-add-btn {
    padding: 10px 24px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.icon-add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(245, 158, 11, 0.4);
}

.icon-add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* İkon buton stili */
.icon-picker-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(245,158,11,0.1) 0%, rgba(217,119,6,0.1) 100%);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 8px;
    color: #f59e0b;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 13px;
}

.icon-picker-btn:hover {
    background: linear-gradient(135deg, rgba(245,158,11,0.2) 0%, rgba(217,119,6,0.2) 100%);
    border-color: #f59e0b;
}

.icon-picker-btn i:first-child {
    margin-right: 8px;
}

@media (max-width: 768px) {
    .icon-grid {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .icon-panel {
        width: 95%;
        max-height: 90vh;
    }
    
    .icon-item i {
        font-size: 18px;
    }
    
    .icon-footer-row {
        flex-wrap: wrap;
        gap: 10px;
    }
}

#dataFileInput {
    display: none;
}

    /* =============================================
       TOGGLE MENÜ BUTONU - GLASS + GLOW
       ============================================= */
    .toggle-menu-btn {
        position: absolute;
        top: 15px;
        left: 15px;
        z-index: 1000;
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        border: none;
        box-shadow: 0 4px 18px rgba(102, 126, 234, 0.4),
                    0 0 25px rgba(102, 126, 234, 0.2);
        display: none;
        align-items: center;
        justify-content: center;
        font-size: 19px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .toggle-menu-btn:hover {
        transform: scale(1.08);
        box-shadow: 0 6px 25px rgba(102, 126, 234, 0.5),
                    0 0 35px rgba(102, 126, 234, 0.3);
    }

    /* =============================================
       ORTA ALAN (CANVAS)
       ============================================= */
    .board-main {
        flex: 1;
        position: relative;
        width: 100%;
        height: auto; 
        overflow: visible;
        display: flex;
        flex-direction: column; 
        
        /* DÜZELTME: Tekrar ortalıyoruz */
        align-items: center; 
        
        /* DÜZELTME: Sağ ve sol boşlukları minimuma (5px) indiriyoruz */
        padding: 10px 5px 20px 5px; 
        
        transition: all 0.3s ease;
    }

    .canvas-container-wrapper { 
        position: relative; 
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12),
                    0 0 60px rgba(102, 126, 234, 0.08);
        margin: 0 auto; 
        background: #fff;
        touch-action: pan-y;
        border-radius: 4px;
    }

    #scroll-shield {
        position: absolute;
        inset: 0;
        z-index: 50;
        pointer-events: none;
        background: transparent;
        touch-action: pan-y !important;
        display: none;
    }

    .scroll-active #scroll-shield {
        display: block;
        pointer-events: auto;
    }

    /* =============================================
       MOBİL UYUM
       ============================================= */
    @media (max-width: 991px) {
        .board-wrapper {
            display: block;
        }
        
      .board-sidebar {
    width: 300px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.5);
    display: flex;
    flex-direction: column;
    z-index: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.08), 
                0 0 40px rgba(102, 126, 234, 0.05);
    position: relative;
    margin-left: 100px;
    margin-top: 20px;
    
    /* ÖNEMLİ DEĞİŞİKLİKLER: */
    height: auto;
    min-height: auto;
    overflow: visible;  /* overflow-y: auto OLMAYACAK! */
    
    border-radius: 12px;
}
        
        .board-sidebar.open {
            transform: translateX(0);
        }
        
        .toggle-menu-btn {
            display: flex;
            top: 15px;
            left: 15px;
            bottom: auto;
        }
    }

    /* =============================================
       TAM EKRAN MODU
       ============================================= */
    .fullscreen-active header,
    .fullscreen-active .fix,
    .fullscreen-active .bd-footer-area,
    .fullscreen-active .bd-elements-breadcrumb-area {
        display: none !important;
    }
	
	/* Tam ekran modunda panellerin görünmesi için */
.fullscreen-active .template-panel-overlay,
.fullscreen-active .shape-panel-overlay,
.fullscreen-active .icon-panel-overlay,
.fullscreen-active .math-tools-panel,
.fullscreen-active .class-tools-panel,
.fullscreen-active .class-management-panel,
.fullscreen-active .class-modal-overlay,
.fullscreen-active .picker-overlay,
.fullscreen-active .alarm-overlay {
    z-index: 100000 !important;
}

.fullscreen-active .template-panel,
.fullscreen-active .shape-panel,
.fullscreen-active .icon-panel {
    z-index: 100001 !important;
}

    .fullscreen-active .board-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 100%;
        height: 100vh;
        overflow-y: auto;
        background: linear-gradient(135deg, #e0e5ec 0%, #f0f4f8 50%, #e8eef5 100%);
        padding-top: 0;
    }

    .fullscreen-active .board-sidebar {
        top: 0;
        height: 100vh;
    }

    .bd-elements-description {
        margin-top: 10px;
        font-size: 16px;
        opacity: 0.9;
    }

    /* =============================================
       SINIF YÖNETİMİ PANELİ (SAĞ ALT) - GLASS
       ============================================= */
    .class-tools-panel {
        position: fixed;
        right: 20px;
        bottom: 20px;
        width: 380px;
        max-width: 95vw;
        max-height: 80vh;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(20px);
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15),
                    0 0 60px rgba(102, 126, 234, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.5);
        z-index: 950;
        display: none;
        overflow-x: hidden;
        overflow-y: auto;
        font-size: 14px;
    }

    .class-tools-panel.open {
        display: block;
    }

    .ctp-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: linear-gradient(135deg, rgba(102, 126, 234, 0.9) 0%, rgba(118, 75, 162, 0.9) 100%);
        color: #fff;
        font-weight: 600;
        border-radius: 16px 16px 0 0;
    }

    .ctp-close-btn {
        border: none;
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
        font-size: 16px;
        cursor: pointer;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
    }

    .ctp-close-btn:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
    }

    .ctp-tabs {
        display: flex;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .ctp-tab {
        flex: 1;
        padding: 8px 10px;
        border: none;
        background: rgba(249, 250, 251, 0.5);
        cursor: pointer;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        transition: all 0.2s ease;
    }

    .ctp-tab.active {
        background: rgba(102, 126, 234, 0.1);
        color: #667eea;
        font-weight: 600;
        border-bottom: 2px solid #667eea;
    }

    .ctp-body {
        padding: 12px 14px 14px;
    }

    .ctp-tool {
        display: none;
    }

    .ctp-tool.active {
        display: block;
    }

    /* =============================================
   KRONOMETRe - GELİŞMİŞ VERSİYON
   ============================================= */

/* =============================================
   KRONOMETRE / SAYAÇ (MODERN POPUP)
   ============================================= */

.timer-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.1); /* Hafif beyaz perde */
    backdrop-filter: blur(12px);          /* Flu efekt */
    -webkit-backdrop-filter: blur(12px);
    z-index: 100002;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.timer-overlay.open {
    display: flex;
    opacity: 1;
}

.timer-card {
    background: #fff;
    width: 420px; /* Biraz geniş */
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
    text-align: center;
    position: relative;
    animation: zoomInTimer 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes zoomInTimer {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.timer-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 25px; border-bottom: 1px solid #f1f5f9; padding-bottom: 15px;
}

.timer-header h4 {
    margin: 0; font-size: 18px; color: #334155; font-weight: 700;
    display: flex; align-items: center; gap: 10px;
}

.timer-close {
    width: 32px; height: 32px; border-radius: 50%; border: none;
    background: #f1f5f9; color: #64748b; cursor: pointer; transition: all 0.2s;
}
.timer-close:hover { background: #ef4444; color: white; }

/* KRONOMETRE EKRANI */
.timer-big-display {
    font-size: 72px;
    font-weight: 800;
    font-family: 'Courier New', monospace;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 10px 0 20px 0;
    letter-spacing: 2px;
    line-height: 1;
    position: relative;
}

.timer-big-display .ms {
    font-size: 24px; opacity: 0.6; font-weight: 600;
}

/* MOD SEÇİCİ (Tab Görünümü) */
.timer-mode-tabs {
    display: flex; background: #f1f5f9; padding: 4px; border-radius: 12px;
    margin-bottom: 20px;
}

.timer-mode-label {
    flex: 1; padding: 8px; text-align: center; cursor: pointer;
    border-radius: 8px; font-size: 13px; font-weight: 600; color: #64748b;
    transition: all 0.2s;
}

.timer-mode-label:hover { color: #334155; }

/* Radyo butonu seçiliyken stili değiştir */
.timer-mode-label:has(input:checked) {
    background: #fff; color: #3b82f6; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.timer-mode-label input { display: none; }

/* INPUT ALANI */
.timer-inputs {
    display: flex; justify-content: center; align-items: center; gap: 10px;
    margin-bottom: 20px; background: #f8fafc; padding: 10px; border-radius: 12px;
    border: 1px solid #e2e8f0;
}

.timer-input {
    width: 60px; padding: 8px; text-align: center; border: 2px solid #e2e8f0;
    border-radius: 8px; font-size: 18px; font-weight: 700; color: #334155;
    outline: none; transition: border-color 0.2s;
}
.timer-input:focus { border-color: #3b82f6; }

/* KONTROLLER */
.timer-controls-row {
    display: flex; gap: 10px; margin-top: 10px;
}

.timer-btn {
    flex: 1; padding: 14px; border: none; border-radius: 12px;
    font-size: 15px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 0.2s;
}

.btn-primary { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4); }

.btn-secondary { background: #f1f5f9; color: #475569; }
.btn-secondary:hover { background: #e2e8f0; }

.btn-icon-only { flex: 0 0 50px; } /* Ses butonu vb. için kare */

/* Aktif (Çalışıyor) Durumu */
.btn-primary.running {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

/* Tur Kayıtları */
.timer-laps {
    max-height: 120px;
    overflow-y: auto;
    margin-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 10px;
}

.timer-laps::-webkit-scrollbar {
    width: 4px;
}

.timer-laps::-webkit-scrollbar-thumb {
    background: rgba(102, 126, 234, 0.3);
    border-radius: 2px;
}

.timer-lap-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 6px;
    margin-bottom: 4px;
    background: rgba(102, 126, 234, 0.05);
}

.timer-lap-item:nth-child(odd) {
    background: rgba(102, 126, 234, 0.1);
}

.timer-lap-item .lap-number {
    font-weight: 600;
    color: #667eea;
}

.timer-lap-item .lap-time {
    font-family: 'Courier New', monospace;
    font-weight: 600;
}

.timer-lap-item .lap-diff {
    color: #22c55e;
    font-size: 11px;
}

/* Tam Ekran Modal */
.timer-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    z-index: 99999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.timer-fullscreen-overlay.active {
    display: flex;
}

.timer-fullscreen-display {
    font-size: 20vw;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: #fff;
    text-shadow: 0 0 50px rgba(102, 126, 234, 0.5);
    letter-spacing: 10px;
}

.timer-fullscreen-display .fs-ms {
    font-size: 8vw;
    opacity: 0.6;
}

.timer-fullscreen-label {
    font-size: 3vw;
    color: rgba(255,255,255,0.5);
    margin-top: 20px;
}

.timer-fullscreen-close {
    position: absolute;
    top: 30px;
    right: 30px;
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s;
}

.timer-fullscreen-close:hover {
    background: rgba(255,255,255,0.2);
    transform: rotate(90deg);
}

.timer-fullscreen-controls {
    position: absolute;
    bottom: 50px;
    display: flex;
    gap: 20px;
}

.timer-fullscreen-controls button {
    padding: 15px 40px;
    border: none;
    border-radius: 15px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.timer-fullscreen-controls .fs-btn-start {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
}

.timer-fullscreen-controls .fs-btn-start.running {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.timer-fullscreen-controls .fs-btn-reset {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.timer-fullscreen-controls button:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Geri sayım bitti animasyonu */
@keyframes timerFlash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.timer-finished {
    animation: timerFlash 0.5s ease-in-out 5;
}

.timer-finished .timer-display {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

    /* =============================================
       NAMES (İSİM SEÇİCİ)
       ============================================= */
    .names-form textarea {
        width: 100%;
        border-radius: 10px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding: 10px 12px;
        font-size: 13px;
        resize: vertical;
        background: rgba(255, 255, 255, 0.8);
    }

    .names-options {
        margin-top: 6px;
        font-size: 12px;
    }

    .names-buttons {
        display: flex;
        gap: 8px;
        margin-top: 8px;
    }

    .names-buttons button {
        flex: 1;
        border-radius: 10px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding: 8px 10px;
        background: rgba(255, 255, 255, 0.8);
        cursor: pointer;
        font-size: 13px;
        transition: all 0.2s ease;
    }

    .names-buttons button:hover {
        background: #f1f5f9;
        transform: translateY(-1px);
    }

    .names-picker-controls {
        margin-top: 12px;
        text-align: center;
    }

    .names-pick-btn {
        border-radius: 999px;
        border: none;
        padding: 12px 24px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        cursor: pointer;
        font-size: 15px;
        font-weight: 600;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }

    .names-pick-btn:hover {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
    }

    .selected-name-display {
        margin-top: 12px;
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .recent-names {
        margin-top: 8px;
        font-size: 12px;
    }

    .recent-names ul {
        list-style: none;
        padding-left: 0;
        margin: 6px 0 0;
    }

    .recent-names li {
        padding: 3px 0;
        color: #64748b;
    }

    /* =============================================
       ÇARK (WHEEL)
       ============================================= */
   .wheel-wrapper {
    /* Genişlik veya Yükseklikten hangisi küçükse ona göre %90 boyut al */
    width: auto; 
    height: auto;
    
    /* Maksimum boyutlar (Kapsayıcıya sığacak kadar) */
    max-width: 100%;
    max-height: 75%; /* Butonlara yer kalsın diye %75 */
    
    /* EN ÖNEMLİ KISIM: KARE OLMAYA ZORLA */
    aspect-ratio: 1 / 1; 
    
    position: relative;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

   #wheelCanvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    object-fit: contain; /* Orantıyı koru */
}

 .wheel-pointer {
    position: absolute;
    top: -10px; /* Biraz yukarı çek */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    /* İbre boyutu */
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 25px solid #ef4444;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}

    .wheel-controls {
    width: 90%;
    display: flex;
    gap: 10px;
}
.wheel-controls button {
    border-radius: 12px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: transform 0.1s;
}

.wheel-controls button:active {
    transform: scale(0.96);
}
    .wheel-controls button:first-child {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        border: none;
    }

    .wheel-controls button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .wheel-selected-display {
    width: 90%;
    text-align: center;
    font-size: 20px;
    font-weight: 800;
    color: #334155;
    background: #fff;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

    .wheel-selected-display span {
        font-weight: 800;
    }

    .wheel-top-buttons {
        margin-top: 6px;
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .wheel-top-buttons button {
        flex: 1;
        border-radius: 999px;
        border: none;
        padding: 8px 12px;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .wheel-top-buttons button:nth-child(1) {
        background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
        color: #fff;
    }

    .wheel-top-buttons button:nth-child(2) {
        background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        color: #fff;
    }

    .wheel-top-buttons button:nth-child(3) {
        background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
        color: #fff;
    }

    .wheel-top-buttons button:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .class-tools-panel.wheel-fullscreen {
        width: 720px;
        max-width: 95vw;
        max-height: 80vh;
        left: 50%;
        top: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.25),
                    0 0 80px rgba(102, 126, 234, 0.15);
    }

    .class-tools-panel.wheel-fullscreen .wheel-wrapper {
        width: 320px;
        height: 320px;
    }

    .class-tools-panel.wheel-fullscreen .wheel-selected-display {
        font-size: 18px;
    }

    .small-label {
        font-size: 12px;
        font-weight: 600;
        margin-bottom: 4px;
        display: block;
        color: #64748b;
    }

    .small-text {
        font-size: 12px;
        color: #64748b;
    }

    @media (max-width: 767px) {
        .class-tools-panel {
            right: 8px;
            left: 8px;
            bottom: 8px;
            width: auto;
        }
    }

    /* =============================================
       SOL MENÜ SEKMELERİ
       ============================================= */
    .sidebar-tabs {
        display: flex;
        gap: 8px;
        margin: 10px 0 12px;
    }

    .sidebar-tab-btn {
        flex: 1;
        border-radius: 999px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        background: rgba(255, 255, 255, 0.6);
        padding: 8px 12px;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .sidebar-tab-btn.active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    }

    .sidebar-tab-content {
        display: none;
    }

    .sidebar-tab-content.active {
        display: block;
    }

    /* =============================================
       SINIF YÖNETİMİ PANELİ (ÖĞRENCİ/GRUP/YILDIZ/LİG)
       ============================================= */
    .class-management-panel {
        position: fixed;
        right: 20px;
        bottom: 20px;
        width: 380px;
        max-width: 95vw;
        max-height: 80vh;
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(20px);
        border-radius: 16px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15),
                    0 0 60px rgba(102, 126, 234, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.5);
        z-index: 940;
        display: none;
        overflow: hidden;
        font-size: 14px;
    }

    .class-management-panel .ctp-body {
        max-height: calc(80vh - 40px);
        overflow-y: auto;
    }

    .class-management-panel.open {
        display: block;
    }

    .cm-view {
        display: none;
    }

    .cm-view.active {
        display: block;
    }

    .cm-section {
        margin-bottom: 10px;
    }

    .cm-inline-row {
        display: flex;
        gap: 6px;
        margin-bottom: 6px;
    }

    .cm-inline-row input[type="text"] {
        flex: 1;
        padding: 8px 10px;
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        font-size: 13px;
        background: rgba(255, 255, 255, 0.8);
    }

    .cm-inline-row button {
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        background: rgba(255, 255, 255, 0.8);
        padding: 8px 12px;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .cm-inline-row button:hover {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: #fff;
        border-color: transparent;
    }

    .cm-students-scroll {
        max-height: 180px;
        overflow-y: auto;
        margin-top: 4px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.8);
    }

    .cm-students-scroll .cm-students-table {
        margin-top: 0;
    }

    .cm-group-members {
        max-height: 150px;
        overflow-y: auto;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        padding: 6px 8px;
        background: rgba(255, 255, 255, 0.8);
        font-size: 13px;
    }

    .cm-group-members label {
        display: block;
        margin-bottom: 2px;
        padding: 4px 6px;
        border-radius: 6px;
        cursor: pointer;
        background: transparent;
        color: #111827;
        transition: all 0.2s ease;
    }

    .cm-group-members label:hover {
        background: rgba(102, 126, 234, 0.08);
    }

    .cm-group-members label span {
        color: inherit;
    }

    .cm-group-members input.cm-group-member-checkbox {
        margin-right: 6px;
    }

    .cm-group-members label.selected {
        background: rgba(102, 126, 234, 0.15);
        color: #667eea;
        font-weight: 600;
    }

    .cm-groups-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
        margin-top: 6px;
    }

    .cm-groups-table th,
    .cm-groups-table td {
        padding: 5px 6px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .cm-groups-table th {
        background: rgba(248, 250, 252, 0.8);
        font-weight: 600;
    }

    .cm-stars-table,
    .cm-league-table,
    .cm-success-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

    .cm-stars-table th, .cm-stars-table td,
    .cm-league-table th, .cm-league-table td,
    .cm-success-table th, .cm-success-table td {
        padding: 5px 6px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .cm-league-table,
    .cm-success-table {
        font-size: 14px;
    }

    .cm-league-table th,
    .cm-league-table td,
    .cm-success-table th,
    .cm-success-table td {
        padding: 6px 8px;
    }

    .cm-stars-table th,
    .cm-league-table th,
    .cm-success-table th {
        background: rgba(248, 250, 252, 0.8);
        font-weight: 600;
    }

    .cm-star-btns button {
        margin-right: 3px;
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        background: rgba(255, 255, 255, 0.8);
        padding: 3px 6px;
        font-size: 11px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .cm-star-btns button:hover {
        background: #f1f5f9;
        transform: translateY(-1px);
    }

    @media (max-width: 767px) {
        .class-management-panel {
            right: 8px;
            left: 8px;
            bottom: 8px;
            width: auto;
        }
    }

    .cm-student-form-row {
        margin-bottom: 6px;
    }

    .cm-student-form-row input {
        width: 100%;
        padding: 8px 10px;
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        font-size: 13px;
        background: rgba(255, 255, 255, 0.8);
    }

    .cm-student-buttons {
        display: flex;
        gap: 6px;
        margin-top: 4px;
    }

    .cm-student-buttons button {
        flex: 1;
        border-radius: 10px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        background: rgba(255, 255, 255, 0.8);
        padding: 8px 10px;
        font-size: 13px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .cm-student-buttons button:hover {
        background: #f1f5f9;
    }

    .cm-message {
        font-size: 11px;
        color: #6b7280;
        margin-top: 4px;
    }

    .cm-students-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
        margin-top: 4px;
    }

    .cm-students-table th,
    .cm-students-table td {
        padding: 5px 6px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .cm-students-table th {
        font-weight: 600;
        background: rgba(248, 250, 252, 0.8);
    }

    .cm-student-actions {
        display: flex;
        gap: 3px;
    }

    .cm-student-actions button {
        flex: 1;
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        background: rgba(255, 255, 255, 0.8);
        padding: 3px 5px;
        font-size: 11px;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .cm-student-actions button:hover {
        background: #f1f5f9;
    }

    .cm-success-scroll {
        max-height: 280px;
        overflow-y: auto;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.8);
    }

    .class-management-panel.league-mode .cm-league-table,
    .class-management-panel.league-mode .cm-success-table {
        font-size: 24px;
    }

    .class-management-panel.league-mode .cm-league-table th,
    .class-management-panel.league-mode .cm-league-table td,
    .class-management-panel.league-mode .cm-success-table th,
    .class-management-panel.league-mode .cm-success-table td {
        padding: 10px 12px;
    }

    .class-management-panel.league-mode {
        width: 720px;
        max-width: 95vw;
        max-height: 80vh;
        left: 50%;
        top: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.25),
                    0 0 80px rgba(102, 126, 234, 0.15);
    }

    .class-management-panel.league-mode .ctp-header {
        font-size: 18px;
        padding: 14px 20px;
    }

    .class-management-panel.league-mode .cm-section {
        margin-bottom: 14px;
    }

    .class-management-panel.league-mode .cm-league-table {
        font-size: 24px;
    }

    .class-management-panel.league-mode .cm-league-table th,
    .class-management-panel.league-mode .cm-league-table td {
        padding: 10px 12px;
    }

    .cm-league-table tr.league-first {
        background: linear-gradient(90deg, #fbbf24, #f97316);
        color: #111827;
        font-weight: 700;
    }

    .cm-league-table tr.league-second {
        background: linear-gradient(90deg, #e5e7eb, #d1d5db);
        font-weight: 600;
    }

    .cm-league-table tr.league-third {
        background: linear-gradient(90deg, #fed7aa, #fdba74);
        font-weight: 600;
    }

/* =============================================
   MATEMATİK ARAÇLARI PANELİ
   ============================================= */
/* =============================================
   MATEMATİK ARAÇLARI PANELİ (GÜNCELLENDİ: ORTALI VE GENİŞ)
   ============================================= */
.math-tools-panel {
    position: fixed;
    
    /* ORTALAMA AYARLARI */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Tam merkez */
    right: auto; /* Sağ yaslamayı iptal et */
    
    /* GENİŞLİK AYARLARI */
    width: 850px; /* Daha geniş */
    max-width: 95vw;
    max-height: 85vh;
    
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 25px 80px rgba(0,0,0,0.3),
                0 0 0 1px rgba(255,255,255,0.5) inset;
    border: 1px solid rgba(203, 213, 225, 0.5);
    z-index: 200005 !important; /* Popup önceliği */
    display: none;
    overflow: hidden;
    flex-direction: column; /* İçerik dizilimi */
}

.math-tools-panel.open {
    display: flex; /* Block yerine Flex */
    animation: mathPanelPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes mathPanelPopIn {
    from { opacity: 0; transform: translate(-50%, -45%) scale(0.95); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.math-tools-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

/* Kategori Butonları */
.math-tools-categories {
    display: flex;
    gap: 8px;
    padding: 15px 24px;
    background: #f1f5f9;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
    justify-content: center; /* Butonları ortala */
}

.math-category-btn {
    padding: 10px 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    color: #475569;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.math-category-btn:hover {
    background: #fff;
    color: #10b981;
    border-color: #10b981;
    transform: translateY(-1px);
}

.math-category-btn.active {
    background: #10b981;
    color: #fff;
    border-color: #10b981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Araç Grid (Izgara) */
.math-tools-grid {
    display: grid;
    /* Geniş olduğu için 4 sütun yapıyoruz */
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px;
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Araç Kartları */
.math-tool-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    position: relative;
    min-height: 130px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

.math-tool-card:hover {
    border-color: #10b981;
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(16, 185, 129, 0.15);
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .math-tools-panel {
        width: 95%;
        height: 80vh;
    }
    .math-tools-grid {
        grid-template-columns: repeat(2, 1fr); /* Mobilde 2 sütun */
        padding: 15px;
        gap: 10px;
    }
    .math-tools-categories {
        justify-content: flex-start; /* Mobilde sola yaslı kaydırma */
    }
    .math-category-btn {
        padding: 8px 14px;
        font-size: 12px;
    }
}


/* Araç Kartları */
.math-tool-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 12px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    position: relative;
    min-height: 110px;
}

.math-tool-card:hover {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.2);
}

.math-tool-card:active {
    transform: translateY(-2px);
}

.math-tool-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 10px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    transition: all 0.3s ease;
}

.math-tool-card:hover .math-tool-icon {
    transform: scale(1.1);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.4);
}

.math-tool-name {
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}

/* Yakında Gelecek Araçlar */
.math-tool-card.math-tool-coming {
    cursor: not-allowed;
    opacity: 0.7;
}

.math-tool-card.math-tool-coming:hover {
    transform: none;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.08);
}

.math-tool-card.math-tool-coming .math-tool-icon.coming-soon-icon {
    background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    box-shadow: 0 4px 12px rgba(100, 116, 139, 0.2);
}

.math-tool-card.math-tool-coming:hover .math-tool-icon {
    transform: none;
}

.coming-soon-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}


/* =============================================
   CETVEL ARACI - CANVAS ÜZERİNDE
   ============================================= */
.canvas-ruler-tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    pointer-events: none;
    z-index: 9999;
    white-space: nowrap;
}
	
	/* =============================================
   CETVEL KONTROL PANELİ
   ============================================= */
.ruler-control-panel {
    position: fixed;
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    z-index: 1000;
}

.ruler-control-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: none;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.ruler-control-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.ruler-control-btn.danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.ruler-control-btn.danger:hover {
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.ruler-draw-marker {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #ef4444;
    border: 2px solid #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    z-index: 100;
    pointer-events: none;
}

/* =============================================
   ALARM SİSTEMİ STİLLERİ
   ============================================= */

/* Popup Overlay */
.alarm-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
}

.alarm-popup-overlay.open {
    display: flex;
}

/* Ana Popup */
.alarm-popup {
    width: 500px;
    max-width: 95vw;
    max-height: 90vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.alarm-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

.alarm-popup-header i {
    margin-right: 8px;
}

.alarm-popup-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.alarm-popup-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.alarm-popup-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.alarm-popup-footer {
    padding: 16px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    text-align: center;
}

/* Yeni Alarm Ekleme Bölümü */
.alarm-add-section {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
}

.alarm-add-section h4 {
    margin: 0 0 16px;
    font-size: 14px;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alarm-add-section h4 i {
    color: #f59e0b;
}

.alarm-form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
}

.alarm-form-row > div {
    flex: 1;
}

.alarm-form-row label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 6px;
}

.time-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.time-inputs select {
    width: 70px;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.time-inputs span {
    font-size: 20px;
    font-weight: 700;
    color: #475569;
}

.alarm-sound-input select,
.alarm-label-input input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
}

.alarm-label-input input::placeholder {
    color: #94a3b8;
}

/* Gün Seçimi */
.alarm-days-section {
    width: 100%;
}

.alarm-days-options {
    margin-bottom: 10px;
}

.alarm-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #475569;
}

.alarm-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: #f59e0b;
}

.alarm-days-grid {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.day-checkbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.day-checkbox input {
    display: none;
}

.day-checkbox span {
    padding: 8px 12px;
    background: #f1f5f9;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    transition: all 0.2s;
}

.day-checkbox input:checked + span {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #d97706;
}

.alarm-days-hint {
    font-size: 11px;
    color: #94a3b8;
    margin: 8px 0 0;
}

.alarm-add-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    margin-top: 8px;
}

.alarm-add-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

/* Alarm Listesi */
.alarm-list-section h4 {
    margin: 0 0 12px;
    font-size: 14px;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 8px;
}

.alarm-list-section h4 i {
    color: #64748b;
}

.alarm-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.alarm-empty {
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    padding: 20px;
}

.alarm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.alarm-item.muted {
    opacity: 0.5;
}

.alarm-item-icon {
    font-size: 20px;
}

.alarm-item-info {
    flex: 1;
}

.alarm-item-time {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.alarm-item-label {
    font-size: 12px;
    color: #64748b;
}

.alarm-item-days {
    font-size: 11px;
    color: #f59e0b;
    font-weight: 500;
}

.alarm-item-actions {
    display: flex;
    gap: 6px;
}

.alarm-item-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.alarm-mute-btn {
    background: #f1f5f9;
    color: #64748b;
}

.alarm-mute-btn:hover {
    background: #fef3c7;
    color: #d97706;
}

.alarm-mute-btn.muted {
    background: #fef3c7;
    color: #d97706;
}

.alarm-delete-btn {
    background: #fef2f2;
    color: #ef4444;
}

.alarm-delete-btn:hover {
    background: #ef4444;
    color: #fff;
}

/* Tüm Alarmları Sustur Butonu */
.alarm-mute-all-btn {
    padding: 10px 20px;
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.alarm-mute-all-btn:hover {
    background: #e2e8f0;
}

.alarm-mute-all-btn.muted {
    background: #fef3c7;
    color: #d97706;
    border-color: #fcd34d;
}

/* Alarm Çaldığında Popup */
.alarm-ring-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}

.alarm-ring-overlay.ringing {
    display: flex;
}

.alarm-ring-popup {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: alarmPulse 0.5s ease-in-out infinite alternate;
}

@keyframes alarmPulse {
    from {
        transform: scale(1);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    }
    to {
        transform: scale(1.02);
        box-shadow: 0 25px 70px rgba(245, 158, 11, 0.5);
    }
}

.alarm-ring-icon {
    font-size: 60px;
    color: #d97706;
    margin-bottom: 16px;
    animation: bellShake 0.3s ease-in-out infinite;
}

@keyframes bellShake {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}

.alarm-ring-time {
    font-size: 48px;
    font-weight: 800;
    color: #92400e;
    margin-bottom: 8px;
}

.alarm-ring-label {
    font-size: 20px;
    color: #b45309;
    margin-bottom: 24px;
}

.alarm-stop-btn {
    padding: 16px 40px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
}

.alarm-stop-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
}

/* Mobil Uyum */
@media (max-width: 540px) {
    .alarm-popup {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    
    .alarm-form-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .alarm-days-grid {
        justify-content: center;
    }
    
    .alarm-ring-popup {
        margin: 20px;
        padding: 30px;
    }
    
    .alarm-ring-time {
        font-size: 36px;
    }
}

/* =============================================
   ŞEKİL SEÇİCİ PANELİ STİLLERİ
   ============================================= */

/* Sol Menüdeki Buton */
.shape-picker-btn {
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.shape-picker-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.shape-picker-btn i:first-child {
    font-size: 16px;
}

.shape-picker-btn span {
    flex: 1;
    text-align: left;
}

.shape-picker-btn i:last-child {
    font-size: 12px;
    opacity: 0.7;
}

/* Popup Overlay */
.shape-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
}

.shape-panel-overlay.open {
    display: flex;
}

/* Ana Panel */
.shape-panel {
    width: 520px;
    max-width: 95vw;
    max-height: 85vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.shape-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

.shape-panel-header i {
    margin-right: 8px;
}

.shape-panel-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.shape-panel-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Kategori Tabları */
.shape-category-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
    flex-wrap: nowrap;
}

.shape-tab {
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.shape-tab:hover {
    background: #f1f5f9;
    color: #475569;
}

.shape-tab.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #fff;
    border-color: transparent;
}

/* Şekil Grid */
.shape-panel-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

.shape-grid {
    display: none;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.shape-grid.active {
    display: grid;
}

.shape-item {
    aspect-ratio: 1;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    transition: all 0.2s;
    color: #64748b;
}

.shape-item:hover {
    background: #ede9fe;
    border-color: #8b5cf6;
    color: #7c3aed;
    transform: scale(1.05);
}

.shape-item.selected {
    background: #8b5cf6;
    border-color: #7c3aed;
    color: #fff;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.shape-item svg {
    width: 100%;
    height: 100%;
}

/* Footer */
.shape-panel-footer {
    padding: 12px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    text-align: center;
    font-size: 13px;
    color: #64748b;
}

#selectedShapeInfo {
    font-weight: 500;
}

/* Mobil Uyum */
@media (max-width: 540px) {
    .shape-panel {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    
    .shape-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .shape-category-tabs {
        padding: 10px 12px;
    }
    
    .shape-tab {
        padding: 6px 10px;
        font-size: 12px;
    }
}
	/* =============================================
   DEFTER ŞABLONU PANELİ STİLLERİ
   ============================================= */

/* Sol Menüdeki Buton */
.template-picker-btn {
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.template-picker-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.4);
}

.template-picker-btn i:first-child {
    font-size: 16px;
}

.template-picker-btn span {
    flex: 1;
    text-align: left;
}

.template-picker-btn i:last-child {
    font-size: 12px;
    opacity: 0.7;
}

/* Popup Overlay */
.template-panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
}

.template-panel-overlay.open {
    display: flex;
}

/* Ana Panel */
.template-panel {
    width: 480px;
    max-width: 95vw;
    max-height: 85vh;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.template-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

.template-panel-header i {
    margin-right: 8px;
}

.template-panel-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.template-panel-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Şablon Grid */
.template-panel-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.template-item {
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid transparent;
}

.template-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: #06b6d4;
}

.template-item.selected {
    border-color: #06b6d4;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
}

.template-preview {
    width: 100%;
    aspect-ratio: 3/4;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.template-preview.template-white {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 2px dashed #e2e8f0;
}

.template-preview.template-white span {
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
}

.template-name {
    padding: 10px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

/* Footer */
.template-panel-footer {
    padding: 12px 20px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    text-align: center;
    font-size: 13px;
    color: #64748b;
}

#selectedTemplateInfo {
    font-weight: 500;
}

/* Mobil Uyum */
@media (max-width: 540px) {
    .template-panel {
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    
    .template-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* =============================================
   SINIF SEÇİCİ SİSTEMİ
   ============================================= */

/* Sınıf Seçici Bar */
.class-selector-bar {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
    border-radius: 12px;
    padding: 12px 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.class-selector-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.class-selector-label {
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    white-space: nowrap;
}

.class-selector-dropdown {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    max-width: 200px;
}

.class-selector-dropdown:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.4);
}

.class-selector-dropdown:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

.class-selector-dropdown option {
    background: #1e3a5f;
    color: #fff;
    padding: 10px;
}

.class-selector-buttons {
    display: flex;
    gap: 6px;
}

.class-btn {
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.class-btn i {
    font-size: 14px;
}

.class-btn-add {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
}

.class-btn-edit {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

.class-btn-delete {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.class-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.class-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* Sınıfsız Mod Banner */
.classless-mode-banner {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 10px;
    padding: 10px 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.classless-mode-banner p {
    color: #fff;
    font-size: 12px;
    margin: 0;
}

.classless-mode-banner button {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.classless-mode-banner button:hover {
    background: rgba(255,255,255,0.3);
}

/* Sınıf Ekleme/Düzenleme Modal */
.class-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.class-modal-overlay.active {
    display: flex;
}

.class-modal {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
    border-radius: 16px;
    width: 90%;
    max-width: 400px;
    padding: 25px;
    box-shadow: 0 25px 60px rgba(0,0,0,0.4);
}

.class-modal h3 {
    color: #fff;
    margin: 0 0 20px 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.class-modal h3 i {
    color: #60a5fa;
}

.class-modal-input {
    width: 100%;
    padding: 12px 15px;
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 16px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.class-modal-input::placeholder {
    color: rgba(255,255,255,0.4);
}

.class-modal-input:focus {
    outline: none;
    border-color: #60a5fa;
}

.class-modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.class-modal-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.class-modal-btn-cancel {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.class-modal-btn-save {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
}

.class-modal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Sınıf Badge */
.current-class-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

.current-class-badge i {
    font-size: 10px;
}

/* Responsive */
@media (max-width: 768px) {
    .class-selector-bar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .class-selector-left {
        flex-direction: column;
        align-items: stretch;
    }
    
    .class-selector-dropdown {
        max-width: 100%;
    }
    
    .class-selector-buttons {
        justify-content: center;
    }
}

/* =============================================
   ONLUK BLOK KONTROL PANELİ
   ============================================= */
.base10-control-panel {
    position: fixed;
    display: flex;
    gap: 6px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.base10-btn {
    padding: 6px 12px;
    border-radius: 6px;
    border: none;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    transition: transform 0.1s;
}

.base10-btn:hover { transform: translateY(-2px); }

.base10-btn.decompose { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.base10-btn.compose   { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.base10-btn.delete    { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }
	
	/* =============================================
   ÇOKLU SAYFA NAVİGASYONU
   ============================================= */
.page-nav-container {
    /* Konumlandırma: Artık Fixed değil, akışta */
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    
    /* Düzen ve Hizalama */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    
    /* Canvas ile mesafe */
    margin-top: 15px; 
    margin-bottom: 30px; /* Altına biraz boşluk bırakalım */
    
    /* Görünüm: Şeffaf ve Minimal */
    background: transparent !important; /* Arka planı kaldırdık */
    box-shadow: none !important;        /* Gölgeyi kaldırdık */
    border-radius: 0;
    padding: 0;
    
    /* Hayalet Modu (Yarı Saydam) */
    opacity: 0.3; 
    transition: all 0.3s ease;
    z-index: 50;
}


/* Üzerine gelince parlasın */
.page-nav-container:hover {
    opacity: 1;
    transform: translateY(-2px) !important; /* Hafifçe yukarı kalksın */
}
/* Tam ekran modunda düzeltme */
.fullscreen-active .page-nav-container {
    z-index: 100000 !important;
}

/* Ortadaki Sayı Göstergesi */
.page-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.8); /* Hafif beyaz zemin */
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

#pageIndicator {
    font-family: 'Segoe UI', sans-serif; /* Fontu yumuşattık */
    font-weight: 700;
    font-size: 13px;
    color: #475569;
    min-width: 50px;
    text-align: center;
}

.page-arrow {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: #fff;
    color: #64748b;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-arrow:hover {
    background: #3b82f6;
    color: #fff;
    transform: translateY(-1px);
}

/* Butonlar (Daha küçük ve kibar) */
.page-btn, .page-arrow {
    width: 32px;
    height: 32px;
    border: 1px solid #e2e8f0;
    border-radius: 50%; /* Tam yuvarlak */
    background: #fff;
    color: #64748b;
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.page-btn:hover, .page-arrow:hover {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
    transform: scale(1.1);
}

/* Çöp Kutusu (Özel Renk) */
.page-btn i.fa-trash-can { color: #ef4444; }
.page-btn:hover i.fa-trash-can { color: #fff; } /* Hoverda beyaz olsun */

/* Yeni Ekle Butonu (Daha belirgin) */
.page-btn.add-new {
    background: #fff;
    color: #10b981;
    border-color: #10b981;
}
.page-btn.add-new:hover {
    background: #10b981;
    color: #fff;
}

/* Mobil Uyum (Mobilde zaten gizli, ama gerekirse diye) */
@media (max-width: 991px) {
    .page-nav-container {
        /* Mobilde de canvas altında dursun */
        margin-top: 10px;
        opacity: 0.8; /* Mobilde hover olmadığı için daha görünür olsun */
    }
}
	
	/* =============================================
   ÇİFT YÖNLÜ PERDE STİLLERİ
   ============================================= */
.curtain-overlay {
    position: fixed;
    left: 0;
    width: 100%;
    height: 0px; /* Başlangıçta kapalı (görünmez) */
    z-index: 99990;
    transition: height 0.1s linear;
    overflow: visible; /* Handle dışarı taşabilsin diye */
    display: none; /* Butona basılınca block olacak */
}

/* ÜST PERDE */
.top-curtain {
    top: 0;
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
    border-bottom: 2px solid #fbbf24;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* ALT PERDE */
.bottom-curtain {
    bottom: 0;
    background: linear-gradient(0deg, #334155 0%, #1e293b 100%);
    border-top: 2px solid #fbbf24;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.3);
}

/* TUTMA KOLLARI (HANDLE) */
.curtain-handle-bar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 30px;
    background: #fbbf24; /* Turuncu tutaç */
    color: #78350f;
    border-radius: 0 0 10px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ns-resize;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 99991;
}

.top-handle {
    bottom: -30px; /* Perdenin altına sarkıt */
}

.bottom-handle {
    top: -30px; /* Perdenin üstüne çıkar */
    border-radius: 10px 10px 0 0;
}

/* KAPATMA BUTONU */
.curtain-master-close {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99992;
    background: #ef4444;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    display: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* =============================================
   SPOT IŞIK (SPOTLIGHT) STİLLERİ
   ============================================= */
.spotlight-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 99999;
    display: none;
    overflow: hidden;
    cursor: none; /* Fareyi gizle, yerine ışık geçecek */
}

.spotlight-overlay.active {
    display: block;
}

.spotlight-circle {
    position: absolute;
    top: 50%; left: 50%;
    width: 200px; height: 200px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    
    /* --- PERFORMANS YAMASI (Adım 3) --- */
    /* Eski Yöntem (Kasıyor): box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.95); */
    
    /* Yeni Yöntem (Hızlı): Outline kullanıyoruz */
    outline: 9999px solid rgba(0, 0, 0, 0.95);
    
    border: 2px solid rgba(255, 255, 255, 0.5);
    cursor: move;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 10px;
}

/* Işığın içindeki kontroller (Sadece üzerine gelince görünür) */
.spotlight-controls {
    display: flex;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.3s;
    background: rgba(0,0,0,0.5);
    padding: 5px 10px;
    border-radius: 20px;
}

.spotlight-circle:hover .spotlight-controls {
    opacity: 1;
}

.spotlight-controls button {
    background: #ef4444;
    border: none;
    color: #fff;
    width: 24px; height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
}

.spotlight-controls input[type=range] {
    width: 80px;
    height: 5px;
}

.spotlight-hint {
    position: absolute;
    bottom: 20px; left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    pointer-events: none;
}

/* =============================================
   ŞANSLI ÖĞRENCİ SEÇİCİ (SLOT MACHINE)
   ============================================= */

/* Arka Plan (Dimmer) */
.picker-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); /* Koyu arka plan */
    backdrop-filter: blur(8px);       /* Bulanıklık efekti */
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.picker-overlay.open {
    display: flex;
    opacity: 1;
}

/* Ana Kutu */
.picker-container {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    width: 500px;
    max-width: 95%;
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 0 50px rgba(124, 58, 237, 0.3), 
                0 0 0 2px rgba(255,255,255,0.1);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.picker-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px;
}

.picker-header h3 {
    color: #fff; margin: 0; font-size: 24px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.picker-close {
    background: rgba(255,255,255,0.1); border: none; color: #fff;
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    font-size: 18px; transition: all 0.2s;
}
.picker-close:hover { background: #ef4444; transform: rotate(90deg); }

/* Sınıf Seçici */
.picker-class-row { margin-bottom: 20px; }
.picker-class-row select {
    padding: 10px 20px; border-radius: 10px; border: none;
    background: #334155; color: #fff; font-size: 16px; width: 100%;
    cursor: pointer; outline: none;
}

/* Slot Penceresi */
.slot-machine-window {
    height: 150px; /* Görünür alan */
    background: #fff;
    border-radius: 12px;
    position: relative;
    overflow: hidden; /* Dışarı taşanları gizle */
    margin-bottom: 25px;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
    border: 4px solid #f59e0b;
}

.slot-strip {
    position: absolute;
    top: 0; left: 0; width: 100%;
    /* Animasyon JS ile yönetilecek */
}

.slot-item {
    height: 150px; /* Window ile aynı yükseklik */
    display: flex; align-items: center; justify-content: center;
    font-size: 40px; font-weight: 800; color: #1e293b;
    font-family: 'Arial Black', sans-serif;
    text-transform: uppercase;
}

/* Ortadaki Çizgi/Çerçeve (Vurgu) */
.slot-frame {
    position: absolute;
    top: 50%; left: 0; width: 100%; height: 60px;
    transform: translateY(-50%);
    background: rgba(245, 158, 11, 0.2);
    border-top: 2px solid rgba(245, 158, 11, 0.8);
    border-bottom: 2px solid rgba(245, 158, 11, 0.8);
    pointer-events: none;
}

/* Çevir Butonu */
.spin-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff; border: none;
    padding: 15px 50px; font-size: 20px; font-weight: 800;
    border-radius: 50px; cursor: pointer;
    box-shadow: 0 6px 0 #92400e, 0 10px 20px rgba(0,0,0,0.4);
    transition: all 0.1s;
    text-transform: uppercase; letter-spacing: 1px;
}

.spin-btn:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #92400e, 0 0 0 rgba(0,0,0,0);
}

.spin-btn:disabled {
    background: #64748b; color: #94a3b8;
    box-shadow: none; cursor: not-allowed; transform: none;
}

/* KAZANAN EKRANI (POP-UP) */
.winner-display {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.96); /* Daha koyu ve opak */
    display: none;
    flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 50;
    backdrop-filter: blur(5px);
}

.winner-display.show { display: flex; animation: fadeInWinner 0.5s ease-out; }

.winner-name {
    font-size: 64px; 
    font-weight: 900;
    color: #fbbf24; /* Altın Sarısı */
    text-align: center; 
    padding: 20px;
    margin-bottom: 30px;
    
    /* Neon Parlama Efekti */
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.8),
                 0 0 20px rgba(251, 191, 36, 0.6),
                 0 0 40px rgba(251, 191, 36, 0.4);
                 
    /* Kalp atışı gibi büyüme animasyonu */
    animation: winnerPulse 1.2s infinite ease-in-out;
}

@keyframes fadeInWinner {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes winnerPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); text-shadow: 0 0 50px rgba(251, 191, 36, 1); }
    100% { transform: scale(1); }
}

.winner-confetti {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1;
}

.winner-close {
    z-index: 10;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none; color: #fff;
    padding: 12px 40px; border-radius: 30px;
    font-size: 18px; font-weight: 700; cursor: pointer;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.5);
    transition: transform 0.2s;
}
.winner-close:hover { transform: scale(1.05); }

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes pulseName {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); text-shadow: 0 0 40px rgba(250, 204, 21, 1); }
}
/* =============================================
   YATAY ÇİZİM MENÜSÜ (FLOATING TOOLBAR)
   ============================================= */
.drawing-toolbar {
    position: relative; /* Absolute DEĞİL, yer kaplasın */
    top: auto; left: auto;
    transform: none; 
    margin: 0 0 20px 0; /* Alttaki Canvas ile arasına 20px mesafe */
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 8px 20px;
    display: inline-flex; /* İçeriği kadar genişlesin */
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.05);
    z-index: 800;
    transition: all 0.3s ease;
}

/* Araç Butonları */
.dt-btn {
    width: 40px; height: 40px;
    border: none; background: transparent;
    border-radius: 10px;
    color: #64748b; font-size: 18px;
    cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}

.dt-btn:hover { background: #f1f5f9; color: #334155; }
.dt-btn.active { background: #eff6ff; color: #3b82f6; box-shadow: inset 0 0 0 2px #bfdbfe; }

/* Ayırıcı Çizgi */
.dt-divider { width: 1px; height: 25px; background: #e2e8f0; }

/* Gruplar */
.dt-group { display: flex; align-items: center; gap: 8px; }

/* Renk Topları */
.dt-color {
    width: 24px; height: 24px; border-radius: 50%;
    cursor: pointer; border: 2px solid transparent;
    transition: transform 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.dt-color:hover { transform: scale(1.2); }
.dt-color.active { border-color: #fff; box-shadow: 0 0 0 2px #334155; transform: scale(1.1); }

/* Renk Seçici (Gizli input, ikon görünür) */
.dt-color-picker-wrap {
    position: relative; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; margin-left: 5px;
}
.dt-color-picker-wrap input {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer;
}
.dt-color-picker-wrap i { font-size: 18px; color: #64748b; }

/* Slider */
.dt-range {
    width: 80px; height: 4px; border-radius: 2px;
    background: #e2e8f0; outline: none; -webkit-appearance: none;
}
.dt-range::-webkit-slider-thumb {
    -webkit-appearance: none; width: 16px; height: 16px;
    background: #3b82f6; border-radius: 50%; cursor: pointer;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
}

/* =============================================
   METİN ARACI STİLLERİ
   ============================================= */
.dt-text-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dt-font-select, .dt-fontsize-select {
    height: 30px;
    padding: 0 8px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    font-size: 12px;
    color: #334155;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
}

.dt-font-select:hover, .dt-fontsize-select:hover {
    border-color: #3b82f6;
}

.dt-font-select:focus, .dt-fontsize-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.dt-font-select {
    width: 110px;
    font-family: inherit;
}

.dt-fontsize-select {
    width: 60px;
}

/* Font seçenekleri için özel font ailesi gösterimi */
.dt-font-select option[value="Arial"] { font-family: Arial, sans-serif; }
.dt-font-select option[value="Times New Roman"] { font-family: 'Times New Roman', serif; }
.dt-font-select option[value="Georgia"] { font-family: Georgia, serif; }
.dt-font-select option[value="Verdana"] { font-family: Verdana, sans-serif; }
.dt-font-select option[value="Comic Sans MS"] { font-family: 'Comic Sans MS', cursive; }
.dt-font-select option[value="Courier New"] { font-family: 'Courier New', monospace; }
.dt-font-select option[value="Impact"] { font-family: Impact, sans-serif; }
.dt-font-select option[value="Trebuchet MS"] { font-family: 'Trebuchet MS', sans-serif; }

/* Metin butonu aktif durumu */
.dt-btn#btn-text.active {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #fff;
}

.dt-btn#btn-book-text.active {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #fff;
}

/* Metin aracı seçiliyken dropdown'ları vurgula */
.text-tool-active .dt-font-select,
.text-tool-active .dt-fontsize-select {
    border-color: #8b5cf6;
    background: #faf5ff;
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .drawing-toolbar {
        top: auto; bottom: 80px; /* Mobilde aşağı al */
        width: 90%; overflow-x: auto;
        justify-content: space-between;
    }
    
    .dt-font-select {
        width: 80px;
        font-size: 11px;
    }
    
    .dt-fontsize-select {
        width: 50px;
        font-size: 11px;
    }
    
    .dt-text-group {
        gap: 4px;
    }
}




/* =============================================
   KİTAP MODU EK ARAÇLAR STİLLERİ
   (Damga, Yapışkan Not, Pointer, Ekran Görüntüsü)
   ============================================= */

/* Pointer/Lazer Modu */
.laser-cursor {
    cursor: crosshair !important;
}

.laser-path {
    pointer-events: none;
    opacity: 0.8;
}

/* Lazer butonu aktif */
.dt-btn#btn-book-laser.active {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    animation: laserPulse 1s infinite;
}

@keyframes laserPulse {
    0%, 100% { box-shadow: 0 0 5px rgba(239, 68, 68, 0.5); }
    50% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.8); }
}

/* Damga Seçici Panel */
.stamp-panel-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9500;
    display: none;
    align-items: center;
    justify-content: center;
}
.stamp-panel-overlay.open { display: flex; }

.stamp-panel {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.stamp-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

.stamp-panel-header h3 {
    margin: 0;
    font-size: 18px;
    color: #1e293b;
}

.stamp-panel-close {
    width: 32px; height: 32px;
    border: none; background: #f1f5f9;
    border-radius: 8px; cursor: pointer;
    font-size: 18px; color: #64748b;
}
.stamp-panel-close:hover { background: #e2e8f0; }

.stamp-category {
    margin-bottom: 15px;
}

.stamp-category-title {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.stamp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.stamp-item {
    aspect-ratio: 1;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    transition: all 0.2s;
}
.stamp-item:hover {
    border-color: #3b82f6;
    background: #eff6ff;
    transform: scale(1.05);
}
.stamp-item.text-stamp {
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    padding: 5px;
    line-height: 1.2;
}



/* Ekran Görüntüsü Panel */
.screenshot-panel-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9700;
    display: none;
    align-items: center;
    justify-content: center;
}
.screenshot-panel-overlay.open { display: flex; }

.screenshot-panel {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.screenshot-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.screenshot-panel-header h3 {
    margin: 0;
    font-size: 20px;
    color: #1e293b;
}

.screenshot-preview {
    width: 100%;
    max-height: 300px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    margin-bottom: 20px;
    object-fit: contain;
    background: #f8fafc;
}

.screenshot-actions {
    display: flex;
    gap: 10px;
}

.screenshot-actions button {
    flex: 1;
    padding: 12px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.screenshot-download-btn {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
}
.screenshot-download-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(59, 130, 246, 0.4); }

.screenshot-share-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
}
.screenshot-share-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 20px rgba(16, 185, 129, 0.4); }

.screenshot-close-btn {
    background: #f1f5f9;
    color: #64748b;
}
.screenshot-close-btn:hover { background: #e2e8f0; }

/* Ekran Görüntüsü Butonu (Kitap üst bar) */
.book-screenshot-btn {
    position: absolute;
    top: 10px;
    right: 80px;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    z-index: 8020;
}
.book-screenshot-btn:hover {
    background: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.5);
}

/* =============================================
   ZARİF BAŞLIK KARTI
   ============================================= */
.board-title-card {
    position: relative;
    width: calc(100% - 20px);
    margin: 10px;
    background: #fff;
    padding: 16px 20px;  /* Biraz büyüttüm */
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  /* Ortaladım */
    text-align: center;   /* Yazıları ortala */
    z-index: 55;
    flex-shrink: 0;
}

.board-title-card:hover {
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.editable-title {
    font-size: 20px;      /* 16px'ten 20px'e büyüttüm */
    font-weight: 700;
    color: #1e293b;
    width: 100%;
    border-bottom: 1px solid transparent;
    cursor: text;
    outline: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;   /* Ortala */
}

.editable-title:focus {
    border-bottom-color: #3b82f6;
}

.sub-info {
    font-size: 14px;      /* Biraz büyüttüm */
    color: #64748b;
    margin-top: 6px;
    text-align: center;
}

/* Mobilde Başlığı Gizle */
    @media (max-width: 991px) {
        .board-title-card { display: none; }
        
        /* Mobilde sidebar margin düzeltmesi */
        .board-sidebar {
            margin-top: 0 !important;
            height: 100vh !important;
        }
    }



/* =============================================
   ZAMAN ARAÇLARI - ANALOG SAAT, DİJİTAL SAAT, TAKVİM
   ============================================= */

/* Genel Overlay Stilleri */
.time-tool-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 100000;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.time-tool-overlay.open {
    display: flex;
}

/* =============================================
   ANALOG SAAT
   ============================================= */
.analog-clock-container {
    background: linear-gradient(145deg, #ffffff 0%, #f0f4f8 100%);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 100%;
}

.analog-clock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e2e8f0;
}

.analog-clock-header h3 {
    margin: 0;
    color: #1e293b;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.analog-clock-header h3 i {
    color: #3b82f6;
}

.analog-clock-close {
    background: #f1f5f9;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: #64748b;
    transition: all 0.2s;
}

.analog-clock-close:hover {
    background: #e2e8f0;
    color: #ef4444;
}

.analog-clock-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.clock-face-wrapper {
    position: relative;
    width: 300px;
    height: 300px;
}

.clock-face {
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #ffffff 0%, #e8ecf0 100%);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15),
                inset 0 2px 10px rgba(255, 255, 255, 0.8),
                inset 0 -2px 10px rgba(0, 0, 0, 0.05);
    border: 8px solid #e2e8f0;
}

.clock-face::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: linear-gradient(145deg, #1e293b 0%, #334155 100%);
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Saat Rakamları */
.clock-number {
    position: absolute;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
    user-select: none;
}

.clock-number-24 {
    position: absolute;
    font-size: 11px;
    font-weight: 600;
    color: #3b82f6;
    text-align: center;
    user-select: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.show-24h .clock-number-24 {
    opacity: 1;
}

/* Saat İşaretleri */
.clock-tick {
    position: absolute;
    background: #cbd5e1;
    left: 50%;
    top: 8px;
    transform-origin: center 142px;
}

.clock-tick.major {
    width: 3px;
    height: 15px;
    background: #64748b;
    margin-left: -1.5px;
}

.clock-tick.minor {
    width: 2px;
    height: 8px;
    margin-left: -1px;
}

/* Akrep ve Yelkovan */
.clock-hand {
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform-origin: bottom center;
    border-radius: 4px;
    cursor: grab;
    transition: filter 0.2s;
    z-index: 5;
}

.clock-hand:hover {
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(0,0,0,0.3));
}

.clock-hand:active {
    cursor: grabbing;
}

.clock-hand.hour {
    width: 8px;
    height: 70px;
    background: linear-gradient(180deg, #1e293b 0%, #475569 100%);
    margin-left: -4px;
    z-index: 6;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
    border-radius: 4px 4px 2px 2px;
}

.clock-hand.minute {
    width: 5px;
    height: 100px;
    background: linear-gradient(180deg, #3b82f6 0%, #60a5fa 100%);
    margin-left: -2.5px;
    z-index: 7;
    box-shadow: 2px 2px 8px rgba(59, 130, 246, 0.3);
    border-radius: 3px 3px 2px 2px;
}

/* Zaman Göstergesi */
.clock-time-display {
    background: linear-gradient(145deg, #1e293b 0%, #334155 100%);
    padding: 15px 30px;
    border-radius: 12px;
    text-align: center;
    min-width: 220px;
}

.clock-time-text {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
}

.clock-time-words {
    font-size: 13px;
    color: #94a3b8;
    margin-top: 5px;
}

/* Kontroller */
.clock-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    width: 100%;
}

.clock-control-btn {
    padding: 10px 16px;
    border: 2px solid #e2e8f0;
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.clock-control-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.clock-control-btn.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #fff;
}

/* Slider Kontrol */
.clock-slider-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #f8fafc;
    padding: 15px;
    border-radius: 12px;
}

.clock-slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.clock-slider-row label {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    min-width: 65px;
}

.clock-slider-row input[type="range"] {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: #e2e8f0;
    outline: none;
    -webkit-appearance: none;
}

.clock-slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #3b82f6;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
}

.clock-slider-row span {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    min-width: 35px;
    text-align: right;
}

/* =============================================
   DİJİTAL SAAT
   ============================================= */
.digital-clock-container {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
    max-width: 480px;
    width: 100%;
}

.digital-clock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.digital-clock-header h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.digital-clock-header h3 i {
    color: #22c55e;
}

.digital-clock-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #94a3b8;
    transition: all 0.2s;
}

.digital-clock-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.digital-clock-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

/* LED Ekran */
.digital-display {
    background: #000;
    padding: 25px 35px;
    border-radius: 12px;
    box-shadow: inset 0 4px 20px rgba(0, 0, 0, 0.5),
                0 0 30px rgba(34, 197, 94, 0.2);
    position: relative;
    overflow: hidden;
    width: 100%;
    text-align: center;
}

.digital-display::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
    pointer-events: none;
}

.digital-time {
    font-family: 'Courier New', monospace;
    font-size: 56px;
    font-weight: 700;
    color: var(--digital-color, #22c55e);
    text-shadow: 0 0 20px var(--digital-color, rgba(34, 197, 94, 0.8)),
                 0 0 40px var(--digital-color, rgba(34, 197, 94, 0.4));
    letter-spacing: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.digital-time .blink {
    animation: digitalBlink 1s infinite;
}

@keyframes digitalBlink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0.2; }
}

.digital-ampm {
    font-size: 20px;
    margin-left: 8px;
    opacity: 0.8;
}

.digital-date-display {
    font-size: 14px;
    color: var(--digital-color, #4ade80);
    opacity: 0.7;
    margin-top: 8px;
}

/* Renk Seçenekleri */
.digital-colors {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.digital-color-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.digital-color-btn:hover {
    transform: scale(1.15);
}

.digital-color-btn.active {
    border-color: #fff;
    box-shadow: 0 0 15px currentColor;
}

.digital-color-btn.green { background: #22c55e; }
.digital-color-btn.red { background: #ef4444; }
.digital-color-btn.blue { background: #3b82f6; }
.digital-color-btn.amber { background: #f59e0b; }
.digital-color-btn.cyan { background: #06b6d4; }
.digital-color-btn.pink { background: #ec4899; }

/* Format ve Seçenekler */
.digital-options {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.digital-option-btn {
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #94a3b8;
    transition: all 0.2s;
}

.digital-option-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.digital-option-btn.active {
    background: rgba(34, 197, 94, 0.2);
    border-color: var(--digital-color, #22c55e);
    color: var(--digital-color, #22c55e);
}

/* Slider Kontrolleri */
.digital-sliders {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: rgba(255,255,255,0.05);
    padding: 15px;
    border-radius: 12px;
}

.digital-slider-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.digital-slider-row label {
    font-size: 14px;
    color: #94a3b8;
    min-width: 60px;
}

.digital-slider-row input[type="range"] {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: #334155;
    outline: none;
    -webkit-appearance: none;
}

.digital-slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--digital-color, #22c55e);
    cursor: pointer;
}

.digital-slider-row span {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    min-width: 40px;
    text-align: right;
}

/* =============================================
   TAKVİM
   ============================================= */
.calendar-container {
    background: #fff;
    border-radius: 24px;
    padding: 25px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    max-width: 950px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e2e8f0;
}

.calendar-header h3 {
    margin: 0;
    color: #1e293b;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.calendar-header h3 i {
    color: #8b5cf6;
}

.calendar-close {
    background: #f1f5f9;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: #64748b;
    transition: all 0.2s;
}

.calendar-close:hover {
    background: #e2e8f0;
    color: #ef4444;
}

/* Yıl Navigasyonu */
.calendar-year-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.calendar-year-btn {
    background: #f1f5f9;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: #475569;
    transition: all 0.2s;
}

.calendar-year-btn:hover {
    background: #8b5cf6;
    color: #fff;
}

.calendar-year-display {
    font-size: 32px;
    font-weight: 700;
    color: #1e293b;
    min-width: 120px;
    text-align: center;
}

.calendar-today-btn {
    padding: 8px 16px;
    background: #8b5cf6;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.calendar-today-btn:hover {
    background: #7c3aed;
}

/* Ay Gridleri */
.calendar-months-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

@media (max-width: 850px) {
    .calendar-months-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 650px) {
    .calendar-months-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 450px) {
    .calendar-months-grid {
        grid-template-columns: 1fr;
    }
}

/* Tek Ay Kartı */
.calendar-month-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 10px;
    border: 2px solid #e2e8f0;
    transition: all 0.2s;
}

.calendar-month-card:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.calendar-month-card.current {
    background: linear-gradient(145deg, #ede9fe 0%, #ddd6fe 100%);
    border-color: #8b5cf6;
}

.calendar-month-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    text-align: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e2e8f0;
}

.calendar-month-card.current .calendar-month-title {
    color: #7c3aed;
    border-bottom-color: #c4b5fd;
}

/* Mini Takvim Grid */
.mini-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    font-size: 10px;
}

.mini-calendar-header {
    font-weight: 700;
    color: #64748b;
    text-align: center;
    padding: 3px 1px;
    font-size: 9px;
}

.mini-calendar-header.weekend {
    color: #ef4444;
}

.mini-calendar-day {
    text-align: center;
    padding: 4px 2px;
    border-radius: 4px;
    color: #475569;
    cursor: default;
    position: relative;
    font-weight: 500;
}

.mini-calendar-day.empty {
    color: transparent;
}

.mini-calendar-day.today {
    background: #3b82f6;
    color: #fff;
    font-weight: 700;
}

.mini-calendar-day.holiday {
    background: #fee2e2;
    color: #dc2626;
    font-weight: 700;
}

.mini-calendar-day.weekend {
    color: #ef4444;
}

.mini-calendar-day[title] {
    cursor: help;
}

/* Tatil Göstergesi */
.mini-calendar-day.holiday::after {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: #dc2626;
    border-radius: 50%;
}

/* Tatil Listesi */
.calendar-holidays {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 2px solid #e2e8f0;
}

.calendar-holidays h4 {
    font-size: 16px;
    color: #1e293b;
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.calendar-holidays h4 i {
    color: #ef4444;
}

.holiday-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.holiday-tag {
    background: #fef2f2;
    border: 1px solid #fecaca;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    color: #dc2626;
    display: flex;
    align-items: center;
    gap: 6px;
}

.holiday-tag .holiday-date {
    font-weight: 700;
}

/* =============================================
   SINIF ATMOSFER ARAÇLARI
   ============================================= */
.atmosphere-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 100001;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Atmosfer Popup'ını En Üste Taşı */
.atmosphere-overlay {
    /* DÜZELTME: Arka plandan ve butondan daha yüksek olmalı */
    z-index: 100000 !important; 
}

.atmosphere-overlay.open {
    display: flex;
}

.atmosphere-container {
    background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 24px;
    padding: 0;
    max-width: 500px;
    width: 100%;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    animation: atmosphereSlideIn 0.4s ease;
}

@keyframes atmosphereSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.atmosphere-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.atmosphere-header h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.atmosphere-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    transition: all 0.2s;
}

.atmosphere-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.atmosphere-body {
    padding: 25px;
}

/* Ses Kartları Grid */
.atmosphere-sounds {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 25px;
}

.atmosphere-sound-btn {
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.atmosphere-sound-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, currentColor 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}

.atmosphere-sound-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-3px);
}

.atmosphere-sound-btn.active {
    border-color: currentColor;
    box-shadow: 0 0 20px currentColor;
}

.atmosphere-sound-btn.active::before {
    opacity: 0.15;
}

.atmosphere-sound-btn .sound-icon {
    font-size: 28px;
    transition: transform 0.3s;
}

.atmosphere-sound-btn:hover .sound-icon {
    transform: scale(1.1);
}

.atmosphere-sound-btn.active .sound-icon {
    animation: soundPulse 2s ease-in-out infinite;
}

@keyframes soundPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

.atmosphere-sound-btn .sound-name {
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.atmosphere-sound-btn.active .sound-name {
    color: #fff;
}

/* Renk Temaları */
.atmosphere-sound-btn.rain { color: #60a5fa; }
.atmosphere-sound-btn.ocean { color: #22d3ee; }
.atmosphere-sound-btn.forest { color: #4ade80; }
.atmosphere-sound-btn.birds { color: #a3e635; }
.atmosphere-sound-btn.fire { color: #fb923c; }
.atmosphere-sound-btn.cafe { color: #a78bfa; }
.atmosphere-sound-btn.library { color: #f472b6; }
.atmosphere-sound-btn.piano { color: #fbbf24; }

/* Ses Seviyesi */
.atmosphere-volume {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 15px 20px;
    margin-bottom: 20px;
}

.atmosphere-volume-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.atmosphere-volume-header span {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 8px;
}

.atmosphere-volume-header i {
    font-size: 16px;
}

.atmosphere-volume-value {
    font-weight: 700;
    color: #fff;
}

.atmosphere-volume-slider {
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    -webkit-appearance: none;
    outline: none;
}

.atmosphere-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.5);
}

/* Zamanlayıcı */
.atmosphere-timer {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.atmosphere-timer-btn {
    flex: 1;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s;
}

.atmosphere-timer-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.atmosphere-timer-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: transparent;
    color: #fff;
}

.atmosphere-timer-display {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 20px;
    font-family: 'Courier New', monospace;
    display: none;
}

.atmosphere-timer-display.visible {
    display: block;
}

/* Kontrol Butonları */
.atmosphere-controls {
    display: flex;
    gap: 10px;
}

.atmosphere-control-btn {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.atmosphere-control-btn.play {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
}

.atmosphere-control-btn.play:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
}

.atmosphere-control-btn.stop {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.atmosphere-control-btn.stop:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Mobil Uyum */
@media (max-width: 500px) {
    .atmosphere-sounds {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .atmosphere-sound-btn .sound-icon {
        font-size: 24px;
    }
}

/* =============================================
   ŞEKİL TANIMA TOGGLE
   ============================================= */
.shape-recognition-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 8px;
    margin-top: 10px;
}

.shape-recognition-toggle label {
    font-size: 12px;
    color: #475569;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
}

.shape-recognition-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.shape-recognition-indicator {
    position: fixed;
    bottom: 100px;
    right: 20px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: #fff;
    padding: 10px 16px;
    border-radius: 25px;
    font-size: 12px;
    font-weight: 600;
    display: none;
    align-items: center;
    gap: 8px;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
    animation: indicatorPulse 2s ease-in-out infinite;
}

.shape-recognition-indicator.visible {
    display: flex;
}

@keyframes indicatorPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* =============================================
   YARDIM VE GÜNCELLEMELER POPUP'LARI
   ============================================= */

/* Genel Popup Stili */
.info-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 100001;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.info-popup-overlay.open {
    display: flex;
}

.info-popup-container {
    background: #fff;
    border-radius: 20px;
    max-width: 650px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    animation: popupSlideIn 0.3s ease;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.info-popup-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-popup-header.updates-header {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.info-popup-header h3 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.info-popup-header h3 i {
    font-size: 24px;
}

.info-popup-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: #fff;
    transition: all 0.2s;
}

.info-popup-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.info-popup-body {
    padding: 25px;
    overflow-y: auto;
    max-height: calc(85vh - 80px);
}

/* Yardım Akordionu */
.help-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.help-accordion-item {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s;
}

.help-accordion-item:hover {
    border-color: #c7d2fe;
}

.help-accordion-item.active {
    border-color: #818cf8;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.15);
}

.help-accordion-header {
    padding: 15px 20px;
    background: #f8fafc;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}

.help-accordion-item.active .help-accordion-header {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
}

.help-accordion-header:hover {
    background: #f1f5f9;
}

.help-accordion-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}

.help-accordion-title i {
    color: #6366f1;
    font-size: 16px;
    width: 24px;
    text-align: center;
}

.help-accordion-arrow {
    color: #94a3b8;
    transition: transform 0.3s;
}

.help-accordion-item.active .help-accordion-arrow {
    transform: rotate(180deg);
    color: #6366f1;
}

.help-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.help-accordion-item.active .help-accordion-content {
    max-height: 500px;
}

.help-accordion-text {
    padding: 15px 20px;
    font-size: 13px;
    line-height: 1.7;
    color: #475569;
    background: #fff;
    border-top: 1px solid #e2e8f0;
}

.help-accordion-text ul {
    margin: 10px 0;
    padding-left: 20px;
}

.help-accordion-text li {
    margin: 5px 0;
}

.help-accordion-text strong {
    color: #1e293b;
}

.help-accordion-text kbd {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid #e2e8f0;
}

/* Güncellemeler Popup */
.updates-version-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px;
}

.updates-version-badge i {
    font-size: 16px;
}

.updates-section {
    margin-bottom: 25px;
}

.updates-section-title {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
}

.updates-section-title i {
    color: #10b981;
}

.updates-section-title.coming-soon i {
    color: #f59e0b;
}

.updates-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.updates-list li {
    padding: 10px 15px;
    margin-bottom: 8px;
    background: #f8fafc;
    border-radius: 10px;
    font-size: 13px;
    color: #475569;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: all 0.2s;
    border-left: 3px solid #10b981;
}

.updates-list li:hover {
    background: #f1f5f9;
    transform: translateX(5px);
}

.updates-list li i {
    color: #10b981;
    margin-top: 2px;
}

.updates-list.coming-soon-list li {
    border-left-color: #f59e0b;
    background: #fffbeb;
}

.updates-list.coming-soon-list li i {
    color: #f59e0b;
}

.updates-list.coming-soon-list li:hover {
    background: #fef3c7;
}

/* Mobil Uyum */
@media (max-width: 600px) {
    .info-popup-container {
        max-height: 90vh;
        border-radius: 16px;
    }
    
    .info-popup-header {
        padding: 15px 20px;
    }
    
    .info-popup-header h3 {
        font-size: 16px;
    }
    
    .info-popup-body {
        padding: 15px;
    }
    
    .help-accordion-header {
        padding: 12px 15px;
    }
    
    .help-accordion-title {
        font-size: 13px;
    }
}

/* =============================================
   NOISE METER PRO (YENİ SESSİZLİK ÖLÇER)
   ============================================= */
.noise-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px); /* Arka planı flu yapar */
    -webkit-backdrop-filter: blur(12px);
    z-index: 100002; /* En üstte */
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.noise-overlay.open {
    display: flex;
    opacity: 1;
}

.noise-card {
    background: #fff;
    width: 380px;
    padding: 30px;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
    text-align: center;
    position: relative;
    animation: zoomInCard 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes zoomInCard {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.noise-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px;
}

.noise-close {
    width: 32px; height: 32px; border-radius: 50%;
    border: none; background: #f1f5f9; color: #64748b;
    cursor: pointer; transition: all 0.2s;
}
.noise-close:hover { background: #ef4444; color: white; }

/* SVG GAUGE (YARIM DAİRE) */
.noise-gauge-wrapper {
    position: relative;
    width: 260px;
    height: 140px; /* Yarım daire yüksekliği */
    margin: 0 auto 20px;
    overflow: hidden;
}

.noise-gauge-svg {
    width: 100%;
    height: 100%;
    transform: rotate(0deg); /* Başlangıç */
}

/* Arka plan yolu (Gri) */
.gauge-bg {
    fill: none;
    stroke: #f1f5f9;
    stroke-width: 30;
    stroke-linecap: round;
}

/* Dolum yolu (Renkli) */
.gauge-fill {
    fill: none;
    stroke: #6366f1; /* Başlangıç rengi */
    stroke-width: 30;
    stroke-linecap: round;
    stroke-dasharray: 408; /* Daire çevresi (yaklaşık) */
    stroke-dashoffset: 408; /* Başlangıçta boş */
    transition: stroke-dashoffset 0.1s linear, stroke 0.3s ease;
}

/* İğne/Gösterge Efekti */
.gauge-value-text {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: #94a3b8;
    font-weight: 600;
}

/* KONTROLLER */
.noise-slider-container {
    margin-bottom: 25px;
    padding: 0 10px;
}

.noise-slider-label {
    display: flex; justify-content: space-between;
    font-size: 12px; color: #64748b; margin-bottom: 8px; font-weight: 600;
}

input[type=range].noise-slider {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
}

input[type=range].noise-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px; height: 20px;
    background: #6366f1;
    border: 3px solid #fff;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.1s;
}
input[type=range].noise-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }

.noise-controls-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;
}

.noise-btn {
    width: 50px; height: 50px;
    border-radius: 50%;
    border: 2px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}

.noise-btn:hover { border-color: #6366f1; color: #6366f1; }
.noise-btn.active { background: #eff6ff; border-color: #6366f1; color: #6366f1; }

.violation-counter-pill {
    background: #f1f5f9;
    padding: 8px 20px;
    border-radius: 30px;
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; color: #475569;
    font-size: 18px;
    transition: all 0.2s;
}

.violation-counter-pill.alert {
    background: #fef2f2; color: #ef4444;
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* =============================================
   ÇARK İÇİN YENİ DÜZEN (YAN YANA SÜTUN)
   ============================================= */

/* Çark aracı için özel kapsayıcı */
.wheel-layout-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    height: 100%;       /* Yüksekliği fulle */
    min-height: 400px;  /* Çok küçülmesini engelle (basıklığı önler) */
    box-sizing: border-box;
    padding: 5px;
    overflow: hidden;   /* Taşmaları gizle */
}

/* Sol Sütun: Giriş Alanı */
.wheel-input-column {
    flex: 0 0 250px; /* Genişliği sabitledik (Giriş alanı dar olsun) */
    display: flex;
    flex-direction: column;
    height: 100%;
    min-width: 0;
    overflow-y: auto; /* Sadece burası kaydırılsın */
    padding-right: 5px;
}

/* Textarea yüksekliğini otomatik ayarla */
.cm-wheel-textarea {
    flex: 1; /* Aşağı kadar uzasın */
    width: 100%;
    resize: none;
    margin-bottom: 10px;
    font-size: 13px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px;
}

/* Sağ Sütun: Çark Görseli */
.wheel-display-column {
    flex: 1; /* Kalan TÜM alanı burası kaplasın (Genişlesin) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Dikeyde ortala */
    
    background: rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.03);
    
    padding: 10px;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Çarkın butonlarını düzenle */
.wheel-top-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr; /* İki sütunlu butonlar */
    gap: 8px;
}
.wheel-top-buttons button {
    width: 100%;
    font-size: 12px;
    padding: 8px;
}
/* Temizle butonu tam genişlik olsun */
.wheel-top-buttons button:last-child {
    grid-column: span 2;
    background: #ef4444; color: white;
}

/* MOBİL UYUM */
@media (max-width: 768px) {
    .wheel-layout-container {
        flex-direction: column-reverse;
        min-height: auto;
        overflow-y: auto;
    }
    .wheel-input-column {
        flex: none;
        width: 100%;
        height: auto;
        margin-top: 20px;
    }
    .cm-wheel-textarea {
        min-height: 120px;
    }
    .wheel-display-column {
        flex: none;
        width: 100%;
        height: 400px; /* Mobilde sabit yükseklik */
    }
}

/* =============================================
   GELİŞMİŞ ATMOSFER (WALLPAPER & SES)
   ============================================= */

/* Tam Ekran Arka Plan Katmanı */
#atmosphereBackground {
    position: fixed;
    top: 0; left: 0; 
    width: 100vw; /* %100 yerine vw/vh daha garantidir */
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* DÜZELTME: z-index 50'den 99980'e çıkarıldı.
       Böylece Header, Sidebar (z-index:1), Toolbar (z-index:800) 
       ve Navigasyon (z-index:900) hepsinin üstünde kalır. */
    z-index: 99980; 
    
    display: none;
    transition: opacity 0.5s ease;
    opacity: 0;
    pointer-events: none; /* Arkadaki tuşlara basılmasını engeller ama tıklandığında popup kapanmasın diye none kalsın */
}

#atmosphereBackground.active {
    display: block;
    opacity: 1;
    pointer-events: auto; /* Aktifken tıklamaları yakalasın (istenirse) */
}

/* Köşedeki Minik Kontrol Butonu */
.atmosphere-float-btn {
    position: fixed;
    bottom: 20px; left: 20px;
    width: 50px; height: 50px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    
    /* DÜZELTME: Arka plandan (99980) daha yüksek olmalı */
    z-index: 99990; 
    
    display: none;
    align-items: center; justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    animation: pulseFloat 2s infinite;
    transition: all 0.3s;
}

.atmosphere-float-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

@keyframes pulseFloat {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* Atmosfer aktifken tahta elemanlarını biraz saydamlaştır (Opsiyonel) */
.atmosphere-active-mode .board-sidebar,
.atmosphere-active-mode .drawing-toolbar {
    opacity: 0.8;
}
.atmosphere-active-mode .board-sidebar:hover,
.atmosphere-active-mode .drawing-toolbar:hover {
    opacity: 1;
}


/* ============================================================
   ACİL DURUM: MOBİLDE (TELEFONDA) ARAÇ ÇUBUĞUNU GİZLE
   Tablette ve Masaüstünde görünmeye devam eder.
   ============================================================ */
@media (max-width: 767px) {
    .drawing-toolbar {
        display: none !important;
    }
}

/* =============================================
   YENİ YILDIZ KARTLARI TASARIMI
   ============================================= */

/* Grid Yapısı (Kartları yan yana dizer) */
.cm-stars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); /* Kartlar biraz daha kompakt olsun */
    gap: 10px;
    padding: 10px 5px;
    
    /* KAYDIRMA AYARLARI */
    max-height: 55vh !important;  /* Ekranın %55'inden fazla uzamasın */
    overflow-y: auto !important;  /* Dikey kaydırma çubuğu çıksın */
    overflow-x: hidden;           /* Yatay taşmayı engelle */
}

/* Şık Kaydırma Çubuğu (Webkit - Chrome/Safari) */
.cm-stars-grid::-webkit-scrollbar {
    width: 6px;
}
.cm-stars-grid::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
    border-radius: 3px;
}
.cm-stars-grid::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.4); /* Mavi tonlu çubuk */
    border-radius: 3px;
}
.cm-stars-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.7);
}

/* Kartın Kendisi */
.star-student-card {
    background: #fff;
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 2px solid #f1f5f9;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.star-student-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    border-color: #cbd5e1;
}

/* Sol Avatar (Baş Harf) */
.star-avatar {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(99, 102, 241, 0.3);
}

/* Orta Bilgi Alanı */
.star-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.star-student-name {
    font-weight: 700;
    color: #334155;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

/* Yıldız Rozeti */
.star-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #d97706;
    font-weight: 800;
    background: #fffbeb;
    padding: 2px 8px;
    border-radius: 6px;
    width: fit-content;
}

.star-count-badge i {
    color: #fbbf24;
    filter: drop-shadow(0 1px 2px rgba(251, 191, 36, 0.5));
    font-size: 16px;
}

/* Sağ Butonlar */
.star-actions {
    display: flex;
    gap: 8px;
}

.star-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.1s;
}

.star-btn:active {
    transform: scale(0.9);
}

.star-btn-minus {
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid #fecaca;
}
.star-btn-minus:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

.star-btn-plus {
    background: #dcfce7;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}
.star-btn-plus:hover {
    background: #d1fae5;
    border-color: #86efac;
}

/* SEVİYE (TIER) RENKLENDİRMELERİ */

/* Gold Tier (20+ Yıldız) */
.star-student-card.tier-gold {
    border-color: #fbbf24;
    background: linear-gradient(to right bottom, #fff, #fffbeb);
}
.star-student-card.tier-gold .star-avatar {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}

/* Silver Tier (10-19 Yıldız) */
.star-student-card.tier-silver {
    border-color: #94a3b8;
    background: linear-gradient(to right bottom, #fff, #f8fafc);
}
.star-student-card.tier-silver .star-avatar {
    background: linear-gradient(135deg, #94a3b8, #64748b);
    box-shadow: 0 4px 10px rgba(148, 163, 184, 0.3);
}

/* Bronze Tier (0-9 Yıldız) */
.star-student-card.tier-bronze {
    border-color: #e2e8f0;
}

/* =============================================
   PANELİ ORTALAMA (YILDIZ EKRANI İÇİN)
   ============================================= */
.class-management-panel.center-mode {
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    
    /* Genişlik ayarı: Kartların rahat sığması için genişletiyoruz */
    width: 850px !important; 
    max-width: 95vw !important;
    max-height: 85vh !important;
    
    /* Biraz daha havalı gölge ve kenarlık */
    border-radius: 24px !important;
    box-shadow: 0 25px 80px rgba(0,0,0,0.35) !important;
    z-index: 100000 !important; /* En üstte olsun */
}

/* Mobilde çok genişlemesin */
@media (max-width: 768px) {
    .class-management-panel.center-mode {
        width: 95% !important;
        height: auto !important;
        max-height: 90vh !important;
    }
}

/* =============================================
   PANELİ ORTALAMA (GÜÇLENDİRİLMİŞ KOD)
   ============================================= */
   
/* ID kullanarak baskınlık kuruyoruz (#classManagementPanel) */
#classManagementPanel.center-mode {
    position: fixed !important;
    
    /* Ortalamak için koordinatları çiviliyoruz */
    top: 50% !important;
    left: 50% !important;
    
    /* Eski 'sağ' ve 'alt' hizalamaları İPTAL ediyoruz */
    right: auto !important;
    bottom: auto !important;
    
    /* Tam merkeze oturtuyoruz */
    transform: translate(-50%, -50%) !important;
    
    /* Genişlik ve Görünüm Ayarları */
    width: 900px !important;
    max-width: 95vw !important;
    height: auto !important;
    max-height: 90vh !important;
    
    background: rgba(255, 255, 255, 0.98) !important; /* Biraz daha opak olsun */
    border-radius: 24px !important;
    box-shadow: 0 25px 80px rgba(0,0,0,0.4) !important;
    z-index: 100005 !important; /* Diğer her şeyin üstünde */
    
    display: flex !important;
    flex-direction: column !important;
}

/* İçerik alanının kaydırmasını düzeltelim */
#classManagementPanel.center-mode .ctp-body {
    max-height: calc(90vh - 70px) !important;
    overflow-y: auto !important;
    flex: 1;
}

/* Mobilde taşmayı önle */
@media (max-width: 768px) {
    #classManagementPanel.center-mode {
        width: 95% !important;
        height: 95vh !important;
        top: 50% !important;
        left: 50% !important;
    }
}
/* =============================================
   SINIF YÖNETİM PANELİNİ ORTALAMA MODU
   ============================================= */
#classManagementPanel.center-mode {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    
    width: 900px !important;      /* Geniş ekran */
    max-width: 95vw !important;
    max-height: 90vh !important;
    height: auto !important;
    
    z-index: 100005 !important;   /* En üstte */
    box-shadow: 0 25px 100px rgba(0,0,0,0.35) !important;
    border-radius: 20px !important;
}

/* Ortadayken içerik alanı kaydırma ayarı */
#classManagementPanel.center-mode .ctp-body {
    max-height: calc(90vh - 80px) !important;
    overflow-y: auto !important;
}

/* Mobilde ortalama ayarı */
@media (max-width: 768px) {
    #classManagementPanel.center-mode {
        width: 95% !important;
        height: 85vh !important;
    }
}
/* =============================================
   MODERN SINIF YÖNETİMİ (GÖMÜLÜ STİLLER)
   ============================================= */

/* 1. Modern Giriş Alanları (Input Group) */
.cm-modern-input-group {
    background: #f8fafc;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    margin-bottom: 12px;
}

.cm-modern-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cm-modern-row {
    display: flex;
    gap: 6px;
}

.cm-modern-input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 13px;
    transition: all 0.2s;
    width: 100%;
}
.cm-modern-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
    outline: none;
}

.cm-modern-btn {
    padding: 0 12px;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 36px;
}

.btn-save { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; }
.btn-save:hover { transform: translateY(-1px); box-shadow: 0 2px 5px rgba(16, 185, 129, 0.2); }

.btn-clear { background: #e2e8f0; color: #475569; }
.btn-clear:hover { background: #cbd5e1; }

/* 2. Öğrenci Listesi (Kart Görünümü) */
.cm-student-list-modern {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Kartlar arası boşluk arttı */
    max-height: 55vh; 
    overflow-y: auto;
    padding: 5px;
    padding-bottom: 80px !important; /* Alt kısım rahatlasın */
}

.student-item-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    padding: 14px 18px; /* İç boşluklar büyütüldü */
    border-radius: 14px; /* Köşeler yumuşatıldı */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 3px 6px rgba(0,0,0,0.03); /* Hafif gölge eklendi */
}

.student-item-card:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    transform: translateY(-2px); /* Üzerine gelince hafif kalksın */
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

.student-info {
    display: flex;
    align-items: center;
    gap: 15px; /* Numara ve İsim arası açıldı */
}

/* Sıra Numarası Yuvarlağı - Büyütüldü */
.student-number {
    width: 36px;  /* Eskisi 22px idi */
    height: 36px;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #4f46e5;
    font-size: 16px; /* Yazı büyüdü */
    font-weight: 800;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(79, 70, 229, 0.2);
    flex-shrink: 0;
}

.student-name {
    font-weight: 700;
    color: #1e293b;
    font-size: 17px; /* Eskisi 13px idi */
    letter-spacing: 0.3px;
}

/* Sağdaki Buton Grubu */
.student-actions {
    display: flex;
    gap: 10px; /* Butonlar arası mesafe */
}

/* Düzenle / Sil Butonları - Parmak Dostu Boyut */
.action-icon-btn {
    width: 42px; /* Eskisi 26px idi */
    height: 42px;
    border-radius: 10px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    font-size: 18px; /* İkonlar büyüdü */
}

/* Buton Efektleri */
.btn-edit:hover { 
    background: #eff6ff; 
    color: #3b82f6; 
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2);
}

.btn-delete:hover { 
    background: #fef2f2; 
    color: #ef4444; 
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2);
}

/* 3. Takım Seçimi (Checkbox Listesi) */
.cm-member-selector {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 8px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.member-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.1s;
    font-size: 12px;
    color: #334155;
}

.member-checkbox-label:hover {
    background-color: #f1f5f9;
}

.member-checkbox-label.selected:hover {
    background-color: #2563eb !important; /* Daha koyu mavi */
}
.member-checkbox-label.selected {
    background-color: #3b82f6 !important; /* Canlı Mavi */
    color: #ffffff !important;           /* Beyaz Yazı */
    border-color: #2563eb !important;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(59, 130, 246, 0.3);
}

.member-checkbox-label input { accent-color: #2563eb; }

/* 4. Takım Kartları (Groups List) */
.cm-groups-scroll {
    max-height: 40vh;
    overflow-y: auto;
    padding-right: 4px;
}

.team-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #3b82f6; /* Mavi şerit */
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.team-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #e2e8f0;
}

.team-name { font-weight: 700; color: #1e293b; font-size: 13px; }
.team-count { font-size: 10px; background: #f1f5f9; padding: 2px 6px; border-radius: 4px; color: #64748b; }

.team-members {
    font-size: 11px;
    color: #64748b;
    line-height: 1.4;
}

/* Scrollbar Güzelleştirme */
.cm-student-list-modern::-webkit-scrollbar,
.cm-member-selector::-webkit-scrollbar,
.cm-groups-scroll::-webkit-scrollbar {
    width: 5px;
}
.cm-student-list-modern::-webkit-scrollbar-thumb,
.cm-member-selector::-webkit-scrollbar-thumb,
.cm-groups-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

/* =============================================
   LİSTE SONU GÖRÜNME SORUNU ÇÖZÜMÜ (PADDING)
   ============================================= */

/* Öğrenci listesi, Takım listesi ve Üye seçim listesi için ortak çözüm */
.cm-student-list-modern,
.cm-groups-scroll,
.cm-member-selector {
    /* Listenin en altına 80px boşluk bırak ki son eleman rahatça görünsün */
    padding-bottom: 80px !important; 
}

/* =============================================
   TAKIM EKLEME EKRANI DÜZELTMELERİ
   ============================================= */

/* 1. Liste Sonu Kaydırma Boşluğu */
.cm-groups-scroll {
    max-height: 35vh !important; /* Yükseklik sınırı */
    overflow-y: auto !important;
    overflow-x: hidden;
    padding: 5px;
    /* EN ÖNEMLİ KISIM: Altta boşluk bırak ki son kart kesilmesin */
    padding-bottom: 80px !important; 
    
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #f8fafc;
    margin-top: 10px;
}

/* 2. Hızlı Liste İçindeki Kartların Ayarı */
.cm-groups-scroll .team-card {
    margin-bottom: 8px; /* Kartlar arası boşluk */
    background: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

/* Bronz Seviye (0-9 Yıldız) İçin Renk Ayarı */
.star-student-card.tier-bronze {
    border-color: #cd7f32 !important; /* Çerçeve rengi */
    background: linear-gradient(to right bottom, #fff, #fff8f0) !important; /* Hafif turuncumsu arka plan */
}

.star-student-card.tier-bronze .star-avatar {
    /* Mavi yerine Bronz gradyan */
    background: linear-gradient(135deg, #cd7f32, #a05a2c) !important; 
    box-shadow: 0 4px 10px rgba(205, 127, 50, 0.3) !important;
}

.star-student-card.tier-bronze .star-count-badge {
    color: #8b4513 !important;
    background: #faeadd !important;
}

.star-student-card.tier-bronze .star-count-badge i {
    color: #cd7f32 !important;
}

/* --- SEÇENEK 2: OYUN & ENERJİ --- */

/* Kartlar daha yuvarlak ve kabarık */
.star-student-card {
    border-radius: 20px;
    border: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}
.star-student-card:hover {
    transform: translateY(-5px);
}

/* 1. Seviye (Mor - Başlangıç) */
.star-student-card.tier-bronze .star-avatar {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important; /* Canlı Mor */
    box-shadow: 0 5px 15px rgba(124, 58, 237, 0.3);
}
.star-student-card.tier-bronze .star-count-badge {
    background: #f3e8ff !important;
    color: #7c3aed !important;
}

/* 2. Seviye (Turkuaz - Gelişmiş) */
.star-student-card.tier-silver .star-avatar {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important; /* Turkuaz */
    box-shadow: 0 5px 15px rgba(8, 145, 178, 0.3);
}

/* 3. Seviye (Şampiyon - Kırmızı/Turuncu) */
.star-student-card.tier-gold {
    background: #fff7ed !important;
    border: 2px solid #fdba74 !important;
}
.star-student-card.tier-gold .star-avatar {
    background: linear-gradient(135deg, #f97316, #ea580c) !important; /* Parlak Turuncu */
    box-shadow: 0 5px 20px rgba(234, 88, 12, 0.4);
}
.star-student-card.tier-gold .star-student-name {
    color: #c2410c !important;
    font-weight: 800;
}

/* --- TOPLU İŞLEM BUTONLARI --- */
.bulk-actions-container {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
    padding: 10px;
    background: #f1f5f9;
    border-radius: 12px;
    border: 1px dashed #cbd5e1;
}

.bulk-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    color: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.bulk-btn:active {
    transform: translateY(2px);
    box-shadow: none;
}

/* Herkese Ver Butonu (Yeşil/Gold Karışımı) */
.bulk-add {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.bulk-add:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 6px 12px rgba(16, 185, 129, 0.3);
}

/* Herkese Al Butonu (Gri/Kırmızı Karışımı) */
.bulk-remove {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
}
.bulk-remove:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); /* Üzerine gelince kırmızı olsun */
    box-shadow: 0 6px 12px rgba(239, 68, 68, 0.3);
}

/* İkon boyutları */
.bulk-btn i {
    font-size: 16px;
}

/* ============================================================
   MERKEZİ Z-INDEX KATMAN YÖNETİMİ (KÖKTEN ÇÖZÜM)
   ============================================================ */

/* Header ve Sidebar'ı ezmesi için EN YÜKSEK DEĞER */
#atmosphereBackground.active, 
.atmosphere-overlay,
.atmosphere-float-btn {
    z-index: 2147483647 !important; 
}

/* Temel UI elemanları (Artık bu değerden daha düşük olsunlar ki Atmosfer onları örtsün) */
.board-sidebar, 
.drawing-toolbar,
.page-nav-container {
    z-index: 10000 !important; /* Düşük öncelik, aksi takdirde Atmosfer'in önünü keserler */
}

/* KATMAN 2: Büyük Araç Panelleri (Matematik, Sınıf Yönetimi vb.) */
.math-tools-panel,
.class-tools-panel, /* Sağ alttaki araçlar */
.template-panel-overlay,
#classManagementPanel { /* Normal mod */
    z-index: 1000 !important;
}

/* KATMAN 3: Ortaya Açılan Büyük Modallar (Center Mode) */
#classManagementPanel.center-mode,
.coding-game-overlay,
.shape-panel-overlay,
.icon-panel-overlay,
.timer-overlay,
.noise-overlay,
.atmosphere-overlay {
    z-index: 2000 !important; /* Diğer her şeyin üstünde */
}

/* KATMAN 4: Modal Üstü Modal (Sınıf Ekleme Küçük Penceresi, Uyarılar) */
/* Burası senin yaşadığın sorunu çözen yer. Büyük panel 2000 iken, bu 3000 olacak */
.class-modal-overlay, 
.alarm-popup-overlay,
.picker-overlay { 
    z-index: 3000 !important;
}

/* KATMAN 5: En Üst (Toast Bildirimler, Spot Işık, Tam Ekran Efektler) */
.template-toast, 
.shape-tooltip, 
.alarm-toast,
.spotlight-overlay,
.curtain-overlay,
.curtain-handle-bar,
.curtain-master-close {
    z-index: 9999 !important;
}

/* ============================================================
   SINIF YÖNETİMİ PANELİ - YAPI DÜZELTMESİ (GÜNCELLENMİŞ)
   ============================================================ */

/* Panelin varsayılan hali (Kapalıyken GÖRÜNMEZ olmalı) */
#classManagementPanel {
    display: none; /* Varsayılan olarak gizle */
    flex-direction: column !important;
    max-height: 85vh !important;
    overflow: hidden !important;
    background: #fff !important;
}

/* Sadece "open" sınıfı eklendiğinde görünür olsun */
#classManagementPanel.open {
    display: flex !important; /* Sadece açılınca Flex olsun */
}

/* 1. ÜST KISIMLAR (Sabit Kalacaklar) */
#classSelectorBar, 
.ctp-header {
    flex-shrink: 0 !important;
    z-index: 5 !important;
    position: relative;
    border-radius: 0 !important;
    margin: 0 !important;
}

/* Sınıf Seçici Barı */
#classSelectorBar {
    border-radius: 16px 16px 0 0 !important;
    padding: 10px 15px !important;
}

/* Başlık */
.ctp-header {
    border-radius: 0 !important;
}

/* 2. İÇERİK ALANI (Kayacak Kısım) */
.ctp-body {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 15px !important;
    min-height: 0 !important;
}

/* Gereksiz iç kaydırmaları iptal et */
.cm-students-scroll, 
.cm-groups-scroll, 
.cm-stars-grid,
.cm-success-scroll {
    max-height: none !important;
    overflow: visible !important;
    border: none !important;
    box-shadow: none !important;
    padding-bottom: 0 !important;
}

/* Mobil için */
@media (max-width: 768px) {
    #classManagementPanel.center-mode {
        height: 90vh !important;
    }
}

/* --- ŞAMPİYONLAR ARENASI VE KÜRSÜ TASARIMI (FİNAL - DÜZELTİLMİŞ) --- */

.champions-arena {
    padding: 15px;
    background: #f8fafc;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    margin-top: 15px;
}

/* KUTLAMA BUTONU ALANI */
.celebrate-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

/* KÜRSÜ (PODIUM) KAPLAYICI - Yükseklik sınırını kaldırdık */
.podium-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
    margin-bottom: 40px;
    padding-top: 40px; /* Avatar taşması için üst boşluk */
    min-height: 280px; /* İçerik sığsın */
}

/* TEKİL SÜTUN */
.podium-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 32%; /* Genişlik esnek olsun */
    max-width: 150px;
    min-width: 110px;
    position: relative;
    transition: transform 0.3s;
}

.podium-step:hover {
    transform: translateY(-10px);
    z-index: 50;
}

/* AVATAR - KUTUNUN ÜSTÜNE BİNDİRME */
.podium-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    
    /* Avatarı kutunun tepesine sabitle */
    position: absolute;
    bottom: 100%; /* Kutunun tam üstünde */
    margin-bottom: -30px; /* Yarısı içeride yarısı dışarıda */
    z-index: 20; 
}

/* KÜRSÜ KUTUSU (Gövde) */
.podium-box {
    width: 100%;
    border-radius: 16px 16px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 40px 5px 15px 5px; /* Üstten 40px boşluk (Avatar için) */
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    position: relative;
    text-align: center;
}

/* SIRALAMA NO (#1, #2...) */
.podium-rank {
    font-size: 36px;
    font-weight: 900;
    opacity: 0.3;
    line-height: 1;
    margin-bottom: 5px;
    margin-top: -5px;
}

/* İSİM ALANI */
.podium-name {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 8px;
    width: 100%;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    
    /* İsim uzunsa sığdır */
    word-wrap: break-word;
    overflow: visible; 
}

/* YILDIZ SAYISI */
.podium-stars {
    background: rgba(0,0,0,0.25);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(255,255,255,0.3);
    margin-top: auto; /* En alta it */
}

/* --- KÜRSÜ YÜKSEKLİKLERİ (ARTIRILDI) --- */

/* 1. SIRA (ALTIN) */
.rank-1 .podium-box { 
    height: 230px; 
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); 
}
.rank-1 .podium-avatar { 
    background: linear-gradient(135deg, #fbbf24, #b45309); 
    border-color: #fffbeb; 
    width: 70px; height: 70px; font-size: 28px;
    margin-bottom: -35px;
}
.rank-1 { z-index: 3; }

/* 2. SIRA (GÜMÜŞ) */
.rank-2 .podium-box { 
    height: 190px; 
    background: linear-gradient(135deg, #64748b 0%, #334155 100%); 
}
.rank-2 .podium-avatar { 
    background: linear-gradient(135deg, #94a3b8, #475569); 
    border-color: #f8fafc; 
}
.rank-2 { z-index: 2; }

/* 3. SIRA (BRONZ - SORUN ÇÖZÜLDÜ) */
.rank-3 .podium-box { 
    height: 160px; /* Yükseltildi, isim sığacak */
    background: linear-gradient(135deg, #d97706 0%, #92400e 100%); 
}
.rank-3 .podium-avatar { 
    background: linear-gradient(135deg, #d97706, #78350f); 
    border-color: #fff7ed; 
}
.rank-3 { z-index: 1; }

/* BELGE BUTONU */
.podium-actions { margin-top: 10px; }
.btn-certificate {
    background: #fff; color: #d97706; border: none;
    padding: 6px 12px; border-radius: 20px; font-size: 11px;
    font-weight: 800; cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    display: inline-flex; align-items: center; gap: 4px;
}
.btn-certificate:hover { transform: scale(1.05); background: #fff7ed; }

/* LİSTE GÖRÜNÜMÜ */
.leaderboard-list {
    display: flex; flex-direction: column; gap: 8px;
    max-height: 250px; overflow-y: auto; padding: 5px;
    background: #fff; border-radius: 12px; border: 1px solid #e2e8f0;
}
.leader-item {
    display: flex; align-items: center; padding: 10px 15px;
    border-bottom: 1px solid #f1f5f9;
}
.leader-item:last-child { border-bottom: none; }
.leader-rank { width: 30px; font-weight: 800; color: #94a3b8; font-style: italic; }
.leader-avatar { 
    width: 32px; height: 32px; border-radius: 8px; background: #eff6ff; 
    color: #3b82f6; display: flex; align-items: center; justify-content: center; 
    font-weight: 800; margin-right: 12px; 
}
.leader-info { flex: 1; font-weight: 700; color: #334155; }
.leader-stars { font-weight: 800; color: #f59e0b; display: flex; gap: 5px; align-items: center; }

/* Animasyonlar */
.anim-pop-in { animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; opacity: 0; transform: scale(0.5) translateY(50px); }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
@keyframes popIn { to { opacity: 1; transform: scale(1) translateY(0); } }

/* ========== E-OKUL TOPLU AKTARIM STİLLERİ ========== */
.bulk-import-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.bulk-import-overlay.active {
    display: flex;
}

.bulk-import-modal {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 20px;
    width: 90%;
    max-width: 600px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
}

.bulk-import-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bulk-import-header h3 {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bulk-import-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}

.bulk-import-close:hover {
    background: rgba(255,255,255,0.3);
}

.bulk-import-body {
    padding: 20px;
    max-height: calc(85vh - 70px);
    overflow-y: auto;
}

.bulk-import-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    background: #f1f5f9;
    padding: 6px;
    border-radius: 12px;
}

.bulk-tab {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.bulk-tab:hover {
    color: #334155;
}

.bulk-tab.active {
    background: #fff;
    color: #667eea;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.bulk-tab-content {
    display: none;
}

.bulk-tab-content.active {
    display: block;
}

.bulk-info-box {
    background: linear-gradient(135deg, #dbeafe 0%, #e0e7ff 100%);
    border: 1px solid #93c5fd;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    color: #1e40af;
}

.bulk-info-box i {
    font-size: 18px;
    margin-top: 2px;
}

.bulk-upload-area {
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    padding: 40px 20px;
    text-align: center;
    background: #f8fafc;
    transition: all 0.3s;
    cursor: pointer;
}

.bulk-upload-area:hover,
.bulk-upload-area.drag-over {
    border-color: #667eea;
    background: #f0f4ff;
}

.bulk-upload-area .upload-icon {
    font-size: 48px;
    color: #94a3b8;
    margin-bottom: 16px;
}

.bulk-upload-area:hover .upload-icon {
    color: #667eea;
}

.bulk-upload-area p {
    color: #475569;
    font-size: 14px;
    margin: 0 0 8px 0;
}

.bulk-upload-area > span {
    color: #94a3b8;
    font-size: 12px;
}

.bulk-upload-area button {
    margin-top: 16px;
    padding: 10px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.bulk-upload-area button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.bulk-processing {
    text-align: center;
    padding: 30px;
    color: #64748b;
}

.bulk-processing-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e2e8f0;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: bulkSpinAnim 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes bulkSpinAnim {
    to { transform: rotate(360deg); }
}

.bulk-textarea {
    width: 100%;
    min-height: 180px;
    padding: 14px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 13px;
    font-family: 'Consolas', 'Monaco', monospace;
    resize: vertical;
    transition: border-color 0.2s;
    background: #fff;
    box-sizing: border-box;
}

.bulk-textarea:focus {
    outline: none;
    border-color: #667eea;
}

.bulk-textarea::placeholder {
    color: #94a3b8;
}

.bulk-parse-btn {
    margin-top: 12px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.bulk-parse-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.bulk-preview-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #e2e8f0;
}

.bulk-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 10px;
}

.bulk-preview-header h4 {
    font-size: 14px;
    color: #334155;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bulk-preview-header h4 span {
    background: #667eea;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}

.bulk-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #64748b;
    cursor: pointer;
}

.bulk-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: #667eea;
}

.bulk-preview-list {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    max-height: 200px;
    overflow-y: auto;
    padding: 8px;
}

.bulk-preview-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #fff;
    border-radius: 8px;
    margin-bottom: 4px;
    font-size: 13px;
    color: #334155;
}

.bulk-preview-item:last-child {
    margin-bottom: 0;
}

.bulk-preview-item .bnum {
    background: #e0e7ff;
    color: #4f46e5;
    min-width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
}

.bulk-preview-item .bname {
    flex: 1;
}

.bulk-preview-item .bremove {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    padding: 4px;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.bulk-preview-item .bremove:hover {
    opacity: 1;
}

.bulk-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.bulk-btn-cancel,
.bulk-btn-import {
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.bulk-btn-cancel {
    background: #f1f5f9;
    color: #64748b;
}

.bulk-btn-cancel:hover {
    background: #e2e8f0;
}

.bulk-btn-import {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.bulk-btn-import:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.bulk-import-trigger {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.bulk-import-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
}

@media (max-width: 600px) {
    .bulk-import-modal {
        width: 95%;
        max-height: 90vh;
        border-radius: 16px;
    }
    .bulk-import-tabs {
        flex-direction: column;
    }
    .bulk-preview-header {
        flex-direction: column;
        align-items: flex-start;
    }
}
/* ========== KÜTÜPHANE MODAL ========== */
.library-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200000;
}

.library-overlay.active { display: flex; }

.library-modal {
    background: #fff;
    border-radius: 20px;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
}

.library-header {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.library-header h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.library-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
}

.library-close:hover { background: rgba(255,255,255,0.3); }

.library-body { padding: 0; }

.library-main-tabs {
    display: flex;
    padding: 16px 20px 0 20px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.library-main-tab {
    flex: 1;
    padding: 14px 20px;
    border: 2px solid #e2e8f0;
    border-bottom: none;
    background: #fff;
    border-radius: 12px 12px 0 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    text-align: center;
    margin: 0 4px;
}

.library-main-tab:hover { color: #3b82f6; background: #f0f7ff; }
.library-main-tab.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }

.library-sub-tabs {
    display: flex;
    padding: 16px 20px;
    gap: 8px;
    background: #fff;
    flex-wrap: wrap;
}

.library-sub-tab {
    padding: 8px 16px;
    border: 2px solid #e2e8f0;
    background: #fff;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
}

.library-sub-tab:hover { border-color: #3b82f6; color: #3b82f6; }
.library-sub-tab.active { background: #3b82f6; color: #fff; border-color: #3b82f6; }

.library-books-container {
    padding: 20px;
    max-height: calc(85vh - 220px);
    overflow-y: auto;
    background: #f8fafc;
}

.library-books-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
}

.library-book-card {
    background: #e8eef5;
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.library-book-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    background: #dbeafe;
}

.library-book-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 12px;
    background: rgba(59, 130, 246, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #3b82f6;
}

.library-book-name {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
    line-height: 1.3;
}

.library-coming-soon { text-align: center; padding: 60px 20px; }
.library-coming-soon-icon { font-size: 64px; color: #94a3b8; margin-bottom: 20px; }
.library-coming-soon h4 { font-size: 20px; color: #334155; margin: 0 0 12px 0; }
.library-coming-soon p { font-size: 14px; color: #64748b; margin: 0 0 24px 0; }

.library-request-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

/* ========== YÜKLEME EKRANI ========== */
.library-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.98);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200001;
    flex-direction: column;
}

.library-loading-overlay.active { display: flex; }

.library-loading-icon {
    font-size: 64px;
    color: #3b82f6;
    margin-bottom: 24px;
    animation: bookPulse 1.5s ease-in-out infinite;
}

@keyframes bookPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.library-loading-title { font-size: 24px; font-weight: 600; color: #1e293b; margin-bottom: 20px; }

.library-loading-progress {
    width: 300px;
    height: 8px;
    background: #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 12px;
}

.library-loading-bar {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa, #3b82f6);
    background-size: 200% 100%;
    border-radius: 10px;
    width: 0%;
    transition: width 0.3s;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.library-loading-percent { font-size: 16px; color: #64748b; margin-bottom: 8px; }
.library-loading-hint { font-size: 13px; color: #94a3b8; }

/* ========== KİTAP MODU CONTAINER ========== */
/* z-index: 8000 - popup'ların (9999, 100000) ALTINDA kalacak */
#bookModeContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;

    /* Sabit yükseklik yerine min-height + kendi scroll'u */
    min-height: 100vh;
    background: #1e293b;
    z-index: 8000;
    display: none;
    flex-direction: row;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Kitap ana alanı */
.book-main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* Kitap modunda drawing-toolbar */
#bookModeContainer .drawing-toolbar {
    position: relative;
    border-radius: 0;
    margin: 0;
}

/* Kitap Navigasyon Bar */
.book-nav-bar {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.book-nav-left { display: flex; align-items: center; gap: 1px; }

.book-title-display {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.book-title-display i { color: #60a5fa; }

.book-nav-center { display: flex; align-items: center; gap: 12px; }

.book-page-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.book-page-btn:hover:not(:disabled) { background: rgba(255,255,255,0.2); }
.book-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.book-page-display {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 15px;
}

/* SAYFA INPUT - BEYAZ ARKA PLAN + SİYAH YAZI */
.book-page-input {
    width: 70px;
    padding: 10px 12px;
    border: 2px solid #3b82f6;
    border-radius: 8px;
    background: #ffffff;
    color: #1e293b;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    -moz-appearance: textfield;
}

.book-page-input::-webkit-outer-spin-button,
.book-page-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.book-page-input:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3);
}

.book-page-total { color: #94a3b8; font-size: 16px; font-weight: 600; }

.book-nav-right { display: flex; align-items: center; gap: 10px; }

.book-zoom-btn {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.book-zoom-btn:hover { background: rgba(255,255,255,0.2); }

.book-zoom-display {
    color: #60a5fa;
    font-size: 14px;
    font-weight: 700;
    min-width: 55px;
    text-align: center;
    background: rgba(96, 165, 250, 0.15);
    padding: 8px 12px;
    border-radius: 6px;
}

.book-exit-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 20px;
    transition: all 0.2s;
}

.book-exit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

/* PDF Görüntüleme Alanı */
.book-pdf-wrapper {
    flex: 1;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    background: #334155;
}

.book-pdf-container {
    position: relative;
    background: #fff;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    border-radius: 4px;
}

#bookPdfCanvas { display: block; }

#bookDrawCanvas {
    position: absolute;
    top: 0;
    left: 0;
    cursor: crosshair;
}

/* Alt Bilgi */
.book-footer-bar {
    background: rgba(0,0,0,0.4);
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-shrink: 0;
}

.book-hint {
    color: #94a3b8;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.book-hint i { color: #60a5fa; }

/* Kütüphane Butonu */
.sidebar-library-btn {
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
    margin-top: 8px;
}

.sidebar-library-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

/* ============================================================
   KİTAP MODU DÜZELTMELERİ (Z-INDEX & GÖRÜNÜRLÜK)
   ============================================================ */

/* 1. POPUP'LARI EN ÜSTE TAŞI (Kitap Modunda da görünsün) */
.timer-overlay,
.noise-overlay,
.shape-panel-overlay,
.icon-panel-overlay,
.class-modal-overlay,
.picker-overlay,
.alarm-popup-overlay,
.template-panel-overlay,
.atmosphere-overlay,
.bulk-import-overlay,
#classManagementPanel.center-mode,
.math-tools-panel,
.class-tools-panel {
    z-index: 200005 !important; /* Kitap modunun (200000) üstüne çık */
}

/* 2. SAYFA GİRİŞ KUTUSU (INPUT) GÖRÜNÜRLÜĞÜ */
.book-page-input {
    background-color: #ffffff !important; /* Beyaz zemin */
    color: #1e293b !important;           /* Koyu lacivert yazı */
    border: 2px solid #3b82f6 !important;
    font-weight: 700 !important;
    font-size: 18px !important;
}

/* 3. KİTAP MODUNDA ÇİZİM ALANI (CANVAS) AYARLARI */
/* Fabric.js'in oluşturduğu üst canvas'ın tıklanabilir olması lazım */
#bookPdfContainer .upper-canvas {
    z-index: 10 !important; /* PDF'in üstünde olsun */
    cursor: crosshair !important;
}

/* Kitap Sayfası Yükleniyor İndikatörü */
.book-page-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50; /* PDF'in üstünde */
    background: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 12px;
    display: none; /* Varsayılan gizli */
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.book-page-loader.active {
    display: flex;
}

.book-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spinBook 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spinBook {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================================
   KİTAP MODU İÇİN FİNAL CSS DÜZELTMELERİ
   ============================================================ */

/* 1. ÇİZİM KATMANINI PDF'İN ÜSTÜNE ÇİVİLE (Çizim Sorununun Çözümü) */
#bookPdfContainer {
    position: relative !important; /* Çerçeve */
}

/* Fabric.js'in oluşturduğu kapsayıcıyı hedefliyoruz */
#bookPdfContainer .canvas-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 10 !important; /* PDF'in (canvas'ın) üstünde durmalı */
}

/* Tıklamaların çizim katmanına geçmesini garantiye al */
#bookPdfContainer .upper-canvas {
    cursor: crosshair !important;
}

/* 2. SAYFA NUMARASI GİRİŞ KUTUSU (Okunabilirlik) */
.book-page-input {
    background-color: #ffffff !important; /* Beyaz Zemin */
    color: #000000 !important;           /* Siyah Yazı */
    border: 2px solid #3b82f6 !important;
    font-weight: 800 !important;
    opacity: 1 !important;
}

/* ============================================================
   KESİN ÇÖZÜM: MENÜ ALTA, BUTON AŞAĞIYA, HEADER ÜSTE
   ============================================================ */

/* 1. HEADER (EN ÜST KATMAN) */
/* Sitenin menüsü her şeyin üstünde duracak */
header, 
.bd-header-area {
    position: relative !important;
    z-index: 2147483647 !important; /* Maksimum değer */
    background: #fff; /* Şeffaflığı önle */
}

/* 3. MAVİ AÇMA BUTONU (KONUM DÜZELTMESİ) */
.toggle-menu-btn {
    position: fixed !important;
    
    /* KRİTİK AYAR: Butonu Header'ın bittiği yerin altına itiyoruz */
    top: 160px !important; 
    left: 15px !important;
    
    /* Z-Index yüksek olsun ki tahtanın üstünde dursun */
    z-index: 2147483646 !important; 
    
    /* ÖNEMLİ: display satırını SİLDİK. 
       Böylece JavaScript "gizle" dediğinde gizlenebilecek. */
}

/* 4. MOBİL İÇİN ÖZEL AYAR */
@media (max-width: 991px) {
    /* Mobilde Header daha kısa olabilir, butonu ona göre ayarla */
    .toggle-menu-btn {
        top: 140px !important;
    }
    
    /* Mobilde menü açılınca mecbur Header'ın üstüne çıkmalı (yoksa görünmez) */
    .board-sidebar.open {
        z-index: 2147483647 !important;
    }
}

/* ============================================================
   MOBİL BUTON VE KİTAP MODU HEADER ÇÖZÜMÜ
   ============================================================ */

/* 1. MOBİLDE MENÜ BUTONUNU KURTARMA */
@media (max-width: 991px) {
    .toggle-menu-btn {
        /* Header'ın altında kalmaması için aşağı itiyoruz */
        top: 170px !important; 
        /* Her şeyin (Header dahil) üstünde görünsün */
        z-index: 2147483647 !important; 
    }
}

/* 2. KİTAP MODUNDA SİTE HEADER'INI KOMPLE YOK ETME */
/* JavaScript ile body'ye 'book-active' sınıfı ekleyince header uçacak */
body.book-active header,
body.book-active .bd-header-area,
body.book-active .bd-header-top {
    display: none !important;
}

/* ============================================================
   DÜZELTME 1: KÜTÜPHANE MODUNDA SOL MENÜ VE KİTAP YAN YANA
   Sol menü kitabın hemen yanında, birlikte scroll edilebilir
   ============================================================ */

/* Kitap modu ana container - tek doğru sürüm BU olsun */
#bookModeContainer.active {
    display: flex !important;
    flex-direction: row !important;

    padding-top: 0 !important;       /* header boşluğu almasın */
	  overflow-y: auto;
    overflow-x: hidden;
}

/* Kitap ana alanı - kalan tüm genişliği kaplar */
#bookModeContainer .book-main-area {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    position: relative !important;
}

/* Kitap PDF wrapper - bu alan scroll edilir */
/* Kitap PDF wrapper - scroll işini artık container yapıyor */
#bookModeContainer .book-pdf-wrapper {
    flex: 1 !important;
    overflow: visible !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;

    /* Soldaki boş şeridi inceltmek için sol padding'i sıfırladım */
    padding: 20px 20px 20px 0 !important;
    background: #334155 !important;
}

/* ============================================================
   DÜZELTME 2: KÜTÜPHANE MODUNDA TOGGLE BUTON GÖRÜNÜRLÜğü
   Menü kapatıldığında buton görünür olacak - kitap alanının sol üstünde
   ============================================================ */

/* Kitap modunda toggle buton - book-main-area içinde konumlanır */
#bookModeContainer .toggle-menu-btn,
body.book-active .toggle-menu-btn {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    z-index: 500 !important;
    display: none !important;
}

/* Toggle butonu book-main-area içine taşımak yerine fixed yapalım ama sadece book modunda */
body.book-active #floatingMenuBtn {
    position: fixed !important;
    top: 80px !important;
    left: 15px !important;
    z-index: 200010 !important;
    display: none !important;
}

/* ============================================================
   DÜZELTME 3: MOBİLDE AKILLI TAHTA BUTONU HEADER İÇİNDE
   Site hamburger yerine akıllı tahta butonu - header ile birlikte kayar
   ============================================================ */

/* Header içindeki akıllı tahta butonu (mobilde görünür) */
.header-board-toggle {
    display: none; /* Masaüstünde gizli */
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.header-board-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

@media (max-width: 991px) {
    /* Header içindeki akıllı tahta butonunu göster */
    .header-board-toggle {
        display: flex !important;
    }
    
    /* Site hamburger'ı gizle - akıllı tahta butonu onun yerine geçecek */
    .bd-header-hamburger .sidebar-toggle {
        display: none !important;
    }
    
    /* Eski floating toggle butonunu gizle - artık header içinde */
    #floatingMenuBtn {
        display: none !important;
    }
    
   /* Sidebar mobilde sağdan açılacak */
   /* Sidebar mobilde sağdan açılacak */
    .board-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        bottom: 0 !important;
        
        width: 300px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        margin: 0 !important;
        
        /* Başlangıçta ekranın sağında gizli */
        transform: translateX(100%) !important;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        
        /* Header ile aynı seviyede */
        z-index: 2147483647 !important;
        
        border-radius: 16px 0 0 16px !important;
        border-right: none !important;
        border-left: 1px solid rgba(255, 255, 255, 0.5) !important;
        box-shadow: -5px 0 25px rgba(0, 0, 0, 0.2) !important;

        /* --- YENİ EKLENEN KISIM: KAYDIRMA SIZMASINI ENGELLEME --- */
        overflow-y: auto !important;          /* İçeriğin kaymasına izin ver */
        overscroll-behavior: contain !important; /* Kaydırma bitince arkaya geçme! */
        -webkit-overflow-scrolling: touch !important; /* iOS için yumuşak kaydırma */
        touch-action: pan-y !important;       /* Sadece dikey kaydırmaya odaklan */
    }
    
    /* Sidebar açıkken */
    .board-sidebar.open {
        transform: translateX(0) !important;
    }
    
    /* Sidebar kapalıyken */
    .board-sidebar.closed {
        transform: translateX(100%) !important;
        margin-left: 0 !important;
    }
    
    /* Sidebar header - kapat butonu sağda */
    .board-sidebar-header {
        flex-direction: row-reverse;
    }
    
    .board-sidebar-header .btn {
        margin-right: auto;
    }
    
    .board-sidebar-header .btn i {
        transform: rotate(180deg);
    }
}

/* Mobil overlay - sidebar açıkken arka plan karartma */
.mobile-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* Tablet için ek düzeltmeler */
@media (max-width: 767px) {
    .header-board-toggle {
        width: 36px !important;
        height: 36px !important;
        font-size: 16px !important;
    }
    
    .board-sidebar {
        width: 280px !important;
        max-width: 90vw !important;
    }
}

/* ============================================================
   KİTAP MODU DÜZELTME (FIXED LAYOUT)
   ============================================================ */

/* 1. ANA CONTAINER AYARLARI */
#bookModeContainer {
    display: none;
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #1e293b; z-index: 8000;
    flex-direction: row !important; /* Yan yana dizilim zorunlu */
    overflow: hidden !important;
}
#bookModeContainer.active { display: flex !important; }

/* 2. SOL DİKEY MENÜ */
.book-side-toolbar {
    width: 70px !important;
    min-width: 70px !important;
    height: 100vh;
    background: #0f172a;
    border-right: 1px solid rgba(255,255,255,0.1);
    display: flex; flex-direction: column; align-items: center;
    padding: 15px 0; gap: 8px;
    z-index: 8010; flex-shrink: 0;
}

/* İkon Butonları */
.bst-btn {
    width: 44px; height: 44px; border-radius: 12px;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: #94a3b8; font-size: 18px; cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.bst-btn:hover { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
.bst-btn.danger:hover { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.bst-divider { width: 30px; height: 1px; background: rgba(255,255,255,0.1); margin: 5px 0; }

/* 3. SAĞ ANA ALAN */
.book-main-area {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0; background: #334155;
    position: relative;
}

/* 4. ÜST NAVİGASYON (Hizalama Düzeltmesi) */
.book-nav-bar {
    height: 60px !important;
    background: #0f172a;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important;
    padding: 0 20px; flex-shrink: 0;
}

.book-nav-left, .book-nav-right { display: flex; align-items: center; gap: 10px; color: #fff; }

/* O DEVASA INPUT KUTUSUNU DÜZELTEN KOD */
.book-page-input-fixed {
    width: 60px !important;
    height: 34px !important;
    padding: 0 !important;
    text-align: center !important;
    border: 2px solid #3b82f6 !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #000 !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    margin: 0 5px !important;
    display: inline-block !important;
}

/* 5. YATAY ÇİZİM BARI (ORTADA) */
.book-horizontal-toolbar {
    height: 46px; background: #fff; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    gap: 10px; padding: 0 15px; margin: 0 15px;
}
.dt-btn {
    width: 34px; height: 34px; border: none; background: transparent;
    color: #64748b; font-size: 16px; cursor: pointer; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
}
.dt-btn.active { background: #eff6ff; color: #3b82f6; }
.dt-color { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid #ddd; }
.dt-range { width: 80px; }

/* 6. PDF ALANI */
.book-pdf-wrapper { 
    flex: 1 !important; 
    overflow: auto !important; 
    display: flex; justify-content: center; padding: 30px; 
}
.book-pdf-container { position: relative; box-shadow: 0 0 30px rgba(0,0,0,0.5); }

/* ============================================================
   KİTAP MODU FİNAL DÜZELTMELER (SCROLL & LAYOUT & TOOLTIP)
   ============================================================ */

#bookModeContainer {
    display: none;
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: #1e293b; z-index: 8000;
    flex-direction: row !important; /* Yan Yana */
    overflow: hidden !important; /* Dış scroll yok */
}
#bookModeContainer.active { display: flex !important; }

/* --- 1. SOL DİKEY TOOLBAR & TOOLTIPS --- */
.book-side-toolbar {
    width: 70px !important;
    height: 100vh;
    background: #0f172a;
    border-right: 1px solid rgba(255,255,255,0.1);
    display: flex; flex-direction: column; align-items: center;
    padding: 15px 0; gap: 8px;
    z-index: 8010; flex-shrink: 0;
    overflow: visible !important; /* Tooltip taşabilsin diye */
}

.bst-btn {
    width: 44px; height: 44px; border-radius: 12px; position: relative;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    color: #94a3b8; font-size: 18px; cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.bst-btn:hover { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border-color: rgba(59, 130, 246, 0.4); }
.bst-btn.danger:hover { background: rgba(239, 68, 68, 0.2); color: #ef4444; border-color: #ef4444; }

/* TOOLTIP BALONCUKLARI */
.bst-tooltip {
    position: absolute;
    left: 55px; /* Butonun sağında */
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
    background: #334155; color: #fff;
    padding: 6px 12px; border-radius: 6px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: all 0.2s ease;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
    z-index: 9000;
}
/* Ok işareti */
.bst-tooltip::before {
    content: ''; position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
    border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-right: 4px solid #334155;
}
/* Hover olunca göster */
.bst-btn:hover .bst-tooltip {
    opacity: 1; visibility: visible;
    transform: translateY(-50%) translateX(0);
}

.bst-divider { width: 30px; height: 1px; background: rgba(255,255,255,0.1); margin: 5px 0; flex-shrink: 0; }

/* --- 2. SAĞ ANA ALAN (YAPI) --- */
.book-main-area {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    min-width: 0; background: #334155;
}

/* --- 3. ÜST NAVİGASYON --- */
.book-nav-bar {
    height: 60px; background: #0f172a;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px; flex-shrink: 0;
}

.book-nav-left { font-size: 16px; font-weight: 600; color: #fff; }

.book-nav-center { display: flex; align-items: center; gap: 10px; }
.book-page-info { color: #fff; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.book-page-input-fixed {
    width: 50px !important; height: 30px !important;
    border: 2px solid #3b82f6 !important; border-radius: 6px !important;
    background: #fff !important; color: #000 !important;
    text-align: center; font-weight: 700;
}

.book-nav-right { display: flex; align-items: center; gap: 10px; color: #fff; }
.book-divider-vertical { width: 1px; height: 20px; background: rgba(255,255,255,0.2); }

.book-exit-top-btn {
    width: 32px; height: 32px; border-radius: 6px; border: none;
    background: #ef4444; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.book-exit-top-btn:hover { background: #dc2626; }

.book-bookmark-jump-btn {
    background: rgba(245, 158, 11, 0.2); color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
}
.book-bookmark-jump-btn:hover { background: rgba(245, 158, 11, 0.3); }

/* --- 4. YATAY TOOLBAR (NAVİGASYON ALTINDA) --- */
.book-horizontal-toolbar {
    height: 50px; background: #fff;
    border-bottom: 1px solid #cbd5e1;
    display: flex; align-items: center; justify-content: center;
    gap: 12px; flex-shrink: 0; /* Küçülmesin */
    z-index: 100;
}
.dt-btn {
    width: 34px; height: 34px; border-radius: 6px; border: none; background: transparent;
    color: #64748b; font-size: 16px; cursor: pointer; display:flex; align-items:center; justify-content:center;
}
.dt-btn:hover { background: #f1f5f9; }
.dt-btn.active { background: #eff6ff; color: #3b82f6; }
.dt-color { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; box-shadow: 0 0 2px rgba(0,0,0,0.3); }
.dt-color:hover { transform: scale(1.2); }
.dt-color-picker-wrap { width: 24px; height: 24px; overflow: hidden; position: relative; cursor: pointer; }
.dt-color-picker-wrap input { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; cursor: pointer; }

/* --- 5. PDF WRAPPER (KAYDIRMA DÜZELTMESİ) --- */
.book-pdf-wrapper { 
    flex: 1 !important; 
    /* Scroll'un çalışması için auto şart */
    overflow: auto !important; 
    background: #334155;
    
    /* İçerik ortalansın ama taşarsa sola yaslansın (Scroll için kritik) */
    display: flex; 
    align-items: flex-start; /* Üstten başlasın */
    justify-content: center; /* Ortada dursun */
    
    padding: 40px; /* Kenarlardan biraz boşluk */
    position: relative;
    z-index: 1;
}

/* Container'ın boyutu PDF'e göre JS ile değişecek */
.book-pdf-container { 
    position: relative; 
    box-shadow: 0 0 50px rgba(0,0,0,0.5); 
    flex-shrink: 0; /* Asla büzüşmesin */
    margin: auto;   /* Scroll olunca ortalamayı korur */
}
/* KİTABI ÖZGÜRLEŞTİREN CSS */
.book-pdf-wrapper {
    /* 1. Kaydırma çubuklarını aktif et */
    overflow: auto !important; 
    
    /* 2. Flex yerine Block yap ki aşağı doğru uzayabilsin */
    display: block !important; 
    
    /* 3. Küçükken ortada dursun */
    text-align: center !important;
    
    /* 4. Tıklanabilir olduğunu hissettir */
    cursor: grab;
}

.book-pdf-container {
    /* Blok içinde ortalanması için */
    display: inline-block !important; 
    position: relative !important;
}

/* ============================================================
   KİTAP MODU KAYDIRMA VE ARAÇ ÇUBUĞU DÜZELTMESİ
   ============================================================ */

/* 1. KAPSAYICI (WRAPPER) - KAYDIRMA MOTORU */
#bookPdfWrapper {
    /* Kaydırma çubuklarını aktif et (olmazsa sayfa sıkışır) */
    overflow: auto !important; 
    
    /* Flex yerine Block yapıyoruz ki aşağı/yana taşabilsin */
    display: block !important; 
    
    /* İçeriği ortala */
    text-align: center !important;
    
    /* Yükseklik sınırı koy ki taşma algılansın */
    height: 100vh !important;
    padding-bottom: 100px !important; /* Alt kısımda pay bırak */
}

/* 2. İÇERİK KUTUSU (CONTAINER) */
.book-pdf-container {
    /* Blok içinde ortalanması için inline-block */
    display: inline-block !important; 
    position: relative !important;
    margin: 30px auto !important;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

/* 3. İMLEÇLER VE ETKİLEŞİM */
/* JS ile eklediğimiz 'grab-mode' sınıfı için */
.grab-mode {
    cursor: grab !important;
}
.grabbing {
    cursor: grabbing !important;
}

/* 4. YATAY TOOLBAR (KİTAP ÜSTÜ) AKTİFLİK RENGİ */
/* Buton aktif olduğunda mavi olsun */
.book-horizontal-toolbar .dt-btn.active {
    background-color: #eff6ff !important;
    color: #3b82f6 !important;
    box-shadow: inset 0 0 0 2px #bfdbfe !important;
}
/* ============================================================
   KİTAP MODU VE AKTİFLİK DÜZELTMESİ (KESİN KOD)
   ============================================================ */

/* 1. PDF ALANI KAYDIRMA (SCROLL) AYARI */
#bookModeContainer .book-pdf-wrapper {
    flex: 1 !important;
    /* Önceki 'visible' kodunu eziyoruz, kaydırma açılıyor */
    overflow: auto !important; 
    display: block !important; 
    text-align: center !important;
    padding-bottom: 100px !important;
    cursor: default;
    height: 100vh !important;
}

/* 2. KİTAP KUTUSU */
.book-pdf-container {
    display: inline-block !important; 
    position: relative !important;
    margin: 30px auto !important;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
}

/* 3. İMLEÇLER */
.grab-mode { cursor: grab !important; }
.grabbing { cursor: grabbing !important; }

/* 4. AKTİFLİK RENKLERİ (MAVİ) */
.tool-btn.active, 
.dt-btn.active {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    color: #3b82f6 !important;
    border-color: #3b82f6 !important;
    box-shadow: inset 0 0 0 1px #3b82f6 !important;
}
.tool-btn.active i, 
.dt-btn.active i {
    color: #3b82f6 !important;
}
/* Kitap Modu Çıkış Butonu (Yazılı) */
.book-exit-text-btn {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    border: none;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 15px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
}

.book-exit-text-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(239, 68, 68, 0.5);
    background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
}

.book-exit-text-btn i {
    font-size: 16px;
}


/* ============================================================
   MOBİL BİLGİLENDİRME BANNERI STİLLERİ (GÜNCELLENMİŞ - MAVİ)
   ============================================================ */

/* 1. Varsayılan Durum: GİZLİ (Bilgisayar ve Tablette görünmez) */
.mobile-warning-banner {
    display: none;
}

/* 2. Sadece Mobilde (Telefonda) Görünür Yap (Max 767px) */
@media (max-width: 767px) {
    .mobile-warning-banner {
        display: flex;
        align-items: center;
        gap: 15px;
        
        /* GÜNCELLENDİ: Sakin ve modern mavi tonları */
        background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
        color: #ffffff;
        
        margin: 15px 10px 10px 10px; /* Kenar boşlukları */
        padding: 16px 20px;
        border-radius: 12px;
        
        /* Maviye uygun yumuşak gölge */
        box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.15);
        
        position: relative;
        z-index: 40; /* Canvas'ın üstünde dursun */
        animation: slideInDown 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .mobile-warning-banner .banner-icon {
        font-size: 22px;
        /* İkon arka planı biraz daha belirgin */
        background: rgba(255, 255, 255, 0.2);
        min-width: 42px; /* Genişlik sabitlendi, büzüşmez */
        height: 42px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .mobile-warning-banner .banner-text {
        /* GÜNCELLENDİ: Yazı daha büyük ve okunaklı */
        font-size: 14px;
        line-height: 1.5;
        font-weight: 600; /* Daha kalın */
        letter-spacing: 0.3px; /* Harfler arası hafif mesafe */
        text-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Hafif gölge ile belirginlik */
    }
    
    .mobile-warning-banner .banner-text strong {
        font-weight: 800;
        color: #fff;
        text-decoration: underline;
        text-decoration-color: rgba(255,255,255,0.6);
        text-underline-offset: 3px;
    }

    /* Yumuşak giriş animasyonu */
    @keyframes slideInDown {
        from { opacity: 0; transform: translateY(-15px); }
        to { opacity: 1; transform: translateY(0); }
    }
}
/* ============================================================
   MOBİLDE SAYFALAMA MODÜLÜNÜ GİZLE
   ============================================================ */

@media (max-width: 991px) {
    .page-nav-container {
        display: none !important;
    }
}

/* ============================================================
   TÜM POPUP VE ARAÇLARI HEADER'IN ÜSTÜNE TAŞIMA
   (Mobilde üstte kalma sorununu çözer)
   ============================================================ */

/* Sistemdeki tüm modal, overlay ve panelleri listeliyoruz */
.timer-overlay,
.noise-overlay,
.shape-panel-overlay,
.icon-panel-overlay,
.class-modal-overlay,
.picker-overlay,
.alarm-popup-overlay,
.template-panel-overlay,
.atmosphere-overlay,
.bulk-import-overlay,
.class-management-panel,  /* Sınıf Yönetimi */
.math-tools-panel,        /* Matematik Araçları */
.class-tools-panel,       /* Sağ Alt Araçlar */
.coding-game-overlay,
.pathfinder-overlay,
.sudoku-overlay,
.game-select-overlay,     /* Oyun Seçim Menüleri */
.lettercatch-game-overlay,
.syllable-bubble-overlay,
.sentence-wheel-overlay,
.missing-letter-overlay,
.synonym-game-overlay,
.wordrain-game-overlay,
.addition-game-overlay,
.stamp-panel-overlay,
.sticky-note-panel,
.screenshot-panel-overlay,
.library-overlay,
.info-popup-overlay {
    /* Header ile aynı en yüksek değere çekiyoruz.
       HTML sıralamasında aşağıda oldukları için Header'ın üzerine çıkacaklar. */
    z-index: 2147483647 !important;
}

@media (max-width: 991px) {

    /* --- 1. KÜTÜPHANE VE DİĞER MODALLER (Standart Ayarlar - Dokunulmadı) --- */
    .library-modal { width: 95% !important; height: 95vh !important; max-height: 95vh !important; display: flex !important; flex-direction: column !important; }
    .library-body { flex: 1 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; }
    .library-books-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; padding-bottom: 50px !important; }
    .library-books-container { flex: 1 !important; max-height: none !important; }
    .library-book-card { padding: 10px !important; }
    .library-main-tabs, .library-sub-tabs { overflow-x: auto !important; white-space: nowrap !important; flex-wrap: nowrap !important; padding: 10px !important; }

    /* --- 2. KİTAP OKUMA MODU (FİNAL DÜZELTME) --- */

    /* Ana Taşıyıcı: Sadece aktifken görünür ve tüm ekranı kaplar */
    #bookModeContainer {
        flex-direction: column !important;
        overflow: hidden !important;
        width: 100vw !important;
        height: 100vh !important;
        background: #1e293b !important;
        position: fixed !important;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 99999 !important; /* Her şeyin üstünde */
    }

    /* GİZLENECEKLER (Sadece kitap modu içindeki gereksizler) */
    #bookModeContainer .book-side-toolbar, 
    #bookModeContainer .book-horizontal-toolbar, 
    #bookModeContainer .bst-divider, 
    #bookModeContainer #bookTitleText, 
    #bookModeContainer .book-nav-left,
    #bookModeContainer .book-zoom-btn, 
    #bookModeContainer #bookZoomDisplay, 
    #bookModeContainer .book-divider-vertical, 
    #bookModeContainer .book-bookmark-jump-btn {
        display: none !important;
    }

    /* KİTAP ALANI YAPISI */
    #bookModeContainer .book-main-area {
        display: flex !important;
        flex-direction: column !important; 
        width: 100% !important;
        height: 100% !important;
        background: #334155 !important;
        overflow: hidden !important;
        position: relative !important;
    }

    /* 1. ÜST BAR (Sabit Yükseklik) */
    #bookModeContainer .book-nav-bar {
        order: -1 !important;
        height: 60px !important;
        min-height: 60px !important;
        background: #0f172a !important;
        border-bottom: 1px solid rgba(255,255,255,0.1) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 10px !important;
        width: 100% !important;
        position: relative !important;
        flex-shrink: 0 !important;
    }

    /* 2. PDF ALANI (TAM ORTALAMA) */
    #bookModeContainer .book-pdf-wrapper {
        order: 2 !important;
        flex: 1 !important;
        height: calc(100vh - 60px) !important; /* Header hariç kalan alan */
        overflow: auto !important; /* Kaydırmaya izin ver */
        
        display: flex !important;
        /* YATAY ORTALAMA İÇİN KRİTİK KODLAR: */
        justify-content: center !important; 
        align-items: flex-start !important; /* Üstten başla */
        
        padding: 20px 0 !important; /* Üstten/Alttan biraz boşluk, yanlardan sıfır */
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* İÇERİK KUTUSU (Ortada Durması İçin) */
    #bookModeContainer .book-pdf-container {
        display: block !important;
        margin: 0 auto !important; /* Sağdan soldan otomatik boşluk */
        box-shadow: 0 0 20px rgba(0,0,0,0.5) !important;
        max-width: 98vw !important; /* Ekrandan taşmasını engelle */
    }

    /* ÜST BAR İÇERİĞİ (SAYFALAMA) */
    #bookModeContainer .book-nav-center {
        display: flex !important;
        flex: 1 !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
    }

    /* Ok Butonları */
    #bookModeContainer .book-page-btn {
        width: 44px !important;
        height: 44px !important;
        background: rgba(255,255,255,0.1) !important;
        border-radius: 8px !important;
        font-size: 20px !important;
        color: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    /* Sayfa Bilgisi */
    #bookModeContainer .book-page-info {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        color: #fff !important;
        font-weight: bold !important;
    }
    
    /* "Sayfa" yazısını gizle */
    #bookModeContainer .book-page-info > span:first-child { display: none !important; }
    
    /* Input (Beyaz Kutu) */
    #bookModeContainer .book-page-input-fixed {
        display: block !important;
        width: 60px !important;
        height: 40px !important;
        text-align: center !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        border: 2px solid #3b82f6 !important;
        background: #ffffff !important;
        color: #000000 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    /* "/ Toplam" yazısı */
    #bookModeContainer .book-page-info > span:last-child { 
        display: inline-block !important; 
        color: #94a3b8 !important; 
        font-size: 14px !important; 
        white-space: nowrap !important;
    }

    /* SAĞ TARAF: ÇIKIŞ BUTONU */
    #bookModeContainer .book-nav-right { 
        display: flex !important; 
        position: absolute !important; /* Sağ köşeye çivile */
        right: 10px !important;
    }
    
    #bookModeContainer .book-exit-text-btn {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 8px !important;
        background: #ef4444 !important;
        color: #fff !important;
        font-size: 0 !important; /* Yazıyı gizle */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #bookModeContainer .book-exit-text-btn i {
        font-size: 20px !important;
        margin: 0 !important;
    }
}
/* =============================================
   FOOTER RENGİ DÜZELTME (TEK RENK & RESMİ KORU)
   ============================================= */

/* 1. Ana kutunun ayarları */
section.bd-event-area.bg-warning {
    position: relative !important;
    z-index: 1 !important;
    
    /* Mevcut sarı arka plan rengini şeffaf yapıyoruz ki
       alttaki bizim eklediğimiz renk görünsün.
       AMA RESME DOKUNMUYORUZ. */
    background-color: transparent !important;
    
    /* Solukluğu kaldır */
    --bs-bg-opacity: 1 !important;
    opacity: 1 !important;
}

/* 2. Resmin ARKASINA tek renk gri-mavi katman ekliyoruz */
section.bd-event-area.bg-warning::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Bu katman en arkada dursun, resim önde kalsın */
    z-index: -1;
    
    /* İŞTE BURASI: Gradient YOK, sadece TEK RENK */
    background-color: #e2e8f0 !important;
    
    
}
/* ========== E-OKUL TOPLU AKTARIM STİLLERİ ========== */
.bulk-import-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(5px);
    display: none; justify-content: center; align-items: center; z-index: 20000;
}
.bulk-import-overlay.active { display: flex; }

.bulk-import-modal {
    background: #fff; border-radius: 20px; width: 90%; max-width: 650px;
    max-height: 85vh; overflow: hidden; box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
    display: flex; flex-direction: column;
}

.bulk-import-header {
    background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);
    padding: 18px 24px; display: flex; justify-content: space-between; align-items: center;
}
.bulk-import-header h3 { color: #fff; font-size: 18px; margin: 0; display: flex; gap: 10px; align-items: center; }
.bulk-import-close { background: rgba(255,255,255,0.2); border: none; color: #fff; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.bulk-import-close:hover { background: rgba(255,255,255,0.3); transform: rotate(90deg); }

.bulk-import-body { padding: 25px; overflow-y: auto; flex: 1; }

/* Sekmeler */
.bulk-import-tabs { display: flex; gap: 10px; margin-bottom: 20px; background: #f1f5f9; padding: 5px; border-radius: 12px; }
.bulk-tab {
    flex: 1; padding: 10px; border: none; background: transparent; border-radius: 8px;
    cursor: pointer; font-size: 13px; font-weight: 600; color: #64748b; transition: 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.bulk-tab:hover { background: rgba(255,255,255,0.5); }
.bulk-tab.active { background: #fff; color: #4f46e5; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.bulk-tab-content { display: none; animation: fadeIn 0.3s ease; }
.bulk-tab-content.active { display: block; }

/* Bilgi Kutusu */
.bulk-info-box {
    background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af;
    padding: 12px 15px; border-radius: 10px; margin-bottom: 20px;
    font-size: 13px; display: flex; gap: 10px; align-items: center;
}
.bulk-info-box i { font-size: 18px; }

/* Upload Alanı */
.bulk-upload-area {
    border: 2px dashed #cbd5e1; border-radius: 16px; padding: 40px; text-align: center;
    background: #f8fafc; transition: 0.3s; cursor: pointer;
}
.bulk-upload-area:hover, .bulk-upload-area.drag-over { border-color: #4f46e5; background: #eef2ff; }
.upload-icon { font-size: 50px; color: #94a3b8; margin-bottom: 15px; transition: 0.3s; }
.bulk-upload-area:hover .upload-icon { color: #4f46e5; transform: translateY(-5px); }
.bulk-upload-area button {
    margin-top: 15px; padding: 10px 25px; background: #4f46e5; color: #fff;
    border: none; border-radius: 8px; font-weight: 600; cursor: pointer;
}

/* Textarea & İşleme */
.bulk-textarea {
    width: 100%; min-height: 150px; padding: 15px; border: 2px solid #e2e8f0;
    border-radius: 12px; font-family: monospace; font-size: 13px; resize: vertical;
}
.bulk-textarea:focus { outline: none; border-color: #4f46e5; }
.bulk-parse-btn {
    width: 100%; padding: 12px; background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff; border: none; border-radius: 10px; font-weight: 700; margin-top: 15px;
    cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
    transition: 0.2s;
}
.bulk-parse-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3); }

/* Önizleme Listesi */
.bulk-preview-section { margin-top: 25px; padding-top: 20px; border-top: 2px dashed #e2e8f0; }
.bulk-preview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.bulk-preview-list {
    max-height: 250px; overflow-y: auto; background: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px;
}
.preview-item {
    display: flex; align-items: center; gap: 10px; background: #fff;
    padding: 8px 12px; border-radius: 8px; margin-bottom: 5px;
    border: 1px solid #e2e8f0; transition: 0.2s;
}
.preview-item:hover { border-color: #4f46e5; }
.preview-check { color: #10b981; font-size: 16px; }
.preview-name { flex: 1; font-weight: 600; color: #334155; }
.preview-remove { color: #ef4444; cursor: pointer; opacity: 0.5; transition: 0.2s; }
.preview-remove:hover { opacity: 1; transform: scale(1.1); }

/* Aksiyonlar */
.bulk-actions { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
.bulk-btn-cancel { background: #f1f5f9; color: #64748b; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.bulk-btn-import { background: #4f46e5; color: #fff; border: none; padding: 10px 25px; border-radius: 8px; cursor: pointer; font-weight: 600; }

/* Sınıf Yönetimi İçindeki Buton (Yeşil) */
.bulk-import-trigger {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff; border: none; padding: 6px 12px; border-radius: 8px;
    font-size: 11px; font-weight: 600; cursor: pointer; display: inline-flex; 
    align-items: center; gap: 6px; margin-left: 10px;
}
.bulk-import-trigger:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3); }

.bulk-processing { text-align: center; padding: 30px; color: #64748b; }
.bulk-processing-spinner {
    width: 40px; height: 40px; border: 4px solid #e2e8f0; border-top-color: #4f46e5;
    border-radius: 50%; margin: 0 auto 15px; animation: spin 1s linear infinite;
}

/* =============================================
   ÖĞRENCİ EKLEME ALANI - PRO TASARIM
   ============================================= */

/* Ana Kutu: Daha ferah ve gölgeli */
.cm-add-student-card {
    background: #ffffff;
    border: 2px solid #e0e7ff; /* Açık indigo kenarlık */
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); /* Yumuşak derinlik */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Üst Satır: Başlık ve E-Okul Butonu */
.cm-add-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px dashed #f1f5f9;
    padding-bottom: 12px;
}

/* Başlık: Daha belirgin */
.cm-add-title {
    font-size: 14px;
    font-weight: 800;
    color: #4f46e5; /* İndigo Mavisi */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cm-add-title i {
    font-size: 18px;
    color: #f59e0b; /* Altın sarısı ikon */
}

/* E-Okul Butonu: BÜYÜK ve PARLAK */
.btn-bulk-import-large {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
    border: none;
    padding: 10px 20px; /* İri buton */
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-bulk-import-large:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.5);
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}
.btn-bulk-import-large i { font-size: 16px; }

/* Alt Satır: Input ve Kaydet Butonları */
.cm-add-input-row {
    display: flex;
    gap: 10px;
}

/* İsim Girilen Input: Renkli ve Belirgin */
.cm-input-large {
    flex: 1;
    height: 48px; /* Daha yüksek */
    padding: 0 15px;
    border: 2px solid #818cf8; /* Mor/Mavi Kenarlık */
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    background-color: #f5f3ff; /* Çok hafif mor zemin */
    transition: all 0.2s;
}
.cm-input-large:focus {
    outline: none;
    border-color: #4f46e5; /* Odaklanınca koyulaşsın */
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15); /* Glow efekti */
}
.cm-input-large::placeholder {
    color: #94a3b8;
    font-weight: 500;
}

/* Kaydet Butonu */
.btn-save-large {
    width: 50px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
    transition: transform 0.2s;
}
.btn-save-large:hover { transform: scale(1.1); background: linear-gradient(135deg, #059669 0%, #047857 100%); }

/* Temizle Butonu */
.btn-clear-large {
    width: 50px;
    border-radius: 12px;
    border: 2px solid #cbd5e1;
    background: #fff;
    color: #64748b;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-clear-large:hover { border-color: #ef4444; color: #ef4444; background: #fef2f2; }

/* =============================================
   TAKIM (GRUP) YÖNETİMİ - FİNAL TASARIM
   ============================================= */

/* 1. Kapsayıcı Kartlar */
.cm-modern-input-group {
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    margin-bottom: 25px;
}

/* 2. Otomatik Takım Bölümü (Mavi Tema) */
.cm-auto-group {
    background: linear-gradient(145deg, #f0f9ff, #e0f2fe);
    border-color: #bae6fd;
}

/* Başlıklar */
.cm-modern-label {
    font-size: 13px;
    font-weight: 800;
    color: #334155;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cm-auto-label { color: #0284c7; }

/* 3. Otomatik Kısım Düzeni (Input ve Buton Dengesi) */
.cm-auto-row-styled {
    display: flex;
    align-items: flex-end;
    gap: 15px;
}

/* Sayı Inputu (Genişletildi) */
#cmRandomTeamCount {
    width: 120px;       /* Daha geniş */
    height: 55px;       /* Daha yüksek */
    font-size: 22px;    /* Büyük yazı */
    font-weight: 800;
    text-align: center;
    border: 3px solid #bae6fd;
    border-radius: 12px;
    color: #0284c7;
    background: #fff;
}

/* Dağıt Butonu (Taşmayı önledik) */
.btn-distribute {
    flex: 1;            /* Kalan alanı doldur */
    height: 55px;       /* Input ile aynı boy */
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 6px 15px rgba(14, 165, 233, 0.3);
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-distribute:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(14, 165, 233, 0.4); }

/* 4. Manuel Takım Ekleme (Tek Satır Düzeni) */
.cm-manual-row-styled {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

/* İsim Inputu (Daraltıldı) */
#cmGroupNameInput {
    flex: 1; /* Esnek genişlik */
    height: 48px;
    border: 3px solid #cbd5e1;
    border-radius: 12px;
    padding: 0 15px;
    font-size: 14px;
    font-weight: 700;
    color: #334155;
    background: #f8fafc;
}
#cmGroupNameInput:focus { border-color: #6366f1; background: #fff; outline: none; }

/* Butonlar (Yan Yana) */
.cm-btn-bold {
    height: 48px;
    padding: 0 20px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 13px;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    white-space: nowrap;
}
.btn-save-team {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
}
.btn-new-team {
    background: #f1f5f9;
    color: #64748b;
    border: 2px solid #cbd5e1;
}

/* 5. Mevcut Takımlar Listesi (Okunaklılık Artırıldı) */
.team-card {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-left-width: 8px; /* Sol çizgi kalın */
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.03);
}

.team-name {
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
}

.team-members {
    font-size: 15px;      /* İsimler büyütüldü */
    line-height: 1.6;     /* Satır arası açıldı */
    color: #1e293b;       /* Daha koyu siyah */
    font-weight: 500;
    margin-top: 8px;
}

/* Küçük Etiketler */
.input-label-small {
    font-size: 11px;
    font-weight: 800;
    color: #64748b;
    margin-bottom: 4px;
    display: block;
}


/* Animasyon */
@keyframes bounceCrown {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

/* --- SERTİFİKA VE KUTLAMA BUTONLARI --- */
.podium-actions {
    display: flex;
    gap: 15px;
    margin-top: 15px;
    width: 100%;
    justify-content: center;
    padding: 0 10px;
}

.btn-certificate {
    background: #fff;
    color: #d97706;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.2s;
    display: flex; align-items: center; gap: 5px;
}
.btn-certificate:hover { transform: scale(1.1); background: #fffbeb; }

/* Büyük Kutlama Butonu */
.celebrate-bar {
    display: flex; justify-content: center; margin-bottom: 20px;
}
.btn-celebrate-huge {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    padding: 15px 40px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.4);
    display: flex; align-items: center; gap: 10px;
    transition: all 0.2s;
}
.btn-celebrate-huge:hover { transform: scale(1.05); box-shadow: 0 15px 35px rgba(139, 92, 246, 0.5); }
.btn-celebrate-huge:active { transform: scale(0.95); }

/* --- DİĞER ÖĞRENCİLER (LİSTE) --- */
.success-list-container {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 5px;
}

.success-list-item {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 15px 20px; /* Geniş boşluk */
    border-radius: 12px;
    border: 2px solid #e2e8f0;
    margin-bottom: 10px;
    transition: all 0.2s;
}

.success-list-item:hover {
    border-color: #3b82f6;
    transform: translateX(5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.list-rank {
    font-size: 20px; /* Büyük Numara */
    font-weight: 900;
    color: #94a3b8;
    width: 40px;
}

.list-avatar {
    width: 40px; height: 40px;
    background: #eff6ff; color: #3b82f6;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 18px;
    margin-right: 15px;
}

.list-name {
    flex: 1;
    font-size: 18px; /* Okunaklı İsim */
    font-weight: 700;
    color: #1e293b;
}

.list-stars {
    font-size: 18px;
    font-weight: 800;
    color: #f59e0b;
    background: #fffbeb;
    padding: 5px 15px;
    border-radius: 20px;
    display: flex; align-items: center; gap: 6px;
}

/* Belge Hazırlanıyor Bildirimi */
.cert-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 20px 40px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    z-index: 999999; /* En üstte */
    display: none;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.cert-toast.active { display: flex; }

/* --- ŞAMPİYONLAR ARENASI & LİG GÖRÜNÜMÜ (FİNAL DÜZELTME) --- */

.champions-arena {
    padding: 20px 10px;
    background: #f8fafc;
    border-radius: 24px;
    border: 1px solid #e2e8f0;
    margin-top: 15px;
}

/* KUTLAMA BUTONU ALANI */
.celebrate-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 40px; /* Butonla kutular arasını biraz açtık */
}

/* KÜRSÜ (PODIUM) KAPLAYICI */
.podium-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Tabanları hizala */
    gap: 15px; 
    margin-bottom: 40px;
    padding-top: 50px; /* Taç ve Avatar için üstten boşluk */
    min-height: 350px; /* Toplam alanı yükselttik */
}

/* TEKİL SÜTUN */
.podium-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 32%;
    max-width: 160px;
    min-width: 130px; /* Genişliği garantiye aldık */
    position: relative;
    transition: transform 0.3s;
}

.podium-step:hover {
    transform: translateY(-10px);
    z-index: 50;
}

/* AVATAR */
.podium-avatar {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 900;
    color: #fff;
    position: absolute;
    bottom: 100%; 
    margin-bottom: -32px; 
    z-index: 20; 
}

/* --- TAÇ İKONU (GERİ GELDİ) --- */
.crown-icon {
    position: absolute;
    bottom: 100%; /* Kutunun üstünde */
    margin-bottom: 40px; /* Avatarın da üstünde */
    font-size: 40px;
    color: #fbbf24;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    z-index: 25;
    animation: bounceCrown 2s infinite ease-in-out;
}

@keyframes bounceCrown {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

/* KÜRSÜ KUTUSU */
.podium-box {
    width: 100%;
    border-radius: 16px 16px 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 45px 5px 15px 5px; 
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    position: relative;
    text-align: center;
}

.podium-rank {
    font-size: 36px;
    font-weight: 900;
    opacity: 0.3;
    line-height: 1;
    margin-bottom: 5px;
    margin-top: -5px;
}

.podium-name {
    font-size: 16px; /* Yazıyı biraz büyüttük */
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 10px;
    width: 100%;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    word-wrap: break-word; /* Uzun isimler alta geçsin */
}

.podium-stars {
    background: rgba(0,0,0,0.25);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(255,255,255,0.3);
    margin-top: auto; 
}

/* --- KÜRSÜ YÜKSEKLİKLERİ (HEPSİ UZATILDI) --- */

/* 1. SIRA (ALTIN) */
.rank-1 .podium-box { 
    height: 260px; /* 230 -> 260 */
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); 
}
.rank-1 .podium-avatar { 
    background: linear-gradient(135deg, #fbbf24, #b45309); 
    border-color: #fffbeb; 
    width: 75px; height: 75px; font-size: 30px; 
    margin-bottom: -37px;
}
.rank-1 { z-index: 3; }

/* 2. SIRA (GÜMÜŞ) */
.rank-2 .podium-box { 
    height: 220px; /* 190 -> 220 */
    background: linear-gradient(135deg, #64748b 0%, #334155 100%); 
}
.rank-2 .podium-avatar { 
    background: linear-gradient(135deg, #94a3b8, #475569); 
    border-color: #f8fafc; 
}
.rank-2 { z-index: 2; }

/* 3. SIRA (BRONZ - ARTIK DAHA UZUN) */
.rank-3 .podium-box { 
    height: 190px; /* 160 -> 190 (Yeterince yer var) */
    background: linear-gradient(135deg, #d97706 0%, #92400e 100%); 
}
.rank-3 .podium-avatar { 
    background: linear-gradient(135deg, #d97706, #78350f); 
    border-color: #fff7ed; 
}
.rank-3 { z-index: 1; }

/* SERTİFİKA BUTONU */
.podium-actions { margin-top: 10px; }
.btn-certificate {
    background: #fff; color: #d97706; border: none;
    padding: 6px 12px; border-radius: 20px; font-size: 11px;
    font-weight: 800; cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    display: inline-flex; align-items: center; gap: 4px;
}
.btn-certificate:hover { transform: scale(1.05); background: #fff7ed; }

/* LİSTE GÖRÜNÜMÜ */
.leaderboard-list {
    display: flex; flex-direction: column; gap: 8px;
    max-height: 250px; overflow-y: auto; padding: 5px;
    background: #fff; border-radius: 12px; border: 1px solid #e2e8f0;
}
.leader-item {
    display: flex; align-items: center; padding: 10px 15px;
    border-bottom: 1px solid #f1f5f9;
}
.leader-item:last-child { border-bottom: none; }
.leader-rank { width: 30px; font-weight: 800; color: #94a3b8; font-style: italic; }
.leader-avatar { 
    width: 32px; height: 32px; border-radius: 8px; background: #eff6ff; 
    color: #3b82f6; display: flex; align-items: center; justify-content: center; 
    font-weight: 800; margin-right: 12px; 
}
.leader-info { flex: 1; font-weight: 700; color: #334155; }
.leader-stars { font-weight: 800; color: #f59e0b; display: flex; gap: 5px; align-items: center; }

/* Animasyonlar (Giriş Efekti) */
.anim-pop-in { animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; opacity: 0; transform: scale(0.5) translateY(50px); }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.5s; }

@keyframes popIn {
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============================================================
   KRİTİK Z-INDEX DÜZELTMESİ (SONUÇ MODALLARI VE OYUNLAR)
   ============================================================ */

/* 1. Ana Oyun Katmanları (Düşük Z-Index) */
.addition-game-overlay,
.syllable-bubble-overlay,
.lettercatch-game-overlay,
.synonym-game-overlay,
.wordrain-game-overlay,
.antonym-game-overlay,
.missing-letter-overlay,
.sentence-wheel-overlay,
.pathfinder-overlay,
.sudoku-overlay {
    z-index: 10000 !important; /* Oyunlar ve Arka Plan */
}

/* 2. Oyun SONUÇ Modalları (Yüksek Z-Index) */
.synonym-winner-modal, 
.antonym-winner-modal,
.wordrain-result-modal,
.lettercatch-result-modal,
.syllable-result-modal,
.wheel-result-modal,
.missing-result-modal,
.game-message { 
    z-index: 10001 !important; /* Oyun arayüzünün (10000) bir kademe üstünde */
}
/* =============================================
   1. SINIF OKUMA OYUNLARI - MOBİL UYUM (YENİ)
   (Harf Yakala, Hece Balonu, Çark, Eksik Harf)
   ============================================= */

@media (max-width: 768px) {
    
    /* --- 1. ORTAK YAPI AYARLARI --- */
    .lettercatch-game-main,
    .syllable-bubble-main,
    .missing-letter-main,
    .sentence-wheel-main {
        flex-direction: column; /* Yan yana değil alt alta */
        padding: 10px;
        gap: 10px;
        overflow-y: auto;
    }

    /* Üst Barlar (Header) */
    .lettercatch-game-header,
    .syllable-bubble-header,
    .missing-letter-header,
    .sentence-wheel-header {
        flex-direction: column;
        height: auto;
        padding: 10px;
        gap: 8px;
    }

    /* Başlıkları Küçült ve En Üste Al */
    .lettercatch-game-title,
    .syllable-bubble-title,
    .missing-letter-title,
    .sentence-wheel-title {
        font-size: 18px;
        order: -1;
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* İstatistikleri Sıkıştır (Sadece İkon ve Sayı) */
    .lettercatch-stats,
    .syllable-bubble-stats,
    .missing-letter-stats,
    .sentence-wheel-stats {
        gap: 15px;
        justify-content: center;
        width: 100%;
    }
    
    /* Yazıları gizle, sadece sayıları göster */
    .lettercatch-stat-item, .syllable-stat-item, .missing-stat-item, .wheel-stat-item {
        font-size: 14px;
        padding: 4px 8px;
    }
    /* Kapsayıcı span içindeki metni gizle ama içindeki strong (sayı) kalsın */
    .lettercatch-stat-item span, .syllable-stat-item span, .missing-stat-item span, .wheel-stat-item span {
        font-size: 0; 
    }
    .lettercatch-stat-item span strong, .syllable-stat-item span strong, .missing-stat-item span strong, .wheel-stat-item span strong {
        font-size: 16px; 
    }

    /* Zamanlayıcılar */
    .lettercatch-timer,
    .syllable-timer,
    .wordrain-timer {
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 16px;
        padding: 5px 10px;
        order: -2; /* En sağ üst köşe */
    }

    /* Sol Paneller (Zorluk) - Yatay */
    .lettercatch-difficulty-panel,
    .syllable-difficulty-panel {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        gap: 10px;
        padding-bottom: 5px;
    }
    .lettercatch-difficulty-panel .difficulty-btn,
    .syllable-difficulty-panel .difficulty-btn {
        flex: 1;
        padding: 5px;
        min-width: 60px;
    }

    /* Sağ Paneller (Araçlar) - Yatay */
    .lettercatch-tools-panel,
    .syllable-tools-panel,
    .wordrain-tools-panel {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        gap: 20px;
        margin-top: 10px;
    }
    
    /* --- 2. HARF YAKALA ÖZEL --- */
    .lettercatch-target-bar {
        padding: 10px;
        font-size: 14px;
    }
    .lettercatch-target-bar .target-letter {
        font-size: 32px; /* Dev fontu küçült */
    }
    
    .lettercatch-area {
        min-height: 350px; /* Oyun alanı yüksekliği */
        border-radius: 12px;
    }
    
    .lettercatch-start-screen .start-letter {
        font-size: 80px; /* 120px'den düşür */
    }
    .lettercatch-start-screen h2 { font-size: 24px; }
    .lettercatch-start-screen p { font-size: 14px; padding: 0 10px; }

    .falling-letter {
        width: 50px; height: 50px;
        font-size: 28px; /* Düşen harfleri küçült */
        border-width: 2px;
    }

    /* --- 3. HECE BALONU ÖZEL --- */
    .syllable-target-bar {
        min-height: auto;
        padding: 15px;
    }
    .target-syllable-big {
        font-size: 48px; /* 72px'den düşür */
    }
    
    .syllable-bubble-area {
        min-height: 350px;
    }
    
    .falling-bubble {
        min-width: 60px; height: 60px;
        font-size: 20px;
        padding: 0 5px;
    }

    /* --- 4. CÜMLE ÇARKI ÖZEL --- */
    .sentence-wheel-main {
        gap: 20px;
    }
    
    .wheel-container {
        transform: scale(0.85); /* Çarkı biraz küçült */
        margin-top: -20px;
    }
    
    .sentence-display-area {
        width: 100%;
    }
    
    .sentence-card {
        padding: 20px;
        min-height: 100px;
    }
    
    .sentence-text {
        font-size: 22px; /* Cümleyi küçült */
        line-height: 1.3;
    }
    
    .action-buttons {
        flex-direction: row; /* Butonlar yan yana kalsın */
        gap: 10px;
    }
    .action-btn {
        padding: 10px 15px;
        font-size: 13px;
        flex: 1;
    }

    /* --- 5. EKSİK HARF ÖZEL --- */
    .word-display-area {
        padding: 15px;
        border-width: 2px;
    }
    
    .word-display {
        font-size: 40px; /* 72px'den 40px'e */
        letter-spacing: 2px;
        word-break: break-all; /* Çok uzun kelime taşmasın */
    }
    
    .word-display .missing-slot {
        width: 35px;
        height: 40px;
        border-bottom-width: 4px;
    }
    
    .dancing-letters-area {
        min-height: 250px;
    }
    
    .dancing-letter {
        width: 50px; height: 50px;
        font-size: 24px;
        border-width: 2px;
    }
    
    /* --- 6. 3. GRUP SEÇİM MENÜSÜ --- */
    .group3-panel {
        width: 95%;
        max-height: 90vh;
        margin: 10px auto;
    }
    
    .group3-body .grid-6 {
        grid-template-columns: repeat(3, 1fr) !important; /* 6 yerine 3 sütun */
        gap: 8px !important;
    }
    
    .game-card.small {
        padding: 8px;
    }
    .game-card.small .letter-icon, 
    .game-card.small .bubble-icon,
    .game-card.small .wheel-icon,
    .game-card.small .missing-icon {
        font-size: 28px;
    }
    .game-card.small .game-card-title {
        font-size: 11px;
    }
}

/* ÇOK KÜÇÜK EKRANLAR (iPhone SE) */
@media (max-width: 380px) {
    .lettercatch-difficulty-panel .difficulty-btn { padding: 4px; min-width: 50px; }
    .falling-letter { width: 40px; height: 40px; font-size: 22px; }
    
    .group3-body .grid-6 {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 sütuna düş */
    }
    
    .word-display { font-size: 32px; }
}


/* =============================================
   MATEMATİK HALAT YARIŞI (PRO V4 - FINAL)
   ============================================= */
.tugwar-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    /* Gerçekçi Gökyüzü ve Çim */
    background: linear-gradient(to bottom, #87CEEB 0%, #B3E5FC 65%, #81C784 65%, #4CAF50 100%);
    z-index: 100000; display: none; flex-direction: column;
    overflow: hidden; user-select: none;
}
.tugwar-overlay.open { display: flex; }

/* Mobil Uyarı */
.tugwar-portrait-warning {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #1e293b; color: #fff; z-index: 100001;
    display: none; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 20px;
}
@media (max-width: 900px) and (orientation: portrait) {
    .tugwar-portrait-warning { display: flex; }
}

/* Header (Sabit Yükseklik) */
.tugwar-header {
    height: 60px; background: rgba(255,255,255,0.95);
    display: flex; justify-content: space-between; align-items: center; padding: 0 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); z-index: 50; flex-shrink: 0;
}

/* OYUN SAHNESİ (Esnek Alan) */
.tugwar-arena {
    flex: 1; position: relative; width: 100%;
    overflow: hidden; /* Taşmaları gizle */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Karakterleri zemine basacak şekilde hizala */
    padding-bottom: 20px;
}

/* Ortadaki Sınır Çizgisi */
.boundary-line {
    position: absolute; left: 50%; bottom: 0; width: 4px; height: 50%;
    background: repeating-linear-gradient(to bottom, #fff, #fff 10px, #ff0000 10px, #ff0000 20px);
    transform: translateX(-50%); z-index: 1;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* HAREKETLİ GRUP (Vagon Mantığı) */
.pull-group {
    position: absolute; bottom: 80px; left: 50%;
    width: 1200px; height: 250px;
    display: flex; align-items: flex-end; justify-content: center;
    transform: translateX(-50%); /* JS ile bu değer değişecek */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 10;
}

/* Halat */
.rope-real {
    width: 600px; height: 16px;
    margin-bottom: 85px; /* Karakterlerin el hizası */
    background: repeating-linear-gradient(45deg, #8d6e63, #8d6e63 10px, #5d4037 10px, #5d4037 20px);
    border: 1px solid #3e2723; border-radius: 8px;
    position: relative; z-index: 5;
    box-shadow: 0 5px 5px rgba(0,0,0,0.3);
}
.rope-knot {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 12px; height: 60px; background: #e11d48;
    border: 2px solid #881337; border-radius: 4px;
}

/* Oyuncu Kapsayıcıları */
.player-wrapper {
    position: relative; width: 200px; height: 350px;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
}

/* SORU BALONLARI (Görünürlük Düzeltmesi) */
.math-bubble-container {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    background: #fff; padding: 10px 15px; border-radius: 15px;
    border: 3px solid #334155; min-width: 140px; text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); z-index: 20;
}
.math-bubble-container::after {
    content: ''; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%);
    border-width: 12px 12px 0; border-style: solid; border-color: #334155 transparent;
}
.q-text { font-size: 1.8rem; font-weight: 800; color: #1e293b; display: block; line-height: 1.2; }
.ans-text { font-size: 1.5rem; font-weight: bold; color: #e11d48; min-height: 30px; border-bottom: 2px dashed #ccc; }

/* GERÇEKÇİ KARAKTERLER (PNG Resim) */
.character-img {
    width: 160px; height: auto;
    filter: drop-shadow(0 10px 10px rgba(0,0,0,0.3));
    transition: transform 0.2s;
}
/* Mavi çocuk sağa baksın, pembe sola baksın */
#charLeftImg { transform: scaleX(-1); } 

/* ALT KONTROLLER (Tuş Takımı) */
.tugwar-controls {
    flex: 0 0 240px; background: #fff; border-top: 5px solid #cbd5e1;
    display: flex; justify-content: space-around; align-items: flex-start;
    padding: 10px; z-index: 50;
}
.control-box { width: 45%; max-width: 350px; text-align: center; }
.control-title { font-weight: 800; font-size: 14px; color: #fff; padding: 5px; border-radius: 5px; display: block; margin-bottom: 5px; }
.keypad-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;
    background: #f1f5f9; padding: 8px; border-radius: 12px;
}
.key-btn {
    height: 45px; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px;
    font-size: 1.3rem; font-weight: 700; color: #334155; cursor: pointer;
    box-shadow: 0 3px 0 #94a3b8; transition: transform 0.1s;
}
.key-btn:active { transform: translateY(3px); box-shadow: none; }
.key-btn.del { background: #fee2e2; color: #ef4444; border-color: #fca5a5; }
.key-btn.ok { background: #dcfce7; color: #16a34a; border-color: #86efac; grid-column: span 3; }

/* MODALLAR (Başlat ve Kazan) */
.tug-modal {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(255,255,255,0.98); padding: 30px; border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5); width: 90%; max-width: 400px;
    z-index: 200; text-align: center; border: 4px solid #3b82f6; display: none;
}
.tug-modal.active { display: block; }

.diff-btn {
    display: block; width: 100%; padding: 12px; margin: 8px 0;
    font-size: 16px; font-weight: 700; background: #fff; border: 2px solid #e2e8f0;
    border-radius: 10px; cursor: pointer; color: #475569;
}
.diff-btn.active { background: #3b82f6; color: #fff; border-color: #2563eb; }
.start-btn {
    width: 100%; padding: 15px; background: #10b981; color: #fff;
    font-size: 20px; font-weight: 800; border: none; border-radius: 10px;
    margin-top: 15px; cursor: pointer; box-shadow: 0 5px 0 #059669;
}
.start-btn:active { transform: translateY(5px); box-shadow: none; }
/* --- YILDIZ MARKETİ STİLLERİ --- */
.market-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    padding: 10px;
    padding-bottom: 80px; /* Alt boşluk */
}

.market-card {
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    padding: 15px;
    text-align: center;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
}

.market-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-color: #6366f1;
}

/* Fiyat Etiketi (Sağ Üst) */
.market-price-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #f59e0b;
    color: #fff;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
    box-shadow: 0 2px 5px rgba(245, 158, 11, 0.4);
    z-index: 2;
}

/* İkon Alanı */
.market-icon {
    font-size: 48px;
    margin: 20px 0 10px 0;
    color: #6366f1;
    transition: transform 0.2s;
}
.market-card:hover .market-icon {
    transform: scale(1.1) rotate(-5deg);
}

.market-title {
    font-size: 16px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 10px;
    line-height: 1.3;
}

/* Satın Al Butonu Görünümü */
.market-btn-buy {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    color: #fff;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    width: 100%;
    margin-top: auto;
}

/* Silme Butonu (Sadece Hoverda görünsün) */
.market-delete-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 24px;
    height: 24px;
    background: #fee2e2;
    color: #ef4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s;
    border: 1px solid #fecaca;
    z-index: 5;
}
.market-card:hover .market-delete-btn {
    opacity: 1;
}
.market-delete-btn:hover {
    background: #ef4444;
    color: #fff;
}

/* SATIN ALMA MODALI (Öğrenci Seçimi) */
.market-buyer-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 15px;
}

.buyer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.buyer-item:hover:not(.disabled) {
    background: #eff6ff;
    border-color: #6366f1;
}

.buyer-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #f1f5f9;
}

.buyer-stars {
    font-weight: 700;
    color: #f59e0b;
}
.buyer-stars.not-enough {
    color: #ef4444;
}

/* --- MARKET ARAMA KUTUSU VE MODAL DÜZELTMELERİ --- */

/* Modal Kapsayıcısı */
#marketBuyOverlay {
    display: none; 
    position: absolute; /* absolute yerine fixed de olabilir ama panel içindeyse absolute kalsın */
    top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(255,255,255,0.98); 
    z-index: 50; 
    flex-direction: column; 
    padding: 20px;
    border-radius: 16px; /* Panelle uyumlu olsun diye */
}

/* Modal Başlık Alanı */
.buy-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
    position: relative;
}

/* Kırmızı Çarpı (Kapatma Butonu) */
.buy-modal-close {
    background: #fee2e2;
    color: #ef4444;
    border: 1px solid #fecaca;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    margin-left: 10px;
}
.buy-modal-close:hover {
    background: #ef4444;
    color: white;
    transform: scale(1.1);
}

/* Arama Kutusu (Düzeltilmiş) */
#buyerSearch {
    width: 100%;
    padding: 10px 15px;      /* İç boşluk */
    height: 42px;            /* Yükseklik sınırlandı (Çok geniş durmasın) */
    border: 2px solid #cbd5e1; /* Çerçeve belirginleştirildi */
    border-radius: 10px;
    font-size: 14px;
    background: #f8fafc;     /* Hafif gri zemin */
    color: #334155;
    outline: none;
    transition: all 0.2s;
}
#buyerSearch:focus {
    border-color: #6366f1;   /* Odaklanınca mor */
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Market Rafı Scroll Düzeltmesi */
/* Bu id'yi market rafını kapsayan div'e vermiştik (#cmView-market) */
/* DÜZELTİLMİŞ MARKET CSS'İ */

/* Varsayılan olarak GİZLE (Önemli!) */
#cmView-market {
    display: none; 
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Sadece .active sınıfı varsa GÖSTER */
#cmView-market.active {
    display: flex !important;
}

/* Grid Alanı */
#cmMarketGrid {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px;
    padding-bottom: 100px !important;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
}

/* Grid Alanı (Kartların olduğu yer) */
#cmMarketGrid {
    flex: 1;              /* Kalan tüm alanı kapla */
    overflow-y: auto;     /* Dikey kaydırma çubuğu ekle */
    overflow-x: hidden;
    padding: 10px;
    padding-bottom: 100px; /* Alt boşluk (Rahat görünüm için) */
    
    /* Scroll bar güzelleştirme */
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

#cmMarketGrid::-webkit-scrollbar {
    width: 6px;
}
#cmMarketGrid::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 3px;
}
/* TDK SÖZLÜK SONUÇ ALANI İÇİN ÖZEL SCROLLBAR */

/* Kaydırma çubuğunun genişliği */
#dictResults::-webkit-scrollbar {
    width: 10px; /* Parmakla tutması kolay olsun diye biraz kalın */
}

/* Çubuğun arka plan yolu */
#dictResults::-webkit-scrollbar-track {
    background: #f1f5f9; 
    border-radius: 5px;
}

/* Hareket eden çubuk (Thumb) */
#dictResults::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* İlk başta gri */
    border-radius: 5px;
    border: 2px solid #f1f5f9; /* Etrafında boşluk hissi */
}

/* Üzerine gelince veya tutunca rengi */
#dictResults::-webkit-scrollbar-thumb:hover {
    background: #ef4444; /* TDK kırmızısı olsun */
}
/* --- UZAKTAN NOT SİSTEMİ CSS --- */

/* 1. FLAŞ UYARI (TAM EKRAN) */
.remote-alert-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(220, 38, 38, 0.2); /* Kırmızımsı */
    backdrop-filter: blur(10px); /* ARKA PLANI FLULAŞTIR */
    z-index: 2147483647; /* En üstte */
    display: none; justify-content: center; align-items: center;
    animation: fadeInAlert 0.3s ease;
}

.remote-alert-box {
    background: #fff; padding: 40px; border-radius: 30px;
    text-align: center; max-width: 80%;
    border: 5px solid #ef4444;
    box-shadow: 0 0 100px rgba(239, 68, 68, 0.5);
    animation: popInAlert 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.remote-alert-icon { font-size: 80px; color: #ef4444; margin-bottom: 20px; animation: pulseAlert 1s infinite; }
.remote-alert-text { font-size: 40px; font-weight: 900; color: #1e293b; line-height: 1.4; }

/* 2. YAPIŞKAN NOT (SAĞ ÜST) */
.remote-sticky-container {
    position: fixed; top: 20px; right: 20px;
    display: flex; flex-direction: column; gap: 10px;
    z-index: 2147483640; /* Uyarının altında ama diğerlerinin üstünde */
    width: 300px;
}

.remote-sticky-note {
    padding: 20px; border-radius: 0 0 20px 0;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.2);
    position: relative; animation: slideInSticky 0.5s ease;
    border-left: 5px solid rgba(0,0,0,0.1);
    font-family: 'Comic Sans MS', cursive, sans-serif; /* El yazısı havası */
}

.sticky-yellow { background: #fef9c3; color: #854d0e; }
.sticky-blue { background: #dbeafe; color: #1e40af; }

.sticky-close-btn {
    position: absolute; top: 5px; right: 5px;
    background: transparent; border: none; color: inherit; opacity: 0.5; cursor: pointer;
}
.sticky-close-btn:hover { opacity: 1; }

@keyframes fadeInAlert { from { opacity: 0; } to { opacity: 1; } }
@keyframes popInAlert { from { transform: scale(0.5); } to { transform: scale(1); } }
@keyframes pulseAlert { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes slideInSticky { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* Düşük performanslı cihazlar veya mobil için optimizasyon */
@media (max-width: 991px) {
    .board-sidebar, 
    .math-tools-panel, 
    .class-management-panel,
    .timer-overlay {
        /* Bulanıklığı kaldır, düz renk ver (Çok daha hızlı çalışır) */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(255, 255, 255, 0.95) !important;
    }
}

/* =============================================
   AKORDEON İÇİNDEKİ BUTONLARI BELİRGİNLEŞTİRME
   ============================================= */

.board-sidebar-content .accordion-body .tool-btn {
    /* 1. Tam Beyaz Arka Plan (Gri zemin üstünde parlasın) */
    background: #ffffff !important;
    
    /* 2. Kenarlık ve Gölge (Kart hissi versin) */
    border: 1px solid #cbd5e1 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    
    /* 3. Yazı Rengi (Net Okunabilirlik) */
    color: #334155 !important;
    font-weight: 600 !important;
    
    /* 4. Düzen */
    margin-bottom: 8px !important;
    border-radius: 8px !important;
}

/* Hover (Üzerine Gelince) */
.board-sidebar-content .accordion-body .tool-btn:hover {
    background: #eff6ff !important; /* Çok açık mavi */
    border-color: #3b82f6 !important; /* Mavi kenarlık */
    color: #1d4ed8 !important; /* Koyu mavi yazı */
    transform: translateY(-2px); /* Hafif yukarı kalksın */
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.15) !important;
}

/* İkon Rengi */
.board-sidebar-content .accordion-body .tool-btn i {
    color: #64748b !important; /* Normalde gri ikon */
}

/* Hover olunca ikon rengi */
.board-sidebar-content .accordion-body .tool-btn:hover i {
    color: #2563eb !important; /* Mavi ikon */
}

/* =============================================
   ANA MENÜ BAŞLIKLARI (AKORDEONLARI) BELİRGİNLEŞTİRME
   ============================================= */

/* 1. Kapalı Durumdaki Ana Menü Butonları */
.board-sidebar-content .accordion-button.collapsed {
    /* Tam Beyaz ve Opak */
    background-color: #ffffff !important;
    
    /* Belirgin Gri Kenarlık */
    border: 1px solid #cbd5e1 !important;
    
    /* Yazı Rengi: Koyu Gri */
    color: #334155 !important;
    font-weight: 700 !important;
    
    /* Kart Gölgesi (Havada duruyor hissi) */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 
                0 1px 3px rgba(0, 0, 0, 0.1) !important;
    
    /* Köşeler ve Boşluk */
    border-radius: 12px !important;
    margin-bottom: 8px !important; /* Birbirlerine yapışmasınlar */
}

/* 2. Kapalı Buton Üzerine Gelince (Hover) */
.board-sidebar-content .accordion-button.collapsed:hover {
    background-color: #f8fafc !important; /* Çok hafif grileşsin */
    border-color: #3b82f6 !important;     /* Kenarlık mavi olsun */
    transform: translateY(-2px);          /* Hafif yukarı kalksın */
    box-shadow: 0 6px 12px rgba(59, 130, 246, 0.15) !important;
    color: #3b82f6 !important;            /* Yazı mavi olsun */
}

/* 3. Açık Durumdaki Ana Menü Butonu (Başlık Kısmı) */
.board-sidebar-content .accordion-button:not(.collapsed) {
    /* Açılınca Maviye Çalan Beyaz */
    background: linear-gradient(to right, #eff6ff, #ffffff) !important;
    
    /* Mavi Kenarlık */
    border: 1px solid #3b82f6 !important;
    border-bottom: none !important; /* Alt çizgi yok, içerikle birleşsin */
    
    /* Mavi Yazı */
    color: #2563eb !important;
    font-weight: 800 !important;
    
    /* Köşeler: Sadece üstü yuvarlak */
    border-radius: 12px 12px 0 0 !important;
    margin-bottom: 0 !important; /* Altındaki menüye yapışsın */
    
    box-shadow: 0 -2px 10px rgba(59, 130, 246, 0.1) !important;
}

/* 4. İkon Rengi (Sol Baştaki İkonlar) */
.board-sidebar-content .accordion-button i {
    font-size: 16px;
    margin-right: 10px;
    transition: color 0.3s;
}

/* Kapalıyken ikon rengi */
.board-sidebar-content .accordion-button.collapsed i {
    color: #64748b !important;
}

/* Açıkken veya üzerine gelince ikon rengi */
.board-sidebar-content .accordion-button:not(.collapsed) i,
.board-sidebar-content .accordion-button.collapsed:hover i {
    color: #3b82f6 !important;
}

/* =============================================
   HIZLI OKUMA LABORATUVARI STİLLERİ
   ============================================= */

/* 1. OKUMA EKRANI OVERLAY (Tam Ekran) */
.reading-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: #f8fafc; /* Göz yormayan açık gri */
    z-index: 2147483647; /* En üstte olsun */
    display: none;
    flex-direction: column;
}

/* Süre bitince: metin hafif flu (çocuk dursun), öğretmen yine işaretleyebilsin */
.reading-timeup .read-word {
    filter: blur(1.2px);
    opacity: 0.85;
}
.reading-overlay.active { display: flex; }

/* 2. ÜST BAR (Kontroller) */
.reading-header {
    height: 70px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    flex-shrink: 0;
}

.reading-student-info {
    font-size: 20px;
    font-weight: 800;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 10px;
}
.reading-student-badge {
    background: #e0e7ff;
    color: #4f46e5;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 16px;
}

.reading-timer-display {
    font-family: 'Courier New', monospace;
    font-size: 36px;
    font-weight: 800;
    color: #334155;
    background: #f1f5f9;
    padding: 5px 20px;
    border-radius: 10px;
    border: 2px solid #cbd5e1;
}

/* 3. METİN ALANI (Prompter) */
.reading-content-area {
    flex: 1;
    overflow-y: auto;
    padding: 40px 5% 120px 5% !important;
    font-family: 'Comic Sans MS', 'Verdana', sans-serif;
    
    /* İSTEDİĞİNİZ GİBİ BÜYÜK KALSIN */
    font-size: 50px !important; 
    
    line-height: 1.6 !important;
    color: #1e293b;
    
    /* KESİN ÇÖZÜM: Sola yasla ki boşluk kalmasın */
    text-align: left !important; 
    
    word-wrap: break-word;
    white-space: normal;
    transition: all 0.3s ease;
}

/* Kaydırma çubuğu güzelleştirme */
.reading-content-area::-webkit-scrollbar { width: 12px; }
.reading-content-area::-webkit-scrollbar-track { background: #f1f5f9; }
.reading-content-area::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
.reading-content-area::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* 4. TIKLANABİLİR KELİMELER */

.read-word {
    display: inline-block;
    padding: 0px 1px !important; /* İç boşluğu minimuma indirdik */
    
    /* Kelime arasını iyice kıstık (Yaklaşık 7-8px yapar) */
    margin-right: 0.15em !important; 
    
    margin-bottom: 0.2em !important;
    border-radius: 6px;
    cursor: default;
    transition: all 0.1s;
    vertical-align: middle;
}


/* Okuma sırasında hata işaretleme modu */
.reading-mode-active .read-word {
    cursor: pointer;
}
.reading-mode-active .read-word:hover {
    background: #fef2f2; /* Hafif kırmızı hover */
}

/* Hatalı Kelime */
.read-word.error {
    background: #fee2e2;
    color: #dc2626;
    text-decoration: line-through;
    text-decoration-color: #ef4444;
}

/* 5. SEÇİM MODU (BİTİŞ EKRANI) */
.reading-mode-select .read-word {
    cursor: pointer;
    opacity: 0.5; /* Hepsi biraz soluklaşsın */
    filter: blur(0.5px); /* Hafif flu */
}

.reading-mode-select .read-word:hover {
    opacity: 1;
    filter: blur(0);
    transform: scale(1.1);
    background: #dcfce7;
    color: #16a34a;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Seçimden öncekiler (Okunanlar) */
.reading-mode-select .read-word.read-past {
    color: #16a34a;
    opacity: 1;
    filter: blur(0);
}

/* 6. AI PANEL VE RAPORLAR */
.reading-dashboard {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 20px;
    height: 100%;
    overflow: hidden;
}

.reading-sidebar {
    background: #fff;
    border-right: 1px solid #e2e8f0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    overflow-y: auto;
}

.reading-main {
    padding: 20px;
    overflow-y: auto;
    background: #f8fafc;
}

.text-card {
    background: #fff;
    padding: 15px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 10px;
}
.text-card:hover {
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.text-card.active {
    border: 2px solid #3b82f6;
    background: #eff6ff;
}

.wpm-result-modal {
    text-align: center;
    background: #fff;
    padding: 40px;
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.25);
    border: 4px solid #3b82f6;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.wpm-score {
    font-size: 80px;
    font-weight: 900;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 10px 0;
}

/* =============================================
   PROFESYONEL RAPORLAMA ARAYÜZÜ
   ============================================= */

/* Rapor Modalı */
.report-modal {
    max-width: 1000px;
    height: 90vh;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
}

/* Tab Menü */
.report-tabs {
    display: flex;
    background: #fff;
    padding: 0 20px;
    border-bottom: 1px solid #e2e8f0;
}
.report-tab-btn {
    padding: 15px 25px;
    border: none;
    background: transparent;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    font-size: 14px;
}
.report-tab-btn:hover { color: #3b82f6; }
.report-tab-btn.active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

/* İçerik Alanı */
.report-content {
    flex: 1;
    overflow-y: auto; /* Kaydırma burada olacak */
    padding: 25px;
}

/* 1. ÖĞRENCİ LİSTESİ TABLOSU */
.report-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px; /* Satır arası boşluk */
}
.report-table th {
    text-align: left;
    color: #64748b;
    font-size: 12px;
    text-transform: uppercase;
    padding: 0 15px;
}
.report-row {
    background: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    transition: transform 0.2s;
}
.report-row:hover { transform: scale(1.01); }
.report-row td {
    padding: 15px;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}
.report-row td:first-child {
    border-left: 1px solid #e2e8f0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}
.report-row td:last-child {
    border-right: 1px solid #e2e8f0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* İstatistik Rozetleri */
.stat-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    display: inline-block;
}
.stat-badge.green { background: #dcfce7; color: #166534; }
.stat-badge.orange { background: #ffedd5; color: #9a3412; }
.stat-badge.gray { background: #f1f5f9; color: #64748b; }

/* Detay Butonu */
.btn-detail {
    background: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
    padding: 6px 15px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}
.btn-detail:hover { background: #3b82f6; color: #fff; }

/* 2. ÖĞRENCİ DETAY KARTI */
.student-profile-header {
    background: #fff;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
.profile-avatar {
    width: 60px; height: 60px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: bold;
}
.stat-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 25px;
}
.stat-card {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    text-align: center;
}
.stat-card h4 { margin: 0 0 5px 0; color: #64748b; font-size: 13px; font-weight: 600; }
.stat-card .value { font-size: 24px; font-weight: 800; color: #1e293b; }

/* CSS Grafiği (Bar Chart) */
.simple-chart {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 200px;
    padding: 10px 0;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 10px;
}
.chart-bar-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    cursor: pointer;
}
.chart-bar {
    width: 100%;
    background: linear-gradient(to top, #3b82f6, #60a5fa);
    border-radius: 4px 4px 0 0;
    transition: height 0.5s ease;
    min-height: 4px;
    position: relative;
}
.chart-bar:hover { background: #2563eb; }
.chart-label { font-size: 10px; color: #64748b; margin-top: 5px; text-align: center; }
.chart-value { 
    position: absolute; top: -20px; width: 100%; text-align: center; 
    font-size: 11px; font-weight: bold; color: #3b82f6; 
}

/* 3. SINIF KARŞILAŞTIRMA */
.comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.top-list {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 20px;
}
.top-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed #e2e8f0;
    font-size: 14px;
}
.top-item:last-child { border-bottom: none; }
.rank-num { font-weight: bold; width: 25px; color: #94a3b8; }
.rank-1 .rank-num { color: #f59e0b; } /* Altın */

/* === HIZLI OKUMA: footer bildirimleri (renkli + büyük) === */
#readingFooterHint.reading-footer-hint{
  display:none;
  padding:12px !important;
  text-align:center !important;
  font-size:16px !important;
  font-weight:800 !important;
  border-top:2px solid #e2e8f0;
  letter-spacing:0.2px;
}
#readingFooterHint.hint-marking{ background:#fff7ed; color:#9a3412; border-top-color:#fb923c; }
#readingFooterHint.hint-timeup { background:#fee2e2; color:#991b1b; border-top-color:#ef4444; }
#readingFooterHint.hint-select { background:#dcfce7; color:#166534; border-top-color:#22c55e; }

/* Süre bitince: metin hafif flu (çocuk dursun), öğretmen işaretlemeye devam edebilsin */
.reading-content-area.reading-timeup .read-word{
  filter: blur(1.2px);
  opacity: 0.85;
}

/* Öğrenci seçme penceresinde scroll fix (yükseklik + flex şart) */
#readingStudentSelectorModal .library-modal{
  display:flex;
  flex-direction:column;
}
#readingStudentSelectorModal .library-body{
  flex:1;
  min-height:0;
  overflow-y:auto;
}

/* AI sol paneli daha sıkı (aydirmaya girmesin diye) */
.reading-sidebar{
  padding:14px;
  gap:10px;
}
.reading-sidebar .cm-modern-input-group{ margin-bottom:8px; }

/* Hızlı okuma alt bildirim mesajları */
#readingFooterHint.reading-footer-hint{
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  padding: 14px 16px;
  border-top: 1px solid rgba(148,163,184,.35);
}

#readingFooterHint.hint-reading{
  background: #eef2ff;
  color: #3730a3;
}

#readingFooterHint.hint-marking{
  background: #fff7ed;
  color: #9a3412;
}

#readingFooterHint.hint-timeup{
  background: #fee2e2;
  color: #991b1b;
}

#readingFooterHint.hint-select{
  background: #ecfdf5;
  color: #065f46;
}
@font-face{
  font-family: "TemelYaziBold";
  src: url("/assets/fonts/temel-yazi-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Okuma metni */
#readingContentArea,
#readingContentArea .read-word{
  font-family: "TemelYaziBold", Arial, sans-serif;
}
body.no-scroll{
  overflow: hidden !important;
}

/* Okuma overlay sayfaya sabitlensin */
#activeReadingOverlay.reading-overlay{
  position: fixed;
  inset: 0;
  z-index: 200020;
  display: none;            /* KRİTİK: flex değil */
  flex-direction: column;
  overflow: hidden;
}

/* .active gelince açılsın */
#activeReadingOverlay.reading-overlay.active{
  display: flex;
}

/* İçerik alanı sadece burada kaydırılsın */
#readingContentArea.reading-content-area{
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Footer yönlendirme (başta gizli, showHint açacak) */
#readingFooterHint{
  display:none;
  padding:14px 16px;
  font-size:18px;
  font-weight:800;
  line-height:1.35;
  border-top:1px solid rgba(148,163,184,.35);
}

/* showHint görünür yapacak */
#readingFooterHint.is-visible{
  display:block !important;
}

#readingFooterHint.hint-reading{ background:#eef2ff; color:#3730a3; }
#readingFooterHint.hint-marking{ background:#fff7ed; color:#9a3412; }
#readingFooterHint.hint-timeup{  background:#fee2e2; color:#991b1b; }
#readingFooterHint.hint-select{  background:#ecfdf5; color:#065f46; }
/* Hızlı Okuma Alt Bilgi Barı - PRO TASARIM */
/* Hızlı Okuma Alt Bilgi Barı - GÜNCELLENMİŞ KONUM */
#readingFooterHint.reading-footer-hint {
    display: none;
    width: 100%;
    padding: 20px 30px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    
    /* DÜZELTME BURADA: */
    position: fixed; /* Absolute yerine Fixed, ekrana çiviler */
    bottom: 0px;    /* Footer'ın (yaklaşık 50px) üstüne çıkması için yükselttik */
    left: 0;
    z-index: 2147483647; /* En en üstte olsun */
    
    box-shadow: 0 -5px 20px rgba(0,0,0,0.15);
    border-top: 4px solid transparent;
    transition: all 0.3s ease;
}

#readingFooterHint.is-visible {
    display: block !important;
    animation: slideUpHint 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideUpHint {
    /* Animasyonu da yeni konuma göre ayarlıyoruz */
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Durumlara Göre Renkler */
/* 1. Bekleme (Mavi) */
#readingFooterHint.hint-idle { 
    background: #f0f9ff; color: #0369a1; border-top-color: #38bdf8; 
}
/* 2. Okuma Yapılıyor (Yeşil - Sakin) */
#readingFooterHint.hint-reading { 
    background: #f0fdf4; color: #15803d; border-top-color: #4ade80; 
}
/* 3. Süre Bitti / Hata İşaretle (Kırmızı/Turuncu Uyarı) */
#readingFooterHint.hint-marking { 
    background: #fff7ed; color: #c2410c; border-top-color: #f97316; 
}
/* 4. Son Kelime Seçimi (Mor - Final) */
#readingFooterHint.hint-select { 
    background: #faf5ff; color: #7e22ce; border-top-color: #a855f7; 
}

/* --- SCROLL KİLİTLEME (KESİN ÇÖZÜM) --- */
body.no-scroll, 
html.no-scroll {
    overflow: hidden !important;
    height: 100% !important;
    position: fixed !important; /* Sayfayı olduğu yere çiviler */
    width: 100% !important;
}

/* Okuma alanı kendi içinde kayabilsin */
#activeReadingOverlay.reading-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2147483647 !important;
    background: #f8fafc;
    display: none;
    flex-direction: column;
}

#activeReadingOverlay.reading-overlay.active {
    display: flex !important;
}

#readingContentArea {
    flex: 1;
    overflow-y: auto !important; /* Sadece burası kaysın */
    width: 100%;
    padding: 40px 10% 120px 10% !important;
    /* Metin Aralığı Düzeltmesi */
    line-height: 1.6 !important; /* 2 çok fazlaydı, 1.6 ideal */
}

/* Modal içindeki o lanet "Son Okuma" yazısını CSS ile de vuruyoruz */
#resStudentAvgLine + div {
    display: none !important;
}

/* =============================================
   AKILLI TENEFFÜS MODU (RECESS MODE)
   ============================================= */

/* 1. Tam Ekran Kaplayıcı */
#recessOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Canlı, çocuksu ve ferah bir arka plan */
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
    z-index: 2147483650 !important; /* Header'dan (..47) daha yüksek! */
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: 'Comic Sans MS', 'Verdana', sans-serif;
}

#recessOverlay.active {
    display: flex;
}

/* 2. Süslü Sayaç */
.recess-timer-box {
    background: rgba(255, 255, 255, 0.9);
    padding: 30px 60px;
    border-radius: 50px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2), 
                0 0 0 10px rgba(255,255,255,0.4);
    text-align: center;
    position: relative;
    z-index: 10;
    animation: floatBox 3s ease-in-out infinite;
}

.recess-title {
    font-size: 32px;
    color: #0891b2;
    margin-bottom: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.recess-time-display {
    font-size: 120px;
    font-weight: 900;
    color: #3b82f6;
    line-height: 1;
    text-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}

/* Animasyon: Hafif süzülme */
@keyframes floatBox {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* 3. Nöbetçi Öğrenci Köşesi */
.recess-duty-badge {
    position: absolute;
    top: 30px;
    left: 30px;
    background: #fff;
    padding: 15px 25px;
    border-radius: 20px;
    border: 3px solid #f59e0b;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 15;
    transform: rotate(-3deg);
}

.duty-title {
    font-size: 14px;
    color: #94a3b8;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.duty-names {
    font-size: 20px;
    font-weight: 800;
    color: #d97706;
}

/* 4. Son 1 Dakika Uyarıları (Yanıp Sönen) */
.recess-alerts {
    margin-top: 40px;
    display: none; /* JS ile açılacak */
    gap: 20px;
    z-index: 10;
}

.alert-pill {
    padding: 15px 30px;
    border-radius: 50px;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    animation: pulseAlert 1s infinite alternate;
}

.alert-water { background: #3b82f6; border: 4px solid #93c5fd; }
.alert-book { background: #f59e0b; border: 4px solid #fcd34d; }

@keyframes pulseAlert {
    from { transform: scale(1); opacity: 0.9; }
    to { transform: scale(1.1); opacity: 1; }
}

/* 5. Uçuşan Değerler (Balonlar) */
.floating-value {
    position: absolute;
    bottom: -100px;
    background: radial-gradient(circle at 30% 30%, #fff, #fca5a5);
    padding: 30px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: inset -10px -10px 20px rgba(0,0,0,0.1),
                5px 10px 15px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    text-align: center;
    z-index: 1;
    opacity: 0.9;
}

/* Balon ipi */
.floating-value::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    width: 2px;
    height: 30px;
    background: rgba(0,0,0,0.2);
}

/* 6. Ayar Butonu (Gizli köşede) */
.recess-settings-btn {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: rgba(255,255,255,0.5);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 2147483651; /* Overlay'in üstünde */
    transition: all 0.3s;
}
.recess-settings-btn:hover { background: #fff; transform: rotate(90deg); }

/* 7. Ayar Modalı */
.recess-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 25px 100px rgba(0,0,0,0.5);
    z-index: 2147483655;
    width: 400px;
    display: none;
}
.recess-modal.active { display: block; }
.recess-time-row { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }

/* --- AKILLI TENEFFÜS GÜNCELLEME --- */

/* 1. Kapatma Butonu (Sağ Üst) */
.recess-close-absolute {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.8);
    border: 3px solid #ef4444;
    color: #ef4444;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 50; /* Her şeyin üstünde */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.recess-close-absolute:hover {
    background: #ef4444;
    color: #fff;
    transform: rotate(90deg) scale(1.1);
}

/* 2. Sayaç Uyarı Rengi (Turuncu) */
.recess-time-display.warning {
    color: #f97316 !important; /* Turuncu */
    text-shadow: 4px 4px 0px rgba(249, 115, 22, 0.2);
    animation: pulseTimer 1s infinite alternate;
}

@keyframes pulseTimer {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

/* --- AKILLI TENEFFÜS CÜMLELERİ (GÜNCELLENMİŞ) --- */

/* --- RENKLİ VE BELİRGİN KURAL KUTULARI --- */

.pop-rule {
    position: absolute;
    font-size: 28px; /* Okunabilir ideal boyut */
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    line-height: 1.4;
    
    /* Kutu Tasarımı */
    padding: 20px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2), 
                0 0 0 4px rgba(255,255,255,0.3); /* Dış çerçeve efekti */
    
    max-width: 400px; /* Çok genişleyip ortaya girmesin */
    
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 5;
    pointer-events: none;
}

.pop-rule.visible {
    opacity: 1;
    transform: scale(1) translateX(0) translateY(0) !important; /* Transformu JS'den ezmek için */
}

/* Renk Varyasyonları (Canlı Gradyanlar) */
.rule-blue   { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.rule-orange { background: linear-gradient(135deg, #f97316, #ea580c); }
.rule-green  { background: linear-gradient(135deg, #10b981, #059669); }
.rule-purple { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.rule-red    { background: linear-gradient(135deg, #ef4444, #dc2626); }

/* =============================================
   MÜZİK ARAÇLARI - PİYANO STİLLERİ
   ============================================= */

/* Piyano Overlay (Tüm ekranı kaplar ama arkası hafif görünür) */
.piano-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 2147483648; /* En üstlerde */
    display: none;
    flex-direction: column;
    justify-content: flex-end; /* En alta yasla */
}

.piano-overlay.active { display: flex; }

/* Üst Kontrol Barı */
.piano-controls {
    position: absolute;
    /* AŞAĞI İNDİRME AYARI: %15 yaptık (Tuşların hemen üstüne denk gelir) */
    top: 15% !important; 
    left: 50%;
    transform: translateX(-50%);
    
    background: #ffffff;
    padding: 15px 30px; 
    border-radius: 50px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    border: 1px solid #e2e8f0;

    /* YAN YANA DİZİLİM */
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 15px;
    
    width: auto;
    min-width: max-content;
    z-index: 100 !important;
}

.piano-title {
    font-weight: 800; color: #1e293b; font-size: 18px;
    display: flex; align-items: center; gap: 10px;
}


.piano-close-btn {
    background: #ef4444; color: #fff; border: none;
    padding: 8px 16px; border-radius: 20px; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
}
.piano-close-btn:hover { background: #dc2626; transform: translateY(-2px); }

/* Tuşlar Konteyneri */
.piano-keys-container {
    width: 100%;
    height: 350px; /* Piyano yüksekliği (Çocuklar için büyük) */
    background: #1e293b; /* Ahşap/Kasa rengi */
    padding: 15px 20px 0 20px; /* Üstten ve yanlardan boşluk */
    display: flex;
    justify-content: center;
    position: relative;
    box-shadow: 0 -10px 50px rgba(0,0,0,0.5);
    border-top: 5px solid #334155;
}



/* Notalar */
.key-label {
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 18px;
}
.show-labels .key-label { opacity: 1; }

/* =============================================
   İSTİKLAL MARŞI TÖREN MODU
   ============================================= */

.anthem-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #e30a17; /* Türk Bayrağı Kırmızısı */
    z-index: 2147483649; /* Piyanonun bir üstü */
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.anthem-overlay.active { display: flex; }

/* --- CSS İLE DALGALANAN BAYRAK EFEKTİ --- */
.flag-container {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; pointer-events: none;
}

/* Dalga Efekti (Gradient ile) */
.flag-wave {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(110deg, 
        rgba(255,255,255,0) 30%, 
        rgba(255,255,255,0.1) 40%, 
        rgba(255,255,255,0) 50%, 
        rgba(0,0,0,0.1) 60%, 
        rgba(255,255,255,0) 70%);
    background-size: 200% 100%;
    animation: flagWaveAnim 8s infinite linear;
}

@keyframes flagWaveAnim {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Ay ve Yıldız (CSS Çizimi) */
.flag-star-moon {
    position: absolute;
    top: 50%; left: 30%; /* Standart oranlara yakın konum */
    transform: translate(-50%, -50%);
    width: 400px; height: 400px;
    opacity: 0.15; /* Arka planda hafif görünsün */
}

.moon {
    position: absolute;
    top: 50px; left: 50px;
    width: 300px; height: 300px;
    border-radius: 50%;
    box-shadow: -40px 0 0 0 #fff; /* Hilal efekti */
    transform: rotate(-45deg);
}

.star {
    position: absolute;
    top: 110px; left: 290px;
    color: #fff;
    font-size: 100px;
    transform: rotate(35deg);
}

/* --- ARAYÜZ --- */
.anthem-header {
    position: absolute; top: 40px; width: 100%;
    display: flex; justify-content: center; align-items: center;
    z-index: 10;
}

.anthem-title {
    font-family: 'Times New Roman', serif;
    font-size: 48px; color: #fff; font-weight: 700;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
    letter-spacing: 5px;
}

.anthem-close-btn {
    position: absolute; right: 40px;
    background: rgba(0,0,0,0.3); color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 10px 20px; border-radius: 30px;
    cursor: pointer; font-size: 16px; transition: all 0.3s;
}
.anthem-close-btn:hover { background: #fff; color: #e30a17; }

/* Karaoke Metin Alanı */
.anthem-lyrics-box {
    z-index: 10;
    text-align: center;
    width: 80%;
    max-width: 900px;
}

.lyric-line {
    font-family: 'Segoe UI', sans-serif;
    font-size: 32px;
    color: rgba(255, 255, 255, 0.6); /* Pasif renk */
    margin-bottom: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Aktif Satır (Parlak Beyaz) */
.lyric-line.active {
    color: #ffffff;
    transform: scale(1.1);
    text-shadow: 0 0 20px rgba(255,255,255,0.8);
}

/* Başlat Butonu */
.anthem-start-btn {
    position: absolute; bottom: 50px;
    background: #fff; color: #e30a17;
    border: none; padding: 20px 60px;
    font-size: 24px; font-weight: 800;
    border-radius: 50px; cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 20; transition: transform 0.2s;
}
.anthem-start-btn:hover { transform: scale(1.05); }
.anthem-start-btn:active { transform: scale(0.95); }

/* =============================================
   100'LÜK TABLO - MATEMATİKSEL KESİN ÇÖZÜM
   ============================================= */

/* 1. ANA PENCERE (Formüllü Genişlik) */
#hundredChartOverlay .library-modal {
    /* YÜKSEKLİK: Ekranın %96'sı (Senin sevdiğin ayar) */
    height: 96vh !important;
    
    /* GENİŞLİK: İşte sihirli formül burası! */
    /* 96vh (Kare Tablo Genişliği) + 320px (Sol Panel + Boşluklar) */
    width: calc(96vh + 320px) !important;
    
    /* Güvenlik: Ekranı taşarsa diye sınır */
    max-width: 99vw !important;
    max-height: none !important;
    
    background: #f1f5f9 !important;
    display: flex;
    flex-direction: column;
    margin: auto;
    overflow: hidden;
}

/* 2. GÖVDE */
#hundredChartOverlay .library-body {
    flex: 1;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    padding: 0 !important;
    width: 100%;
}

/* 3. SOL PANEL (Sabit) */
.hundred-sidebar {
    width: 280px; /* Sabit */
    background: #ffffff;
    border-right: 1px solid #cbd5e1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;
    flex-shrink: 0;
    z-index: 20;
    box-shadow: 5px 0 10px rgba(0,0,0,0.05);
}

/* BUTONLAR (3'lü Grid) */
.rhythmic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.rhythm-btn {
    aspect-ratio: 1/1;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #e2e8f0; background: #fff; border-radius: 8px;
    font-weight: 800; font-size: 18px; color: #64748b; cursor: pointer;
    transition: all 0.2s;
}
.rhythm-btn:hover { border-color: #6366f1; color: #6366f1; transform: scale(1.05); }
.rhythm-btn.active { background: #6366f1; color: #fff; border-color: #6366f1; }

/* 4. IZGARA ALANI */
.hundred-grid-area {
    flex: 1; /* Kalan alanı doldur */
    background: #e2e8f0;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 5. TABLO YAPISI (Tam Kare) */
.hundred-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(10, 1fr);
    gap: 0.5vh;
    
    /* Yükseklik: Alanın neredeyse tamamı */
    height: 96%;
    
    /* Genişlik: Yükseklik neyse o (KARE) */
    aspect-ratio: 1 / 1;
    
    width: auto;
}

/* 6. HÜCRE TASARIMI */
.grid-cell {
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 0 #cbd5e1, 0 5px 10px rgba(0,0,0,0.1); 
    display: flex; align-items: center; justify-content: center;
    font-family: 'Segoe UI', sans-serif; font-weight: 800; color: #475569;
    font-size: 2.5vh;
    cursor: pointer; transition: all 0.1s; user-select: none;
}
.grid-cell:hover { transform: translateY(2px); background-color: #f8fafc; }
.grid-cell.active {
    background: #6366f1; color: #ffffff; border-color: #4f46e5;
    box-shadow: 0 2px 0 #3730a3, 0 0 15px rgba(99, 102, 241, 0.4);
    transform: translateY(2px);
}
.grid-cell.playing {
    background: #f59e0b !important; color: #fff !important;
    transform: scale(1.15) !important; z-index: 50;
    border: 2px solid #fff;
}
.grid-cell.hidden {
    background: #cbd5e1; color: transparent; border: none;
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.1);
}

/* =============================================
   İNTERAKTİF TÜRKİYE HARİTASI - FINAL STİL
   ============================================= */

/* 1. HARİTA PENCERESİ (Modal Başlık vb.) */
.map-header {
    background: linear-gradient(to right, #0ea5e9, #2563eb); /* Mavi degrade */
    padding: 0 20px;
    height: 60px;
    display: flex; justify-content: space-between; align-items: center;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.map-title {
    font-size: 22px; font-weight: 800; letter-spacing: 0.5px;
    display: flex; align-items: center; gap: 10px;
}

/* 2. HARİTA ALANI (Gövde) */
.map-container {
    flex: 1;
    display: flex; justify-content: center; align-items: center;
    padding: 20px;
    overflow: hidden;
    position: relative;
    background: #e0f2fe; /* Açık Mavi (Deniz Rengi) */
}

/* 3. SVG HARİTA ELEMENTLERİ */
svg#turkeySvg {
    width: 100%; height: 100%;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.15)); /* Haritaya derinlik ver */
}

path {
    fill: #f1f5f9;       /* Şehirlerin normal rengi (Açık Gri) */
    stroke: #94a3b8;     /* Sınır çizgileri (Koyu Gri) */
    stroke-width: 0.8px;
    transition: all 0.2s ease; /* Renk geçişleri yumuşak olsun */
    cursor: pointer;     /* Tıklanabilir el işareti */
}

/* Not: Hover rengini JS ile yapıyoruz ama CSS yedeği de dursun */
path:hover {
    fill: #fcd34d; /* Sarı */
    stroke: #fff;
    z-index: 10;
}

/* 4. GEZEN İSİM ETİKETİ (TOOLTIP) */
.map-tooltip {
    position: fixed; /* Ekrana göre sabitle */
    background: rgba(15, 23, 42, 0.9); /* Koyu lacivert/siyah */
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 700;
    pointer-events: none; /* ÖNEMLİ: Mouse bunu görmezden gelsin ki alta tıklayabilelim */
    z-index: 200100; /* En üstte durmalı */
    transform: translate(15px, 15px); /* Mouse'un biraz sağ altına kaydır */
    white-space: nowrap; /* Alt satıra inmesin */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    display: none; /* Başlangıçta gizli */
    border: 1px solid rgba(255,255,255,0.1);
}

/* 5. ŞEHİR BİLGİ KARTI (POPUP) */
.city-info-card {
    position: absolute;
    bottom: 30px; left: 30px;
    width: 320px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
    overflow: hidden;
    transform: translateY(150%); /* Aşağıda saklansın */
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* Yaylanarak çıksın */
    z-index: 100;
}

.city-info-card.active {
    transform: translateY(0); /* Yukarı fırlasın */
}

.city-card-header {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    padding: 15px 20px;
    display: flex; align-items: center; gap: 15px;
    color: #fff;
}

.city-plate {
    background: #fff; color: #0284c7;
    padding: 6px 12px; border-radius: 8px; 
    font-weight: 900; font-size: 18px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.city-name { font-size: 20px; font-weight: 800; flex: 1; letter-spacing: 0.5px; }

.city-card-body { padding: 20px; background: #fff; }

.info-row {
    margin-bottom: 12px; font-size: 16px; color: #475569;
    display: flex; align-items: center; gap: 12px;
    font-weight: 500;
}
.info-row i { color: #0ea5e9; font-size: 18px; width: 24px; text-align: center; }

/* 6. OYUN MODU STİLLERİ */
.map-btn-game {
    background: rgba(255,255,255,0.2); 
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 8px 16px;
    border-radius: 20px; font-weight: 700; font-size: 14px;
    cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; gap: 8px;
}
.map-btn-game:hover { background: #fff; color: #0284c7; }

/* Oyun Skoru ve Hedef */
.map-game-panel {
    background: rgba(0,0,0,0.2);
    padding: 5px 15px; border-radius: 8px;
    display: flex; gap: 20px; align-items: center;
    margin-right: 15px;
}
.game-question { font-size: 14px; color: rgba(255,255,255,0.9); }

.score-badge {
    font-size: 16px; font-weight: bold; margin-left: 10px;
    display: inline-flex; align-items: center; gap: 5px;
}
.score-badge.correct { color: #86efac; } /* Yeşil */
.score-badge.wrong { color: #fca5a5; }   /* Kırmızı */

/* Oyun sırasında doğru/yanlış bilinen şehir renkleri */
.game-correct { fill: #22c55e !important; stroke: #fff !important; }
.game-wrong { fill: #ef4444 !important; stroke: #fff !important; }

/* --- HARİTA BÖLGE KONTROL PANELİ --- */

/* --- HARİTA PANELİ (SAĞA ALINDI) --- */
.map-controls-panel {
    position: absolute;
    top: 70px; /* Header'ın altına inmesi için */
    right: 20px; /* ARTIK SAĞDA! */
    left: auto;  /* Solu iptal et */
    background: rgba(255, 255, 255, 0.95);
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: flex; flex-direction: column; gap: 8px;
    width: 170px;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

/* Mesafe Ölçer Butonu */
.btn-ruler { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.btn-ruler:hover { background: #0ea5e9; color: #fff; }
.btn-ruler.active { background: #ef4444; color: #fff; border-color: #ef4444; animation: pulseRed 1.5s infinite; }

@keyframes pulseRed {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* Mesafe Çizgisi (SVG Line) */
.distance-line {
    stroke: #ef4444;
    stroke-width: 3px;
    stroke-dasharray: 10;
    animation: dashAnim 1s linear infinite;
    pointer-events: none;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3));
}

@keyframes dashAnim { to { stroke-dashoffset: -20; } }

/* Mesafe Etiketi (X km yazısı) */
.distance-label {
    position: absolute;
    background: #ef4444; color: #fff;
    padding: 5px 10px; border-radius: 20px;
    font-size: 14px; font-weight: 800;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    pointer-events: none;
    z-index: 1001;
}

.panel-title {
    font-size: 14px; font-weight: 800; color: #334155;
    border-bottom: 2px solid #e2e8f0;
    padding-bottom: 5px; margin-bottom: 5px;
    text-transform: uppercase; letter-spacing: 0.5px;
}

.region-btn {
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    color: #475569;
    background: #f1f5f9;
    display: flex; align-items: center; gap: 8px;
}

.region-btn:hover { transform: translateX(5px); box-shadow: 2px 2px 5px rgba(0,0,0,0.1); }

/* Bölge Buton Renkleri (Hover olunca o bölgenin rengini alsın) */
.btn-marmara:hover { background: #10b981; color: #fff; }    /* Yeşilimsi */
.btn-ege:hover { background: #3b82f6; color: #fff; }        /* Mavi */
.btn-akdeniz:hover { background: #f43f5e; color: #fff; }    /* Kırmızı */
.btn-icanadolu:hover { background: #f59e0b; color: #fff; }  /* Turuncu */
.btn-karadeniz:hover { background: #22c55e; color: #fff; }  /* Koyu Yeşil */
.btn-dogu:hover { background: #8b5cf6; color: #fff; }       /* Mor */
.btn-guneydogu:hover { background: #d97706; color: #fff; }  /* Koyu Turuncu */

.btn-reset { background: #cbd5e1; color: #334155; justify-content: center; text-align: center; }
.btn-reset:hover { background: #64748b; color: #fff; transform: none; }

.btn-rainbow { background: linear-gradient(135deg, #f59e0b, #ec4899, #3b82f6); color: #fff; border:none; }
.btn-rainbow:hover { opacity: 0.9; transform: scale(1.05); }

.panel-divider { height: 1px; background: #e2e8f0; margin: 5px 0; }

/* Harita üzerinde pasifleşen şehirler için */
path.dimmed {
    fill: #cbd5e1 !important; /* Soluk gri */
    stroke: #e2e8f0 !important;
    opacity: 0.4;
}

/* =============================================
   MÜZİK ATÖLYESİ MENÜ STİLLERİ
   ============================================= */

.instrument-select-modal {
    background: #fff;
    border-radius: 24px;
    width: 90%;
    max-width: 600px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.4);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.instrument-select-header {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.instrument-select-header h3 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.instrument-grid-container {
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    background: #fff1f2; /* Hafif pembe zemin */
}

.instrument-card {
    background: #fff;
    border: 2px solid #fda4af;
    border-radius: 20px;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(225, 29, 72, 0.1);
}

.instrument-card:hover {
    transform: translateY(-5px);
    border-color: #e11d48;
    box-shadow: 0 10px 25px rgba(225, 29, 72, 0.2);
}

.inst-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin-bottom: 15px;
    color: #fff;
}

.piano-icon { background: linear-gradient(135deg, #1e293b, #0f172a); }
.guitar-icon { background: linear-gradient(135deg, #f97316, #ea580c); }
.drum-icon   { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.xylo-icon   { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }

.inst-name {
    font-size: 18px;
    font-weight: 800;
    color: #334155;
}

/* Mobilde tek sütun */
@media (max-width: 500px) {
    .instrument-grid-container {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   PİYANO STİLLERİ (FİNAL)
   ============================================= */

/* 1. ANA KAPSAYICI */
.piano-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    z-index: 2147483648; 
    display: none;
    flex-direction: column;
    justify-content: flex-end; /* Piyanoyu en alta yasla */
}

.piano-overlay.active { display: flex; }

/* 2. KONTROL PANELİ (Modern, Aşağıda) */
.piano-controls {
    position: absolute;
    top: 15%; /* Tuşların üzerine binmesin diye ideal yükseklik */
    left: 50%;
    transform: translateX(-50%);
    
    background: #ffffff;
    padding: 15px 30px; 
    border-radius: 20px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    border: 1px solid #e2e8f0;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 15px;
    
    width: auto;
    max-width: 95%;
    z-index: 100;
}

.piano-title {
    font-weight: 800; color: #1e293b; font-size: 18px;
    display: flex; align-items: center; gap: 10px;
    padding-right: 15px; border-right: 2px solid #e2e8f0;
    margin-right: 5px; white-space: nowrap;
}
.piano-title i { color: #3b82f6; font-size: 20px; }

.piano-select {
    padding: 12px 20px; border-radius: 12px;
    border: 2px solid #cbd5e1; background-color: #f8fafc;
    font-weight: 700; color: #334155; font-size: 15px;
    cursor: pointer; outline: none; min-width: 220px;
}

.piano-ctrl-btn {
    padding: 12px 25px; border: 2px solid #94a3b8; border-radius: 12px;
    background: #cbd5e1; color: #0f172a; /* Koyu renk, net */
    font-weight: 800; font-size: 15px; cursor: pointer;
    display: flex; align-items: center; gap: 8px;
    white-space: nowrap; transition: all 0.2s;
    box-shadow: 0 3px 0 #64748b;
}

.piano-ctrl-btn:hover { 
    background: #fff; border-color: #3b82f6; color: #3b82f6; 
    transform: translateY(-2px); 
}
.piano-ctrl-btn:active { transform: translateY(2px); box-shadow: none; }

.piano-ctrl-btn.active { 
    background: #3b82f6; color: #fff; border-color: #2563eb;
    box-shadow: 0 3px 0 #1d4ed8; 
}

.piano-ctrl-btn.record:hover { 
    background: #ef4444; color: #fff; border-color: #ef4444; 
}
.piano-ctrl-btn.record.recording { 
    background: #ef4444; color: #fff; animation: pulseRecord 1s infinite; 
}
@keyframes pulseRecord { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } }

.piano-close-btn {
    width: 45px; height: 45px; border-radius: 12px;
    background: #fee2e2; color: #ef4444; border: 2px solid #fca5a5;
    cursor: pointer; font-size: 20px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; margin-left: 10px;
}
.piano-close-btn:hover { background: #ef4444; color: #fff; transform: rotate(90deg); }

/* 3. TUŞ TAKIMI ALANI */
.piano-keys-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 340px;
    margin: 0 auto;
    
    background: linear-gradient(to bottom, #1e293b, #0f172a); /* Ahşap Kasa */
    border-top: 8px solid #334155; 
    border-radius: 0 0 16px 16px;
    
    display: flex;
    justify-content: center;
    padding: 15px 0 20px 0; /* Yan boşluk yok, hesap şaşmaz */
    
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    overflow: hidden;
}

/* Kırmızı Keçe Şeridi */
.piano-keys-container::before {
    content: ''; position: absolute;
    top: 0; left: 0; width: 100%; height: 12px;
    background: #ef4444; z-index: 5;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* BEYAZ TUŞLAR */
.piano-key-white {
    flex: 1; height: 100%; margin: 0 1px;
    background: linear-gradient(to bottom, #ffffff 50%, #f1f5f9 100%);
    border-radius: 0 0 6px 6px;
    border-bottom: 8px solid #64748b;
    box-shadow: inset -1px 0 2px rgba(0,0,0,0.15);
    
    position: relative; z-index: 1; cursor: pointer;
    
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 20px;
    color: #000; font-weight: 900; font-size: 14px; user-select: none;
}
.piano-key-white:active, .piano-key-white.pressed {
    transform: translateY(4px);
    border-bottom-width: 2px;
    background: linear-gradient(to bottom, #eff6ff 0%, #bfdbfe 100%);
    color: #1e3a8a;
}

/* SİYAH TUŞLAR */
.piano-key-black {
    /* Konum JS'den geliyor */
    width: 4%; height: 60%;
    position: absolute; top: 0; z-index: 10;
    
    background: linear-gradient(to right, #000000 0%, #2c2c2c 50%, #000000 100%);
    border-radius: 0 0 4px 4px;
    border-bottom: 10px solid #000;
    border-left: 1px solid rgba(255,255,255,0.2);
    box-shadow: 2px 4px 8px rgba(0,0,0,0.6);
    cursor: pointer;
}
.piano-key-black:active, .piano-key-black.pressed {
    transform: translateY(4px);
    border-bottom-width: 4px;
    background: #111;
}

/* Notalar Gizli/Açık */
.key-label { display: none; }
.piano-keys-container.show-labels .key-label { display: block; }

/* =============================================
   GİTAR STİLLERİ (PROFESYONEL GÖRÜNÜM)
   ============================================= */

.guitar-body-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Aşağı yasla */
    padding-bottom: 0;
    overflow: hidden;
}

/* Gitarın Ahşap Gövdesi */
.guitar-wood {
    width: 500px;
    height: 600px;
    background: radial-gradient(circle at 50% 30%, #a05a2c 0%, #5d3a1a 80%, #3e2723 100%);
    border-radius: 200px 200px 0 0; /* Gitarın alt gövde şekli */
    border: 8px solid #2e1a0f;
    border-bottom: none;
    box-shadow: 0 0 50px rgba(0,0,0,0.6);
    position: relative;
    display: flex;
    justify-content: center;
}

/* Ses Deliği (Ortadaki Siyah Daire) */
.guitar-hole {
    position: absolute;
    top: 120px;
    width: 240px;
    height: 240px;
    background: #180c07;
    border-radius: 50%;
    border: 8px solid #4a332a; /* Rozet */
    box-shadow: inset 0 0 40px #000;
    z-index: 1;
}

/* Alt Köprü (Bridge) */
.guitar-bridge {
    position: absolute;
    bottom: 80px;
    width: 320px;
    height: 50px;
    background: #2e1a0f;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    z-index: 5;
}
.guitar-bridge::after {
    content: ''; /* Köprü kemiği */
    position: absolute;
    top: 5px; left: 10px; right: 10px; height: 6px;
    background: #eaddcf;
    border-radius: 4px;
}

/* Tellerin Kapsayıcısı */
.guitar-strings-wrapper {
    position: absolute;
    top: 0;
    bottom: 100px; /* Köprüye kadar */
    width: 200px; /* Tellerin yayılacağı genişlik */
    display: flex;
    justify-content: space-between;
    z-index: 10;
}

/* Gitar Teli */
.guitar-string {
    height: 100%;
    background: linear-gradient(90deg, #888, #fff, #888); /* Gümüş/Çelik efekti */
    position: relative;
    cursor: pointer;
    box-shadow: 2px 0 5px rgba(0,0,0,0.3);
    transition: transform 0.05s;
}

/* Tel Kalınlıkları (Kalından İnceye: E A D G B E) */
.guitar-string[data-string="0"] { width: 5px; background: linear-gradient(90deg, #bcaaa4, #eefebe, #bcaaa4); } /* Bakır */
.guitar-string[data-string="1"] { width: 4px; background: linear-gradient(90deg, #bcaaa4, #eefebe, #bcaaa4); }
.guitar-string[data-string="2"] { width: 3.5px; background: linear-gradient(90deg, #bcaaa4, #eefebe, #bcaaa4); }
.guitar-string[data-string="3"] { width: 3px; } /* Çelik */
.guitar-string[data-string="4"] { width: 2px; }
.guitar-string[data-string="5"] { width: 1.5px; }

/* Titreşim Animasyonu */
.guitar-string.vibrating {
    animation: vibrate 0.1s infinite linear;
}

@keyframes vibrate {
    0% { transform: translateX(0); }
    25% { transform: translateX(2px); }
    75% { transform: translateX(-2px); }
    100% { transform: translateX(0); }
}

/* =============================================
   KSİLOFON STİLLERİ
   ============================================= */

.xylophone-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding-bottom: 50px;
}

/* Arka Destek Çubukları (Ahşap Raylar) */
.xylo-rail {
    position: absolute;
    left: 10%; 
    right: 10%;
    height: 30px;
    background: #5d4037;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 1; /* Tuşların altında kalsın */
    transform: rotate(-2deg); /* Hafif açılı duruş */
}
.xylo-rail.top { top: 35%; transform: rotate(-2deg) translateY(-10px); }
.xylo-rail.bottom { bottom: 35%; transform: rotate(-2deg) translateY(10px); }

/* Tuş Alanı */
.xylo-keys-area {
    display: flex;
    gap: 15px;
    z-index: 5;
    align-items: center; /* Ortala */
}

/* Ksilofon Tuşu */
.xylo-key {
    width: 65px;
    /* Yükseklik ve Renk JS'den gelecek */
    border-radius: 8px;
    box-shadow: 5px 10px 20px rgba(0,0,0,0.3), 
                inset 2px 2px 5px rgba(255,255,255,0.4),
                inset -2px -2px 5px rgba(0,0,0,0.2);
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: flex-end; /* Yazıyı alta al */
    justify-content: center;
    padding-bottom: 20px;
    transition: transform 0.1s, filter 0.1s;
    
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.2);
}

.xylo-key:active, .xylo-key.active {
    transform: scale(0.95);
    filter: brightness(1.2); /* Parlama efekti */
}

/* Vida Başları (Görsel Detay) */
.xylo-key::before, .xylo-key::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: radial-gradient(circle, #e5e7eb, #9ca3af);
    border-radius: 50%;
    box-shadow: 0 2px 2px rgba(0,0,0,0.3);
}
.xylo-key::before { top: 20px; }
.xylo-key::after { bottom: 50px; }

/* =============================================
   MELODİKA STİLLERİ
   ============================================= */

/* İkon Rengi */
.melodica-icon { background: linear-gradient(135deg, #06b6d4, #0891b2); }

.melodica-wrapper {
    width: 100%; 
    height: 100%;
    display: flex; 
    justify-content: center; 
    align-items: center;
    padding-bottom: 50px;
    
    /* --- DEĞİŞİKLİK BURADA --- */
    /* Melodikayı panelden ayırmak için üstten boşluk verdik */
    padding-top: 120px; 
    box-sizing: border-box; 
}

/* Hortum ve Ağızlık */
.melodica-tube-container {
    display: flex; align-items: center;
    margin-right: -10px; z-index: 1;
}

.melodica-mouthpiece {
    width: 60px; height: 20px;
    background: #1e293b;
    border-radius: 10px 0 0 10px;
}

.melodica-hose {
    width: 80px; height: 15px;
    background: #cbd5e1;
    border-top: 4px solid #94a3b8; /* Gölgelendirme */
    border-radius: 0;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.1);
}

/* Ana Gövde */
.melodica-body {
    background: #06b6d4; /* Melodika Mavisi */
    padding: 20px 20px 30px 40px; /* Soldan boşluk (Hortum girişi) */
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4), inset 0 -10px 20px rgba(0,0,0,0.1);
    border-bottom: 8px solid #0e7490;
    display: flex; flex-direction: column; align-items: center;
    position: relative;
}

/* Marka / Kayış Yazısı */
.melodica-strap {
    font-size: 14px; font-weight: 800; color: rgba(255,255,255,0.8);
    margin-bottom: 10px; letter-spacing: 2px; text-transform: uppercase;
    background: rgba(0,0,0,0.1); padding: 5px 15px; border-radius: 20px;
}

/* Tuş Alanı */
.melodica-keys-area {
    display: flex; gap: 0; /* Tuşlar bitişik */
    background: #1e293b; padding: 5px; border-radius: 8px;
}

/* Melodika Tuşları */
.m-key {
    width: 45px; height: 180px;
    background: #fff;
    border: 1px solid #94a3b8;
    border-bottom: 6px solid #cbd5e1;
    border-radius: 0 0 4px 4px;
    cursor: pointer; position: relative;
    box-shadow: inset -2px 0 5px rgba(0,0,0,0.05);
}
.m-key:first-child { border-radius: 4px 0 4px 4px; }
.m-key:last-child { border-radius: 0 4px 4px 4px; }

.m-key.black {
    width: 30px; height: 110px;
    background: #0f172a;
    border-bottom: 6px solid #000;
    margin-left: -15px; margin-right: -15px; /* Üstüne bindirme */
    z-index: 10;
}

.m-key:active, .m-key.pressed {
    transform: translateY(4px);
    border-bottom-width: 2px;
}
.m-key.white.pressed { background: #eff6ff; }
.m-key.black.pressed { background: #334155; }

/* MELODİKA NOTA ETİKETLERİ */
.m-key span {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    font-weight: 800;
    color: #94a3b8;
    pointer-events: none;
    display: none; /* Varsayılan gizli */
}

/* Siyah tuş notası */
.m-key.black span {
    color: #fff;
    bottom: 5px;
    font-size: 10px;
}

/* Notalar Açıkken Göster */
.melodica-keys-area.show-labels .m-key span {
    display: block;
}

/* Öğretme Modunda Yanan Tuş */
.m-key.guide-active {
    background: #facc15 !important; /* Sarı yanar */
    box-shadow: 0 0 15px #facc15 !important;
    transform: translateY(2px);
}

/* HEADER İÇİNDEKİ KUMANDA KISAYOL BUTONU */
.header-remote-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%); /* Yeşil tonları */
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 50px; /* Hap şeklinde yuvarlak */
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.header-remote-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.5);
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.header-remote-btn:active {
    transform: translateY(1px);
    box-shadow: 0 2px 5px rgba(16, 185, 129, 0.3);
}

.header-remote-btn i {
    font-size: 16px;
    animation: pulseRemoteIcon 2s infinite; /* İkon hafifçe yanıp sönsün */
}

/* İkon Animasyonu */
@keyframes pulseRemoteIcon {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* MOBİL UYUMU: Mobilde yazı gizlensin, sadece ikon kalsın */
/* YENİ KOD (MOBİLDE GİZLEME) */
@media (max-width: 991px) {
    .header-remote-btn {
        display: none !important;
    }
}

/* HEADER GÜNCELLEME TARİHİ STİLİ */
.header-version-text {
    /* Koyu, profesyonel bir arka plan (Slate Mavisi tonları) */
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    
    color: #ffffff; /* Beyaz yazı */
    padding: 8px 20px;
    border-radius: 50px; /* Tam yuvarlak kenarlar (Hap şekli) */
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    
    /* İstenilen "Gölgeli ve Belirgin" Efekt */
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.2), 
                inset 0 1px 0 rgba(255, 255, 255, 0.1); /* Üstten hafif parlama */
    
    border: 1px solid rgba(255, 255, 255, 0.1); /* İnce dış hat */
    text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* Yazı okunaklılığı için gölge */
    
    white-space: nowrap; /* Satır kaymasını engelle */
    transition: all 0.3s ease;
    cursor: default;
}

/* Üzerine gelince hafif hareket efekti */
.header-version-text:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.3);
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
}

/* MOBİL UYUMU (Telefonda çok yer kaplamaması için fontu küçültelim) */
@media (max-width: 768px) {
    .header-version-text {
        font-size: 10px;
        padding: 6px 12px;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 150px; /* Çok uzunsa kısalt */
    }
}

/* =============================================
   OYUN AÇILIŞ (LAUNCH) POPUP STİLLERİ
   ============================================= */

.launch-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Uzay temalı koyu lacivert ve mor geçişli arka plan */
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(88, 28, 135, 0.9));
    backdrop-filter: blur(8px);
    z-index: 200060; /* En üstlerde */
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.launch-overlay.active {
    display: flex;
    opacity: 1;
}

.launch-modal {
    background: #ffffff;
    width: 90%;
    max-width: 600px;
    border-radius: 30px;
    padding: 40px;
    text-align: center;
    position: relative;
    box-shadow: 0 0 50px rgba(139, 92, 246, 0.5); /* Mor dış ışıltı */
    border: 4px solid #fff;
    animation: zoomInLaunch 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-image: radial-gradient(circle at top right, #f3e8ff 0%, #fff 40%);
}

@keyframes zoomInLaunch {
    from { transform: scale(0.8) translateY(50px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.launch-close {
    position: absolute;
    top: 20px; right: 20px;
    background: #f1f5f9;
    border: none;
    width: 40px; height: 40px;
    border-radius: 50%;
    font-size: 20px; color: #64748b;
    cursor: pointer; transition: all 0.2s;
}
.launch-close:hover { background: #ef4444; color: #fff; transform: rotate(90deg); }

.launch-icon-box {
    width: 100px; height: 100px;
    background: linear-gradient(135deg, #8b5cf6, #d946ef);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 10px 30px rgba(139, 92, 246, 0.4);
}

.launch-rocket {
    font-size: 50px; color: #fff;
    animation: rocketFloat 2s infinite ease-in-out;
}

@keyframes rocketFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

.launch-title {
    font-size: 28px; font-weight: 900;
    color: #1e293b; margin: 0 0 10px;
    letter-spacing: 1px;
}

.launch-subtitle {
    font-size: 16px; color: #64748b; margin-bottom: 25px;
}

.launch-date-display {
    display: inline-block;
    background: #fef3c7; color: #d97706;
    padding: 8px 20px; border-radius: 50px;
    font-weight: 800; font-size: 18px;
    margin-bottom: 30px;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2);
}

/* --- SAYAÇ --- */
.launch-timer {
    display: flex; justify-content: center; align-items: center;
    gap: 10px; margin-bottom: 30px;
}

.timer-box {
    background: #1e293b; color: #fff;
    width: 70px; height: 75px;
    border-radius: 12px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    box-shadow: 0 5px 15px rgba(30, 41, 59, 0.3);
}

.timer-box span {
    font-size: 32px; font-weight: 700; line-height: 1;
    font-family: 'Courier New', monospace;
    color: #4ade80; /* Fosforlu Yeşil */
}

.timer-box label {
    font-size: 9px; margin-top: 4px; opacity: 0.7;
    font-weight: 600; letter-spacing: 1px;
}

.timer-sep {
    font-size: 24px; font-weight: 900; color: #cbd5e1;
    margin-top: -15px;
}

.launch-info {
    font-size: 14px; color: #475569; margin-bottom: 25px;
    padding: 0 20px;
}

.launch-btn {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: #fff; border: none;
    padding: 15px 40px; border-radius: 50px;
    font-size: 16px; font-weight: 800;
    cursor: pointer; transition: all 0.2s;
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.4);
}

.launch-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 15px 35px rgba(139, 92, 246, 0.5);
}

/* --- SANAL MARKET KASASI STİLLERİ (FİNAL DÜZELTME) --- */

/* 1. Üst Bar (Kasa Ekranı) */
.money-header {
    background: #14532d; /* Koyu Yeşil */
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.money-title { 
    font-size: 20px; 
    font-weight: 800; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
}

/* Dijital Ekran */
.money-display-screen {
    background: #000;
    color: #22c55e; /* Fosforlu Yeşil */
    font-family: 'Courier New', monospace;
    padding: 10px 20px;
    border-radius: 8px;
    border: 4px solid #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 300px;
    box-shadow: inset 0 0 15px rgba(0,255,0,0.2);
}
.money-question { font-size: 13px; color: #86efac; margin-bottom: 4px; }
.money-total-display { font-size: 26px; font-weight: 700; letter-spacing: 2px; }

.money-controls { display: flex; gap: 10px; align-items: center; }
.money-select { padding: 8px; border-radius: 6px; border: none; font-weight: 700; color: #1e293b; cursor: pointer; }
.money-btn-refresh {
    width: 36px; height: 36px; border-radius: 50%; border: none;
    background: #fbbf24; color: #78350f; font-size: 16px; cursor: pointer;
    transition: transform 0.2s;
}
.money-btn-refresh:hover { transform: rotate(180deg); }

/* 2. Orta Alan (Masa / Çalışma Alanı) */
.money-workspace {
    flex: 1 1 auto; /* Kalan tüm boşluğu kapla */
    width: 100%;
    background-color: #86efac; /* Masa Rengi */
    background-image: radial-gradient(#4ade80 10%, transparent 10%);
    background-size: 20px 20px;
    position: relative; /* İçindeki elemanlar buna göre hizalanır */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 0; /* Taşmayı önle */
    overflow: hidden;
    z-index: 1;
}

/* Sürükleme Alanı */
.money-drop-zone {
    width: 100%; 
    height: 100%;
    position: absolute; 
    top: 0; 
    left: 0;
    z-index: 1; /* En altta */
}

.drop-hint {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 24px; color: rgba(20, 83, 45, 0.2); font-weight: 800;
    pointer-events: none; user-select: none;
}

/* 3. Ürün Kartı (Fiyat Etiketi) */
.money-product-card {
    position: absolute; 
    top: 20px; 
    left: 20px;
    background: #fff; 
    padding: 15px 20px; 
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: flex; 
    align-items: center; 
    gap: 15px;
    z-index: 20; /* Paraların üstünde dursun */
    border: 3px solid #3b82f6;
    min-width: 200px;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.product-icon {
    width: 50px; height: 50px; background: #fef3c7; color: #d97706;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.product-name { font-size: 14px; color: #64748b; font-weight: 600; }
.product-price { font-size: 26px; color: #1e293b; font-weight: 900; }
.payment-info { 
    font-size: 13px; color: #ef4444; border-left: 2px dashed #cbd5e1; 
    margin-left: 15px; padding-left: 15px; min-width: 90px; text-align: center;
}

/* 4. Kontrol Butonu (Ödemeyi Tamamla) */
.money-check-btn {
    position: absolute; bottom: 20px; right: 20px;
    background: linear-gradient(135deg, #22c55e, #15803d);
    color: #fff; border: none; padding: 15px 40px;
    border-radius: 50px; font-size: 18px; font-weight: 800;
    box-shadow: 0 5px 20px rgba(21, 128, 61, 0.4);
    cursor: pointer; z-index: 50;
    transition: transform 0.2s;
}
.money-check-btn:hover { transform: scale(1.05); }

/* 5. Alt Cüzdan Alanı */
.money-wallet {
    height: auto; 
    min-height: 200px; 
    background: #f8fafc; 
    border-top: 5px solid #cbd5e1;
    display: flex; 
    padding: 15px 20px; 
    gap: 20px;
    flex-shrink: 0;
    z-index: 10;
    box-sizing: border-box;
    overflow-x: auto; 
}

/* Bölümler */
.wallet-section { 
    display: flex; 
    flex-direction: column; 
}

.wallet-label { 
    font-size: 14px; 
    font-weight: 700; 
    color: #64748b; 
    margin-bottom: 10px; 
    text-transform: uppercase; 
    text-align: center;
}

.wallet-divider { 
    width: 2px; 
    background: #e2e8f0; 
    height: auto; 
    align-self: stretch;
}

/* Grid Düzeni */
.coins-grid, .bills-grid { 
    display: flex; 
    gap: 15px; 
    align-items: flex-end; 
    justify-content: center; 
    flex-wrap: wrap; 
    height: 100%;
}

.money-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.money-value {
    font-size: 12px;
    font-weight: bold;
    color: #475569;
}

/* 6. Para Görselleri */
.money-item {
    cursor: grab; 
    transition: transform 0.1s; 
    user-select: none;
    display: block; 
    box-shadow: none; 
    object-fit: contain; 
    z-index: 100;
}
.money-item:active { cursor: grabbing; transform: scale(0.95); }

.money-on-table {
    position: absolute; 
    z-index: 5;
    cursor: pointer;
    animation: dropSound 0.2s ease-out;
    object-fit: contain; 
}
@keyframes dropSound { from { transform: scale(1.2); opacity: 0.5; } to { transform: scale(1); opacity: 1; } }

/* Boyutlar */
.coin.c-5, .money-on-table.coin.c-5 { width: 40px; height: 40px; } 
.coin.c-10, .money-on-table.coin.c-10 { width: 44px; height: 44px; }
.coin.c-25, .money-on-table.coin.c-25 { width: 48px; height: 48px; }
.coin.c-50, .money-on-table.coin.c-50 { width: 52px; height: 52px; }
.coin.c-100, .money-on-table.coin.c-100 { width: 56px; height: 56px; }
.coin.c-500, .money-on-table.coin.c-500 { width: 60px; height: 60px; } 

.bill, .money-on-table.bill { 
    width: 100px; 
    height: auto; 
    max-height: 60px; 
    border-radius: 2px;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.15); 
}
.bill.b-5, .money-on-table.bill.b-5 { width: 90px; }
.bill.b-10, .money-on-table.bill.b-10 { width: 92px; }
.bill.b-20, .money-on-table.bill.b-20 { width: 94px; }
.bill.b-50, .money-on-table.bill.b-50 { width: 96px; }
.bill.b-100, .money-on-table.bill.b-100 { width: 98px; }
.bill.b-200, .money-on-table.bill.b-200 { width: 100px; }

/* --- SANAL PARA GERİ BİLDİRİM POPUP --- */

/* KRİTİK DÜZELTME: z-index değerini çok yüksek tutuyoruz ki her şeyin üstünde olsun */
.money-feedback-overlay {
    position: fixed; /* 'absolute' yerine 'fixed' kullanarak viewport'a kilitliyoruz */
    top: 0; 
    left: 0; 
    width: 100vw; /* Ekran genişliği */
    height: 100vh; /* Ekran yüksekliği */
    background: rgba(0, 0, 0, 0.7); /* Biraz daha koyu arka plan */
    backdrop-filter: blur(5px);
    
    /* ÖNEMLİ: Ana modalın z-index'i 200070 ise, bu 200100 olmalı */
    z-index: 2147483647 !important; /* Maksimum değer */
    
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.money-feedback-overlay.active {
    display: flex;
    opacity: 1;
}

.money-feedback-card {
    background: #fff;
    width: 90%;
    max-width: 400px; /* Genişliği biraz artırdım */
    padding: 40px;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* Yaylanma efekti */
}

.money-feedback-overlay.active .money-feedback-card {
    transform: scale(1);
}

/* İkon Kutusu */
.mf-icon-box {
    width: 90px; height: 90px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 25px;
    font-size: 45px; color: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.mf-success {
    background: linear-gradient(135deg, #22c55e, #166534);
    box-shadow: 0 10px 25px -5px rgba(34, 197, 94, 0.4);
}

.mf-error {
    background: linear-gradient(135deg, #ef4444, #991b1b);
    box-shadow: 0 10px 25px -5px rgba(239, 68, 68, 0.4);
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.money-feedback-card h3 {
    font-size: 24px; font-weight: 800; color: #111827; margin: 0 0 12px;
}

.money-feedback-card p {
    font-size: 16px; color: #6b7280; margin: 0 0 30px; line-height: 1.6;
}

/* Buton Grubu */
.mf-buttons {
    display: flex; gap: 12px; justify-content: center;
}

.mf-btn {
    flex: 1;
    padding: 14px; border: none; border-radius: 12px;
    font-weight: 700; font-size: 15px; cursor: pointer;
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}

.mf-btn:hover { transform: translateY(-2px); }
.mf-btn:active { transform: translateY(0); }

.mf-btn-primary {
    background: #3b82f6; color: #fff;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3);
}

.mf-btn-secondary {
    background: #f3f4f6; color: #4b5563;
}
.mf-btn-secondary:hover { background: #e5e7eb; color: #1f2937; }

.mf-btn-success {
    background: #22c55e; color: #fff;
    box-shadow: 0 4px 6px -1px rgba(34, 197, 94, 0.3);
}

/* Header Duyuru Butonu */
.header-announcement-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(245, 158, 11, 0.4);
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b; /* Turuncu */
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.header-announcement-btn:hover {
    background: #f59e0b;
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
}

/* Header Versiyon Yazısı Hover Efekti */
.header-version-text {
    transition: opacity 0.2s;
}
.header-version-text:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Duyuru İçerik Stilleri */
.announcement-item {
    display: flex;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid #e2e8f0;
    align-items: flex-start;
}
.announcement-item:last-child {
    border-bottom: none;
}
.ann-icon {
    width: 36px;
    height: 36px;
    background: #fff7ed;
    color: #ea580c;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.ann-text {
    font-size: 14px;
    color: #334155;
    line-height: 1.5;
}
.ann-text strong {
    color: #ea580c;
    display: block;
    margin-bottom: 3px;
}

.announcement-alert {
    margin-top: 20px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    gap: 10px;
    align-items: center;
}