/* ===========================================================================
 * Movie & Series API — player enhancement styles (drop-in)
 * Loaded only on film/izle pages, only while the plugin is active. Uses the
 * core theme's CSS custom properties (--accent, --line, --fg, --muted-2),
 * which are defined globally on :root, so they resolve here too.
 * ======================================================================== */

/* Altyazı overlay — JS ile Plyr'ın .plyr__video-wrapper'ı içine eklenir.
   display JS'den yönetilir (none ↔ flex). Wrapper position:relative +
   overflow:hidden olduğundan absolute referansı odur. */
.ms-subtitle {
    position: absolute;
    left: 0; right: 0; bottom: 64px;
    display: flex;
    justify-content: center; align-items: flex-end;
    text-align: center;
    z-index: 60;            /* Plyr controls (~z-index 3-30) üstünde */
    pointer-events: none;
    padding: 0 16px;
    transition: bottom 0.2s ease;
}
/* Kontroller gizlenince (Plyr fareyi çekince) altyazı aşağı kayar. */
.plyr.plyr--hide-controls .ms-subtitle { bottom: 24px; }
.ms-subtitle-text {
    display: inline-block;
    max-width: min(92%, 900px);
    background: rgba(0, 0, 0, 0.78); color: #fff;
    font-size: clamp(15px, 2.4vw, 22px); font-weight: 500; line-height: 1.35;
    padding: 3px 10px; border-radius: 4px;
    white-space: pre-line; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
}

/* Kontrol çubuğuna enjekte edilen altyazı/ses butonları ve açılır menüleri.
   Butonlar Plyr'ın .plyr__control class'ını paylaşır (boyut/hover Plyr'dan);
   .is-on aktif altyazıyı vurgular. */
.ms-ctrl-btn.is-on { color: var(--accent); }
.ms-ctrl-menu {
    position: absolute;
    right: 12px; bottom: 64px;
    z-index: 70;
    min-width: 160px;
    background: rgba(20, 20, 28, 0.97);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}
.plyr.plyr--hide-controls .ms-ctrl-menu { display: none !important; }
.ms-ctrl-menu-title {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em;
    color: var(--muted-2); font-weight: 600; padding: 6px 10px 4px;
}
.ms-ctrl-menu-item {
    display: block; width: 100%; text-align: left;
    padding: 8px 10px; border-radius: 6px;
    background: none; border: 0; color: var(--fg);
    font: inherit; font-size: 13px; cursor: pointer; transition: background 0.12s;
}
.ms-ctrl-menu-item:hover { background: rgba(255, 255, 255, 0.06); }
.ms-ctrl-menu-item.is-active { color: var(--accent); font-weight: 600; }
.ms-ctrl-menu-item.is-active::after { content: ' ✓'; }

/* ---------- Mobil DİKEY (portrait) — sadeleştirilmiş kontrol çubuğu ----------
   Dar dikey ekranda Plyr'ın tüm kontrolleri sıkışıyor. Dokunmatik + portrait'te
   ikincil kontrolleri gizleyip temel olanları bırakıyoruz; yatay ekranda
   tüm kontroller geri gelir (bu sorgu eşleşmez). */
@media (orientation: portrait) and (pointer: coarse) {
    .plyr .plyr__volume,
    .plyr [data-plyr="pip"],
    .plyr [data-plyr="airplay"],
    .plyr .plyr__time--duration {
        display: none !important;
    }
    .plyr__controls {
        gap: 2px;
        padding: 8px 8px 10px;
    }
    .plyr__controls > .plyr__control,
    .plyr__controls .ms-ctrl-btn,
    .plyr__controls .plyr__menu > .plyr__control {
        padding: 9px;
    }
    .plyr__controls .plyr__control svg,
    .plyr__controls .ms-ctrl-btn svg {
        width: 19px; height: 19px;
    }
    .plyr__controls .plyr__progress__container { min-width: 0; flex: 1 1 auto; }
    .plyr__time--current { font-size: 12px; padding: 0 2px; }
    .plyr__control--overlaid { padding: 18px; }
}