/* =========================================================
   MOVIE DETAIL
========================================================= */

.movie-detail {
    --bg: #090e17;
    --text: #ffffff;
    --muted: #9ca7b8;
    --purple: #7352ff;

    position: relative;

    width: 100%;
    min-height: 100vh;

    overflow: hidden;

    color: var(--text);
}


/* =========================================================
   BACKDROP
========================================================= */

.movie-backdrop {
    position: absolute;

    z-index: 0;

    top: 0;
    left: 0;

    width: 100%;
    height: 820px;

    background-image:
        var(--movie-backdrop);

    background-size: cover;
    background-position: center;

    background-repeat: no-repeat;
opacity: 0.4;
    transform: scale(1.015);
}


/* IMAGE OVERLAY */

.movie-backdrop-overlay {
    position: absolute;

    z-index: 1;

    top: 0;
    left: 0;

    width: 100%;
    height: 900px;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(9, 14, 23, .96) 0%,
            rgba(9, 14, 23, .72) 26%,
            rgba(9, 14, 23, .30) 58%,
            rgba(9, 14, 23, .12) 100%
        ),
        linear-gradient(
            180deg,
            rgba(9, 14, 23, .18) 0%,
            rgba(9, 14, 23, .08) 48%,
            #090e17 94%
        );
}


/* =========================================================
   COMMON CONTAINER
========================================================= */

.movie-container {
    position: relative;
    width: min(calc(100% - 100px),1640px)!important;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 20px;
}


/* =========================================================
   HERO
========================================================= */

.movie-hero {
    position: relative;

    z-index: 2;

    min-height: 700px;

    align-items: flex-end;
}


.movie-hero-content {


    padding-bottom: 80px;
}


/* =========================================================
   META
========================================================= */

.movie-meta {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 18px;

    color: #c7d0dc;

    font-size: 14px;

    font-weight: 600;
}


.meta-dot {
    opacity: .45;
}


.movie-rating {
    color: #ffd52f;
}


/* =========================================================
   LOGO
========================================================= */

.movie-logo {

    width: 100%;

    max-width: 560px;

    min-height: 100px;

    display: flex;

    align-items: center;

    margin-bottom: 18px;
}


.movie-logo img {

    display: block;

    width: auto;

    max-width: 100%;

    max-height: 150px;

    object-fit: contain;

    object-position: left center;

    filter:
        drop-shadow(
            0 12px 30px
            rgba(0, 0, 0, .45)
        );
}


.movie-logo h1 {

    margin: 0;

    color: #fff;

    font-size:
        clamp(
            48px,
            5vw,
            84px
        );

    line-height: .92;

    letter-spacing: -4px;

    font-weight: 800;
}


/* =========================================================
   ORIGINAL TITLE
========================================================= */

.movie-original-title {

    margin-bottom: 18px;

    color: #c7cfdb;

    font-size: 15px;

    font-weight: 600;
}


/* =========================================================
   GENRES
========================================================= */

.movie-genres {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 24px;
}


.genre-pill {

    display: inline-flex;

    align-items: center;

    height: 32px;

    padding: 0 13px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, .08);

    border:
        1px solid
        rgba(255, 255, 255, .09);

    color: #e5eaf0;

    font-size: 13px;

    font-weight: 600;

    backdrop-filter: blur(12px);
}


/* =========================================================
   OVERVIEW
========================================================= */

.movie-overview {
    width: min(750px, 100%);
    max-width: 750px;

    margin: 20px 0 28px;

    color: rgba(241, 245, 249, .82);

    font-size: 15px;
    font-weight: 500;
    line-height: 1.75;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, .8),
        0 1px 2px rgba(0, 0, 0, .9);
}

/* =========================================================
   BUTTONS
========================================================= */

.movie-actions {

    display: flex;

    align-items: center;

    gap: 12px;
}


