:root {
    --lt-bg: #0d0f12;
    --lt-surface: #16181d;
    --lt-accent: #e50914;
}

/* Bootstrap's "danger" (red) components don't actually read the root --bs-danger variable at
   the component level - .btn-danger etc bake their own --bs-btn-bg literal color in at build
   time, so overriding --bs-danger at :root has no visible effect on buttons/badges. Re-point the
   danger-styled classes this site uses at our themeable --lt-accent so an admin-configured accent
   color shows up everywhere it's used, not just the few spots with var(--lt-accent) directly. */
.btn-danger {
    --bs-btn-bg: var(--lt-accent);
    --bs-btn-border-color: var(--lt-accent);
    --bs-btn-hover-bg: var(--lt-accent);
    --bs-btn-hover-border-color: var(--lt-accent);
    --bs-btn-active-bg: var(--lt-accent);
    --bs-btn-active-border-color: var(--lt-accent);
    --bs-btn-disabled-bg: var(--lt-accent);
    --bs-btn-disabled-border-color: var(--lt-accent);
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
    filter: brightness(.88);
}

.btn-outline-danger {
    --bs-btn-color: var(--lt-accent);
    --bs-btn-border-color: var(--lt-accent);
    --bs-btn-hover-bg: var(--lt-accent);
    --bs-btn-hover-border-color: var(--lt-accent);
    --bs-btn-active-bg: var(--lt-accent);
    --bs-btn-active-border-color: var(--lt-accent);
}

.text-bg-danger,
.badge.text-bg-danger,
.bg-danger {
    background-color: var(--lt-accent) !important;
}

.text-danger {
    color: var(--lt-accent) !important;
}

.border-danger {
    border-color: var(--lt-accent) !important;
}

html, body {
    background: var(--lt-bg);
    color: #eee;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* .player-wrapper'ın mobilde full-bleed için kullandığı 100vw tekniği, dikey scrollbar
       genişliği farkı yüzünden birkaç px yatay taşmaya sebep olabilir - bunu burada kapatıyoruz. */
    overflow-x: hidden;
}

main {
    flex: 1 0 auto;
}

.site-footer {
    flex-shrink: 0;
}

a {
    color: inherit;
}

.site-header {
    background: rgba(13, 15, 18, 0.95);
    backdrop-filter: blur(6px);
}

.site-search {
    max-width: 220px;
}

.site-footer {
    background: var(--lt-surface);
}

.hero-slider .hero-image {
    height: 42vh;
    min-height: 220px;
    object-fit: cover;
    filter: brightness(0.55);
}

@media (min-width: 992px) {
    .hero-slider .hero-image {
        height: 60vh;
    }
}

.carousel-caption {
    text-align: left;
    left: 5%;
    right: auto;
    bottom: 15%;
    max-width: 600px;
}

@media (max-width: 767.98px) {
    .carousel-caption {
        left: 4%;
        right: 4%;
        bottom: 8%;
        max-width: none;
    }

    .carousel-caption h2 {
        font-size: 1.25rem;
        line-height: 1.3;
        text-shadow: 0 2px 6px rgba(0,0,0,.8);
    }

    .carousel-caption .btn {
        font-size: .85rem;
        padding: .35rem .9rem;
    }
}

.section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    border-left: 4px solid var(--lt-accent);
    padding-left: .6rem;
}

.section-title i {
    color: var(--lt-accent);
    font-size: .9em;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
}

@media (min-width: 576px) {
    .video-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .video-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1200px) {
    .video-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

.video-row {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    padding-bottom: .5rem;
    scroll-snap-type: x mandatory;
}

.video-row .video-card {
    flex: 0 0 110px;
}

@media (min-width: 768px) {
    .video-row .video-card { flex-basis: 150px; }
}

.video-card {
    display: block;
    text-decoration: none;
    scroll-snap-align: start;
}

.video-card-poster {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: .5rem;
    overflow: hidden;
    background: var(--lt-surface);
}

.video-card-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .2s ease;
}

