/* YT Playlist Widget - Bootstrap 4 uyumlu v1.3 */

.ytpw-wrap { width: 100%; }

.ytpw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: .5rem;
}
.ytpw-title { font-size: 1.25rem; font-weight: 600; color: inherit; margin: 0; }
.ytpw-count { font-size: .875rem; color: #6c757d; }

.ytpw-search-wrap { margin-bottom: 1.25rem; }
.ytpw-search {
    display: block; width: 100%;
    padding: .5rem .75rem; font-size: .9375rem; line-height: 1.5;
    color: #495057; background-color: #fff; border: 1px solid #ced4da;
    border-radius: .25rem; box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.ytpw-search:focus {
    border-color: #e05c5c; outline: 0;
    box-shadow: 0 0 0 .2rem rgba(204,0,0,.15);
}

/* Grid */
.ytpw-grid {
    display: flex; flex-wrap: wrap;
    margin-right: -10px; margin-left: -10px;
}

/* Card */
.ytpw-card {
    position: relative; width: 100%;
    padding-right: 10px; padding-left: 10px;
    margin-bottom: 20px; box-sizing: border-box;
    flex: 0 0 50%; max-width: 50%;
    cursor: pointer;
}
@media (min-width: 768px)  { .ytpw-card { flex: 0 0 33.3333%;  max-width: 33.3333%; } }
@media (min-width: 992px)  { .ytpw-card { flex: 0 0 25%;       max-width: 25%; } }

.ytpw-card-inner {
    border: 1px solid #dee2e6; border-radius: .25rem;
    overflow: hidden; background: #fff;
    transition: transform .18s ease, box-shadow .18s ease;
    height: 100%;
}
.ytpw-card:hover .ytpw-card-inner {
    transform: translateY(-4px);
    box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.12);
}

/* Thumbnail */
.ytpw-thumb-wrap {
    position: relative; padding-bottom: 56.25%;
    background: #e9ecef; overflow: hidden;
}
.ytpw-thumb-wrap img {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .3s ease;
}
.ytpw-card:hover .ytpw-thumb-wrap img { transform: scale(1.04); }

/* Hover overlay */
.ytpw-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.1) 55%, transparent 100%);
    opacity: 0; transition: opacity .2s ease;
    display: flex; flex-direction: column;
    justify-content: flex-end; padding: .6rem .75rem;
}
.ytpw-card:hover .ytpw-overlay { opacity: 1; }
.ytpw-overlay-title {
    color: #fff; font-size: .8125rem; font-weight: 500;
    line-height: 1.35; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Play button */
.ytpw-play-btn {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .2s ease;
}
.ytpw-card:hover .ytpw-play-btn { opacity: 1; }
.ytpw-play-btn svg { width: 44px; height: 44px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.3)); }

/* Card body */
.ytpw-card-body { padding: .6rem .875rem .75rem; }
.ytpw-card-title {
    font-size: .8125rem; font-weight: 500; color: #212529;
    line-height: 1.4; margin: 0 0 .2rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ytpw-card-meta { font-size: .75rem; color: #6c757d; margin: 0; }

/* Skeleton */
.ytpw-skeleton .ytpw-thumb-wrap { background: #e9ecef; }
.ytpw-skeleton .ytpw-card-inner { border-color: #e9ecef; }
.ytpw-skel-line {
    height: 12px; border-radius: 4px;
    background: linear-gradient(90deg, #e9ecef 25%, #dee2e6 50%, #e9ecef 75%);
    background-size: 200% 100%;
    animation: ytpw-shimmer 1.4s infinite;
    margin-bottom: 6px;
}
.ytpw-skel-line.short { width: 50%; }
@keyframes ytpw-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.ytpw-skel-thumb {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, #dde0e3 25%, #cfd2d6 50%, #dde0e3 75%);
    background-size: 200% 100%;
    animation: ytpw-shimmer 1.4s infinite;
}

/* States */
.ytpw-loading, .ytpw-empty {
    width: 100%; text-align: center;
    padding: 2rem; color: #6c757d; font-size: .9375rem;
}
.ytpw-error {
    width: 100%; padding: .75rem 1rem; margin-bottom: 1rem;
    color: #721c24; background-color: #f8d7da;
    border: 1px solid #f5c6cb; border-radius: .25rem; font-size: .875rem;
}

/* Lightbox */
.ytpw-lb {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 99999 !important;
    display: none;
    align-items: center; justify-content: center; padding: 1rem;
}
.ytpw-lb.active {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}
.ytpw-lb-bg {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.82);
}
.ytpw-lb-box {
    position: relative; width: 100%; max-width: 900px;
    background: #000; border-radius: .375rem; overflow: hidden;
    z-index: 1; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.6);
}
.ytpw-lb-close {
    position: absolute; top: .6rem; right: .75rem; z-index: 3;
    width: 2rem; height: 2rem; padding: 0;
    background: rgba(0,0,0,.65); color: #fff;
    border: none; border-radius: 50%;
    font-size: 1rem; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.ytpw-lb-close:hover { background: #cc0000; }

/* Prev / Next */
.ytpw-lb-prev,
.ytpw-lb-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    z-index: 3; width: 2.5rem; height: 2.5rem; padding: 0;
    background: rgba(0,0,0,.55); color: #fff;
    border: none; border-radius: 50%;
    font-size: 1.1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, opacity .15s;
}
.ytpw-lb-prev { left: .6rem; }
.ytpw-lb-next { right: .6rem; }
.ytpw-lb-prev:hover,
.ytpw-lb-next:hover { background: rgba(204,0,0,.85); }
.ytpw-lb-prev:disabled,
.ytpw-lb-next:disabled { opacity: .25; cursor: default; }

.ytpw-lb-player {
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
}
.ytpw-lb-player iframe {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; border: 0;
}
.ytpw-lb-footer {
    padding: .6rem 1rem; background: #111;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.ytpw-lb-title {
    font-size: .875rem; font-weight: 500; color: #f8f9fa;
    line-height: 1.4; flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ytpw-lb-counter {
    font-size: .75rem; color: #adb5bd; flex-shrink: 0; white-space: nowrap;
}

@media (max-width: 575.98px) {
    .ytpw-lb { align-items: flex-end; padding: 0; }
    .ytpw-lb-box { border-radius: .5rem .5rem 0 0; max-width: 100%; }
    .ytpw-lb-prev { left: .3rem; }
    .ytpw-lb-next { right: .3rem; }
}