/* ───────────────────────────────────────────────────────────────────
   لێدەری ڤیدیۆی ئایلۆکس — شریتی کۆنترۆڵی خۆمان.
   بەکاردێت لەگەڵ /assets/js/yt-player.js. کۆنترۆڵی YouTube بە
   controls=0 داخراوە، بۆیە ئەم شریتە تاکە ڕێگای کۆنترۆڵکردنە.
   ─────────────────────────────────────────────────────────────────── */
.exp {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
}
.exp:fullscreen { border-radius: 0; aspect-ratio: auto; height: 100%; }

.exp-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    background: #000;
}
/* پەردەیەکی ڕوون لەسەر iframe — iframe کلیک نادات بە دەرەوە، بۆیە
   بەبێ ئەمە کلیک لەسەر ڤیدیۆکە هیچ ناکات. لە ژێر شریتەکەدایە. */
.exp-shade { position: absolute; inset: 0 0 62px 0; cursor: pointer; z-index: 2; }
/* پەردەی وەستان z-index:3 ـە، بۆیە شریتی کۆنترۆڵ (z-index:5) لەسەری دەبێت */
.exp:fullscreen .exp-shade { inset: 0 0 72px 0; }

/* ── پەردەی وەستان ──
   کاتێک ڤیدیۆکە دەوەستێت YouTube ناونیشانی ڤیدیۆ، ناوی کەناڵ،
   «More videos» و لۆگۆی خۆی دەردەخات. هیچ پارامەتری embed ئەوە
   ناگرێت، بۆیە بە پەردەیەکی تەواو دادەپۆشرێت. */
.exp-veil {
    position: absolute;
    inset: 0;
    z-index: 3;
    background-color: #000;
    background-size: cover;
    background-position: center;
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    /* لابردنی بە نەرمی، بەڵام دانانی هەمان چرکە — ئەگەر پەردەکە بە
       خایاندن بێت، لەو ماوەیەدا ناونیشان و لۆگۆی YouTube دەبینرێن. */
    transition: opacity .28s ease .1s, visibility .28s ease .1s;
}
.exp.is-paused .exp-veil {
    opacity: 1;
    visibility: visible;
    transition: none;
}
.exp-veil::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(6,0,16,.42);
}
.exp-veil-play {
    position: relative;
    width: 74px; height: 74px;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    color: #000;
    font-size: 22px;
    display: grid; place-items: center;
    padding-inline-start: 5px;
    box-shadow: 0 18px 44px -14px rgba(0,0,0,.7);
    transition: transform .25s ease;
}
.exp-veil:hover .exp-veil-play { transform: scale(1.08); }

/* پێش ئامادەبوون — تا YouTube بار دەبێت */
.exp:not(.is-ready)::after {
    content: '';
    position: absolute; top: 50%; left: 50%;
    width: 34px; height: 34px;
    margin: -17px 0 0 -17px;
    border: 3px solid rgba(255,255,255,.2);
    border-top-color: rgba(255,255,255,.85);
    border-radius: 50%;
    animation: expSpin .8s linear infinite;
    z-index: 4;
}
@keyframes expSpin { to { transform: rotate(360deg); } }

/* ── شریتی کۆنترۆڵ ── */
.exp-bar {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 5;
    /* پێشکەوتنی ڤیدیۆ هەمیشە لە چەپەوە بۆ ڕاستە، تەنانەت لە پەڕەیەکی
       RTLـدا — وەک هەموو لێدەرێکی ڤیدیۆ. بۆیە شریتەکە LTR جێگیر کراوە. */
    direction: ltr;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.55) 60%, transparent);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .25s ease, transform .25s ease;
}
.exp.is-ready .exp-bar,
.exp:hover .exp-bar,
.exp:focus-within .exp-bar { opacity: 1; transform: none; }
/* لە مۆبایل هەمیشە دیارە — hover نییە */
@media (hover: none) { .exp-bar { opacity: 1; transform: none; } }
/* Vimeo/Drive کۆنترۆڵی خۆیان هەیە — شریتی ئێمە پیشان نادرێت */
.exp.is-plain .exp-bar, .exp.is-plain .exp-shade { display: none; }

.exp-btn {
    flex: none;
    width: 34px; height: 34px;
    border: 0; border-radius: 9999px;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: grid; place-items: center;
    transition: background .2s ease;
}
.exp-btn:hover { background: rgba(255,255,255,.16); }
.exp-rate { width: auto; padding: 0 10px; font-size: 12.5px; }

.exp-time {
    flex: none;
    font-size: 12px;
    color: rgba(255,255,255,.82);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── شریتی پێشکەوتن ── */
.exp-seek {
    position: relative;
    flex: 1 1 auto;
    min-width: 40px;
    height: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    touch-action: none;
}
.exp-seek::before {
    content: '';
    position: absolute; inset-inline: 0;
    height: 4px;
    border-radius: 4px;
    background: rgba(255,255,255,.26);
}
.exp-seek-fill {
    position: absolute; left: 0;
    height: 4px;
    width: 0;
    border-radius: 4px;
    background: var(--color-brand-main, #E88024);
}
.exp-seek-dot {
    position: absolute;
    left: 0;
    width: 12px; height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,.5);
    opacity: 0;
    transition: opacity .2s ease;
}
.exp-seek:hover .exp-seek-dot, .exp:hover .exp-seek-dot { opacity: 1; }

/* ── دەنگ ── */
.exp-vol { flex: none; display: flex; align-items: center; gap: 4px; }
.exp-vol-track {
    position: relative;
    width: 0;
    height: 14px;
    cursor: pointer;
    display: flex; align-items: center;
    overflow: hidden;
    transition: width .25s ease;
    touch-action: none;
}
.exp-vol:hover .exp-vol-track, .exp-vol:focus-within .exp-vol-track { width: 66px; }
.exp-vol-track::before {
    content: '';
    position: absolute; inset-inline: 0;
    height: 4px; border-radius: 4px;
    background: rgba(255,255,255,.26);
}
.exp-vol-fill {
    position: absolute; left: 0;
    height: 4px; width: 100%;
    border-radius: 4px;
    background: rgba(255,255,255,.9);
}
/* شاشەی پەنجەیی hover نییە، بۆیە شریتێکی پانی ٠ هەرگیز ناکرێتەوە و
   ناتوانرێت دەست لێ بدرێت. لەوێ هەمیشە دیارە. */
@media (hover: none) {
    .exp-vol-track { width: 60px; }
}
/* لە مۆبایلی باریک شوێنی نییە — تەنها دوگمەی بێدەنگی */
@media (max-width: 520px) {
    .exp-vol-track { display: none; }
    .exp-bar { gap: 6px; padding: 9px 10px; }
    .exp-time { font-size: 11px; }
    .exp-btn { width: 30px; height: 30px; font-size: 13px; }
}