.vid-list-container { background: #f0f0f0; padding: 10px; overflow-y: auto; box-sizing: border-box; border-radius: 8px; }
ol#vid-list { margin: 0; padding: 0; }
ol#vid-list li { list-style: none; padding: 10px; margin-bottom: 10px; background-color: #ffffff; display: flex; flex-direction: column; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: background-color 0.3s, transform 0.3s; }
ol#vid-list li:hover { background-color: #e0e0e0; transform: scale(1.02); }
ol#vid-list li.active { background-color: #c60000; border: 2px solid #ff6977; }
ol#vid-list li.active .desc, ol#vid-list li.active .youtubeDate, ol#vid-list li.active .youtubeDate:after { color: #ff9d9d; }
ol#vid-list li.active .youtubeNumber { color: white; }
ol#vid-list .vid-thumb { width: 100%; height: 140px; background-size: cover; background-position: center; border-radius: 8px; margin-bottom: 10px; position: relative; }
ol#vid-list .vid-thumb:after { font-family: "Font Awesome 5 Pro"; font-weight: 900; content: "\f144"; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; font-size: 35px; color: rgba(255, 255, 255, 0.8); }
ol#vid-list a { text-decoration: none; color: #333; font-weight: 600; font-size: 14px; display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
ol#vid-list .desc { text-transform: capitalize; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 5px; margin-bottom: 5px; width: 100%; }
.youtubeNumber { color: #ff3467; font-size: 11px; margin-right: 5px; }
.youtubeDescription{font-size:11px; font-weight:100;margin-bottom:5px;}
.youtubeDate { color: #777; font-size: 10px; text-align: left; width: 100%; }
.youtubeDate:after { content: "\f017"; font-family: "Font Awesome 5 Pro"; font-weight: 400; padding-left: 5px; color: #999; }
.baslikYX { background-image: url(/images/baslikBg.png); line-height: 70px; color: white; font-size: 22px; font-weight: 700; padding-left: 10px; }
.vid-container { position: relative; padding-top: 56.25%; height: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); background-color: #000; }
#vid_frame { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }
@media (max-width: 992px) {
 .vid-container { padding-top: 56.25%; }
 .baslikYX { font-size: 18px; line-height: 50px; }
 .vid-list-container { padding: 5px; }
 ol#vid-list li { padding: 5px; }
 ol#vid-list .vid-thumb { height: 100px; }
 ol#vid-list a { font-size: 12px; }
}