.video-card:hover .video-card-poster img {
    transform: scale(1.06);
    filter: brightness(.75);
}

.video-card-poster {
    box-shadow: 0 2px 10px rgba(0,0,0,.35);
    transition: box-shadow .2s ease;
}

.video-card:hover .video-card-poster {
    box-shadow: 0 6px 20px rgba(229,9,20,.35);
}

.video-card-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s ease;
    color: #fff;
    font-size: 2.2rem;
    text-shadow: 0 2px 8px rgba(0,0,0,.6);
    pointer-events: none;
}

.video-card:hover .video-card-hover {
    opacity: 1;
}

.video-card-rating {
    position: absolute;
    top: .4rem;
    right: .4rem;
    font-size: .7rem;
}

.video-card-new {
    position: absolute;
    top: .4rem;
    left: .4rem;
    font-size: .6rem;
    letter-spacing: .03em;
}

.video-card-title {
    margin-top: .4rem;
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.category-banner {
    background: linear-gradient(180deg, var(--lt-surface) 0%, var(--lt-bg) 100%);
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.video-hero {
    background-size: cover;
    background-position: center;
    position: relative;
}

.video-hero-overlay {
    background: linear-gradient(180deg, rgba(13,15,18,.6) 0%, rgba(13,15,18,.95) 100%);
}

/* Mobilde film/dizi başlığı büyük punto + tek satır meta bilgisi (yıl · süre · ülke · puan)
   dar ekranda üst üste biniyor / taşıyordu ("yazılar arasında kayboluyor"). Başlığı küçült,
   meta satırını flex-wrap ile düzenli satırlara böl. */
@media (max-width: 767.98px) {
    .video-hero-overlay h1 {
        font-size: 1.5rem;
        line-height: 1.3;
        word-break: break-word;
    }

    .video-hero-overlay .text-white-50.mb-3 {
        display: flex;
        flex-wrap: wrap;
        row-gap: .35rem;
        column-gap: .5rem;
        align-items: center;
        font-size: .85rem;
    }

    .video-hero-overlay .container {
        padding-top: 1.5rem;
        padding-bottom: 1.25rem;
    }
}

.player-wrapper {
    background: #000;
    border-radius: .5rem;
    overflow: hidden;
}

.player-wrapper iframe,
.player-wrapper video {
    width: 100%;
    height: 100%;
    border: 0;
}

/* Mobilde oynatıcıyı sayfanın (container + row gutter'ları dahil) kenar boşluklarından
   taşırıp tam viewport genişliğine yay - "player biraz daha büyük olsun" isteği. Klasik
   full-bleed tekniği (100vw + negative margin) kullanılıyor çünkü col-lg-8 birden fazla
   iç-içe padding katmanı (container + row gutter) barındırıyor; tek bir negative margin
   bunların hepsini iptal etmez. lg breakpoint altında (izleme sayfası tek sütuna düştüğü
   nokta) devreye girer. Köşeler de kare olur (kenardan kenara giderken yuvarlak köşe garip
   durur). body'de overflow-x:hidden ile olası 100vw/scrollbar taşması engelleniyor. */
@media (max-width: 991.98px) {
    .player-wrapper {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        border-radius: 0;
    }
}

.page-content img {
    max-width: 100%;
    height: auto;
}

.auth-card {
    background: var(--lt-surface);
    border: 1px solid rgba(255,255,255,.08);
}

.seo-text-block {
    background: var(--lt-surface);
    border-top: 1px solid rgba(255,255,255,.06);
}

.seo-text-block p {
    color: #b8bcc2;
    line-height: 1.7;
    max-width: 900px;
}

.seo-text-list {
    color: #b8bcc2;
    max-width: 900px;
    line-height: 1.8;
}

/* Category chip bar (mobile quick filters) */
.category-chip-bar {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    padding: .6rem .75rem;
    background: var(--lt-surface);
    border-top: 1px solid rgba(255,255,255,.06);
}

.category-chip-bar .chip {
    flex: 0 0 auto;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    color: #eee;
    font-size: .8rem;
    text-decoration: none;
    white-space: nowrap;
}

.category-chip-bar .chip:hover {
    background: var(--lt-accent);
}

/* Mobile bottom tab bar */
.mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    max-width: 100vw;
    background: rgba(13, 15, 18, .97);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255,255,255,.08);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-tabbar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    padding: .5rem 0 .4rem;
    color: #999;
    text-decoration: none;
    font-size: .65rem;
}

