* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


:root {
    --red: #e50914;
    --dark: #08090d;
    --card: #111318;
    --border: #292c34;
    --text: #ffffff;
    --muted: #8f939d;
}


body {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: var(--dark);

    color: var(--text);
}


/* =================================
   LOGIN PAGE
================================= */

.login-page {

    min-height: 100vh;

    display: grid;

    grid-template-columns:
        1.1fr 0.9fr;

}


/* =================================
   VISUAL
================================= */

.login-visual {

    min-height: 100vh;

    background-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.85),
            rgba(0,0,0,.35)
        ),
        url("../assets/login-bg.jpg");

    background-size: cover;

    background-position: center;

    position: relative;

}


.visual-overlay {

    height: 100%;

    padding: 55px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}


.logo {

    font-size: 23px;

    font-weight: 800;

    letter-spacing: 4px;

}


.visual-text {

    max-width: 580px;

}


.visual-text span {

    color: var(--red);

    font-size: 12px;

    font-weight: bold;

    letter-spacing: 3px;

}


.visual-text h1 {
    font-size: clamp(32px, 3.2vw, 60px);
    line-height: 1.1;
    margin: 15px 0 25px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.visual-text p {
    color: #e0e0e0;
    max-width: 470px;
    line-height: 1.7;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}


/* =================================
   LOGIN FORM
================================= */

.login-form-section {

    min-height: 100vh;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 40px;

    background: #0c0d11;

}


.login-form-box {

    width: 100%;

    max-width: 430px;

}


.mobile-logo {

    display: none;

    font-size: 22px;

    font-weight: bold;

    letter-spacing: 3px;

    margin-bottom: 50px;

}


.welcome {

    color: var(--red);

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 3px;

    margin-bottom: 12px;

}


.login-form-box h2 {

    font-size: 36px;

    margin-bottom: 10px;

}


.login-description {

    color: var(--muted);

    font-size: 14px;

    line-height: 1.6;

    margin-bottom: 35px;

}


/* =================================
   INPUT
================================= */

.input-group {

    margin-bottom: 20px;

}


.input-group label {

    display: block;

    font-size: 13px;

    font-weight: bold;

    margin-bottom: 9px;

}


.input-wrapper {

    display: flex;

    align-items: center;

    gap: 10px;

    background: #15171d;

    border: 1px solid var(--border);

    border-radius: 10px;

    padding: 0 14px;

    transition: .2s;

}


.input-wrapper:focus-within {

    border-color: var(--red);

}


.input-wrapper > span {

    opacity: .7;

}


.input-wrapper input {

    width: 100%;

    height: 50px;

    border: none;

    outline: none;

    background: transparent;

    color: white;

    font-size: 14px;

}


.input-wrapper input::placeholder {

    color: #666b75;

}


.show-password {

    border: none;

    background: transparent;

    cursor: pointer;

    font-size: 15px;

}


/* =================================
   OPTIONS
================================= */

.login-options {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin: 5px 0 25px;

    font-size: 12px;

}


.remember {

    display: flex;

    gap: 7px;

    align-items: center;

    color: #aaa;

}


.login-options a,
.register-text a {

    color: var(--red);

    text-decoration: none;

}


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

.login-button {

    width: 100%;

    height: 52px;

    border: none;

    border-radius: 10px;

    background: var(--red);

    color: white;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 1px;

    cursor: pointer;

    transition: .2s;

}


.login-button:hover {

    transform: translateY(-1px);

    filter: brightness(1.1);

}


/* =================================
   REGISTER
================================= */

.register-text {

    text-align: center;

    color: #777;

    font-size: 13px;

    margin-top: 25px;

}


/* =================================
   DEMO
================================= */

.demo-account {

    margin-top: 30px;

    padding: 15px;

    background: #15171d;

    border: 1px solid #242730;

    border-radius: 9px;

    color: #777;

    font-size: 11px;

}


.demo-account small {

    display: block;

    color: #555;

    font-size: 9px;

    letter-spacing: 2px;

    margin-bottom: 8px;

}


.demo-account p {

    margin-top: 3px;

}


.demo-account b {

    color: #aaa;

}


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

@media (max-width: 850px) {

    .login-page {

        grid-template-columns: 1fr;

    }


    .login-visual {

        display: none;

    }


    .login-form-section {

        min-height: 100vh;

        padding: 30px 22px;

    }


    .mobile-logo {

        display: block;

    }


    .login-form-box h2 {

        font-size: 30px;

    }

}

/* ==========================================
   HOME NAVBAR
========================================== */

.home-navbar {

    height: 72px;

    padding: 0 6%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: #0b0c10;

    border-bottom: 1px solid #22252c;

    position: sticky;

    top: 0;

    z-index: 100;

}


.home-logo {

    font-size: 21px;

    font-weight: bold;

    letter-spacing: 3px;

}


.home-navbar nav {

    display: flex;

    gap: 30px;

}


.home-navbar nav a {

    color: #858993;

    text-decoration: none;

    font-size: 13px;

}


.home-navbar nav a:hover,
.home-navbar nav a.active {

    color: white;

}


.profile-menu {

    display: flex;

    align-items: center;

    gap: 10px;

}


.profile-icon {

    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: #191b22;

    display: flex;

    align-items: center;

    justify-content: center;

}


.profile-menu small {

    display: block;

    color: #666a74;

    font-size: 9px;

}


.profile-menu strong {

    font-size: 12px;

}


.logout-button {

    margin-left: 15px;

    border: 1px solid #333;

    background: transparent;

    color: #aaa;

    padding: 7px 12px;

    border-radius: 7px;

    cursor: pointer;

}


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

.home-hero {

    min-height: 520px;

    display: flex;

    align-items: center;

    padding: 60px 7%;

    background:

        linear-gradient(
            90deg,
            #08090d 15%,
            rgba(8,9,13,.75),
            rgba(8,9,13,.15)
        ),

        url("../assets/login-bg.jpg");

    background-size: cover;

    background-position: center;

}


.hero-content-home {

    max-width: 600px;

}


.hero-tag {

    color: #e50914;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 3px;

}


.hero-content-home h1 {

    font-size: 64px;

    line-height: 1;

    margin: 15px 0 20px;

}


.hero-content-home p {

    color: #bbb;

    line-height: 1.6;

    max-width: 450px;

}


.primary-button {

    display: inline-block;

    margin-top: 28px;

    padding: 13px 25px;

    background: #e50914;

    color: white;

    text-decoration: none;

    border-radius: 8px;

    font-size: 13px;

    font-weight: bold;

}


/* ==========================================
   SECTION
========================================== */

.movie-section,
.cinema-location {
    padding: 65px 7%;

    background:
        linear-gradient(
            180deg,
            #0d1016 0%,
            #08090d 45%,
            #050609 100%
        );
}


.section-heading {

    display: flex;

    align-items: end;

    justify-content: space-between;

    margin-bottom: 30px;

}


.section-heading span {

    color: #e50914;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 2px;

}


.section-heading h2 {

    font-size: 30px;

    margin-top: 7px;

}


.section-heading > a {

    color: #888;

    text-decoration: none;

    font-size: 12px;

}


/* ==========================================
   MOVIES
========================================== */

.movie-list {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 22px;

}


.movie-card-home {

    background: #13151b;

    border: 1px solid #22252d;

    border-radius: 13px;

    overflow: hidden;

    transition: .25s;

}


.movie-card-home:hover {

    transform: translateY(-5px);

    border-color: #3a3d45;

}


.movie-poster {

    position: relative;

}


.movie-poster img {

    width: 100%;

    height: 350px;

    object-fit: cover;

    display: block;

}


.movie-rating {

    position: absolute;

    top: 12px;

    right: 12px;

    padding: 6px 9px;

    border-radius: 6px;

    background: rgba(0,0,0,.8);

    color: white;

    font-size: 11px;

}


.movie-card-content {

    padding: 15px;

}


.movie-card-content h3 {

    font-size: 16px;

    margin-bottom: 7px;

}


.movie-card-content p {

    color: #777;

    font-size: 11px;

    margin-bottom: 15px;

}


.movie-card-content button {

    width: 100%;

    padding: 10px;

    border: none;

    border-radius: 7px;

    background: #e50914;

    color: white;

    font-weight: bold;

    cursor: pointer;

}


/* ==========================================
   CINEMA
========================================== */

.cinema-section {

    background: #0f1015;

}


.cinema-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;

}


