/* Video Oynatıcı Alanı (16:9 Oranı) */
 /* Oynatıcı Konteyneri */
    .player-container {
        width: calc(100% - 100px);
        max-width: 100%;
        padding: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: fadeIn 0.8s ease-out forwards;
        margin-left: auto;
        margin-right: auto;
    }

    /* 16:9 Oran Koruyucu ve Çerçeve */
    .video-wrapper {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        background-color: #000000;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: var(--player-shadow);
        border: 1px solid var(--player-border);
    }

    /* Native HTML5 Video Elementi Özelleştirmesi */
    video {
        width: 100%;
        height: 100%;
     /*   min-height: 50vh;*/
        object-fit: contain; /* Videonun en-boy oranını bozmadan ekrana sığdırır */
        outline: none;
        background-color: #000;
    }

    /* Özel Webkit (Chrome/Safari) Oynatıcı Kontrol Çubuğu Özelleştirmesi */
    video::-webkit-media-controls-panel {
        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    }

    video::-webkit-media-controls-timeline,
    video::-webkit-media-controls-play-button,
    video::-webkit-media-controls-volume-slider,
    video::-webkit-media-controls-mute-button,
    video::-webkit-media-controls-fullscreen-button {
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
    }

    /* Sayfa Giriş Animasyonu */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: scale(0.98) translateY(10px);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }

    /* Mobil Uyumluluk */
    @media (max-width: 768px) {
        .player-container {
            /*padding: 10px;*/
            width: 100%;
        }
        .video-wrapper {
            border-radius: 8px; /* Mobilde daha küçük kavis */
            border: none;
        }
    }
.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sağ Taraf - Oynatma Listesi (Playlist) */
.playlist-container {

    overflow-y: auto;
}

/* Özel Scrollbar */
.playlist-container::-webkit-scrollbar { width: 6px; }
.playlist-container::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }
.playlist-container::-webkit-scrollbar-thumb { background: rgba(212, 175, 55, 0.3); border-radius: 10px; }
.playlist-container::-webkit-scrollbar-thumb:hover { background: rgba(212, 175, 55, 0.6); }

.module-header {
    background: rgb(0 0 0 / 13%);
    padding: 15px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2b1530;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.playlist-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}
.playlist-item:hover { background: rgba(255, 255, 255, 0.03); }

/* Aktif Video Stili */
.playlist-item.active {
    background: rgba(212, 175, 55, 0.08);
    border-left-color: #d4af37;
}
.playlist-item.active .video-title { color: #d4af37; }

/* İzlenmiş Video Stili */
.playlist-item.completed .status-icon { color: #198754; } /* Bootstrap Success Green */

.status-icon { width: 20px; font-size: 0.9rem; color: #a0a0b5; text-align: center; }
.video-duration { font-size: 0.75rem; color: #fff; background: rgba(0,0,0,0.5); padding: 2px 6px; border-radius: 4px; }

/* Sekmeler (Nav Tabs) Özel Tasarım */
.custom-tabs { border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-top: 10px; }
.custom-tabs .nav-link { color: #a0a0b5; border: none; padding: 10px 20px; font-weight: 500; transition: all 0.3s; background: transparent; border-bottom: 2px solid transparent; }
.custom-tabs .nav-link:hover { color: #fff; }
.custom-tabs .nav-link.active { color: #d4af37; border-bottom-color: #d4af37; }