.mobile-tabbar a i {
    font-size: 1.2rem;
}

.mobile-tabbar a.mobile-tabbar-live i {
    color: var(--lt-accent);
}

/* Live TV channel grid */
.channel-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 576px) {
    .channel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
    .channel-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.channel-card {
    display: block;
    text-decoration: none;
    text-align: center;
}

.channel-card-logo {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--lt-surface);
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75rem;
}

.channel-card-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.live-badge {
    position: absolute;
    top: .35rem;
    right: .35rem;
    background: var(--lt-accent);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    padding: .1rem .35rem;
    border-radius: .25rem;
}

.channel-card-title {
    margin-top: .4rem;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Live TV matches panel */
.match-panel {
    background: var(--lt-surface);
    border-radius: .75rem;
    padding: 1rem;
}

.match-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    background: transparent;
    border-color: rgba(255, 255, 255, .08);
}

.match-item-title {
    font-weight: 600;
    font-size: .9rem;
}

.match-item-time {
    font-size: .75rem;
    color: var(--lt-muted, #9a9a9a);
}

.match-item-channel {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: .5rem;
    background: rgba(255, 255, 255, .05);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .35rem;
}

.match-item-channel img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Live TV chat panel */
.chat-panel {
    background: var(--lt-surface);
    border-radius: .75rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.chat-messages {
    height: 360px;
    overflow-y: auto;
    padding: .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.chat-message-header {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
}

.chat-message-author {
    font-weight: 700;
}

.chat-message-admin {
    color: var(--lt-accent);
}

.chat-message-time {
    color: var(--lt-muted, #9a9a9a);
    margin-left: auto;
}

.chat-message-delete {
    background: none;
    border: 0;
    color: var(--lt-muted, #9a9a9a);
    line-height: 1;
    font-size: 1rem;
    padding: 0 .15rem;
    cursor: pointer;
}

.chat-message-delete:hover {
    color: var(--lt-accent);
}

.chat-message-content {
    font-size: .85rem;
    word-break: break-word;
}

.chat-input-row {
    display: flex;
    gap: .5rem;
    padding: .75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.chat-login-prompt {
    padding: .75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
    font-size: .85rem;
    color: var(--lt-muted, #9a9a9a);
}

/* Season accordion */
.season-accordion .accordion-item {
    background: var(--lt-surface);
    border: 1px solid rgba(255,255,255,.08);
    margin-bottom: .5rem;
    border-radius: .5rem !important;
    overflow: hidden;
}

.season-accordion .accordion-button {
    background: var(--lt-surface);
    color: #eee;
    font-weight: 600;
}

.season-accordion .accordion-button:not(.collapsed) {
    background: rgba(229, 9, 20, .12);
    color: #fff;
    box-shadow: none;
}

.season-accordion .accordion-button:focus {
    box-shadow: none;
}

.season-accordion .accordion-button::after {
    filter: invert(1);
}

.season-accordion .list-group-item {
    background: transparent;
    color: #ddd;
    border-color: rgba(255,255,255,.06);
}

.season-accordion .list-group-item.active {
    background: var(--lt-accent);
    border-color: var(--lt-accent);
    color: #fff;
}