.cinema-card {

    background: #15171d;

    border: 1px solid #252830;

    padding: 28px;

    border-radius: 12px;

}


.cinema-card > div {

    font-size: 28px;

    margin-bottom: 15px;

}


.cinema-card h3 {

    margin-bottom: 6px;

}


.cinema-card p {

    color: #777;

    font-size: 12px;

    margin-bottom: 20px;

}


.cinema-card button {

    background: transparent;

    color: #ddd;

    border: 1px solid #333;

    padding: 9px 15px;

    border-radius: 7px;

    cursor: pointer;

}


/* ==========================================
   PROMO
========================================== */

.promo-section {

    margin: 70px 7%;

    min-height: 280px;

    border-radius: 16px;

    padding: 50px;

    display: flex;

    align-items: center;

    background:

        linear-gradient(
            90deg,
            #171920,
            #0e0f14
        );

    border: 1px solid #282b33;

}


.promo-content span {

    color: #e50914;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 3px;

}


.promo-content h2 {

    font-size: 34px;

    margin: 10px 0;

}


.promo-content p {

    color: #888;

    max-width: 450px;

    font-size: 13px;

    line-height: 1.6;

}


.promo-content button {

    margin-top: 20px;

    padding: 11px 20px;

    border: none;

    border-radius: 7px;

    background: #e50914;

    color: white;

    font-weight: bold;

}


/* ==========================================
   FOOTER
========================================== */

.home-footer {

    text-align: center;

    padding: 55px 20px;

    color: #666;

}


.home-footer h3 {

    color: white;

    letter-spacing: 3px;

    margin-bottom: 8px;

}


.home-footer p {

    font-size: 12px;

}


.footer-line {

    width: 80px;

    height: 1px;

    background: #333;

    margin: 25px auto;

}


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

@media (max-width: 950px) {

    .home-navbar nav {

        display: none;

    }


    .movie-list {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .cinema-grid {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 600px) {

    .home-hero {

        min-height: 500px;

        padding: 40px 25px;

    }


    .hero-content-home h1 {

        font-size: 43px;

    }


    .movie-section,
    .cinema-section {

        padding: 50px 20px;

    }


    .movie-list {

        grid-template-columns: 1fr;

    }


    .movie-poster img {

        height: 420px;

    }


    .profile-menu > div:not(.profile-icon) {

        display: none;

    }


    .logout-button {

        margin-left: 5px;

    }


    .promo-section {

        margin: 30px 20px;

        padding: 30px;

    }

}

/* ==========================================
   CINEMA HOME - PREMIUM
========================================== */

.cinema-navbar {

    height: 74px;

    padding: 0 6%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background: rgba(8, 9, 13, .96);

    border-bottom: 1px solid #24262d;

    position: sticky;

    top: 0;

    z-index: 100;

}


.cinema-logo {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 21px;

    font-weight: 800;

    letter-spacing: 3px;

}


.cinema-logo span {

    font-size: 20px;

}


.desktop-nav {

    display: flex;

    gap: 35px;

}


.desktop-nav a {

    color: #777b86;

    text-decoration: none;

    font-size: 13px;

    transition: .2s;

}


.desktop-nav a:hover,
.desktop-nav a.active {

    color: white;

}


.desktop-nav a.active {

    position: relative;

}


.desktop-nav a.active::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: -27px;

    height: 2px;

    background: #e50914;

}


.nav-right {

    display: flex;

    align-items: center;

    gap: 15px;

}


.location-button {

    background: #15171d;

    border: 1px solid #282b33;

    color: #bbb;

    padding: 8px 13px;

    border-radius: 7px;

    font-size: 11px;

}


.user-box {

    display: flex;

    align-items: center;

    gap: 8px;

}


.user-avatar {

    width: 34px;

    height: 34px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #1b1d24;

}


.user-info small {

    display: block;

    color: #656974;

    font-size: 9px;

}


.user-info strong {

    font-size: 11px;

}


.logout-button {

    background: transparent;

    border: 1px solid #30333b;

    color: #999;

    border-radius: 7px;

    padding: 8px 12px;

    cursor: pointer;

    font-size: 10px;

}


.logout-button:hover {

    border-color: #e50914;

    color: white;

}


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

.cinema-hero {

    min-height: 600px;

    position: relative;

    display: flex;

    align-items: center;

    padding: 60px 7%;

    background-image:

        url("../assets/superman.jpg");

    background-size: cover;

    background-position: center;

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            #08090d 5%,
            rgba(8,9,13,.88) 35%,
            rgba(8,9,13,.30) 75%,
            rgba(8,9,13,.80)
        );

}