.btn {

    height: 50px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    padding: 0 22px;

    border-radius: 12px;

    border: 0;

    text-decoration: none;

    font-family: inherit;

    font-size: 14px;

    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.btn:hover {

    transform:
        translateY(-2px);
}


.btn-primary {

    background:
        #7352ff;

    color: #fff;

    box-shadow:
        0 12px 30px
        rgba(115, 82, 255, .28);
}


.btn-primary:hover {

    background:
        #8365ff;
}


.btn-secondary {

    background:
        rgba(255, 255, 255, .08);

    border:
        1px solid
        rgba(255, 255, 255, .10);

    color: #fff;

    backdrop-filter:
        blur(14px);
}


.btn-secondary:hover {

    background:
        rgba(255, 255, 255, .13);
}


/* =========================================================
   CAST
========================================================= */

.movie-cast-section {

    position: relative;

    z-index: 3;

    padding:
        0 0 70px;
}


.section-heading {

    margin-bottom: 18px;
}


.section-heading h2 {

    margin: 0;

    color: #fff;

    font-size: 21px;

    line-height: 1.2;

    font-weight: 800;

    letter-spacing: -.5px;
}


/* =========================================================
   CAST GRID
========================================================= */




/* =========================================================
   CAST CARD
========================================================= */

.cast-card {

    min-width: 0;

    overflow: hidden;

    border-radius: 10px;

    background: #111824;

    transition:
        transform .25s ease;
}


.cast-card:hover {

    transform:
        translateY(-5px);
}


.cast-image {

    position: relative;

    width: 100%;

    aspect-ratio: 2 / 3;

    overflow: hidden;
}


.cast-image img {

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .35s ease;
}


.cast-card:hover
.cast-image img {

    transform:
        scale(1.04);
}


/* =========================================================
   CAST GRADIENT
========================================================= */

.cast-gradient {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0, 0, 0, .92) 100%
        );
}


/* =========================================================
   CAST INFO
========================================================= */

.cast-info {

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding:
        40px 12px 13px;
}


.cast-info strong {

    display: block;

    overflow: hidden;

    color: #fff;

    font-size: 13px;

    line-height: 1.25;

    font-weight: 700;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.cast-info span {

    display: block;

    margin-top: 4px;

    overflow: hidden;

    color: #b8c0cc;

    font-size: 11px;

    line-height: 1.2;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* =========================================================
   DIRECTORS
========================================================= */

.movie-directors-section {

    position: relative;

    z-index: 3;

    padding-bottom: 100px;
}


.director-list {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;
}


.director-item {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px 15px 10px 10px;

    border-radius: 12px;

    background:
        rgba(255,255,255,.05);

    border:
        1px solid
        rgba(255,255,255,.07);
}


.director-item img {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    object-fit: cover;
}


.director-item strong {

    display: block;

    color: #fff;

    font-size: 13px;
}


.director-item span {

    display: block;

    margin-top: 3px;

    color: #8994a4;

    font-size: 11px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1400px) {

    .movie-container {

        width:
            min(
                calc(100% - 70px),
                1400px
            );
    }


}


@media (max-width: 1100px) {

    .movie-container {

        width:
            calc(100% - 50px);
    }

    .movie-backdrop {

        height: 760px;

        background-position:
            center top;
    }

    .movie-hero {

        min-height: 680px;
    }


}


@media (max-width: 700px) {

    .movie-container {

        width:
            calc(100% - 30px)!important;
    }

    .movie-backdrop {

        height: 700px;

        background-position:
            center top;
    }

    .movie-backdrop-overlay {

        height: 800px;

        background:
            linear-gradient(
                90deg,
                rgba(9,14,23,.88),
                rgba(9,14,23,.38)
            ),
            linear-gradient(
                180deg,
                rgba(9,14,23,.05),
                #090e17 90%
            );
    }

    .movie-hero {

        min-height: 550px!important;

        align-items: flex-end;
    }

    .movie-hero-content {

        padding-bottom: 55px;
    }

    .movie-logo {

        max-width: 90%;

        min-height: 80px;
    }

    .movie-logo img {

        max-height: 105px;
    }

    .movie-logo h1 {

        font-size: 48px;

        letter-spacing: -2px;
    }

    .movie-overview {

        font-size: 14px;

        line-height: 1.65;
    }

    .movie-actions {

        flex-wrap: wrap;
    }

    .btn {

        height: 46px;

        padding: 0 17px;

        font-size: 13px;
    }



    .cast-info {

        padding:
            30px 9px 10px;
    }

    .cast-info strong {

        font-size: 11px;
    }

    .cast-info span {

        font-size: 9px;
    }
}

/* =========================================================
   HERO / CAST TRANSITION
========================================================= */


.movie-hero-content {
    padding-bottom: 110px;
}

.movie-cast-section {
    margin-top: -35px;
    padding-bottom: 90px;
}


/* Backdrop'u daha aşağıya doğru erit */

.movie-backdrop {
    height: 900px;
}

.movie-backdrop-overlay {
    height: 950px;

    background:
        linear-gradient(
            90deg,
            rgba(9, 14, 23, .96) 0%,
            rgba(9, 14, 23, .70) 28%,
            rgba(9, 14, 23, .25) 65%,
            rgba(9, 14, 23, .08) 100%
        ),
        linear-gradient(
            180deg,
            rgba(9, 14, 23, .05) 0%,
            rgba(9, 14, 23, .10) 45%,
            rgba(9, 14, 23, .55) 72%,
            #090e17 96%
        );
}

/* =========================================================
   CAST CAROUSEL
========================================================= */

.cast-carousel {
    width: 100%;
}

.cast-carousel .owl-stage {
    display: flex;
}

.cast-carousel .owl-item {
    display: flex;
}

.cast-card {
    width: 100%;
    min-width: 0;

    overflow: hidden;

    border-radius: 10px;

    background: #111824;

    transition:
        transform .25s ease;
}

.cast-card:hover {
    transform: translateY(-5px);
}

.cast-image {
    position: relative;

    width: 100%;

    aspect-ratio: 2 / 3;

    overflow: hidden;
}

.cast-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .35s ease;
}

.cast-card:hover .cast-image img {
    transform: scale(1.04);
}

.cast-gradient {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0, 0, 0, .92) 100%
        );
}

