/* ================================================
   Apple TV Page – Pixel-Perfect Stylesheet
   ================================================ */

/* ===== Global Reset ===== */
body { margin: 0; padding: 0; background: #141518; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", sans-serif; -webkit-font-smoothing: antialiased; }

/* ===== Backdrop (Fixed, Fullscreen) ===== */
.atv-backdrop {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100dvh !important;
    background-size: cover !important;
    background-position: center 15% !important;
    z-index: 0 !important;
    will-change: transform;
}
.atv-backdrop::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, #141518 5%, rgba(0,0,0,0.65) 60%, rgba(0,0,0,0.1) 100%);
    z-index: 1; pointer-events: none;
}

/* ===== Top Navigation (Glass) ===== */
.atv-top-nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 50; display: flex; justify-content: space-between;
    padding: 16px 24px;
}
.atv-glass-btn {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.12);
    color: #FFFFFF; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.atv-glass-btn:hover { background: rgba(255,255,255,0.18); }

/* ===== Main Wrapper ===== */
.atv-main-wrapper {
    position: relative !important;
    z-index: 2 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ===== Hero (Fly-up + Fade) ===== */
.atv-hero-wrapper {
    position: relative !important;
    z-index: 5 !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-top: 260px !important;
    padding-left: 20px; padding-right: 20px;
    text-align: center;
    will-change: transform, opacity;
}

.atv-logo-area { margin-bottom: 32px; }
.atv-logo { max-width: 65%; max-height: 140px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5)); }

.atv-meta-data {
    font-size: 14px; color: #C0C0C0; letter-spacing: 0.3px;
    display: flex; gap: 8px; justify-content: center; align-items: center;
    margin-bottom: 28px; opacity: 0.9;
}

/* ===== CTA Buttons (Apple White) ===== */
.atv-actions-row {
    display: flex; justify-content: center; align-items: center;
    gap: 16px; flex-wrap: wrap; width: 100%;
    margin-bottom: 24px; padding: 0 24px;
}
.atv-btn {
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-weight: 500; font-size: 15px; letter-spacing: 0.2px;
    height: 48px; border-radius: 40px; transition: all 0.2s ease; border: none;
    font-family: inherit;
}
.atv-btn:active { transform: scale(0.96); }
.atv-btn-primary {
    flex: 1 1 auto; max-width: 300px; min-width: 180px;
    background: #FFFFFF; color: #0A0A0A; font-weight: 600;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2); padding: 0 28px;
}
.atv-btn-circle {
    flex: 0 0 48px; width: 48px; border-radius: 50%;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
    color: #FFFFFF; font-size: 22px;
}
.atv-btn-secondary {
    flex: 1 1 auto; max-width: 200px; min-width: 100px;
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
    color: #FFFFFF; padding: 0 20px;
}

/* ===== Tech Tags ===== */
.atv-tech-tags {
    display: flex; justify-content: center; gap: 10px;
    margin-bottom: 28px;
}
.atv-tag {
    background: rgba(20,21,24,0.8); color: #D0D0D0;
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 5px 14px; border-radius: 20px;
    font-size: 11px; font-weight: 500; letter-spacing: 0.2px;
}

/* ===== Synopsis ===== */
.atv-synopsis {
    font-size: 14px; line-height: 1.7; color: #B0B0B0;
    max-width: 400px; margin: 0 auto; text-align: center;
    font-weight: 400;
}

/* ===== Sections Wrapper ===== */
.atv-sections-wrapper {
    position: relative; z-index: 10;
    margin-top: 64px;
    display: flex; flex-direction: column; gap: 32px;
}

.atv-section { padding: 0 20px; position: relative; z-index: 10; }

.atv-section-title {
    font-size: 17px; font-weight: 600; letter-spacing: 0.2px;
    color: #FFFFFF; margin: 0 0 14px 0; text-align: right;
}

/* ===== Carousel ===== */
.atv-carousel {
    display: flex; gap: 14px; overflow-x: auto; padding: 8px 0 16px;
    scroll-snap-type: x proximity;
}
.atv-carousel::-webkit-scrollbar { display: none; }

/* ===== Cast (Circle Images) ===== */
.atv-cast-card {
    flex: 0 0 100px; text-align: center;
    scroll-snap-align: start;
}
.atv-cast-image {
    width: 84px; height: 84px;
    border-radius: 50% !important;
    object-fit: cover; margin-bottom: 8px;
    background: #2A2E38;
    border: 2px solid rgba(255,255,255,0.06);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.atv-cast-name {
    font-size: 13px; font-weight: 600; color: #FFFFFF;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.atv-cast-role {
    font-size: 11px; color: #8A8E96;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ===== Similar (Posters) ===== */
.atv-similar-card {
    flex: 0 0 125px; text-align: center;
    scroll-snap-align: start;
}
.atv-similar-img {
    width: 125px; height: 187px; object-fit: cover;
    border-radius: 10px; margin-bottom: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.atv-similar-title {
    font-size: 12px; font-weight: 500; color: #D0D0D0;
}

/* ===== Trailers ===== */
.atv-trailer-card {
    flex: 0 0 210px; text-align: center;
    scroll-snap-align: start;
}
.atv-trailer-img {
    width: 210px; height: 118px; object-fit: cover;
    border-radius: 10px; margin-bottom: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
.atv-trailer-title {
    font-size: 12px; font-weight: 500; color: #D0D0D0;
}

/* ===== 7 תיקונים Apple TV – גרסת Safari ===== */
.atv-backdrop { height: 100vh !important; }
.atv-test-page { padding-top: env(safe-area-inset-top) !important; }
.atv-test-page::-webkit-scrollbar, .atv-test-page *::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
.atv-actions-row { padding: 0 24px !important; gap: 12px !important; }
.atv-btn-primary { max-width: 280px !important; white-space: nowrap !important; }
.atv-cast-image { border-radius: 50% !important; background: #2A2E38 !important; }
.atv-sections-wrapper { gap: 24px !important; padding-top: 0 !important; margin-top: 0 !important; }
.atv-meta-data { gap: 8px !important; margin-bottom: 16px !important; }
.atv-hero-wrapper { margin-bottom: 0 !important; padding-bottom: 0 !important; }