.hero-info {

    position: relative;

    z-index: 2;

    max-width: 560px;

}


.hero-label {

    color: #e50914;

    font-size: 10px;

    font-weight: bold;

    letter-spacing: 3px;

}


.hero-info h1 {

    font-size: clamp(
        55px,
        7vw,
        90px
    );

    line-height: .9;

    margin: 16px 0;

    letter-spacing: -3px;

}


.hero-meta {

    display: flex;

    gap: 12px;

    color: #bfc1c7;

    font-size: 12px;

    margin-bottom: 20px;

}


.hero-info > p {

    color: #a4a6ad;

    max-width: 480px;

    font-size: 13px;

    line-height: 1.7;

}


.hero-buttons {

    display: flex;

    gap: 12px;

    margin-top: 28px;

}


.watch-button {

    background: #e50914;

    color: white;

    text-decoration: none;

    padding: 13px 21px;

    border-radius: 7px;

    font-size: 12px;

    font-weight: bold;

}


.detail-button {

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

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

    color: white;

    padding: 13px 21px;

    border-radius: 7px;

    cursor: pointer;

    font-size: 12px;

}


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

.cinema-content {
    background:
        radial-gradient(
            circle at 50% -10%,
            #252832 0%,
            #11141b 30%,
            #08090d 65%,
            #050609 100%
        ) !important;

    min-height: 100vh;
}


.movie-section,
.cinema-location {
    padding: 65px 7%;

    background:
        linear-gradient(
            180deg,
            #0d1016 0%,
            #08090d 45%,
            #050609 100%
        );
}


.section-top {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    margin-bottom: 28px;

}


.section-label {

    color: #e50914;

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 3px;

}


.section-top h2 {

    margin-top: 7px;

    font-size: 29px;

}


.section-top > a {

    color: #888;

    text-decoration: none;

    font-size: 11px;

}


/* ==========================================
   MOVIE GRID
========================================== */

.movie-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

}


.movie-card {

    min-width: 0;

}

.poster-container {
    position: relative;
    overflow: hidden;

    border-radius: 12px;

    background: #10131a;

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

    box-shadow:
        0 15px 35px rgba(0,0,0,.45);

    transition: .3s ease;
}


.poster-container img {

    width: 100%;

    height: 390px;

    object-fit: cover;

    display: block;

    transition: .35s;

}


.movie-card:hover
.poster-container img {

    transform: scale(1.04);

}


.rating {

    position: absolute;

    top: 10px;

    right: 10px;

    background: rgba(0,0,0,.78);

    padding: 6px 8px;

    border-radius: 5px;

    font-size: 10px;

}


.poster-overlay {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0,0,0,.55);

    opacity: 0;

    transition: .25s;

}


.movie-card:hover
.poster-overlay {

    opacity: 1;

}


.poster-overlay a {

    background: #e50914;

    color: white;

    padding: 11px 17px;

    border-radius: 6px;

    text-decoration: none;

    font-size: 11px;

    font-weight: bold;

}


.movie-info {

    padding: 13px 2px;

}


.movie-info h3 {

    font-size: 15px;

    margin-bottom: 5px;

}


.movie-info p {

    color: #70737c;

    font-size: 10px;

}


/* ==========================================
   COMING SOON
========================================== */

.coming-grid {

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 20px;

}


.coming-card {

    min-height: 230px;

    position: relative;

    overflow: hidden;

    border-radius: 10px;

    background: #13151b;

}


.coming-card img {

    width: 100%;

    height: 230px;

    object-fit: cover;

    opacity: .65;

}


.coming-card > div {

    position: absolute;

    inset: 0;

    padding: 30px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    background:
        linear-gradient(
            transparent,
            rgba(0,0,0,.9)
        );

}


.coming-card span {

    color: #e50914;

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 2px;

}


.coming-card h3 {

    margin-top: 7px;

    font-size: 22px;

}


.coming-card p {

    color: #999;

    font-size: 11px;

    margin-top: 4px;

}


/* ==========================================
   CINEMA LOCATION
========================================== */

.cinema-location {

    background: #0e1015;

}


.cinema-cards {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 18px;

}


.cinema-place {

    padding: 23px;

    display: flex;

    align-items: center;

    gap: 14px;

    background: #15171d;

    border: 1px solid #242730;

    border-radius: 10px;

}


.cinema-icon {

    width: 43px;

    height: 43px;

    flex-shrink: 0;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #20232b;

}


.cinema-place h3 {

    font-size: 14px;

}


.cinema-place p {

    color: #747781;

    font-size: 10px;

    margin-top: 4px;

}


.cinema-place button {

    margin-left: auto;

    background: transparent;

    border: none;

    color: #aaa;

    font-size: 10px;

    cursor: pointer;

}


/* ==========================================
   PROMO
========================================== */

.promo-banner {

    margin: 65px 7%;

    padding: 42px;

    min-height: 220px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border: 1px solid #292c34;

    border-radius: 13px;

    background:
        linear-gradient(
            120deg,
            #171920,
            #0d0f14
        );

}


