.vpds-container {
    width: 100%;
    max-width: 100%;
    position: relative;
    font-family: inherit;
}

.vpds-selector-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    position: relative;
    z-index: 20;
}

.vpds-selector {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    z-index: 20;
}

.vpds-selector-toggle {
    width: 100%;
    min-height: 60px;
    padding: 14px 54px 14px 20px;
    border: 2px solid #cbd5e1;
    border-radius: 16px;
    background: #f1f6fb;
    color: #5f728b;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font: inherit;
    font-size: 19px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.vpds-selector-toggle:hover,
.vpds-dropdown-open .vpds-selector-toggle {
    border-color: var(--vpds-accent, #2f80ed);
    background: #fff;
    box-shadow: 0 5px 18px rgba(15, 23, 42, .08);
}

.vpds-chevron {
    width: 12px;
    height: 12px;
    border-right: 4px solid #60758c;
    border-bottom: 4px solid #60758c;
    transform: rotate(45deg) translateY(-3px);
    transition: transform .2s ease;
    flex: 0 0 auto;
}

.vpds-dropdown-open .vpds-chevron {
    transform: rotate(225deg) translateY(-1px);
}

.vpds-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .16);
    padding: 18px;
    max-height: min(620px, 75vh);
    overflow-y: auto;
}

.vpds-dropdown, .vpds-dropdown * { box-sizing: border-box; }
.vpds-dropdown button { max-width: 100%; }
.vpds-dropdown[hidden] { display: none; }

.vpds-dropdown-header {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    margin: 2px 2px 14px;
}

.vpds-season-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}

.vpds-season-tab {
    border: 1px solid #d7e0ea;
    background: #f8fafc;
    color: #475569;
    border-radius: 10px;
    padding: 10px 15px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: .2s ease;
}