.cast-info {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding:
        45px 12px 13px;
}

.cast-info strong {
    display: block;

    overflow: hidden;

    color: #fff;

    font-size: 13px;
    line-height: 1.25;

    font-weight: 700;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.cast-info span {
    display: block;

    margin-top: 4px;

    overflow: hidden;

    color: #b8c0cc;

    font-size: 11px;
    line-height: 1.2;

    white-space: nowrap;
    text-overflow: ellipsis;
}
/* =========================================================
   CAST CAROUSEL NAV
========================================================= */

.cast-carousel {
    position: relative;
}

.cast-carousel .owl-nav {
    position: absolute;

    top: -58px;
    right: 0;

    display: flex;
    align-items: center;

    gap: 8px;

    margin: 0 !important;
}


/* BUTON */

.cast-carousel .owl-nav button.owl-prev,
.cast-carousel .owl-nav button.owl-next {

    width: 40px !important;
    height: 40px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    border-radius: 10px !important;

    background: rgba(17, 24, 36, .85) !important;

    border: 1px solid rgba(255, 255, 255, .10) !important;

    color: #fff !important;

    font-size: 0 !important;

    backdrop-filter: blur(12px);

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


/* İKON */

.cast-carousel .owl-nav button span {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: #fff;

    font-size: 25px !important;

    line-height: 1;

    font-family: Arial, sans-serif;

    font-weight: 300;
}


/* HOVER */

.cast-carousel .owl-nav button.owl-prev:hover,
.cast-carousel .owl-nav button.owl-next:hover {

    background: #7352ff !important;

    border-color: #7352ff !important;

    transform: translateY(-2px);
}


/* DISABLED */

.cast-carousel .owl-nav button.disabled {

    opacity: .25 !important;

    cursor: default;

    pointer-events: none;
}

/* =========================================================
   TRAILER MODAL
========================================================= */

.trailer-modal {
    position: fixed;
    inset: 0;

    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}


.trailer-modal.is-open {
    opacity: 1;
    visibility: visible;
}


/* BACKDROP */

.trailer-modal-backdrop {
    position: absolute;
    inset: 0;

    background:
        rgba(3, 7, 14, .88);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    cursor: pointer;
}


/* DIALOG */

.trailer-modal-dialog {
    position: relative;

    z-index: 2;

    width: min(1100px, 100%);

    transform:
        translateY(20px)
        scale(.97);

    transition:
        transform .3s ease;
}


.trailer-modal.is-open
.trailer-modal-dialog {

    transform:
        translateY(0)
        scale(1);
}


/* VIDEO */

.trailer-video {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #000;

    border-radius: 16px;

    box-shadow:
        0 30px 100px
        rgba(0, 0, 0, .65),

        0 0 0 1px
        rgba(255,255,255,.08);
}


.trailer-video iframe {

    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* CLOSE */

.trailer-modal-close {

    position: absolute;

    top: -52px;
    right: 0;

    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid
        rgba(255,255,255,.12);

    border-radius: 10px;

    background:
        rgba(15,20,30,.9);

    cursor: pointer;

    z-index: 5;

    transition:
        background .2s ease,
        transform .2s ease;
}


.trailer-modal-close:hover {

    background:
        #7352ff;

    transform:
        translateY(-2px);
}


.trailer-modal-close span {

    position: absolute;

    width: 17px;
    height: 2px;

    border-radius: 10px;

    background: #fff;
}


.trailer-modal-close span:first-child {

    transform:
        rotate(45deg);
}


.trailer-modal-close span:last-child {

    transform:
        rotate(-45deg);
}


body.trailer-open {
    overflow: hidden;
}


/* MOBILE */

@media (max-width: 768px) {

    .trailer-modal {

        padding: 15px;
    }

    .trailer-video {

        border-radius: 12px;
    }

    .trailer-modal-close {

        top: -48px;

        width: 36px;
        height: 36px;
    }

}
/* =========================
   FILM BİLGİLERİ
========================= */

.movie-details {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
    margin-bottom: 55px;
    position: relative;
    z-index: 5;
}

.movie-detail-item {
    min-height: 70px;
    padding: 15px 17px;

    background: rgba(18, 24, 34, .82);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 12px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;

    backdrop-filter: blur(10px);
}

.movie-detail-item span {
    display: block;
    color: #7f8797 !important;
    font-size: 11px;
    font-weight: 600;
}

.movie-detail-item strong {
    display: block;
    color: #f1f3f7 !important;
    font-size: 13px;
    font-weight: 700;
}

.movie-detail-item strong:last-child {
    color: #f1f3f7;
}


/* Bölüm başlığı */
.movie-details + * {
    position: relative;
    z-index: 5;
}


/* Film bilgileri başlığı */
.movie-container .section-heading h2 {
    color: #f1f3f7 !important;
}


/* Eğer mevcut section-heading koyu renk veriyorsa */
.movie-container .section-heading {
    position: relative;
    z-index: 5;
}


/* MOBİL */

@media (max-width: 900px) {

    .movie-details {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 600px) {

    .movie-details {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-bottom: 40px;
    }

    .movie-detail-item {
        padding: 13px;
        min-height: 65px;
    }

}
.movie-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
    margin-bottom: 45px;
}

.movie-keyword {
    display: inline-flex;
    align-items: center;

    padding: 8px 13px;

    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 999px;

    color: #aeb6c5;
    font-size: 12px;
    font-weight: 600;
}

/* =========================
   PRODUCTION
========================= */

.production-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 20px;
    margin-bottom: 50px;
}

.production-block {
    width: 100%;
}

.production-label {
    margin-bottom: 12px;

    color: #777f90;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
}

.production-companies {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.production-company {
    min-width: 180px;
    max-width: 240px;
    min-height: 72px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 10px 14px;

    background: rgba(18, 24, 34, .78);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.production-company:hover {
    background: rgba(28, 35, 48, .9);
    border-color: rgba(255,255,255,.1);
    transform: translateY(-2px);
}

.production-logo {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 7px;

    background: #fff;
    border-radius: 9px;
}

.production-logo img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.production-logo-empty {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.06);
}

.production-logo-empty span {
    color: #8d96a8;
    font-size: 18px;
    font-weight: 800;
}

.production-company-name {
    min-width: 0;

    color: #e7eaf0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}


/* ÜLKELER */

.production-countries {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.production-country {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 12px;

    color: #b7becb;
    background: rgba(255,255,255,.045);

    border: 1px solid rgba(255,255,255,.06);
    border-radius: 999px;

    font-size: 12px;
    font-weight: 600;
}

.country-code {
    color: #8d96a8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .5px;
}


/* MOBİL */

@media (max-width: 600px) {

    .production-wrap {
        gap: 22px;
        margin-bottom: 40px;
    }

    .production-companies {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .production-company {
        min-width: 0;
        max-width: none;
        min-height: 64px;
        padding: 9px;
    }

    .production-logo {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .production-company-name {
        font-size: 11px;
    }

}
/* =========================
   DİZİ BÖLÜMLERİ
========================= */

/* =========================================================
   VISQO — NEW EPISODE DESIGN
========================================================= */

.episode-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* =========================================================
   EPISODE
========================================================= */

.episode-card {
    position: relative;

    display: grid;
    grid-template-columns: 310px minmax(0, 1fr);

    width: 100%;
    min-height: 175px;

    overflow: hidden;

    background: #0d1420;

    border: 1px solid rgba(255,255,255,.065);
    border-radius: 20px;

    box-shadow:
        0 8px 30px rgba(0,0,0,.18);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


/* hover */

.episode-card:hover {
    transform: translateY(-3px);

    border-color:
        rgba(139,92,246,.30);

    box-shadow:
        0 18px 45px rgba(0,0,0,.30),
        0 0 35px rgba(124,58,237,.07);
}


/* =========================================================
   IMAGE
========================================================= */

.episode-image {
    position: relative;

    width: 100%;
    height: 175px;

    overflow: hidden;

    background: #080d16;
}

.episode-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .6s cubic-bezier(.2,.7,.2,1),
        filter .4s ease;
}

.episode-card:hover .episode-image img {
    transform: scale(1.07);

    filter: brightness(1.08);
}


/* image gradient */

.episode-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(13,20,32,0) 45%,
            rgba(13,20,32,.85) 100%
        );

    pointer-events: none;
}


/* =========================================================
   EPISODE NUMBER — IMAGE ÜZERİNDE
========================================================= */

.episode-number {
    position: absolute;

    left: 15px;
    top: 15px;

    z-index: 2;

    padding: 7px 11px;

    border-radius: 9px;

    background:
        rgba(8,10,17,.72);

    border:
        1px solid rgba(255,255,255,.12);

    color: #ffffff;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: .4px;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


/* =========================================================
   PLAY BUTTON
========================================================= */

.episode-image::before {
    content: "▶";

    position: absolute;

    z-index: 3;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%,-50%)
        scale(.85);

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-left: 2px;

    border-radius: 50%;

    background:
        rgba(10,13,20,.72);

    border:
        1px solid rgba(255,255,255,.2);

    color: #fff;

    font-size: 15px;

    opacity: 0;

    box-shadow:
        0 10px 30px rgba(0,0,0,.35);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.episode-card:hover .episode-image::before {
    opacity: 1;

    transform:
        translate(-50%,-50%)
        scale(1);
}


/* =========================================================
   CONTENT
========================================================= */

.episode-content {
    position: relative;

    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 25px 50px 24px 28px;
}


/* =========================================================
   TOP
========================================================= */

.episode-top {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 8px;
}

.episode-number {
    /* position:absolute olduğu için */
}

.episode-top .episode-number {
    position: static;

    padding: 0;

    background: none;

    border: 0;

    color: #a855f7;

    font-size: 12px;
}

.episode-date {
    position: relative;

    padding-left: 11px;

    color: #687386;

    font-size: 11px;
    font-weight: 600;
}

.episode-date::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 3px;
    height: 3px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: #596274;
}


/* =========================================================
   TITLE
========================================================= */

.episode-title {
    margin: 0;

    color: #f5f7fb;

    font-size: 20px;
    font-weight: 800;

    line-height: 1.3;

    letter-spacing: -.3px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.episode-overview {
    display: -webkit-box;

    max-width: 900px;

    margin: 9px 0 0;

    overflow: hidden;

    color: #7f899a;

    font-size: 12px;
    font-weight: 500;

    line-height: 1.65;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}


/* =========================================================
   META
========================================================= */

.episode-meta {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-top: 15px;
}

.episode-meta span {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    color: #697488;

    font-size: 11px;
    font-weight: 700;
}

.episode-meta span:last-child {
    color: #ffd21c;
}


/* =========================================================
   RIGHT DECORATION
========================================================= */

.episode-content::after {
    content: "›";

    position: absolute;

    right: 22px;
    top: 50%;

    transform: translateY(-50%);

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        rgba(255,255,255,.035);

    border:
        1px solid rgba(255,255,255,.06);

    color: #555f72;

    font-size: 22px;
    font-weight: 300;

    transition:
        color .25s ease,
        background .25s ease,
        transform .25s ease;
}

.episode-card:hover .episode-content::after {

    color: #c29aff;

    background:
        rgba(139,92,246,.11);

    transform:
        translateY(-50%)
        translateX(2px);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .episode-list {
        gap: 14px;
    }


    .episode-card {

        display: block;

        min-height: 0;

        border-radius: 17px;
    }


    .episode-image {

        height: 205px;
    }


    .episode-image::after {

        background:
            linear-gradient(
                180deg,
                rgba(5,8,14,.05) 35%,
                rgba(5,8,14,.85) 100%
            );
    }


    .episode-image::before {

        opacity: 1;

        transform:
            translate(-50%,-50%)
            scale(1);
    }


    .episode-content {

        padding: 17px 18px 19px;
    }


    .episode-top {

        margin-bottom: 6px;
    }


    .episode-title {

        font-size: 17px;
    }


    .episode-overview {

        font-size: 12px;

        line-height: 1.6;

        -webkit-line-clamp: 3;
    }


    .episode-meta {

        margin-top: 12px;
    }


    .episode-content::after {

        display: none;
    }
}

/*
|--------------------------------------------------------------------------
| HERO CONTENT FIX
|--------------------------------------------------------------------------
| Açıklama uzadığında hero içeriğinin yukarı/aşağı kaymasını engeller.
| İçerik artık dikey merkezlenmez; sabit bir üst konumdan başlar.
*/

.movie-detail .movie-hero {
    position: relative;
}

.movie-detail .movie-hero .movie-container {
    position: relative;
    min-height: 720px;
}

.movie-detail .movie-hero-content {
    position: absolute !important;

    top: 150px !important;
    left: 0 !important;

    transform: none !important;

    width: min(760px, calc(100% - 420px)) !important;
    max-width: 760px !important;

    margin: 0 !important;
}

/* Logo hiçbir şekilde açıklamanın uzunluğundan etkilenmesin */
.movie-detail .movie-logo {
    flex: 0 0 auto;
}

/* Açıklama aşağı doğru büyüsün ama sağdaki alanı işgal etmesin */
.movie-detail .movie-overview {
    width: 100% !important;
    max-width: 680px !important;

    line-height: 1.75;
    margin-top: 20px;
    margin-bottom: 26px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}

/* Butonlar metin uzasa bile hero bloğunun doğal akışında aşağıda kalır */
.movie-detail .movie-actions {
    margin-top: 0 !important;
}

/* Tablet */
@media (max-width: 1100px) {
    .movie-detail .movie-hero .movie-container {
        min-height: 680px;
    }

    .movie-detail .movie-hero-content {
        top: 100px !important;
        width: min(680px, calc(100% - 100px)) !important;
        max-width: 680px !important;
    }
}

/* Mobil */
@media (max-width: 768px) {
    .movie-detail .movie-hero .movie-container {
        min-height: 700px;
    }

    .movie-detail .movie-hero-content {
        position: absolute !important;

        top: 70px !important;
        left: 20px !important;

        width: calc(100% - 40px) !important;
        max-width: none !important;

        transform: none !important;
    }

    .movie-detail .movie-overview {
        max-width: 100% !important;
        -webkit-line-clamp: 5;
    }
}
/* =========================================================
   OYUNCULAR CAROUSEL - OKLAR
   Tam buton alanı tıklanabilir
========================================================= */

.cast-carousel {
    position: relative;
}

/* Owl navigation katmanı */
.cast-carousel .owl-nav {
    position: absolute !important;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;
    height: 100%;

    margin: 0 !important;

    pointer-events: none !important;

    z-index: 50 !important;
}

/* Sol + sağ buton */
.cast-carousel .owl-nav button.owl-prev,
.cast-carousel .owl-nav button.owl-next {
    position: absolute !important;

    width: 46px !important;
    height: 46px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;

    pointer-events: auto !important;

    cursor: pointer !important;

    z-index: 100 !important;

    border-radius: 12px !important;

    background: rgba(15, 23, 36, .82) !important;

    border: 1px solid rgba(255,255,255,.09) !important;

    color: #fff !important;

    font-size: 22px !important;

    line-height: 1 !important;

    transition:
        background .2s ease,
        border-color .2s ease,
        opacity .2s ease,
        transform .2s ease !important;
}

/* SOL */
.cast-carousel .owl-nav button.owl-prev {
    left: 10px !important;
}

.cast-carousel .owl-nav button.owl-next {
    right: 10px !important;
}

/* İkon */
.cast-carousel .owl-nav button span {
    display: flex !important;

    width: 100% !important;
    height: 100% !important;

    align-items: center !important;
    justify-content: center !important;

    pointer-events: none !important;
}

/* Hover */
.cast-carousel .owl-nav button.owl-prev:hover,
.cast-carousel .owl-nav button.owl-next:hover {
    background: rgba(30, 41, 59, .95) !important;

    border-color:
        rgba(255,255,255,.16) !important;

    transform: translateY(-1px);
}

/* Owl disabled */
.cast-carousel .owl-nav button.disabled {
    opacity: .28 !important;

    pointer-events: none !important;

    cursor: default !important;
}

/* =========================================================
   ÜST KATMANLARIN OKLARIN ÜSTÜNE ÇIKMASINI ENGELLE
========================================================= */

.cast-carousel .owl-stage-outer {
    position: relative;

    z-index: 1;
}

.cast-carousel .owl-stage {
    position: relative;

    z-index: 1;
}

.cast-carousel .owl-nav {
    z-index: 999 !important;
}
/* =========================================================
   VISQO — MODERN SEASON / EPISODE UI
========================================================= */

.season-select {
    position: relative;
    display: block;
    overflow: hidden;

    width: 185px;
    height: 275px;

    flex: 0 0 185px;

    border-radius: 18px;

    background: #0d121d;

    border: 1px solid rgba(255,255,255,.08);

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;

    text-decoration: none;

    isolation: isolate;
}

.season-select:hover {
    

    border-color: rgba(139,92,246,.55);

    box-shadow:
        0 18px 40px rgba(0,0,0,.35),
        0 0 25px rgba(124,58,237,.12);
}


/* POSTER */

.season-select img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .6s cubic-bezier(.2,.7,.2,1),
        filter .3s ease;
}

.season-select:hover img {
    transform: scale(1.06);
}


/* KARARTMA */

.season-select::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            to top,
            rgba(3,6,14,.98) 0%,
            rgba(3,6,14,.78) 32%,
            rgba(3,6,14,.18) 68%,
            rgba(3,6,14,.05) 100%
        );

    pointer-events: none;
}


/* SEASON OVERLAY */

.season-select .recommendation-overlay {

    position: absolute;

    z-index: 2;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 18px;

    color: #fff;
}


/* SEASON TITLE */

.season-select .recommendation-title {

    font-size: 15px;

    font-weight: 800;

    letter-spacing: -.25px;

    color: #fff;

    margin-bottom: 7px;
}


/* META */

.season-select .recommendation-meta {

    display: flex;

    align-items: center;

    gap: 6px;

    font-size: 12px;

    font-weight: 600;

    color: rgba(255,255,255,.55);
}


/* ACTIVE SEASON */

.season-select.active {

    border-color: rgba(139,92,246,.9);

    box-shadow:
        0 0 0 1px rgba(139,92,246,.35),
        0 15px 45px rgba(124,58,237,.2),
        0 0 35px rgba(124,58,237,.12);

    transform: translateY(-5px);
}

.season-select.active::before {

    content: "";

    position: absolute;

    z-index: 4;

    top: 12px;
    left: 12px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #a855f7;

    box-shadow:
        0 0 0 5px rgba(168,85,247,.15),
        0 0 18px rgba(168,85,247,.8);
}


/* =========================================================
   SEASON CAROUSEL
========================================================= */

.cast-carousel {

    display: flex;

    gap: 12px;

    overflow-x: auto;

    overflow-y: hidden;

    padding:
        8px
        4px
        18px;

    scrollbar-width: none;

    -ms-overflow-style: none;
}

.cast-carousel::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   EPISODE AREA
========================================================= */

#episode-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-top: 22px;

    width: 100%;
}


/* =========================================================
   EPISODE CARD
========================================================= */

.episode-card {

    position: relative;

    display: grid;

    grid-template-columns: 245px minmax(0,1fr) auto;

    align-items: center;

    min-height: 145px;

    overflow: hidden;

    border-radius: 17px;

    background:
        linear-gradient(
            135deg,
            rgba(18,25,39,.96),
            rgba(10,15,26,.96)
        );

    border: 1px solid rgba(255,255,255,.065);

    box-shadow:
        0 8px 30px rgba(0,0,0,.12);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


.episode-card:hover {

    transform: translateY(-2px);

    border-color:
        rgba(139,92,246,.28);

    box-shadow:
        0 15px 40px rgba(0,0,0,.25),
        0 0 25px rgba(124,58,237,.06);
}


/* =========================================================
   EPISODE IMAGE
========================================================= */

.episode-card img {

    width: 245px;

    height: 100%;

    object-fit: cover;

    display: block;

    transition:
        transform .5s ease,
        filter .3s ease;
}

.episode-card:hover img {

    transform: scale(1.04);

    filter: brightness(1.05);
}


/* =========================================================
   EPISODE CONTENT
========================================================= */

.episode-info {

    min-width: 0;

    padding:
        20px 25px;
}


/* NUMBER + DATE */

.episode-number {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    margin-bottom: 7px;

    font-size: 11px;

    font-weight: 800;

    color: #a855f7;

    letter-spacing: .3px;
}


.episode-number span {

    color: rgba(255,255,255,.35);
}


/* TITLE */

.episode-title {

    margin: 0 0 7px;

    color: #fff;

    font-size: 16px;

    font-weight: 800;

    letter-spacing: -.25px;
}


/* DESCRIPTION */

.episode-overview {

    margin: 0;

    max-width: 850px;

    color: rgba(255,255,255,.48);

    font-size: 12px;

    line-height: 1.55;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* =========================================================
   EPISODE META
========================================================= */

.episode-meta {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 12px;

    color: rgba(255,255,255,.38);

    font-size: 11px;

    font-weight: 700;
}


.episode-rating {

    color: #facc15;
}


/* =========================================================
   PLAY BUTTON
========================================================= */

.episode-play {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;
    height: 48px;

    margin-right: 20px;

    flex: 0 0 48px;

    border-radius: 50%;

    background:
        rgba(255,255,255,.045);

    border: 1px solid rgba(255,255,255,.10);

    color: #fff;

    transition:
        background .25s ease,
        transform .25s ease,
        border-color .25s ease;
}


.episode-card:hover .episode-play {

    background:
        rgba(139,92,246,.18);

    border-color:
        rgba(139,92,246,.45);

    transform: scale(1.08);
}


.episode-play i {

    font-size: 14px;

    margin-left: 2px;
}


/* =========================================================
   LOADING
========================================================= */

.episode-loading {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 120px;

    border-radius: 18px;

    background:
        rgba(15,22,35,.8);

    border:
        1px solid rgba(255,255,255,.06);

    color:
        rgba(255,255,255,.45);

    font-size: 13px;
}


/* =========================================================
   ERROR
========================================================= */

.episode-error {

    padding: 30px;

    text-align: center;

    border-radius: 16px;

    background:
        rgba(127,29,29,.08);

    border:
        1px solid rgba(239,68,68,.15);

    color:
        rgba(255,255,255,.5);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .cast-carousel {

        gap: 10px;

        padding-left: 2px;
        padding-right: 2px;
    }


    .season-select {

        width: 145px;
        height: 215px;

        flex-basis: 145px;

        border-radius: 15px;
    }


    .season-select .recommendation-overlay {

        padding: 13px;
    }


    .season-select .recommendation-title {

        font-size: 13px;
    }


    .season-select .recommendation-meta {

        font-size: 10px;
    }


    /* EPISODE */

    .episode-card {

        display: grid;

        grid-template-columns: 105px minmax(0,1fr);

        min-height: 105px;

        border-radius: 14px;
    }


    .episode-card img {

        width: 105px;

        height: 105px;
    }


    .episode-info {

        padding: 13px;
    }


    .episode-title {

        font-size: 13px;

        margin-bottom: 5px;
    }


    .episode-overview {

        font-size: 10px;

        -webkit-line-clamp: 2;
    }


    .episode-number {

        font-size: 9px;

        margin-bottom: 4px;
    }


    .episode-meta {

        font-size: 9px;

        margin-top: 7px;
    }


    .episode-play {

        display: none;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .season-select {

        width: 132px;
        height: 198px;

        flex-basis: 132px;
    }


    .episode-card {

        grid-template-columns: 92px minmax(0,1fr);

        min-height: 92px;
    }


    .episode-card img {

        width: 92px;
        height: 92px;
    }


    .episode-info {

        padding: 11px;
    }


    .episode-title {

        font-size: 12px;
    }


    .episode-overview {

        font-size: 9px;

        -webkit-line-clamp: 2;
    }

}