.promo-banner span {

    color: #e50914;

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 3px;

}


.promo-banner h2 {

    margin: 9px 0;

    font-size: 30px;

}


.promo-banner p {

    color: #7f828c;

    font-size: 12px;

}


.promo-banner button {

    background: #e50914;

    color: white;

    border: none;

    padding: 12px 19px;

    border-radius: 7px;

    font-size: 11px;

    font-weight: bold;

}


/* ==========================================
   FOOTER
========================================== */

.cinema-footer {

    padding: 50px 7%;

    display: grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap: 30px;

    border-top: 1px solid #1d2026;

    background: #08090d;

}


.cinema-footer h3 {

    font-size: 18px;

    letter-spacing: 3px;

}


.cinema-footer p {

    color: #666a74;

    font-size: 11px;

    margin-top: 8px;

}


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

@media (max-width: 950px) {

    .desktop-nav {

        display: none;

    }


    .movie-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .cinema-cards {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 600px) {

    .cinema-navbar {

        padding: 0 20px;

    }


    .location-button {

        display: none;

    }


    .user-info {

        display: none;

    }


    .cinema-hero {

        min-height: 540px;

        padding: 40px 25px;

    }


    .hero-info h1 {

        font-size: 55px;

    }


    .movie-section,
    .cinema-location {

        padding: 50px 20px;

    }


    .movie-grid {

        grid-template-columns: 1fr 1fr;

        gap: 12px;

    }


    .poster-container img {

        height: 270px;

    }


    .coming-grid {

        grid-template-columns: 1fr;

    }


    .promo-banner {

        margin: 30px 20px;

        padding: 28px;

        display: block;

    }


    .promo-banner button {

        margin-top: 20px;

    }


    .cinema-footer {

        grid-template-columns: 1fr;

    }

}
/* ==========================================
   BOOKING PAGE
========================================== */

.booking-page {

    max-width: 1050px;

    margin: auto;

    padding: 45px 25px 100px;

}


.back-home {

    color: #858892;

    text-decoration: none;

    font-size: 12px;

}


.back-home:hover {

    color: white;

}


/* MOVIE */

.selected-movie {

    margin-top: 35px;

    display: flex;

    align-items: center;

    gap: 25px;

    padding-bottom: 35px;

    border-bottom: 1px solid #252830;

}


.selected-movie img {

    width: 90px;

    height: 125px;

    object-fit: cover;

    border-radius: 7px;

}


.selected-movie span {

    color: #e50914;

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 2px;

}


.selected-movie h1 {

    font-size: 32px;

    margin: 8px 0;

}


.selected-movie p {

    color: #777b85;

    font-size: 12px;

}


/* STEPS */

.booking-steps {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    padding: 35px 0;

}


.step {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #555963;

    font-size: 11px;

}


.step b {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #343740;

}


.step.active {

    color: white;

}


.step.active b {

    background: #e50914;

    border-color: #e50914;

}


.step-line {

    width: 70px;

    height: 1px;

    background: #292c33;

}


/* BOOKING SECTION */

.booking-section {

    margin-top: 45px;

}


.booking-title {

    display: flex;

    gap: 17px;

    margin-bottom: 25px;

}


.booking-title > span {

    color: #e50914;

    font-size: 12px;

    font-weight: bold;

}


.booking-title small {

    color: #686c77;

    font-size: 9px;

    letter-spacing: 2px;

}


.booking-title h2 {

    margin-top: 5px;

    font-size: 21px;

}


/* CINEMA */

.cinema-choice {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 15px;

}


.cinema-option {

    padding: 20px;

    display: flex;

    align-items: center;

    gap: 13px;

    background: #121419;

    border: 1px solid #292c34;

    border-radius: 9px;

    cursor: pointer;

}


.cinema-option:has(input:checked) {

    border-color: #e50914;

    background: #171116;

}


.cinema-option input {

    accent-color: #e50914;

}


.cinema-option div {

    flex: 1;

}


.cinema-option strong {

    font-size: 13px;

}


.cinema-option p {

    color: #70737d;

    font-size: 10px;

    margin-top: 4px;

}


.cinema-option > span {

    color: #666;

}


/* DATE */

.date-list {

    display: flex;

    gap: 12px;

}


.date-option {

    width: 75px;

    height: 90px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 3px;

    background: #121419;

    border: 1px solid #292c34;

    border-radius: 8px;

    cursor: pointer;

}


.date-option input {

    display: none;

}


.date-option strong {

    font-size: 24px;

}


.date-option span {

    font-size: 9px;

    color: #777;

}


.date-option small {

    font-size: 8px;

    color: #555;

}


.date-option:has(input:checked) {

    background: #e50914;

    border-color: #e50914;

}


.date-option:has(input:checked) span,
.date-option:has(input:checked) small {

    color: white;

}


/* TIME */

.time-list {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}


.time-option {

    min-width: 110px;

    padding: 13px 17px;

    background: #121419;

    border: 1px solid #292c34;

    border-radius: 8px;

    color: white;

    cursor: pointer;

    text-align: left;

}


.time-option strong {

    display: block;

    font-size: 14px;

}


.time-option small {

    color: #666;

    font-size: 9px;

}


.time-option.active {

    background: #e50914;

    border-color: #e50914;

}


.time-option.active small {

    color: white;

}


/* NEXT */

.booking-next {

    margin-top: 60px;

    padding-top: 25px;

    border-top: 1px solid #292c34;

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.booking-next small {

    display: block;

    color: #666;

    font-size: 9px;

}


.booking-next strong {

    display: block;

    font-size: 20px;

    margin-top: 5px;

}


.booking-next button {

    background: #e50914;

    color: white;

    border: none;

    padding: 14px 24px;

    border-radius: 8px;

    font-weight: bold;

    cursor: pointer;

}


/* MOBILE */

@media (max-width: 700px) {

    .cinema-navbar {

        padding: 0 20px;

    }


    .booking-page {

        padding: 30px 18px 80px;

    }


    .cinema-choice {

        grid-template-columns: 1fr;

    }


    .selected-movie h1 {

        font-size: 25px;

    }


    .booking-steps {

        justify-content: flex-start;

    }


    .step-line {

        width: 25px;

    }


    .date-list {

        overflow-x: auto;

    }


    .booking-next button {

        padding: 12px 18px;

    }

}
/* ==========================================
   SEAT PAGE
========================================== */

.seat-page {

    max-width: 1000px;

    margin: auto;

    padding: 45px 25px 100px;

}


.seat-movie {

    margin-top: 35px;

    padding-bottom: 30px;

    border-bottom: 1px solid #252830;

}


.seat-movie span {

    color: #e50914;

    font-size: 9px;

    letter-spacing: 2px;

    font-weight: bold;

}


.seat-movie h1 {

    font-size: 32px;

    margin: 10px 0;

}


.seat-movie p {

    color: #777b85;

    font-size: 12px;

}


.screen-section {

    padding: 55px 0 20px;

    text-align: center;

}


.screen {

    width: 65%;

    height: 38px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border-top: 3px solid #ddd;

    color: #777;

    font-size: 9px;

    letter-spacing: 3px;

}


.screen-text {

    color: #555963;

    font-size: 9px;

    margin-bottom: 45px;

}


.seat-layout {

    display: flex;

    flex-direction: column;

    gap: 14px;

    max-width: 550px;

    margin: auto;

}


.seat-row {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

}


.row-label {

    width: 20px;

    color: #555963;

    font-size: 9px;

}


.seat {

    width: 53px;

    height: 43px;

    border-radius: 7px 7px 5px 5px;

    border: 1px solid #383b44;

    background: #171920;

    color: #888;

    font-size: 9px;

    cursor: pointer;

    transition: .2s;

}


.seat.available:hover {

    border-color: #e50914;

    transform: translateY(-2px);

}


.seat.selected {

    background: #e50914;

    border-color: #e50914;

    color: white;

}


.seat.occupied {

    background: #30323a;

    border-color: #30323a;

    color: #555963;

    cursor: not-allowed;

}


.seat-legend {

    display: flex;

    justify-content: center;

    gap: 30px;

    margin-top: 45px;

    color: #777b85;

    font-size: 10px;

}


.seat-legend > div {

    display: flex;

    align-items: center;

    gap: 7px;

}


.legend-seat {

    width: 17px;

    height: 14px;

    border-radius: 3px;

    display: inline-block;

}


.legend-seat.available {

    background: #171920;

    border: 1px solid #383b44;

}


.legend-seat.selected {

    background: #e50914;

}


.legend-seat.occupied {

    background: #30323a;

}


.seat-summary {

    max-width: 850px;

    margin: 55px auto 0;

    padding: 22px 0;

    border-top: 1px solid #292c34;

    display: flex;

    align-items: center;

    gap: 50px;

}


.seat-summary small {

    display: block;

    color: #60636d;

    font-size: 8px;

    letter-spacing: 2px;

}


.seat-summary strong {

    display: block;

    color: white;

    font-size: 14px;

    margin-top: 6px;

}


.seat-summary > div:nth-child(2) {

    margin-left: auto;

}


.seat-summary button {

    border: none;

    background: #e50914;

    color: white;

    padding: 14px 22px;

    border-radius: 7px;

    font-weight: bold;

    font-size: 11px;

    cursor: pointer;

}


.seat-summary button:hover {

    background: #c70812;

}


@media (max-width: 600px) {

    .seat-page {

        padding: 30px 15px 70px;

    }


    .seat {

        width: 39px;

        height: 35px;

        font-size: 7px;

    }


    .seat-row {

        gap: 5px;

    }


    .screen {

        width: 80%;

    }


    .seat-summary {

        gap: 15px;

    }


    .seat-summary button {

        padding: 12px;

    }

}
/* ==========================================
   PAYMENT PAGE
========================================== */

.payment-page {

    max-width: 1050px;

    margin: auto;

    padding: 45px 25px 100px;

}


.payment-header {

    margin-top: 45px;

    margin-bottom: 40px;

}


.payment-header span {

    color: #e50914;

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 3px;

}


.payment-header h1 {

    font-size: 36px;

    margin: 8px 0;

}


.payment-header p {

    color: #70737b;

    font-size: 12px;

}


.payment-grid {

    display: grid;

    grid-template-columns:
        1fr 1.3fr;

    gap: 25px;

}


.payment-section-title {

    margin-bottom: 18px;

}


.payment-section-title small {

    color: #e50914;

    font-size: 8px;

    letter-spacing: 2px;

    font-weight: bold;

}


.payment-section-title h2 {

    font-size: 20px;

    margin-top: 6px;

}


.order-card {

    background: #121419;

    border: 1px solid #292c34;

    border-radius: 10px;

    padding: 25px;

}


.order-row {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 12px 0;

}


.order-row span {

    color: #666a74;

    font-size: 11px;

}


.order-row strong {

    color: #eee;

    font-size: 11px;

    text-align: right;

}


.order-divider {

    height: 1px;

    background: #292c34;

    margin: 12px 0;

}


.order-total {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.order-total span {

    color: #aaa;

    font-size: 12px;

}


.order-total strong {

    color: #e50914;

    font-size: 20px;

}


/* PAYMENT METHOD */

.method-list {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.method-option {

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 16px;

    background: #121419;

    border: 1px solid #292c34;

    border-radius: 8px;

    cursor: pointer;

}


.method-option:has(input:checked) {

    border-color: #e50914;

    background: #171116;

}


.method-option input {

    accent-color: #e50914;

}


.method-icon {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #20232b;

    border-radius: 7px;

    font-weight: bold;

}


.method-option strong {

    display: block;

    font-size: 12px;

}


.method-option p {

    color: #666a74;

    font-size: 9px;

    margin-top: 4px;

}


/* QRIS */

.qris-box {

    margin-top: 18px;

    padding: 25px;

    text-align: center;

    background: #f5f5f5;

    border-radius: 9px;

    color: #111;

}


.qris-code {

    width: 145px;

    height: 145px;

    margin: auto auto 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: white;

    border: 8px solid white;

}


.fake-qr {

    font-size: 20px;

    line-height: 22px;

    letter-spacing: 2px;

}


.qris-box strong {

    display: block;

    font-size: 12px;

}


.qris-box p {

    color: #777;

    font-size: 9px;

    margin-top: 4px;

}


.pay-button {

    width: 100%;

    margin-top: 18px;

    padding: 15px;

    border: none;

    border-radius: 8px;

    background: #e50914;

    color: white;

    font-size: 12px;

    font-weight: bold;

    cursor: pointer;

}


.pay-button:hover {

    background: #c70812;

}


@media (max-width: 750px) {

    .payment-grid {

        grid-template-columns: 1fr;

    }


    .payment-page {

        padding: 30px 18px 70px;

    }

}
/* ==========================================
   E-TICKET PAGE
========================================== */

.ticket-page {

    max-width: 1050px;

    margin: auto;

    padding: 60px 25px 100px;

}


/* SUCCESS */

.ticket-success {

    text-align: center;

    margin-bottom: 45px;

}


.success-icon {

    width: 55px;

    height: 55px;

    margin: auto auto 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #e50914;

    color: white;

    font-size: 25px;

    font-weight: bold;

}


.ticket-success > span {

    color: #e50914;

    font-size: 9px;

    font-weight: bold;

    letter-spacing: 3px;

}


.ticket-success h1 {

    font-size: 34px;

    margin: 10px 0;

}


.ticket-success p {

    color: #70737b;

    font-size: 12px;

}


/* TICKET */

.movie-ticket {

    position: relative;

    display: grid;

    grid-template-columns: 160px 1fr 180px;

    min-height: 300px;

    background: #15171d;

    border: 1px solid #292c34;

    border-radius: 14px;

    overflow: hidden;

}


/* POSTER */

.ticket-poster {

    height: 100%;

}


.ticket-poster img {

    width: 100%;

    height: 100%;

    min-height: 300px;

    object-fit: cover;

}


/* DETAILS */

.ticket-details {

    padding: 35px;

}


.ticket-label {

    color: #e50914;

    font-size: 8px;

    letter-spacing: 3px;

    font-weight: bold;

}


.ticket-details h2 {

    font-size: 27px;

    margin: 10px 0 25px;

}


.ticket-info-grid {

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 22px 25px;

}


.ticket-info-grid small,
.ticket-bottom small {

    display: block;

    color: #656974;

    font-size: 8px;

    letter-spacing: 1px;

}


.ticket-info-grid strong {

    display: block;

    color: #eee;

    font-size: 11px;

    margin-top: 5px;

}


.ticket-divider {

    height: 1px;

    background: #292c34;

    margin: 25px 0;

}


.ticket-bottom {

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.ticket-bottom strong {

    display: block;

    color: #eee;

    font-size: 11px;

    margin-top: 5px;

}


.ticket-price {

    text-align: right;

}


.ticket-price strong {

    color: #e50914;

    font-size: 18px;

}


/* QR */

.ticket-qr {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 20px;

    border-left: 1px dashed #3b3e47;

}


.qr-pattern {

    width: 125px;

    height: 125px;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    background: white;

    color: #111;

    overflow: hidden;

}


.qr-dots {

    font-size: 19px;

    line-height: 21px;

    text-align: center;

    transform: rotate(-3deg);

}


.qr-corner {

    position: absolute;

    width: 27px;

    height: 27px;

    border: 6px solid #111;

}


.qr-corner.top-left {

    top: 8px;

    left: 8px;

}


.qr-corner.top-right {

    top: 8px;

    right: 8px;

}


.qr-corner.bottom-left {

    bottom: 8px;

    left: 8px;

}


.ticket-qr small {

    margin-top: 12px;

    color: #666a74;

    font-size: 8px;

    letter-spacing: 2px;

}


/* ACTIONS */

.ticket-actions {

    display: flex;

    justify-content: center;

    gap: 12px;

    margin-top: 25px;

}


.ticket-actions button {

    padding: 13px 22px;

    border-radius: 7px;

    font-size: 11px;

    font-weight: bold;

    cursor: pointer;

}


.ticket-home {

    background: transparent;

    border: 1px solid #33363f;

    color: #aaa;

}


.ticket-print {

    background: #e50914;

    border: 1px solid #e50914;

    color: white;

}


.ticket-home:hover {

    color: white;

    border-color: #666;

}


.ticket-print:hover {

    background: #c70812;

}


/* NOTE */

.ticket-note {

    max-width: 600px;

    margin: 35px auto 0;

    padding: 20px;

    text-align: center;

    background: #121419;

    border: 1px solid #292c34;

    border-radius: 8px;

}


.ticket-note strong {

    font-size: 12px;

}


.ticket-note p {

    color: #666a74;

    font-size: 10px;

    line-height: 1.7;

    margin-top: 7px;

}


/* PRINT */

@media print {

    body {

        background: white !important;

        color: black !important;

    }


    .cinema-navbar,
    .ticket-actions,
    .ticket-note {

        display: none !important;

    }


    .ticket-page {

        padding: 20px;

    }


    .movie-ticket {

        border: 1px solid #ccc;

        background: white;

    }


    .ticket-details h2,
    .ticket-info-grid strong,
    .ticket-bottom strong {

        color: #111;

    }

}


/* MOBILE */

@media (max-width: 800px) {

    .movie-ticket {

        grid-template-columns: 110px 1fr;

    }


    .ticket-qr {

        grid-column: 1 / -1;

        border-left: none;

        border-top: 1px dashed #3b3e47;

        padding: 25px;

    }


    .ticket-info-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .ticket-details {

        padding: 25px 20px;

    }

}


@media (max-width: 500px) {

    .movie-ticket {

        grid-template-columns: 1fr;

    }


    .ticket-poster {

        height: 250px;

    }


    .ticket-poster img {

        min-height: 250px;

    }


    .ticket-info-grid {

        grid-template-columns: 1fr 1fr;

    }


    .ticket-actions {

        flex-direction: column;

    }


    .ticket-actions button {

        width: 100%;

    }

}
/* ==========================================
   POPUP PIN BANK
========================================== */

.pin-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.pin-modal {
    width: 90%;
    max-width: 390px;
    background: white;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 15px 50px rgba(0,0,0,.25);
    animation: popupIn .2s ease;
}

@keyframes popupIn {
    from {
        transform: scale(.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.pin-icon,
.error-icon {
    font-size: 45px;
    margin-bottom: 12px;
}

.pin-modal h2 {
    margin-bottom: 10px;
}

.pin-modal p {
    color: #777;
    font-size: 14px;
    line-height: 1.5;
}

.pin-inputs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 25px 0 15px;
}

.pin-inputs input {
    width: 42px;
    height: 50px;
    border: 1px solid #ccc;
    border-radius: 9px;
    text-align: center;
    font-size: 22px;
    outline: none;
}

.pin-inputs input:focus {
    border-color: #00aaa8;
}

.pin-modal button {
    width: 100%;
    border: none;
    padding: 13px;
    border-radius: 25px;
    background: #00aaa8;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.pin-modal button:hover {
    background: #008f8d;
}

.pin-error {
    min-height: 20px;
    color: #e53935;
    font-size: 13px;
    margin-bottom: 10px;
}

.pin-modal small {
    display: block;
    margin-top: 15px;
    color: #999;
}
/* ==========================================
   POPUP SEAT NOTIFICATION
========================================== */

.seat-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.seat-popup {
    width: 90%;
    max-width: 380px;
    background: white;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
    animation: seatPopupIn 0.2s ease;
}

@keyframes seatPopupIn {

    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }

}

.seat-popup-icon {
    font-size: 45px;
    margin-bottom: 12px;
}

.seat-popup h2 {
    margin-bottom: 10px;
}

.seat-popup p {
    color: #777;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 22px;
}

.seat-popup button {
    width: 100%;
    border: none;
    padding: 13px;
    border-radius: 25px;
    background: #00aaa8;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.seat-popup button:hover {
    background: #008f8d;
}
/* ==========================================
   PREMIUM CINEMA COLOR THEME
   ========================================== */

:root {
    --red: #e50914;
    --red-dark: #b80712;

    --dark: #050609;
    --dark-soft: #080a0f;
    --section: #0b0d12;

    --card: #101218;
    --card-hover: #151821;

    --border: #242731;

    --text: #ffffff;
    --muted: #8f939d;
}


/* BACKGROUND UTAMA */
body {
    background:
        radial-gradient(
            circle at 50% -20%,
            #1b1d25 0%,
            #0b0d12 35%,
            #050609 75%
        );

    color: var(--text);
}


/* AREA CONTENT HOME */
.cinema-content {
    background:
        radial-gradient(
            circle at 50% 0%,
            #161820 0%,
            #090b10 35%,
            #050609 80%
        );
}


/* NAVBAR */
.cinema-navbar {
    background: rgba(5, 6, 9, 0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

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


/* LOGO */
.cinema-logo {
    color: #ffffff;
}

.cinema-logo span {
    color: var(--red);
}


/* MENU */
.desktop-nav a {
    color: #777c87;
}

.desktop-nav a:hover,
.desktop-nav a.active {
    color: #ffffff;
}

.desktop-nav a.active::after {
    background: var(--red);

    box-shadow:
        0 0 10px rgba(229, 9, 20, .65);
}


/* LOKASI */
.location-button {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.10);

    color: #c7c9cf;

    transition: .25s;
}

.location-button:hover {
    border-color: rgba(229,9,20,.5);
    background: rgba(229,9,20,.08);
}


/* USER */
.user-avatar {
    background:
        linear-gradient(
            145deg,
            #20232c,
            #111319
        );

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


/* HERO */
.cinema-hero {
    background-color: #050609;
}


/* OVERLAY HERO */
.hero-overlay {
    background:
        linear-gradient(
            90deg,
            #050609 3%,
            rgba(5,6,9,.92) 25%,
            rgba(5,6,9,.55) 55%,
            rgba(5,6,9,.25) 80%,
            rgba(5,6,9,.75) 100%
        );
}


/* JUDUL / AKSEN */
.hero-label,
.section-label,
.movie-card .movie-info h3 {
    color: var(--red);
}


/* SECTION */
.movie-section,
.cinema-location {
    background:
        linear-gradient(
            180deg,
            #080a0f 0%,
            #050609 100%
        );
}


/* MOVIE CARD */
.movie-card {
    background: transparent;
}


/* POSTER */
.poster-container {
    background: #101218;

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

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

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


/* POSTER HOVER */
.movie-card:hover .poster-container {
    transform: translateY(-5px);

    border-color: rgba(229,9,20,.45);

    box-shadow:
        0 18px 40px rgba(0,0,0,.55),
        0 0 25px rgba(229,9,20,.12);
}


/* GAMBAR POSTER */
.poster-container img {
    transition:
        transform .4s ease,
        filter .4s ease;
}

.movie-card:hover .poster-container img {
    transform: scale(1.05);

    filter: brightness(1.05);
}


/* RATING */
.rating {
    background: rgba(5,6,9,.88);

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

    backdrop-filter: blur(8px);

    color: #ffffff;
}


/* OVERLAY POSTER */
.poster-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(5,6,9,.05),
            rgba(5,6,9,.72)
        );
}


/* BUTTON POSTER */
.poster-overlay a {
    background: var(--red);

    box-shadow:
        0 8px 25px rgba(229,9,20,.35);

    transition: .25s;
}

.poster-overlay a:hover {
    background: #ff1723;

    transform: translateY(-2px);

    box-shadow:
        0 10px 30px rgba(229,9,20,.5);
}


/* JUDUL FILM */
.movie-info h3 {
    color: #ffffff !important;
}

.movie-info p {
    color: #777c87;
}


/* COMING SOON */
.coming-card {
    background: #0e1015;

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

    box-shadow:
        0 15px 35px rgba(0,0,0,.3);
}


/* CINEMA CARD */
.cinema-place {
    background:
        linear-gradient(
            145deg,
            #12151b,
            #0c0e13
        );

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

    transition: .25s;
}

.cinema-place:hover {
    border-color: rgba(229,9,20,.35);

    transform: translateY(-3px);

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


/* ICON CINEMA */
.cinema-icon {
    background:
        linear-gradient(
            145deg,
            #242731,
            #15171d
        );

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


/* PROMO */
.promo-banner {
    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(229,9,20,.16),
            transparent 35%
        ),
        linear-gradient(
            120deg,
            #171920,
            #090b10
        );

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

    box-shadow:
        0 20px 50px rgba(0,0,0,.35);
}


/* SEMUA BUTTON MERAH */
.watch-button,
.promo-banner button {
    background: var(--red);

    box-shadow:
        0 8px 25px rgba(229,9,20,.25);

    transition: .25s;
}

.watch-button:hover,
.promo-banner button:hover {
    background: #ff1723;

    transform: translateY(-2px);

    box-shadow:
        0 10px 30px rgba(229,9,20,.4);
}


/* FOOTER */
.cinema-footer {
    background: #040507;

    border-top: 1px solid rgba(255,255,255,.06);
}
/* =========================================
   CINEMA PREMIUM DARK THEME
   ========================================= */

body {
    background: #050609 !important;
    color: #ffffff;
}

/* Background seluruh halaman */
.cinema-content {
    background:
        radial-gradient(
            circle at 50% 0%,
            #252832 0%,
            #12151c 28%,
            #080a0f 60%,
            #050609 100%
        ) !important;
}

/* =========================================
   NAVBAR
   ========================================= */

.cinema-navbar {
    background: rgba(5, 6, 9, 0.90) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* Menu aktif */
.desktop-nav a.active {
    color: #ffffff !important;
}

.desktop-nav a.active::after {
    background: #e50914 !important;
    box-shadow: 0 0 12px rgba(229,9,20,.7);
}

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

.cinema-hero {
    background-color: #050609 !important;
}

.hero-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(5,6,9,.98) 0%,
            rgba(5,6,9,.82) 30%,
            rgba(5,6,9,.45) 60%,
            rgba(5,6,9,.15) 100%
        ) !important;
}

/* Label merah */
.hero-label {
    color: #e50914 !important;
}

/* Tombol pesan tiket */
.watch-button {
    background: #e50914 !important;
    box-shadow: 0 8px 25px rgba(229,9,20,.30);
}

.watch-button:hover {
    background: #ff1723 !important;
    box-shadow: 0 10px 35px rgba(229,9,20,.45);
}

/* =========================================
   SECTION
   ========================================= */

.movie-section,
.cinema-location {
    background:
        linear-gradient(
            180deg,
            #0c0f15 0%,
            #080a0f 50%,
            #050609 100%
        ) !important;
}

/* Judul section */
.section-label {
    color: #e50914 !important;
}

/* =========================================
   MOVIE CARD
   ========================================= */

.movie-card {
    background: transparent !important;
}

/* Poster */
.poster-container {
    background: #10131a !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 14px !important;

    box-shadow:
        0 15px 35px rgba(0,0,0,.45);

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

/* Hover poster */
.movie-card:hover .poster-container {
    transform: translateY(-7px);

    border-color: rgba(229,9,20,.45) !important;

    box-shadow:
        0 20px 45px rgba(0,0,0,.60),
        0 0 25px rgba(229,9,20,.12);
}

/* Gambar poster */
.poster-container img {
    transition: transform .4s ease;
}

.movie-card:hover .poster-container img {
    transform: scale(1.04);
}

/* Rating */
.rating {
    background: rgba(5,6,9,.88) !important;
    border: 1px solid rgba(255,255,255,.10);

    backdrop-filter: blur(8px);
}

/* Tombol muncul di poster */
.poster-overlay a {
    background: #e50914 !important;

    box-shadow:
        0 8px 25px rgba(229,9,20,.35);
}

.poster-overlay a:hover {
    background: #ff1723 !important;
}

/* =========================================
   INFO FILM
   ========================================= */

.movie-info h3 {
    color: #ffffff !important;
}

.movie-info p {
    color: #858994 !important;
}

/* =========================================
   COMING SOON
   ========================================= */

.coming-card {
    background:
        linear-gradient(
            145deg,
            #151820,
            #0d0f14
        ) !important;

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

    box-shadow:
        0 15px 35px rgba(0,0,0,.35);
}

.coming-card:hover {
    border-color: rgba(229,9,20,.35) !important;
}

/* =========================================
   CINEMA
   ========================================= */

.cinema-place {
    background:
        linear-gradient(
            145deg,
            #161920,
            #0d0f14
        ) !important;

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

    transition: .3s ease;
}

.cinema-place:hover {
    transform: translateY(-4px);

    border-color: rgba(229,9,20,.35) !important;

    box-shadow:
        0 15px 35px rgba(0,0,0,.40);
}

.cinema-icon {
    background:
        linear-gradient(
            145deg,
            #252832,
            #15171d
        ) !important;
}

/* =========================================
   PROMO
   ========================================= */

.promo-banner {
    background:
        radial-gradient(
            circle at 90% 50%,
            rgba(229,9,20,.18),
            transparent 35%
        ),
        linear-gradient(
            120deg,
            #191c24,
            #090b10
        ) !important;

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

    box-shadow:
        0 20px 50px rgba(0,0,0,.40);
}

/* =========================================
   FOOTER
   ========================================= */

.cinema-footer {
    background: #030406 !important;
    border-top: 1px solid rgba(255,255,255,.07);
}

/* Fix dropdown option tidak kelihatan (native browser popup selalu background putih) */
select {
    color: #fff;
    background: transparent;
}

select option {
    color: #111;
    background: #fff;
}