.vpds-season-tab:hover { border-color: var(--vpds-accent, #2f80ed); }
.vpds-season-tab.is-active { background: var(--vpds-accent, #2f80ed); border-color: var(--vpds-accent, #2f80ed); color: #fff; }

.vpds-episode-panel { display: none; }
.vpds-episode-panel.is-active { display: block; }

.vpds-episode-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.vpds-episode-card {
    min-height: 76px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 15px;
    border: 1px solid #d8e1eb;
    border-radius: 12px;
    background: #fff;
    color: #1e293b;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 5px;
    text-align: left;
    font: inherit;
    cursor: pointer;
    overflow: hidden;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.vpds-episode-card:hover {
    border-color: var(--vpds-accent, #2f80ed);
    box-shadow: 0 7px 18px rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.vpds-episode-card.is-selected {
    background: var(--vpds-accent, #2f80ed);
    border-color: var(--vpds-accent, #2f80ed);
    color: #fff;
}

.vpds-episode-number { font-size: 15px; font-weight: 750; }

.vpds-play-button {
    margin-top: 0;
    min-height: 48px;
    align-self: stretch;
    flex: 0 0 auto;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: var(--vpds-accent, #2f80ed);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: .2s ease;
}

.vpds-play-button:disabled { opacity: .4; cursor: not-allowed; }
.vpds-play-button:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(15, 23, 42, .14); }

/* ============================================================
   MODAL
   ============================================================ */
.vpds-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.vpds-modal.vpds-open { opacity: 1; pointer-events: auto; }
.vpds-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.86); backdrop-filter: blur(4px); }

/* Dialog: video genişliğine göre boyutlanır. Flex YOK. */
.vpds-dialog {
    position: relative;
    width: min(92vw, 960px);
    max-width: 100%;
    background: #000;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 25px 60px rgba(0,0,0,.5);
    transform: scale(.96);
    transition: transform .25s ease, width .2s ease;
    display: block;
}
.vpds-modal.vpds-open .vpds-dialog { transform: scale(1); }

/* Dikey (Reels/Shorts) dialog daha dar */
.vpds-dialog.vpds-dialog-vertical {
    width: min(92vw, 480px);
}

.vpds-controls { position: absolute; top: 12px; right: 12px; display: flex; gap: 8px; z-index: 5; }
.vpds-controls button { width: 38px; height: 38px; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.62); color: #fff; cursor: pointer; }
.vpds-controls button:hover { background: rgba(255,255,255,.22); }

/* Video wrapper: 16:9 oranı. Sadece block akış. */
.vpds-video-wrapper {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    padding: 0;
    overflow: hidden;
    background: #000;
    line-height: 0;
    font-size: 0;
}

/* Dikey video için 9:16 oranı */
.vpds-video-wrapper.vpds-vertical {
    aspect-ratio: 9 / 16;
    max-height: 88vh;
    margin: 0 auto;
}
.vpds-dialog.vpds-dialog-vertical .vpds-video-wrapper.vpds-vertical {
    max-height: 88vh;
}

/* Eski tarayıcılar için padding-bottom fallback */
@supports not (aspect-ratio: 16 / 9) {
    .vpds-video-wrapper {
        height: 0;
        padding-bottom: 56.25%;
    }
    .vpds-video-wrapper.vpds-vertical {
        padding-bottom: 177.78%;
        height: auto;
    }
}

/* Iframe: wrapper'ı tam kaplar, kesinlikle taşmaz */
.vpds-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    margin: 0;
    padding: 0;
    background: #000;
}

/* ============================================================
   Facebook dikey (Reels) — player chrome'unu hesaba katan daraltılmış oran
   ============================================================ */
.vpds-video-wrapper.vpds-vertical.vpds-vertical-facebook {
    aspect-ratio: 9 / 19.5;   /* Facebook chrome payı */
    max-height: 88vh;
}
@supports not (aspect-ratio: 9 / 19.5) {
    .vpds-video-wrapper.vpds-vertical.vpds-vertical-facebook {
        height: 0;
        padding-bottom: 216%;
    }
}
.vpds-video-wrapper.vpds-vertical-facebook .vpds-iframe {
    top: 0;
    bottom: 0;
    height: 100%;
}

.vpds-editor-selector-row { display: flex; align-items: stretch; gap: 10px; }
.vpds-editor-selector-row .vpds-selector-toggle { flex: 1 1 0; }
.vpds-editor-selector-row .vpds-play-button { margin: 0; }

html.vpds-scroll-locked {
    overflow: hidden;
    scrollbar-gutter: stable;
}
body.vpds-no-scroll { overflow: hidden; }
.vpds-editor-notice { padding: 16px; border: 1px solid #f1c40f; border-radius: 10px; background: #fff9db; color: #6b5a00; }

@media (max-width: 900px) {
    .vpds-episode-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .vpds-selector-row { gap: 8px; }
    .vpds-selector-toggle { font-size: 16px; min-height: 54px; padding-left: 14px; padding-right: 42px; }
    .vpds-play-button { padding: 0 15px; }
    .vpds-dropdown { padding: 12px; }
    .vpds-episode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .vpds-episode-card { min-height: 68px; padding: 12px; }
    .vpds-modal { padding: 8px; }
    .vpds-dialog { width: 100%; border-radius: 10px; }
    .vpds-dialog.vpds-dialog-vertical { width: 100%; }
}
@media (max-width: 390px) {
    .vpds-episode-grid { grid-template-columns: 1fr; }
}

/* Compact selector controls */
.vpds-selector-row { gap: 8px; }
.vpds-selector { flex: 1 1 0; max-width: none; min-width: 0; }
.vpds-selector-toggle {
    min-height: 48px;
    padding: 10px 42px 10px 15px;
    border-width: 1px;
    border-radius: 11px;
    font-size: 15px;
}
.vpds-chevron { width: 9px; height: 9px; border-width: 3px; }
.vpds-play-button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    padding: 0 15px;
    border-radius: 9px;
    font-size: 14px;
}
.vpds-dropdown { padding: 14px; border-radius: 13px; }
.vpds-dropdown-header { font-size: 15px; margin-bottom: 10px; }
.vpds-season-tabs { gap: 6px; padding-bottom: 10px; margin-bottom: 10px; }
.vpds-season-tab { padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.vpds-episode-grid { gap: 8px; }
.vpds-episode-card { min-height: 62px; padding: 10px 12px; border-radius: 9px; }
.vpds-episode-number { font-size: 13px; }
@media (max-width: 640px) {
    .vpds-selector { flex-basis: auto; max-width: none; }
    .vpds-selector-toggle { min-height: 46px; font-size: 14px; padding-left: 12px; }
    .vpds-play-button { min-height: 46px; padding: 0 12px; font-size: 13px; }
}

.vpds-source-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vpds-source-card { min-height: 48px; padding: 10px 12px; border: 1px solid #d8e1eb; border-radius: 9px; background: #fff; color: #1e293b; display: flex; align-items: center; justify-content: flex-start; text-align: left; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: .18s ease; }
.vpds-source-card:hover, .vpds-source-card.is-selected { border-color: var(--vpds-accent, #2f80ed); background: var(--vpds-accent, #2f80ed); color: #fff; }
.vpds-editor-source-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.vpds-editor-source-card { border: 1px solid #ddd; border-radius: 8px; padding: 12px; margin: 10px 0; background: #fff; }
@media (max-width: 640px) { .vpds-source-list, .vpds-editor-source-preview { grid-template-columns: 1fr; } }


/* Drama source selector emphasis */
.vpds-container[data-vpds-type="drama"] .vpds-selector-toggle {
    background: #eef6ff;
    border-color: #8bbcf5;
    color: #245b91;
    box-shadow: 0 2px 8px rgba(47, 128, 237, .08);
}
.vpds-container[data-vpds-type="drama"] .vpds-selector-toggle:hover,
.vpds-container[data-vpds-type="drama"] .vpds-dropdown-open .vpds-selector-toggle {
    background: #e3f0ff;
    border-color: var(--vpds-accent, #2f80ed);
    color: #174a7a;
    box-shadow: 0 4px 14px rgba(47, 128, 237, .14);
}
.vpds-container[data-vpds-type="drama"] .vpds-selector-toggle .vpds-selector-label {
    font-weight: 700;
}
.vpds-container[data-vpds-type="drama"] .vpds-source-card:hover,
.vpds-container[data-vpds-type="drama"] .vpds-source-card.is-selected {
    box-shadow: 0 4px 12px rgba(47, 128, 237, .14);
}


/* 80/20 selector layout */
.vpds-selector-row { display: flex; width: 100%; gap: 8px; }
.vpds-selector-row .vpds-selector { flex: 0 0 calc(80% - 4px); width: calc(80% - 4px); max-width: none; }
.vpds-selector-row .vpds-play-button { flex: 0 0 calc(20% - 4px); width: calc(20% - 4px); min-width: 0; }
@media (max-width: 640px) {
  .vpds-selector-row .vpds-selector { flex-basis: calc(80% - 4px); width: calc(80% - 4px); }
  .vpds-selector-row .vpds-play-button { flex-basis: calc(20% - 4px); width: calc(20% - 4px); padding-left: 6px; padding-right: 6px; }
}

.vpds-alternative-list { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 8px; min-width: 0; width: 100%; }
.vpds-alternative-list[hidden] { display: none; }
.vpds-alternative-button { appearance: none; display: block; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid #dbe3ec; background: #fff; color: inherit; border-radius: 7px; padding: 7px 10px; font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; text-align: left; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.vpds-alternative-button:hover, .vpds-alternative-button.is-selected { border-color: var(--vpds-accent, #2f80ed); background: color-mix(in srgb, var(--vpds-accent, #2f80ed) 9%, #fff); }
.vpds-episode-number { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.vpds-episode-card.is-expanded { border-color: var(--vpds-accent, #2f80ed); }

/* Episode alternatives dropdown + editor collapse */
.vpds-episode-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
}
.vpds-episode-chevron,
.vpds-editor-episode-chevron {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .18s ease;
    opacity: .7;
}
.vpds-episode-card.is-expanded .vpds-episode-chevron,
.vpds-editor-episode-card.is-open .vpds-editor-episode-chevron {
    transform: rotate(225deg) translateY(-1px);
}
.vpds-alternative-list {
    padding: 7px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    background: #f8fafc;
    box-shadow: 0 5px 14px rgba(15,23,42,.06);
}
.vpds-alternative-button {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.vpds-editor-episode-toggle {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 5px 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #1e293b;
    font: inherit;
    cursor: pointer;
    text-align: left;
}
.vpds-editor-episode-toggle strong {
    min-width: 0;
    overflow-wrap: anywhere;
}
.vpds-editor-episode-toggle:hover { color: #2563eb; }
.vpds-editor-episode-top {
    min-width: 0;
}
.vpds-editor-episode-body {
    padding-top: 8px;
    border-top: 1px solid #eef2f7;
}
.vpds-editor-episode-card:not(.is-open) .vpds-editor-episode-top {
    margin-bottom: 0;
}