/* Afterglow */
:root {
    --bg: #0A0B10;
    --surface: rgba(18, 20, 27, 0.92);
    --glass: rgba(255, 255, 255, 0.035);
    --border: rgba(255, 255, 255, 0.08);
    --border-glow: rgba(242, 85, 61, 0.35);
    --text: #F2F3F7;
    --muted: #A3A8B8;
    --accent: #B03222;
    --accent2: #D63F2E;
    --cyan: #3b82a0;
    --gold: #E9A93F;
    --header-main: 72px;
    --ribbon-wrap: 0px;
    --header: var(--header-main);
    --ribbon: var(--ribbon-wrap);
    --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --glow-pink: 0 0 18px rgba(185, 28, 28, 0.28);
    --glow-purple: 0 0 18px rgba(30, 77, 107, 0.3);
    --glow-cyan: 0 0 14px rgba(59, 130, 160, 0.22);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

main {
    flex: 1;
    position: relative;
    z-index: 1;
}

/* ── Ambient background ── */
.ambient {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ambient__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.55;
    animation: float 14s ease-in-out infinite;
}

.ambient__orb--1 {
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, #b91c1c 0%, transparent 70%);
    top: -120px;
    left: -80px;
}

.ambient__orb--2 {
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, #1e4d6b 0%, transparent 70%);
    top: 30%;
    right: -100px;
    animation-delay: -5s;
}

.ambient__orb--3 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #3b82a0 0%, transparent 70%);
    bottom: -80px;
    left: 35%;
    animation-delay: -9s;
    opacity: 0.35;
}

.ambient__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 20%, transparent 75%);
}

@keyframes float {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }

    33% {
        transform: translate(30px, -20px) scale(1.05);
    }

    66% {
        transform: translate(-20px, 25px) scale(0.95);
    }
}

.mobile-drawer {
    position: fixed;
    inset: 0;
    z-index: 500;
    pointer-events: none;
    visibility: hidden;
}

.mobile-drawer.is-open {
    pointer-events: auto;
    visibility: visible;
}

.mobile-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 2, 10, .72);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .3s;
}

.mobile-drawer.is-open .mobile-drawer__backdrop {
    opacity: 1;
}

.mobile-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: min(100vw, 340px);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(165deg, rgba(18, 12, 32, .98), rgba(8, 6, 14, .99));
    border-left: 1px solid rgba(131, 56, 236, .25);
    box-shadow: -12px 0 48px rgba(0, 0, 0, .55), inset 1px 0 0 rgba(255, 255, 255, .04);
    transform: translateX(105%);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
    overflow: hidden;
}

.mobile-drawer.is-open .mobile-drawer__panel {
    transform: translateX(0);
}

.mobile-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem .75rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.mobile-drawer__brand {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.15rem;
}

.mobile-drawer__brand span {
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mobile-drawer__close {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--glass);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s;
}

.mobile-drawer__close svg {
    width: 18px;
    height: 18px;
}

.mobile-drawer__close:hover {
    color: #fff;
    border-color: rgba(131, 56, 236, .5);
}

.mobile-drawer__search {
    display: none;
    align-items: stretch;
    margin: .85rem 1rem 0;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .04);
    overflow: hidden;
    flex-shrink: 0;
}

.mobile-drawer__search-icon {
    display: flex;
    align-items: center;
    padding-left: .85rem;
    color: var(--muted);
}

.mobile-drawer__search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    color: var(--text);
    font: inherit;
    font-size: .875rem;
    padding: .65rem .5rem;
    outline: none;
}

.mobile-drawer__search button {
    border: none;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: .8rem;
    padding: 0 1rem;
    cursor: pointer;
}

.mobile-drawer__nav {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .85rem 1rem .5rem;
    flex-shrink: 0;
}

.mobile-drawer__link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem .85rem;
    border-radius: 12px;
    font-size: .92rem;
    font-weight: 500;
    color: var(--muted);
    border: 1px solid transparent;
    transition: all .2s;
}

.mobile-drawer__link:hover,
.mobile-drawer__link.is-active {
    color: var(--text);
    background: rgba(255, 255, 255, .05);
    border-color: var(--border);
}

.mobile-drawer__link.is-active {
    border-color: rgba(131, 56, 236, .35);
    box-shadow: inset 3px 0 0 var(--accent);
}

.mobile-drawer__link--hot {
    color: #ffb4d0;
}

.mobile-drawer__icon {
    width: 1.5rem;
    text-align: center;
    font-size: 1rem;
}

.mobile-drawer__section {
    padding: .5rem 1rem .75rem;
    flex-shrink: 0;
}

.mobile-drawer__label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--muted);
    margin-bottom: .55rem;
}

.mobile-drawer__pills {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.mobile-drawer__pill {
    padding: .35rem .65rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 500;
    color: var(--muted);
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border);
    transition: all .2s;
}

.mobile-drawer__pill:hover,
.mobile-drawer__pill.is-active {
    color: var(--text);
    border-color: rgba(131, 56, 236, .4);
    background: rgba(131, 56, 236, .12);
}

.mobile-drawer__accord {
    flex: 1;
    min-height: 0;
    margin: 0 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, .02);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mobile-drawer__accord-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem .85rem;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    flex-shrink: 0;
}

.mobile-drawer__accord-head::-webkit-details-marker {
    display: none;
}

.mobile-drawer__accord-count {
    font-size: .72rem;
    font-weight: 600;
    color: var(--accent2);
    background: rgba(131, 56, 236, .15);
    padding: .15rem .45rem;
    border-radius: 999px;
}

.mobile-drawer__accord-body {
    overflow-y: auto;
    padding: 0 .85rem .85rem;
    -webkit-overflow-scrolling: touch;
}

.mobile-drawer__group {
    margin-bottom: .85rem;
}

.mobile-drawer__group-title {
    font-size: .72rem;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: .4rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.mobile-drawer__group-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .35rem;
}

.mobile-drawer__cat {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .5rem;
    border-radius: 8px;
    font-size: .75rem;
    color: var(--muted);
    border: 1px solid transparent;
    transition: all .15s;
}

.mobile-drawer__cat span {
    font-size: .9rem;
}

.mobile-drawer__cat:hover,
.mobile-drawer__cat.is-active {
    color: var(--text);
    background: rgba(255, 255, 255, .05);
    border-color: var(--border);
}

.mobile-drawer__all {
    display: block;
    text-align: center;
    padding: .55rem;
    margin-top: .25rem;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--accent2);
    background: rgba(131, 56, 236, .1);
    border: 1px solid rgba(131, 56, 236, .25);
}

.mobile-drawer__foot {
    flex-shrink: 0;
    margin-top: auto;
    padding: .85rem 1rem 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .55rem;
}

.mobile-drawer__badge {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--accent2);
}

.mobile-drawer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem .75rem;
}

.mobile-drawer__legal a {
    font-size: .72rem;
    color: var(--muted);
}

body.mobile-nav-open {
    overflow: hidden;
}

body.mobile-nav-open .header__menu-btn {
    position: relative;
    z-index: 501;
}

/* Ribbon wrap — görsel kategori karuseli */
.ribbon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: .45rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: .2rem .65rem .7rem;
}

.ribbon-wrap__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .4rem;
}

.ribbon-wrap__label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
}

.ribbon-wrap__arrows {
    display: flex;
    gap: .35rem;
}

.ribbon-wrap__arrow {
    flex-shrink: 0;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    border: none;
    background: rgba(94, 196, 210, .22);
    color: #0d4a52;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.ribbon-wrap__arrow svg {
    width: 1rem;
    height: 1rem;
}

.ribbon-wrap__arrow:hover {
    background: rgba(94, 196, 210, .38);
    transform: scale(1.06);
}

.ribbon-wrap__fade {
    position: absolute;
    bottom: .65rem;
    width: 2rem;
    height: 2.5rem;
    pointer-events: none;
    z-index: 2;
}

.ribbon-wrap__fade--left {
    left: 1.25rem;
    background: linear-gradient(90deg, rgba(6, 6, 10, .95), transparent);
}

.ribbon-wrap__fade--right {
    right: 1.25rem;
    background: linear-gradient(-90deg, rgba(6, 6, 10, .95), transparent);
}

.ribbon,
.ribbon--tiles {
    display: flex;
    gap: .7rem;
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
    scroll-behavior: smooth;
    flex: 1;
    min-width: 0;
    padding: .15rem .1rem .25rem;
    scroll-snap-type: x proximity;
}

.ribbon:active {
    cursor: grabbing;
}

.ribbon::-webkit-scrollbar {
    display: none;
}

.ribbon__tile {
    flex: 0 0 auto;
    width: 4.55rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .38rem;
    text-decoration: none;
    color: inherit;
    scroll-snap-align: start;
    transition: transform .2s ease;
}

.ribbon__tile:hover {
    transform: translateY(-2px);
}

.ribbon__glyph {
    width: 3.55rem;
    height: 3.55rem;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.55rem;
    line-height: 1;
    background: var(--tile, #E8EEF8);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .55) inset,
        0 10px 22px rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .35);
    transition: box-shadow .2s ease, transform .2s ease, filter .2s ease;
    filter: saturate(1.05);
}

.ribbon__tile:hover .ribbon__glyph {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .65) inset,
        0 14px 28px rgba(0, 0, 0, .28);
    filter: saturate(1.12) brightness(1.03);
}

.ribbon__tile.is-active .ribbon__glyph {
    outline: 2px solid rgba(225, 29, 46, .85);
    outline-offset: 2px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .7) inset,
        0 12px 26px rgba(225, 29, 46, .32);
}

.ribbon__tile--all .ribbon__glyph {
    background: linear-gradient(145deg, #FFE082, #F59E0B);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .7) inset,
        0 0 16px rgba(245, 158, 11, .35),
        0 10px 22px rgba(0, 0, 0, .22);
}

.ribbon__caption {
    font-size: .68rem;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ribbon__tile:hover .ribbon__caption,
.ribbon__tile.is-active .ribbon__caption {
    color: var(--text);
}

/* Eski pill — başka yerlerde kalabilir */
.ribbon__pill {
    flex-shrink: 0;
    padding: .38rem .85rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--muted);
    background: var(--glass);
    border: 1px solid var(--border);
    transition: all .3s;
    white-space: nowrap;
}

.ribbon__pill:hover {
    color: #fff;
    border-color: rgba(131, 56, 236, 0.5);
    box-shadow: 0 0 16px rgba(131, 56, 236, 0.25);
    transform: translateY(-1px);
}

.ribbon__pill.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    border-color: transparent;
    box-shadow: var(--glow-pink);
}

/* Legacy nav (removed) */
.nav {
    display: none;
}

.logo__icon {
    display: none;
}

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .7rem 1.5rem;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
    font-size: .9rem;
    border: none;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, filter .2s;
}

.btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.btn--glow {
    box-shadow: var(--glow-pink), var(--glow-purple);
    animation: btn-pulse 3s ease-in-out infinite;
}

@keyframes btn-pulse {

    0%,
    100% {
        box-shadow: var(--glow-pink), var(--glow-purple);
    }

    50% {
        box-shadow: 0 0 32px rgba(255, 0, 110, .6), 0 0 40px rgba(131, 56, 236, .4);
    }
}

.btn--ghost {
    background: var(--glass);
    border: 1px solid var(--border);
    color: var(--text);
    box-shadow: none;
    animation: none;
}

.btn--ghost:hover {
    border-color: var(--border-glow);
    box-shadow: var(--glow-purple);
}

/* ── Hero ── */
.hero {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.25rem 2.5rem;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 2.5rem;
    align-items: center;
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 15% 40%, rgba(255, 0, 110, 0.12), transparent 60%),
        radial-gradient(ellipse 50% 40% at 85% 60%, rgba(131, 56, 236, 0.14), transparent 55%);
    pointer-events: none;
}

.hero__left,
.hero__right {
    position: relative;
    z-index: 1;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .85rem;
    margin-bottom: 1.1rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
}

.hero__pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff3355;
    box-shadow: 0 0 10px #ff3355;
    animation: live-pulse 1.5s ease-in-out infinite;
}

.hero__eyebrow-dot {
    opacity: .35;
}

.hero__title {
    font-family: var(--display);
    font-size: clamp(2.1rem, 5.5vw, 3.4rem);
    line-height: 1.08;
    margin-bottom: 1rem;
    letter-spacing: -0.03em;
}

.text-glow {
    background: linear-gradient(135deg, var(--accent2) 0%, var(--accent) 50%, var(--cyan) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% auto;
    animation: shimmer 4s linear infinite;
}

@keyframes shimmer {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

.hero__sub {
    color: var(--muted);
    margin-bottom: 1.35rem;
    font-size: 1.05rem;
    max-width: 460px;
    line-height: 1.6;
}

.hero__search {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .35rem .35rem 1rem;
    margin-bottom: 1.5rem;
    max-width: 480px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: border-color .3s, box-shadow .3s;
}

.hero__search:focus-within {
    border-color: var(--border-glow);
    box-shadow: var(--glow-purple);
}

.hero__search-icon {
    color: var(--muted);
    font-size: 1.15rem;
}

.hero__search input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    color: var(--text);
    font: inherit;
    font-size: .95rem;
    outline: none;
}

.hero__search input::placeholder {
    color: var(--muted);
}

.hero__search .btn {
    padding: .65rem 1.35rem;
    font-size: .875rem;
    white-space: nowrap;
}

.hero__stats {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.35rem;
}

.hero__stat {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.hero__stat strong {
    font-family: var(--display);
    font-size: 1.35rem;
    background: linear-gradient(135deg, var(--text), var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero__stat span {
    font-size: .72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.hero__cats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}

.hero__cats-label {
    font-size: .78rem;
    color: var(--muted);
    margin-right: .15rem;
}

.hero__cat {
    padding: .35rem .75rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--muted);
    background: var(--glass);
    border: 1px solid var(--border);
    transition: all .25s;
}

.hero__cat:hover {
    color: #fff;
    border-color: rgba(131, 56, 236, 0.5);
    background: linear-gradient(135deg, rgba(255, 0, 110, .15), rgba(131, 56, 236, .15));
    transform: translateY(-1px);
}

/* Spotlight */
.hero__spotlight {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 1rem;
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.hero__spotlight-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .85rem;
}

.hero__spotlight-badge {
    font-size: .78rem;
    font-weight: 700;
    color: #fff;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    box-shadow: var(--glow-pink);
}

.hero__spotlight-views {
    font-size: .75rem;
    color: var(--muted);
}

.hero__feat {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: visible;
    transition: transform .35s;
}

.hero__feat:hover {
    transform: translateY(-3px);
}

.hero__feat-glow {
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent2), var(--accent), var(--cyan));
    opacity: 0;
    transition: opacity .35s;
    z-index: -1;
}

.hero__feat:hover .hero__feat-glow {
    opacity: .6;
}

.hero__feat-media {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: #111;
    border-radius: 12px;
}

.hero__feat-img,
.hero__feat .card__fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s;
}

.hero__feat:hover .hero__feat-img {
    transform: scale(1.05);
}

.hero__feat-play {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .15) 55%, transparent 100%);
    opacity: 0;
    transition: opacity .3s;
}

.hero__feat:hover .hero__feat-play,
.hero__feat-media.is-previewing .hero__feat-play {
    opacity: 1;
}

.hero__play-btn {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    padding-left: 4px;
    box-shadow: var(--glow-pink);
    transition: transform .3s;
}

.hero__feat:hover .hero__play-btn {
    transform: scale(1.1);
}

.hero__feat-play span:last-child {
    font-size: .85rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .5);
}

.hero__feat-info {
    padding: .85rem .25rem .15rem;
}

.hero__feat-info h2 {
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: .3rem;
}

.hero__feat-info p {
    font-size: .78rem;
    color: var(--muted);
}

.hero__feat-media .card__preview-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
}

/* Mini picks */
.hero__picks {
    margin-top: 1rem;
}

.hero__picks-label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin-bottom: .55rem;
}

.hero__picks-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
}

.hero__pick {
    display: flex;
    gap: .6rem;
    padding: .55rem;
    border-radius: 12px;
    background: var(--glass);
    border: 1px solid var(--border);
    transition: all .25s;
}

.hero__pick:hover {
    border-color: var(--border-glow);
    background: rgba(131, 56, 236, 0.08);
    transform: translateY(-2px);
}

.hero__pick-thumb {
    position: relative;
    width: 88px;
    min-width: 88px;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    background: #111;
}

.hero__pick-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero__pick-thumb span {
    position: absolute;
    bottom: 3px;
    right: 3px;
    font-size: .6rem;
    padding: .1rem .25rem;
    border-radius: 3px;
    background: rgba(0, 0, 0, .85);
}

.hero__pick-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.hero__pick-text strong {
    font-size: .78rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero__pick-text small {
    font-size: .68rem;
    color: var(--muted);
    margin-top: .2rem;
}

.chip {
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .78rem;
    background: var(--glass);
    border: 1px solid var(--border);
    color: var(--muted);
}

/* ── Sections ── */
.section {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.25rem 2.5rem;
}

.section--glass {
    padding: 1.5rem 1.25rem 2.5rem;
    margin-bottom: .5rem;
}

.section--glass::before {
    content: '';
    display: block;
    max-width: 1400px;
    margin: 0 auto 1.5rem;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
}

.section__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
}

.section__head h2 {
    font-family: var(--display);
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.section__icon {
    font-size: 1rem;
}

.section__link {
    color: var(--cyan);
    font-size: .9rem;
    font-weight: 500;
    transition: text-shadow .2s;
}

.section__link:hover {
    text-shadow: var(--glow-cyan);
}

.grid {
    display: grid;
    gap: 1.1rem;
}

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

.grid--6 {
    grid-template-columns: repeat(6, 1fr);
}

/* ── Video cards ── */
.card {
    display: block;
    border-radius: 12px;
    transition: transform .3s;
}

.card[data-tilt] {
    transform-style: preserve-3d;
}

.card__thumb {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    background: #111;
    margin-bottom: .55rem;
    border: 1px solid var(--border);
    transition: border-color .3s, box-shadow .3s;
}

.card:hover .card__thumb {
    border-color: rgba(131, 56, 236, 0.45);
    box-shadow: 0 0 20px rgba(131, 56, 236, 0.25);
}

.card__shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .12) 50%, transparent 60%);
    transform: translateX(-100%);
    transition: transform .6s;
    z-index: 2;
    pointer-events: none;
}

.card:hover .card__shine {
    transform: translateX(100%);
}

.card__thumb img,
.card__fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s cubic-bezier(.25, .46, .45, .94), opacity .15s;
    image-rendering: auto;
    backface-visibility: hidden;
}

.card__thumb.is-previewing img {
    transform: none;
    opacity: 0;
    transition: opacity .2s ease;
}

.card__preview-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    background: #000;
    pointer-events: none;
}

.card__thumb.is-preview-cover .card__preview-video,
.rel__thumb.is-preview-cover .card__preview-video {
    display: block;
    opacity: 1;
}

.card__thumb.is-preview-cover img,
.rel__thumb.is-preview-cover img {
    opacity: 0;
}

.card__thumb.is-preview-cover .skeleton,
.rel__thumb.is-preview-cover .skeleton {
    display: none;
}

.card__thumb.is-preview-loading .card__preview-bar {
    opacity: 1;
}

.card__thumb.is-preview-loading .card__preview-bar span {
    width: 40%;
    animation: preview-load 1s ease infinite;
}

@keyframes preview-load {
    0% {
        transform: translateX(-40%);
    }

    100% {
        transform: translateX(280%);
    }
}

.card:hover .card__thumb:not(.is-previewing) img {
    transform: scale(1.08);
}

.card__preview-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    padding: .35rem .75rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: #fff;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    opacity: 0;
    transition: opacity .25s, transform .25s;
    z-index: 4;
    pointer-events: none;
}

.card__thumb:hover .card__preview-badge {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.card__thumb.is-previewing .card__preview-badge {
    opacity: 0;
}

.card__preview-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.5);
    z-index: 4;
    opacity: 0;
    transition: opacity .2s;
}

.card__preview-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--accent2), var(--cyan));
    box-shadow: 0 0 8px var(--accent2);
    transition: width .28s linear;
}

.card__thumb.is-previewing .card__preview-bar {
    opacity: 1;
}

.card__thumb.is-previewing .card__shine {
    display: none;
}

.card__thumb.is-previewing {
    border-color: rgba(131, 56, 236, 0.5);
    box-shadow: 0 0 18px rgba(131, 56, 236, 0.2);
}

.card__thumb--broken .card__fallback--error {
    display: block !important;
    position: absolute;
    inset: 0;
}

.card__fallback--error {
    width: 100%;
    height: 100%;
}

.card__dur {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    font-size: .7rem;
    font-weight: 600;
    padding: .15rem .4rem;
    border-radius: 5px;
    z-index: 3;
}

.card__rating {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, var(--gold), #ff9500);
    color: #000;
    font-size: .65rem;
    font-weight: 700;
    padding: .15rem .35rem;
    border-radius: 4px;
    z-index: 3;
}

.card__media {
    display: block;
    color: inherit;
}

.card__title-link {
    display: block;
    color: inherit;
}

.card__title-link h3,
.card__body h3 {
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: .25rem;
    transition: color .2s;
}

.card:hover .card__title-link h3,
.card:hover .card__body h3 {
    color: var(--cyan);
}

.card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: .35rem 0 0;
    font-size: .78rem;
    color: var(--muted);
    line-height: 1.3;
}

.card__meta-left {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card__meta-stats {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.card__meta-views,
.card__meta-likes {
    white-space: nowrap;
}

.card__creator {
    color: var(--muted);
    font-weight: 500;
    transition: color .2s;
}

a.card__creator {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

.card__creator:hover {
    color: var(--cyan);
    text-shadow: var(--glow-cyan);
}

.card__meta-sep {
    opacity: .5;
}

.card--sm .card__body h3 {
    font-size: .82rem;
}

/* ── Browse ── */
.page-head {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1.25rem 0;
}

.page-head h1 {
    font-family: var(--display);
    font-size: 1.75rem;
    background: linear-gradient(135deg, var(--text), var(--muted));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.page-head p {
    color: var(--muted);
    font-size: .9rem;
    margin-top: .25rem;
}

.empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--muted);
    background: var(--glass);
    border: 1px dashed var(--border);
    border-radius: 16px;
}

.pager {
    max-width: 1400px;
    margin: 0 auto 2.5rem;
    padding: 0 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    color: var(--muted);
}

/* ── Watch ── */
.watch {
    position: relative;
    isolation: isolate;
}

.watch__backdrop {
    position: absolute;
    inset: 0 0 auto 0;
    height: min(72vh, 720px);
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.watch__backdrop-img {
    position: absolute;
    inset: -10%;
    background-size: cover;
    background-position: center top;
    filter: blur(48px) saturate(1.35);
    transform: scale(1.12);
    opacity: .45;
    animation: watch-bg-drift 28s ease-in-out infinite alternate;
}

.watch__backdrop-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
}

.watch__backdrop-glow--1 {
    width: 42vw;
    height: 42vw;
    top: -10%;
    left: -8%;
    background: radial-gradient(circle, rgba(255, 0, 110, .45), transparent 70%);
    animation: watch-orb 16s ease-in-out infinite alternate;
}

.watch__backdrop-glow--2 {
    width: 36vw;
    height: 36vw;
    top: 10%;
    right: -6%;
    background: radial-gradient(circle, rgba(131, 56, 236, .5), transparent 70%);
    animation: watch-orb 20s ease-in-out infinite alternate-reverse;
}

.watch__backdrop-veil {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(6, 6, 10, .35) 0%, rgba(6, 6, 10, .82) 55%, var(--bg) 100%),
        linear-gradient(90deg, rgba(6, 6, 10, .5), transparent 30%, transparent 70%, rgba(6, 6, 10, .45));
}

@keyframes watch-bg-drift {
    from {
        transform: scale(1.12) translateY(0);
    }

    to {
        transform: scale(1.18) translateY(-2%);
    }
}

@keyframes watch-orb {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(4%, 6%);
    }
}

.watch__grid {
    position: relative;
    z-index: 1;
    max-width: 1680px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 1.25rem;
    align-items: start;
    padding: 1rem 1.25rem 3rem;
}

.watch__main {
    min-width: 0;
}

.watch__player {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .06),
        0 18px 40px rgba(0, 0, 0, .5);
}

@keyframes watch-player-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.985);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.watch__player-frame {
    position: relative;
    aspect-ratio: 16/9;
    max-height: calc(100vh - var(--header) - 7rem);
    background: #000;
}

.watch__player iframe,
.watch__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    object-fit: contain;
    background: #000;
}

.watch__player-live {
    position: absolute;
    top: .85rem;
    left: .85rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .65rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(8px);
    color: #fff;
    pointer-events: none;
}

.watch__live-dot {
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--accent2);
    box-shadow: 0 0 10px var(--accent2);
    animation: pulse-live 1.4s ease-in-out infinite;
}

@keyframes pulse-live {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .55;
        transform: scale(.85);
    }
}

.watch__player-loading,
.watch__player-error {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    background: rgba(0, 0, 0, 0.85);
    color: var(--muted);
    font-size: .9rem;
    z-index: 2;
}

.watch__player-error[hidden],
.watch__player-loading[hidden] {
    display: none;
}

.watch__spinner {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid rgba(131, 56, 236, 0.25);
    border-top-color: var(--accent2);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.watch__player-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    padding: .7rem .85rem;
    background: linear-gradient(180deg, rgba(18, 14, 28, .92), rgba(10, 8, 16, .98));
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.watch__player-bar-left,
.watch__player-bar-right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}

.watch__quality {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .78rem;
    color: var(--muted);
}

.watch__quality select {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--text);
    border-radius: 8px;
    padding: .3rem .45rem;
}

.watch__quality-badge {
    font-size: .72rem;
    font-weight: 700;
    padding: .28rem .55rem;
    border-radius: 8px;
    background: rgba(131, 56, 236, .25);
    color: #fff;
}

.watch__kbd-hint {
    font-size: .68rem;
    color: var(--muted);
    opacity: .75;
}

.watch__tool-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .7rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .04);
    color: var(--text);
    font-size: .75rem;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .2s;
}

.watch__tool-btn svg {
    width: 14px;
    height: 14px;
}

.watch__tool-btn:hover,
.watch__tool-btn.is-active {
    background: rgba(185, 28, 28, 0.28);
    border-color: rgba(185, 28, 28, .5);
    transform: translateY(-1px);
}

.watch__tool-btn--share {
    background: linear-gradient(135deg, rgba(185, 28, 28, .35), rgba(127, 29, 29, .45));
    border-color: rgba(248, 113, 113, .35);
    color: #fff;
    box-shadow: 0 6px 18px rgba(185, 28, 28, .22);
}

.watch__tool-btn--share:hover,
.watch__share.is-open .watch__tool-btn--share {
    background: linear-gradient(135deg, #e11d2e, #9f1239);
    border-color: transparent;
    transform: translateY(-1px);
}

.watch__share {
    position: relative;
}

.watch__share-menu {
    position: absolute;
    right: 0;
    bottom: calc(100% + .55rem);
    z-index: 40;
    width: min(240px, 78vw);
    padding: .7rem;
    border-radius: 16px;
    background: rgba(12, 16, 24, .96);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
    backdrop-filter: blur(16px);
    animation: watch-share-in .2s ease both;
}

@keyframes watch-share-in {
    from {
        opacity: 0;
        transform: translateY(6px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.watch__share-title {
    margin: 0 .35rem .55rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.watch__share-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    width: 100%;
    padding: .6rem .7rem;
    margin: 0;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #f4f1ec;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
}

.watch__share-item:hover {
    background: rgba(255, 255, 255, .07);
}

.watch__share-ico {
    display: inline-grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 8px;
    font-size: .75rem;
    font-weight: 800;
    background: rgba(255, 255, 255, .08);
}

.watch__share-ico--wa {
    background: #128c7e;
    color: #fff;
}

.watch__share-ico--tg {
    background: #229ed9;
    color: #fff;
}

.watch__share-ico--x {
    background: #111;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
}

.watch__share-ico--copy {
    background: rgba(185, 28, 28, .35);
    color: #fecaca;
}

.watch__tool-btn--fav.is-active {
    color: var(--accent2);
    border-color: rgba(255, 0, 110, .45);
    background: rgba(255, 0, 110, .15);
}

.watch__info {
    padding-top: 1.35rem;
}

.watch__info--enter {
    animation: watch-info-in .6s .12s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes watch-info-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.watch__owner {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: .85rem;
    margin: 0 0 1.15rem;
    padding: .65rem .75rem;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: none;
    transition: background .2s ease, border-color .2s ease;
}

.watch__owner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .07) 50%, transparent 60%);
    transform: translateX(-120%);
    transition: transform .6s ease;
    pointer-events: none;
}

.watch__owner:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 245, 255, .45);
    box-shadow: 0 22px 48px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 245, 255, .12);
}

.watch__owner:hover::before {
    transform: translateX(120%);
}

.watch__owner-av {
    position: relative;
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--av-grad, linear-gradient(135deg, #ff2d55, #7c3aed));
    display: grid;
    place-items: center;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}

.watch__owner-photo,
.watch__owner-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.watch__owner-letter {
    font-family: var(--display);
    font-size: 1.55rem;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

.watch__owner-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid rgba(0, 245, 255, .55);
    box-shadow: 0 0 0 4px rgba(0, 245, 255, .12);
    pointer-events: none;
    animation: watch-owner-pulse 2.4s ease-in-out infinite;
}

@keyframes watch-owner-pulse {
    0%, 100% { opacity: .7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.03); }
}

.watch__owner-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.watch__owner-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cyan);
}

.watch__owner-name {
    font-family: var(--display);
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.watch__owner-cta {
    font-size: .78rem;
    color: var(--muted);
}

.watch__owner:hover .watch__owner-cta {
    color: var(--cyan);
}

.watch__owner-go {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .1);
    color: var(--cyan);
    transition: transform .2s ease, background .2s ease;
}

.watch__owner-go svg {
    width: 1.1rem;
    height: 1.1rem;
}

.watch__owner:hover .watch__owner-go {
    transform: translateX(3px);
    background: rgba(0, 245, 255, .12);
}

.watch__breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    font-size: .75rem;
    color: var(--muted);
    margin-bottom: .65rem;
}

.watch__breadcrumb a:hover {
    color: var(--cyan);
}

.watch__title {
    font-family: var(--display);
    font-size: clamp(1.35rem, 3.2vw, 2rem);
    font-weight: 800;
    line-height: 1.22;
    margin-bottom: 1rem;
    letter-spacing: -.025em;
    text-wrap: balance;
    background: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, .78));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.watch__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: .65rem;
    margin-bottom: 1.1rem;
}

.watch__stat {
    padding: .85rem 1rem;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02));
    border: 1px solid rgba(255, 255, 255, .1);
    backdrop-filter: blur(10px);
    transition: border-color .2s, transform .2s;
}

.watch__stat:hover {
    border-color: rgba(0, 245, 255, .28);
    transform: translateY(-1px);
}

.watch__stat strong {
    display: block;
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 800;
    margin-bottom: .15rem;
}

.watch__stat span {
    font-size: .72rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.watch__stat--rating strong {
    background: linear-gradient(135deg, var(--accent2), var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.watch__toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1.35rem;
}

.watch__chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .9rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: transform .2s, background .2s, border-color .2s, box-shadow .2s;
}

.watch__chip:hover {
    transform: translateY(-2px);
    background: rgba(131, 56, 236, .22);
    border-color: rgba(131, 56, 236, .45);
    box-shadow: 0 8px 24px rgba(131, 56, 236, .2);
}

.watch__chip--cat {
    background: linear-gradient(135deg, rgba(131, 56, 236, .3), rgba(255, 0, 110, .18));
    border-color: rgba(131, 56, 236, .4);
}

.watch__chip--hot {
    background: linear-gradient(135deg, rgba(255, 0, 110, .28), rgba(255, 214, 10, .12));
    border-color: rgba(255, 0, 110, .4);
}

.watch__chip--ghost {
    opacity: .85;
}

.watch__chip-ico {
    opacity: .8;
}

.watch__section-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--cyan);
    margin-bottom: .7rem;
    font-weight: 700;
}

.watch__cast {
    margin-bottom: 1.35rem;
}

.watch__stars {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.watch__star {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .85rem .55rem .55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    transition: transform .2s, border-color .2s, background .2s;
}

.watch__star:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 245, 255, .4);
    background: rgba(0, 245, 255, .08);
}

.watch__star-av {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: .85rem;
    color: #fff;
    box-shadow: 0 0 16px rgba(0, 0, 0, .35);
    overflow: hidden;
    flex-shrink: 0;
}

.watch__star-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.watch__star-meta strong {
    display: block;
    font-size: .85rem;
}

.watch__star-meta small {
    color: var(--muted);
    font-size: .7rem;
}

.watch__creator-card {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem;
    margin-bottom: 1.25rem;
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(131, 56, 236, .2), rgba(255, 0, 110, .08));
    border: 1px solid rgba(131, 56, 236, .35);
    transition: transform .2s, box-shadow .2s;
}

.watch__creator-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(131, 56, 236, .25);
}

.watch__avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.watch__creator-text {
    flex: 1;
    min-width: 0;
}

.watch__creator-text strong {
    display: block;
}

.watch__creator-text span {
    font-size: .8rem;
    color: var(--muted);
}

.watch__creator-go {
    font-size: 1.25rem;
    color: var(--cyan);
}

.watch__tags-block {
    margin-bottom: .5rem;
}

.watch__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.watch__tag {
    padding: .35rem .7rem;
    border-radius: 999px;
    font-size: .78rem;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
    color: var(--muted);
    transition: color .2s, border-color .2s, background .2s;
}

.watch__tag:hover {
    color: #fff;
    border-color: rgba(0, 245, 255, .4);
    background: rgba(0, 245, 255, .1);
}

.watch__tag--hot {
    color: #fff;
    background: rgba(255, 0, 110, .15);
    border-color: rgba(255, 0, 110, .35);
}

.watch__side {
    position: sticky;
    top: calc(var(--header) + .75rem);
    max-height: calc(100vh - var(--header) - 1.5rem);
    overflow: auto;
    padding: 0 .15rem .5rem;
    scrollbar-width: thin;
    animation: watch-info-in .65s .18s cubic-bezier(.2, .8, .2, 1) both;
}

.watch__upnext {
    display: block;
    margin-bottom: 1rem;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(160deg, rgba(255, 0, 110, .18), rgba(18, 14, 28, .95));
    border: 1px solid rgba(255, 0, 110, .35);
    box-shadow: 0 12px 36px rgba(255, 0, 110, .15);
    transition: transform .25s, box-shadow .25s;
}

.watch__upnext:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 18px 44px rgba(255, 0, 110, .28);
}

.watch__upnext-badge {
    padding: .45rem .75rem;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(90deg, var(--accent2), var(--accent));
}

.watch__upnext-media {
    position: relative;
    aspect-ratio: 16/9;
    background: #111;
}

.watch__upnext-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.watch__upnext-play {
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(6px);
    transition: transform .2s;
}

.watch__upnext:hover .watch__upnext-play {
    transform: translate(-50%, -50%) scale(1.1);
}

.watch__upnext-dur {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    padding: .15rem .4rem;
    border-radius: 6px;
    font-size: .7rem;
    background: rgba(0, 0, 0, .7);
}

.watch__upnext-text {
    padding: .85rem;
}

.watch__upnext-text h3 {
    font-size: .92rem;
    line-height: 1.35;
    margin-bottom: .3rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.watch__upnext-text p {
    font-size: .78rem;
    color: var(--muted);
}

.watch__side-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
    padding: 0 .15rem;
}

.watch__side-head h2 {
    font-family: var(--display);
    font-size: .95rem;
    font-weight: 800;
}

.watch__side-head a {
    font-size: .75rem;
    color: var(--cyan);
}

.watch__related-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.rel {
    display: flex;
    gap: .65rem;
    padding: .55rem;
    border-radius: 12px;
    border: 1px solid transparent;
    transition: all .25s;
    animation: watch-rel-in .45s calc(var(--i, 0) * 40ms) both;
}

@keyframes watch-rel-in {
    from {
        opacity: 0;
        transform: translateX(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.rel:hover {
    background: rgba(255, 255, 255, .04);
    border-color: rgba(255, 255, 255, .08);
}

.rel--next {
    background: rgba(255, 0, 110, .06);
    border-color: rgba(255, 0, 110, .2);
}

.rel__next-label {
    position: absolute;
    left: .35rem;
    top: .35rem;
    z-index: 3;
    font-style: normal;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .15rem .35rem;
    border-radius: 6px;
    background: var(--accent2);
    color: #fff;
}

.watch__toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%) translateY(12px);
    z-index: 80;
    padding: .7rem 1.1rem;
    border-radius: 999px;
    background: rgba(18, 14, 28, .95);
    border: 1px solid rgba(131, 56, 236, .45);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
    font-size: .85rem;
    opacity: 0;
    transition: opacity .25s, transform .25s;
    pointer-events: none;
}

.watch__toast.is-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

body.theater-mode {
    overflow-x: hidden;
}

body.theater-mode .header {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: transform .28s ease, opacity .28s ease;
}

body.theater-mode .ambient,
body.theater-mode .watch__side,
body.theater-mode .watch__backdrop,
body.theater-mode .watch__ad,
body.theater-mode .ag-ad,
body.theater-mode .watch__crumbs,
body.theater-mode .watch__more {
    display: none !important;
}

body.theater-mode .watch__grid {
    grid-template-columns: 1fr;
    max-width: none;
    padding: 0 0 2rem;
    gap: 0;
}

body.theater-mode .watch__player {
    border-radius: 0;
    max-height: none;
    box-shadow: none;
    background: #000;
}

body.theater-mode .watch__player-frame {
    /* Eski max-height + aspect-ratio çakışması layout'u patlatıyordu */
    aspect-ratio: 16 / 9;
    width: min(100vw, calc((100dvh - 3.25rem) * 16 / 9));
    max-width: 100%;
    max-height: calc(100dvh - 3.25rem);
    height: auto;
    margin: 0 auto;
}

body.theater-mode .watch__player-bar {
    max-width: min(100vw, calc((100dvh - 3.25rem) * 16 / 9));
    margin: 0 auto;
    border-radius: 0;
    background: rgba(0, 0, 0, .72);
}

body.theater-mode .watch__info {
    padding: 1.25rem clamp(.85rem, 3vw, 1.5rem) 0;
    max-width: 1100px;
    margin: 0 auto;
}

.watch__embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
}

.watch__player.is-embed .watch__video,
.watch__player.is-embed .watch__player-bar {
    display: none;
}

.watch__player-error {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    align-items: center;
}

@media (max-width: 1100px) {
    .watch__grid {
        grid-template-columns: 1fr;
    }

    .watch__side {
        position: static;
        max-height: none;
    }

    .watch__kbd-hint {
        display: none;
    }

    .watch__tool-btn span {
        display: none;
    }
}

@media (max-width: 640px) {
    .rel--row .rel__thumb {
        width: 132px;
        flex-basis: 132px;
    }

    .watch__more {
        padding: 0 .75rem 2.5rem;
    }

    .watch__grid {
        padding: .5rem .75rem 2rem;
        gap: .85rem;
    }

    .watch__player {
        border-radius: 12px;
    }

    .watch__stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .watch__tool-btn {
        padding: .45rem .55rem;
    }
}


/* Related thumbs (watch sidebar) */
.rel__thumb {
    position: relative;
    width: 148px;
    min-width: 148px;
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;
    background: #111;
    border: 1px solid var(--border);
}

.rel__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s, opacity .2s;
}

.rel__thumb.is-previewing {
    border-color: rgba(0, 245, 255, 0.45);
    box-shadow: 0 0 12px rgba(0, 245, 255, 0.25);
}

.rel__thumb.is-previewing img {
    opacity: 0;
    transform: none;
}

.rel__thumb span {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.9);
    font-size: .65rem;
    padding: .1rem .3rem;
    border-radius: 3px;
    z-index: 2;
}

.rel__text h3 {
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rel__text p {
    font-size: .72rem;
    color: var(--muted);
    margin-top: .2rem;
}


/* ── Footer ── */
.footer {
    position: relative;
    padding: 2rem 1.5rem;
    text-align: center;
    margin-top: auto;
    z-index: 1;
}

.footer__line {
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent2), var(--accent), var(--cyan), transparent);
}

.footer__brand {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: .35rem;
}

.footer__brand span {
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer__copy {
    color: var(--muted);
    font-size: .82rem;
}

.footer__adult {
    color: var(--accent2);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: .75rem;
}

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem 1rem;
    margin-bottom: .85rem;
}

.footer__legal a {
    color: var(--muted);
    font-size: .8rem;
    text-decoration: none;
    transition: color .2s;
}

.footer__legal a:hover {
    color: var(--accent);
}

/* ── Legal pages ── */
.legal {
    max-width: 760px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.legal__head {
    text-align: center;
    margin-bottom: 2.5rem;
}

.legal__eyebrow {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--accent2);
    margin-bottom: .5rem;
}

.legal__head h1 {
    font-family: var(--display);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    margin-bottom: .5rem;
}

.legal__meta {
    color: var(--muted);
    font-size: .85rem;
}

.legal__section {
    margin-bottom: 2rem;
    padding: 1.25rem 1.35rem;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: var(--radius);
    backdrop-filter: blur(12px);
}

.legal__section h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: .85rem;
}

.legal__section p {
    color: var(--text);
    font-size: .9rem;
    line-height: 1.65;
    margin-bottom: .65rem;
}

.legal__section p:last-child {
    margin-bottom: 0;
}

.legal__section strong {
    color: #fff;
}

.legal__nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.legal__nav-link {
    padding: .4rem .85rem;
    font-size: .78rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .1);
    color: var(--muted);
    text-decoration: none;
    transition: all .2s;
}

.legal__nav-link:hover,
.legal__nav-link.is-active {
    color: #fff;
    border-color: var(--accent);
    background: rgba(131, 56, 236, .15);
}

/* ── Age gate ── */
.age-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.age-gate[hidden] {
    display: none;
}

body.age-gate-open {
    overflow: hidden;
}

.age-gate__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 3, 12, .92);
    backdrop-filter: blur(16px);
}

.age-gate__card {
    position: relative;
    max-width: 420px;
    width: 100%;
    padding: 2rem 1.75rem;
    text-align: center;
    background: linear-gradient(145deg, rgba(30, 20, 50, .95), rgba(15, 10, 30, .98));
    border: 1px solid rgba(131, 56, 236, .35);
    border-radius: calc(var(--radius) * 1.2);
    box-shadow: 0 0 60px rgba(131, 56, 236, .25);
}

.age-gate__logo {
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.6rem;
    margin-bottom: 1rem;
}

.age-gate__logo span {
    background: linear-gradient(135deg, var(--accent2), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.age-gate__card h2 {
    font-family: var(--display);
    font-size: 1.25rem;
    margin-bottom: .75rem;
}

.age-gate__card p {
    color: var(--muted);
    font-size: .88rem;
    line-height: 1.55;
    margin-bottom: 1.25rem;
}

.age-gate__actions {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    margin-bottom: 1rem;
}

.age-gate__fine {
    font-size: .75rem;
    color: var(--muted);
}

.age-gate__fine a {
    color: var(--accent2);
    text-decoration: none;
}

.age-gate__fine a:hover {
    text-decoration: underline;
}

/* ── Error ── */
.error {
    text-align: center;
    padding: 6rem 1rem;
}

.error h1 {
    font-family: var(--display);
    font-size: 6rem;
    background: linear-gradient(135deg, var(--accent2), var(--accent), var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 30px rgba(131, 56, 236, 0.5));
    margin-bottom: .5rem;
}

.error p {
    color: var(--muted);
    margin-bottom: 1.5rem;
}

/* ── Category sliders ── */
.sliders {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.25rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.cat-slider {
    position: relative;
}

.cat-slider__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cat-slider__title {
    font-family: var(--display);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.cat-slider__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: var(--glass);
    border: 1px solid var(--border);
    font-size: 1rem;
}

.cat-slider__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.cat-slider__link {
    font-size: .875rem;
    font-weight: 500;
    color: var(--cyan);
    margin-right: .25rem;
    transition: text-shadow .2s;
}

.cat-slider__link:hover {
    text-shadow: var(--glow-cyan);
}

.cat-slider__btn {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--glass);
    color: var(--text);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

.cat-slider__btn:hover {
    border-color: var(--border-glow);
    background: linear-gradient(135deg, rgba(255, 0, 110, .2), rgba(131, 56, 236, .2));
    box-shadow: var(--glow-purple);
}

.cat-slider__track {
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    cursor: grab;
    margin: 0 -1.25rem;
    padding: 0 1.25rem .5rem;
    mask-image: linear-gradient(90deg, transparent, black 1.25rem, black calc(100% - 1.25rem), transparent);
}

.cat-slider__track:active {
    cursor: grabbing;
}

.cat-slider__track::-webkit-scrollbar {
    display: none;
}

.cat-slider__inner {
    display: flex;
    gap: 1rem;
    width: max-content;
    padding: .25rem 0;
}

.cat-slider--skel {
    pointer-events: none;
}

.cat-slider--skel .cat-slider__head {
    min-height: 2rem;
    align-items: center;
}

.cat-slider--skel .card--slider {
    flex: 0 0 240px;
    width: 240px;
}

@media (max-width: 520px) {
    .cat-slider--skel .card--slider {
        flex: 0 0 200px;
        width: 200px;
    }
}

@media (max-width: 768px) {
    .page-feed .cat-slider--skel .cat-slider__inner {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 1.15rem;
        padding: 0;
    }

    .page-feed .cat-slider--skel .card--slider {
        flex: none;
        width: 100%;
        max-width: none;
    }
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .grid--6 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid--4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 1100px) {
    .mega {
        min-width: 560px;
    }

    .mega__inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .mega__col--cta {
        grid-column: 1 / -1;
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--border);
        padding-top: 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: .35rem;
    }

    .mega__col--cta .mega__title {
        width: 100%;
    }

    .mega__cta {
        flex: 1;
        min-width: 140px;
        margin-bottom: 0;
    }
}

@media (max-width: 1024px) {
    .header__bar {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .header__nav {
        display: none;
    }

    .header__menu-btn {
        display: grid;
    }

    .header__search {
        max-width: none;
    }

    .mobile-drawer__search {
        display: flex;
    }
}

@media (max-width: 900px) {
    .header__nav {
        display: none;
    }

    .header__menu-btn {
        display: grid;
    }

    .header .search,
    .header__search {
        display: none;
    }

    .header__icon-btn--search {
        display: grid;
    }

    .header__actions .header__icon-btn:not(.header__menu-btn):not(.header__icon-btn--search):not(#theme-toggle) {
        display: none;
    }

    .ribbon-wrap__arrow {
        display: none;
    }

    .mobile-drawer__search {
        display: flex;
    }

    .hero {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        padding-top: 1.5rem;
    }

    .hero__stats {
        gap: 1rem;
    }

    .hero__search {
        max-width: none;
    }

    .hero__cats-label {
        width: 100%;
        margin-bottom: .15rem;
    }

    .watch__grid {
        grid-template-columns: 1fr;
    }

    .watch__side {
        position: static;
        max-height: none;
        border-left: none;
        border-top: 1px solid var(--border);
    }

    .grid--4,
    .grid--6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .ambient__orb {
        opacity: 0.35;
    }
}

@media (max-width: 520px) {

    .grid--4,
    .grid--6 {
        grid-template-columns: 1fr;
    }

    .rel__thumb {
        width: 120px;
        min-width: 120px;
    }

    .hero__picks-row {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Skeleton & lazy load ── */
@keyframes skeleton-shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0.04) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    z-index: 1;
}

.skeleton--thumb {
    border-radius: 12px;
}

.skeleton--sm {
    border-radius: 8px;
}

/* Satır skeleton — absolute inset kullanma (kart body’de çöküyordu) */
.skeleton--line {
    position: relative;
    inset: auto;
    display: block;
    height: .72rem;
    border-radius: 6px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.05) 0%,
            rgba(255, 255, 255, 0.12) 50%,
            rgba(255, 255, 255, 0.05) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skeleton--line-title {
    height: .9rem;
    width: 92%;
    margin-bottom: .45rem;
}

.skeleton--line-meta {
    height: .7rem;
    width: 58%;
}

.skeleton--line-dur {
    height: .65rem;
    width: 2.4rem;
    border-radius: 4px;
}

.card--skel {
    pointer-events: none;
    animation: skel-card-in .45s ease both;
    animation-delay: calc(var(--skel-i, 0) * 35ms);
}

@keyframes skel-card-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.card__thumb--skel {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    background: #121821;
}

.card__dur--skel {
    z-index: 2;
    background: rgba(0, 0, 0, .45);
    padding: .2rem .35rem;
}

.card__body--skel {
    padding-top: .55rem;
}

.card__thumb--lazy .lazy-img,
.hero__feat-media .lazy-img,
.hero__pick-thumb .lazy-img,
.rel__thumb .lazy-img {
    opacity: 0;
    transition: opacity .35s ease;
}

.card__thumb--lazy.is-loaded .lazy-img,
.hero__feat-media.is-loaded .lazy-img,
.hero__pick-thumb.is-loaded .lazy-img,
.rel__thumb.is-loaded .lazy-img,
.card__thumb--lazy.is-loaded .card__fallback:not(.card__fallback--error) {
    opacity: 1;
}

.card__thumb--lazy.is-loaded .skeleton,
.hero__feat-media.is-loaded .skeleton,
.hero__pick-thumb.is-loaded .skeleton,
.rel__thumb.is-loaded .skeleton {
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}

.card__thumb--lazy.is-loaded .card__fallback:not(.card__fallback--error) {
    position: absolute;
    inset: 0;
}

/* Page skeleton overlay */
.page-skeleton {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: var(--bg);
    overflow-y: auto;
    padding: calc(var(--header) + var(--ribbon) + 1rem) 1.25rem 2rem;
}

body.is-booting .page-skeleton {
    display: block;
}

body.is-booting .page-main {
    opacity: 0;
    pointer-events: none;
}

.page-main {
    transition: opacity .4s ease;
}

.page-skeleton.is-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}

.page-skeleton__inner {
    max-width: 1400px;
    margin: 0 auto;
}

.skel__media,
.skel__spotlight,
.skel__player,
.skel__search {
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(131, 56, 236, 0.1) 50%,
            rgba(255, 255, 255, 0.04) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: 12px;
}

.skel__line {
    height: 12px;
    border-radius: 6px;
    margin-bottom: .65rem;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 0, 110, 0.08) 50%,
            rgba(255, 255, 255, 0.04) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.skel__line--badge {
    width: 140px;
    height: 28px;
    border-radius: 999px;
}

.skel__line--title {
    height: 28px;
    width: 90%;
}

.skel__line--title.skel__line--short {
    width: 65%;
}

.skel__line--text {
    width: 80%;
    height: 14px;
}

.skel__line--h {
    width: 160px;
    height: 20px;
    margin-bottom: 1rem;
}

.skel__line--sm {
    width: 85%;
    height: 10px;
}

.skel__line--xs {
    width: 55%;
    height: 8px;
}

.skel--hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
}

.skel__search {
    height: 48px;
    border-radius: 999px;
    margin: 1rem 0;
}

.skel__chips {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
}

.skel__chip {
    width: 72px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    background-size: 200% 100%;
}

.skel__spotlight {
    aspect-ratio: 16/10;
    border-radius: 16px;
}

.skel--slider {
    margin-bottom: 2rem;
}

.skel__cards {
    display: flex;
    gap: 1rem;
    overflow: hidden;
}

.skel__cards--grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    flex-wrap: wrap;
}

.skel__card {
    flex: 0 0 240px;
}

.skel__card--slider {
    flex: 0 0 240px;
}

.skel__card .skel__media {
    aspect-ratio: 16/9;
    margin-bottom: .5rem;
}

.skel--watch .skel__player {
    aspect-ratio: 16/9;
    margin-bottom: 1rem;
    border-radius: 0;
}

body.page-watch .page-skeleton {
    padding-top: calc(var(--header-main) + 1rem);
}

@media (max-width: 900px) {
    .skel--hero {
        grid-template-columns: 1fr;
    }

    .skel__cards--grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .skel__cards--grid {
        grid-template-columns: 1fr;
    }
}

/* ── Browse filters ── */
.browse-filters {
    max-width: 1400px;
    margin: 0 auto 1.5rem;
    padding: 0 1.25rem;
}

.browse-filters__row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.browse-filters__field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .75rem;
    color: var(--muted);
}

.browse-filters__field select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(131, 56, 236, 0.25);
    color: var(--text);
    padding: .5rem .75rem;
    border-radius: 8px;
    min-width: 160px;
}

.browse-load,
.browse-end,
.loading-msg {
    text-align: center;
    padding: 2rem;
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
}

.browse-load[hidden],
.browse-end[hidden],
.loading-msg[hidden] {
    display: none !important;
}

#browse-sentinel {
    height: 1px;
}

.card__fav {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 5;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity .2s, transform .2s, background .2s;
}

.card:hover .card__fav,
.card__fav.is-active,
.card__fav:focus-visible {
    opacity: 1;
}

.card__fav.is-active {
    background: rgba(255, 0, 110, 0.85);
    opacity: 1;
}

.card__fav:hover {
    transform: scale(1.1);
}

.card__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(0, 0, 0, 0.4);
    z-index: 4;
}

.card__progress span {
    display: block;
    height: 100%;
    background: var(--accent);
}


.home-section .section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding: 0 1.25rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.home-section .section__head h2 {
    font-size: 1.25rem;
    margin: 0;
}

.home-section .section__head a {
    color: var(--accent);
    font-size: .875rem;
    text-decoration: none;
}

.page-head--row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.trends__list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 640px;
}

.trends__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.trends__rank {
    font-family: var(--font-display, 'Syne', sans-serif);
    font-weight: 800;
    font-size: 1.25rem;
    color: var(--accent);
    min-width: 2rem;
}

.trends__body {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.trends__link {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
}

.trends__link:hover {
    color: var(--accent);
}

.trends__count {
    font-size: .8rem;
    color: var(--muted);
}

.page-admin {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg, #0a0a0f);
    color: var(--text, #fff);
    font-family: Inter, sans-serif;
}

.admin-login__box,
.admin-panel {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(131, 56, 236, 0.25);
    border-radius: 16px;
    padding: 2rem;
    width: min(420px, 92vw);
}

.admin-panel {
    width: min(900px, 92vw);
}

.admin-login__box label {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin: 1rem 0;
    font-size: .875rem;
}

.admin-login__box input {
    padding: .65rem .85rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
}

.admin-login__error {
    color: #ff6b9d;
    font-size: .875rem;
}

.admin-login__back {
    display: block;
    margin-top: 1rem;
    color: var(--muted, #888);
    font-size: .875rem;
}

.admin-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.admin-panel__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.admin-panel__card {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    padding: 1.25rem;
}

.admin-panel__notice {
    background: rgba(131, 56, 236, 0.2);
    padding: .75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.header__icon-btn--fav.is-active {
    color: var(--accent, #b91c1c);
}

html[data-theme="light"] {
    --bg: #f4f2f8;
    --surface: rgba(255, 255, 255, 0.82);
    --glass: rgba(18, 12, 40, 0.04);
    --border: rgba(18, 12, 40, 0.12);
    --border-glow: rgba(131, 56, 236, 0.28);
    --text: #121018;
    --muted: #5c5670;
    color-scheme: light;
}

html[data-theme="light"] body {
    background: var(--bg);
    color: var(--text);
}

html[data-theme="light"] .header,
html[data-theme="light"] .footer,
html[data-theme="light"] .mobile-drawer__panel,
html[data-theme="light"] .age-gate__card,
html[data-theme="light"] .cookie-banner {
    background: rgba(255, 255, 255, 0.92);
    color: var(--text);
}

html[data-theme="light"] .ribbon__glyph {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .9) inset,
        0 8px 18px rgba(0, 0, 0, .08);
    border-color: rgba(0, 0, 0, .04);
}

html[data-theme="light"] .ribbon-wrap__arrow {
    background: rgba(94, 196, 210, .35);
    color: #0d4a52;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
}

html[data-theme="light"] .watch__owner {
    background:
        linear-gradient(135deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .01)),
        radial-gradient(120% 160% at 0% 0%, rgba(0, 160, 180, .1), transparent 55%);
    border-color: rgba(0, 0, 0, .08);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .08);
}

html[data-theme="light"] .ambient__orb {
    opacity: 0.12;
}

html[data-theme="light"] .age-gate__backdrop {
    background: rgba(244, 242, 248, .88);
}

html[data-theme="light"] .search input,
html[data-theme="light"] .mobile-drawer__search input {
    background: rgba(18, 12, 40, 0.05);
    color: var(--text);
}

html[data-theme="light"] .btn--ghost {
    border-color: rgba(18, 12, 40, 0.18);
    color: var(--text);
}

/* Safe area + modern viewport */
body {
    min-height: 100dvh;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.header {
    padding-top: env(safe-area-inset-top);
}

.footer {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}

.cookie-banner {
    padding-bottom: calc(.85rem + env(safe-area-inset-bottom));
}

.mobile-drawer__panel {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Cookie banner */
.cookie-banner {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 9000;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: .85rem 1rem;
    background: rgba(18, 14, 32, 0.96);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.cookie-banner p {
    margin: 0;
    color: var(--muted);
    font-size: .875rem;
    flex: 1;
    min-width: 200px;
}

.cookie-banner a {
    color: var(--accent2);
    text-decoration: underline;
}

.error__debug {
    max-width: 640px;
    margin: 1rem auto;
    padding: 1rem;
    text-align: left;
    overflow: auto;
    font-size: .8rem;
    background: rgba(0, 0, 0, .35);
    border-radius: 8px;
}

.admin-settings {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.admin-settings__row {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-size: .9rem;
}

.admin-settings__hint {
    color: var(--muted, #888);
    font-size: .8rem;
}

.mobile-drawer__link#theme-toggle-mobile {
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
}

/* ==== PATCH: header + home ==== */
/* ===== HEADER REDESIGN ===== */
.header {
    position: sticky;
    top: 0;
    z-index: 200;
    background:
        linear-gradient(180deg, rgba(28, 12, 18, 0.55), transparent 42%),
        rgba(11, 16, 24, 0.94);
    backdrop-filter: blur(18px) saturate(1.2);
    border-bottom: 1px solid rgba(185, 28, 28, 0.22);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.28), 0 0 28px rgba(185, 28, 28, 0.08);
    padding-top: env(safe-area-inset-top);
}

body.page-watch .ambient {
    opacity: .28;
}

.header__bar {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
    height: var(--header-main);
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem 1rem;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    flex-shrink: 0;
    font-family: var(--display);
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: -0.03em;
}

.logo:hover {
    opacity: .92;
}

.logo__text em,
.logo span {
    font-style: normal;
    background: linear-gradient(135deg, var(--accent2), #d97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.logo__mark {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 8px;
    background: linear-gradient(145deg, #ef4444, #9f1239);
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 6px 18px rgba(185, 28, 28, 0.42);
}

.logo__mark svg {
    width: 12px;
    height: 12px;
    margin-left: 1px;
}

.header__nav {
    display: flex;
    align-items: center;
    gap: .15rem;
    flex-shrink: 0;
}

.header__nav-link {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .42rem .7rem;
    border-radius: 8px;
    font-size: .84rem;
    font-weight: 550;
    color: var(--muted);
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: color .2s, background .2s;
}

.header__nav-link:hover,
.header__nav-link.is-active {
    color: var(--text);
    background: rgba(255, 255, 255, .06);
}

.header__nav-link.is-active {
    color: #fff;
    background: rgba(185, 28, 28, .14);
}

.header__nav-link--accent {
    color: var(--accent2);
}

.header__nav-link--btn {
    appearance: none;
}

.header__nav-caret {
    font-size: .65rem;
    opacity: .55;
}

.header__dropdown {
    position: relative;
}

.mega {
    position: absolute;
    top: calc(100% + .55rem);
    left: 0;
    min-width: min(820px, 86vw);
    padding: 1.1rem;
    border-radius: 14px;
    background: rgba(14, 20, 30, 0.98);
    border: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s, transform .2s, visibility .2s;
    z-index: 220;
}

.header__dropdown.is-open .mega {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.mega[hidden] {
    display: none !important;
}

.header__dropdown.is-open .mega[hidden] {
    display: block !important;
}

.mega__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 200px;
    gap: 1rem;
}

.mega__title {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: .55rem;
}

.mega__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: 0;
    margin: 0;
}

.mega__link {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .5rem;
    border-radius: 8px;
    font-size: .84rem;
}

.mega__link:hover,
.mega__link.is-active {
    background: rgba(255, 255, 255, .06);
}

.mega__col--cta {
    border-left: 1px solid var(--border);
    padding-left: 1rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.mega__cta {
    display: block;
    padding: .55rem .7rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border);
    font-size: .82rem;
}

.mega__cta:hover {
    border-color: rgba(185, 28, 28, .35);
}

.mega__cta--all {
    margin-top: auto;
    color: var(--cyan);
}

.header__search.search,
.search.header__search {
    display: flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    padding: .28rem .28rem .28rem .75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .08);
}

.search:focus-within {
    border-color: rgba(185, 28, 28, .4);
    background: rgba(255, 255, 255, .06);
}

.search__icon {
    color: var(--muted);
    flex-shrink: 0;
}

.search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: .88rem;
}

.search__kbd {
    display: none !important;
}

.search button {
    border: 0;
    border-radius: 8px;
    padding: .42rem .85rem;
    background: var(--accent2);
    color: #fff;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.header__actions {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}

.header__sub {
    display: inline-flex;
    align-items: center;
    padding: .38rem .75rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #e11d2e, #b45309);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 0 16px rgba(225, 29, 46, 0.28);
    white-space: nowrap;
}

.header__sub.is-premium,
.header__sub.is-active {
    background: linear-gradient(135deg, #f59e0b, #b45309);
    border-color: transparent;
    box-shadow: 0 0 18px rgba(245, 158, 11, 0.32);
}

.header__icon-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 8px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
}

.header__icon-btn svg {
    width: 17px;
    height: 17px;
}

.header__icon-btn:hover,
.header__icon-btn.is-active {
    color: var(--text);
    background: rgba(255, 255, 255, .06);
}

.header__icon-btn--fav.is-active {
    color: var(--accent2);
}

.header__icon-btn--search {
    display: none;
}

.header__menu-btn {
    display: none;
}

.header__menu-icon {
    width: 18px;
    height: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.header__menu-icon span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .25s, opacity .25s;
}

body.mobile-nav-open .header__menu-icon span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

body.mobile-nav-open .header__menu-icon span:nth-child(2) {
    opacity: 0;
}

body.mobile-nav-open .header__menu-icon span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.ribbon-wrap {
    display: flex;
    align-items: center;
    gap: .45rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: .15rem .65rem .75rem;
}

.ribbon-wrap__arrow {
    flex-shrink: 0;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 50%;
    border: none;
    background: rgba(94, 196, 210, .22);
    color: #0d4a52;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}

.ribbon-wrap__arrow svg {
    width: 1rem;
    height: 1rem;
}

.ribbon-wrap__arrow:hover {
    background: rgba(94, 196, 210, .4);
    transform: scale(1.05);
}

.ribbon,
.ribbon--tiles {
    display: flex;
    gap: .7rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: .15rem .05rem .2rem;
    cursor: grab;
    flex: 1;
    min-width: 0;
    scroll-snap-type: x proximity;
}

.ribbon::-webkit-scrollbar {
    display: none;
}

.ribbon__tile {
    flex: 0 0 auto;
    width: 4.55rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .38rem;
    text-decoration: none;
    color: inherit;
    scroll-snap-align: start;
    transition: transform .2s ease;
}

.ribbon__glyph {
    width: 3.55rem;
    height: 3.55rem;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-size: 1.55rem;
    line-height: 1;
    background: var(--tile, #E8EEF8);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .55) inset,
        0 10px 22px rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .35);
    transition: box-shadow .2s ease, transform .2s ease, filter .2s ease;
}

.ribbon__tile:hover .ribbon__glyph {
    filter: saturate(1.18) brightness(1.05);
    transform: translateY(-2px);
}

.ribbon__tile.is-active .ribbon__glyph {
    outline: 2px solid rgba(225, 29, 46, .85);
    outline-offset: 2px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .7) inset,
        0 12px 26px rgba(225, 29, 46, .32);
}

.ribbon__tile--all .ribbon__glyph {
    background: linear-gradient(145deg, #FFE082, #F59E0B);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .7) inset,
        0 0 16px rgba(245, 158, 11, .35),
        0 10px 22px rgba(0, 0, 0, .22);
}

.ribbon__caption {
    font-size: .68rem;
    font-weight: 600;
    color: var(--muted);
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ribbon__tile:hover .ribbon__caption,
.ribbon__tile.is-active .ribbon__caption {
    color: var(--text);
}

.ribbon__pill {
    flex-shrink: 0;
    padding: .38rem .75rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 500;
    color: var(--muted);
    background: rgba(255, 255, 255, .035);
    border: 1px solid transparent;
    white-space: nowrap;
}

.ribbon__pill:hover {
    color: var(--text);
    border-color: var(--border);
    background: rgba(255, 255, 255, .06);
}

.ribbon__pill.is-active {
    color: #fff;
    background: linear-gradient(135deg, var(--accent2), #8f1515);
    border-color: transparent;
}

.header__top,
.header__glow,
.header__inner,
.ribbon-wrap__head,
.ribbon-wrap__fade,
.header__sub-badge {
    display: none !important;
}

@media (max-width: 1100px) {
    .mega {
        left: 50%;
        transform: translateX(-50%) translateY(6px);
        min-width: min(560px, 90vw);
    }

    .header__dropdown.is-open .mega {
        transform: translateX(-50%);
    }

    .mega__inner {
        grid-template-columns: repeat(2, 1fr);
    }

    .mega__col--cta {
        grid-column: 1 / -1;
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--border);
        padding-top: 1rem;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .mega__col--cta .mega__title {
        width: 100%;
    }

    .mega__cta {
        flex: 1;
        min-width: 140px;
    }
}

@media (max-width: 1024px) {
    .header__bar {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .header__nav {
        display: none;
    }

    .header__menu-btn {
        display: grid;
    }

    .header__search {
        max-width: none;
    }

    .mobile-drawer__search {
        display: flex !important;
    }
}

@media (max-width: 900px) {

    .header .search,
    .header__search {
        display: none !important;
    }

    .header__icon-btn--search {
        display: grid;
    }

    .header__actions .header__icon-btn:not(.header__menu-btn):not(.header__icon-btn--search):not(#theme-toggle) {
        display: none;
    }

    .ribbon-wrap__arrow {
        display: none;
    }
}

/* ===== HOME FEED RESPONSIVE ===== */
.page-feed .ambient {
    opacity: .4;
}

.page-main--feed {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 0 2.5rem;
}

.home-feed__sticky {
    position: sticky;
    top: 0;
    z-index: 50;
    margin: 0;
    padding: 0;
    background:
        linear-gradient(180deg, rgba(36, 10, 16, 0.55), transparent 46%),
        rgba(11, 16, 24, 0.94);
    backdrop-filter: blur(16px) saturate(1.2);
    border-bottom: 1px solid rgba(185, 28, 28, 0.2);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.26), 0 0 24px rgba(185, 28, 28, 0.08);
}

.home-feed__bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 1.15rem .55rem;
    max-width: 1400px;
    margin: 0 auto;
}

.home-feed__brand {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
    font-family: var(--display);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -.03em;
}

.home-feed__brand-text em,
.home-feed__brand em {
    font-style: normal;
    background: linear-gradient(135deg, var(--accent2), #d97706);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-feed__brand-mark {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-size: .65rem;
    color: #fff;
    background: linear-gradient(145deg, #ef4444, #9f1239);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 6px 16px rgba(185, 28, 28, 0.4);
}

.home-feed__search {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex: 1;
    min-width: 0;
    max-width: 480px;
    margin: 0 auto;
    padding: .3rem .3rem .3rem .8rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 0 0 1px rgba(185, 28, 28, 0.04) inset;
}

.home-feed__search:focus-within {
    border-color: rgba(225, 29, 46, .45);
    box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.12);
}

.home-feed__search-btn {
    display: none;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 44px;
    min-height: 44px;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
}

.home-feed__search-btn svg {
    width: 17px;
    height: 17px;
}

.home-feed__search-ico {
    color: var(--muted);
    flex-shrink: 0;
}

.home-feed__search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: .9rem;
}

.home-feed__search button {
    border: 0;
    border-radius: 8px;
    padding: .42rem .9rem;
    background: var(--accent2);
    color: #fff;
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.home-feed__tools {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-shrink: 0;
}

.home-feed__tool {
    padding: .4rem .7rem;
    border-radius: 8px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--muted);
}

.home-feed__tool:hover {
    color: var(--text);
    background: rgba(255, 255, 255, .06);
}

.home-feed__tool--dice {
    font-size: 1rem;
    padding: .35rem .55rem;
}

.home-feed__sub {
    display: inline-flex;
    align-items: center;
    padding: .38rem .75rem;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #e11d2e, #b45309);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 0 14px rgba(225, 29, 46, 0.28);
    white-space: nowrap;
}

.home-feed__sub.is-premium {
    background: linear-gradient(135deg, #f59e0b, #b45309);
    border-color: transparent;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.32);
}

.home-feed__menu {
    display: none;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    gap: 3px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .06);
    color: var(--text);
    cursor: pointer;
    padding: 0;
}

.home-feed__menu span {
    display: block;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.home-feed__menu.is-open span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.home-feed__menu.is-open span:nth-child(2) {
    opacity: 0;
}

.home-feed__menu.is-open span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

.home-feed__menu-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .35rem;
    padding: .35rem 1.15rem .75rem;
    max-width: 1400px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.home-feed__menu-panel[hidden] {
    display: none !important;
}

.home-feed__menu-panel a {
    padding: .65rem .75rem;
    border-radius: 9px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--border);
    font-size: .86rem;
}

.home-feed__menu-panel a:hover {
    border-color: rgba(185, 28, 28, .35);
    background: rgba(185, 28, 28, .1);
}

.home-feed__cats {
    display: flex;
    gap: .7rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: .35rem 1.15rem .95rem;
    max-width: 1400px;
    margin: 0 auto;
    cursor: grab;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.home-feed__cats::-webkit-scrollbar {
    display: none;
}

.home-feed__cats .ribbon__tile {
    flex: 0 0 auto;
}

.page-feed .sliders {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    padding: 1rem 1.15rem 0;
}

@media (min-width: 1200px) {
    .page-feed .card--slider {
        flex: 0 0 calc((100cqi - 4 * 0.85rem) / 5);
        width: calc((100cqi - 4 * 0.85rem) / 5);
    }
}

@media (min-width: 769px) and (max-width: 1199px) {
    .page-feed .card--slider {
        flex: 0 0 calc((100cqi - 2 * 0.75rem) / 3);
        width: calc((100cqi - 2 * 0.75rem) / 3);
    }

    .home-feed__tool:not(.home-feed__tool--dice) {
        display: none;
    }
}

@media (max-width: 768px) {
    .page-main--feed {
        padding: 0 0 3rem;
    }

    .home-feed__bar {
        padding: .55rem .75rem .4rem;
        gap: .5rem;
    }

    .home-feed__brand-text {
        display: none;
    }

    .home-feed__search {
        max-width: none;
        margin: 0;
    }

    .home-feed__tool {
        display: none;
    }

    .home-feed__menu {
        display: grid;
    }

    .home-feed__cats {
        padding: .35rem .75rem .6rem;
    }

    .page-feed .sliders {
        gap: 1.35rem;
        padding: .5rem 0 0;
    }

    .page-feed .cat-slider__btn {
        display: none;
    }

    .page-feed .cat-slider__head {
        padding: .55rem .85rem .35rem;
    }

    .page-feed .cat-slider__track {
        margin: 0;
        padding: 0;
        overflow: visible;
        mask-image: none;
        cursor: default;
        container-type: normal;
    }

    .page-feed .cat-slider__inner {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 1.15rem;
        padding: 0;
    }

    .page-feed .card--slider {
        flex: none;
        width: 100%;
        max-width: none;
        border-radius: 0;
        background: transparent;
    }

    .page-feed .card--slider .card__thumb {
        border-radius: 0;
        aspect-ratio: 16/9;
    }

    .page-feed .card--slider .card__shine,
    .page-feed .card--slider .card__preview-badge,
    .page-feed .card--slider .card__fav {
        display: none;
    }

    .page-feed .card--slider .card__body {
        display: flex;
        flex-direction: column;
        gap: .35rem;
        padding: .7rem .9rem 1rem;
    }

    .page-feed .card--slider .card__meta {
        order: -1;
        margin: 0;
    }
}

@media (max-width: 520px) {
    .home-feed__search button {
        padding: .4rem .65rem;
        font-size: .75rem;
    }

    .home-feed__sub {
        padding: .32rem .55rem;
        font-size: .65rem;
    }
}

.page-skeleton {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 150;
    background: var(--bg);
}

body.is-booting .page-skeleton {
    display: grid;
    place-items: center;
}

body.is-booting .page-main {
    opacity: 0;
    pointer-events: none;
}

.page-main {
    transition: opacity .4s ease;
}

.page-skeleton.is-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}

.page-skeleton__boot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.page-skeleton__spinner {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .12);
    border-top-color: var(--accent2);
    animation: boot-spin .7s linear infinite;
}

@keyframes boot-spin {
    to {
        transform: rotate(360deg);
    }
}

.page-skeleton__label {
    font-family: var(--display);
    font-weight: 800;
    opacity: .85;
}

.watch__ad {
    margin: .85rem 0 0;
    padding: 1rem 1.1rem;
    border-radius: 14px;
    border: 1px dashed rgba(185, 28, 28, .35);
    background: rgba(185, 28, 28, .08);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
}

.watch__ad p {
    flex: 1;
    margin: 0;
    font-size: .88rem;
    color: var(--muted);
}

.btn--sm {
    padding: .45rem .9rem;
    font-size: .82rem;
}

.watch__meta-line {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .55rem;
    margin: .35rem 0 1rem;
    font-size: .86rem;
    color: var(--muted);
}

.watch__meta-rate {
    color: #fb7185;
    font-weight: 600;
}

.watch__more {
    position: relative;
    z-index: 1;
    max-width: 1680px;
    margin: 0 auto;
    padding: 0 1.25rem 3.5rem;
}

.watch__more[hidden] {
    display: none !important;
}

.watch__more-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.watch__more-head h2 {
    margin: 0;
    font-size: 1.15rem;
    letter-spacing: -.02em;
}

.watch__more-head a {
    font-size: .85rem;
    color: var(--muted);
}

.watch__related-list {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.rel {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.rel--row {
    flex-direction: row;
    align-items: flex-start;
    gap: .7rem;
    padding: .2rem;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
}

.rel--row:hover {
    background: rgba(255, 255, 255, .04);
}

.rel--row .rel__thumb {
    width: 158px;
    flex: 0 0 158px;
    border-radius: 8px;
}

.rel--row .rel__body {
    padding: .05rem 0 0;
    min-width: 0;
    flex: 1;
}

.rel--row .rel__title {
    font-size: .82rem;
    line-height: 1.35;
}

.rel--row .rel__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: .12rem;
    margin: .28rem 0 0;
}

.rel--row.rel--next {
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(255, 255, 255, .03);
    padding: .35rem;
}

.rel__thumb {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: #111;
}

.rel__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rel__dur {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: rgba(0, 0, 0, .88);
    font-size: .7rem;
    padding: .15rem .4rem;
    border-radius: 4px;
}

.rel__body {
    padding: 0 .15rem .35rem;
}

.rel__meta {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-size: .72rem;
    color: var(--muted);
    margin: 0 0 .25rem;
}

.rel__title {
    font-size: .86rem;
    font-weight: 600;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rel--next {
    border: 1px solid rgba(185, 28, 28, .4);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(185, 28, 28, .18);
}

.rel__next-label {
    position: absolute;
    left: .4rem;
    top: .4rem;
    z-index: 3;
    font-style: normal;
    font-size: .62rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: .18rem .4rem;
    border-radius: 6px;
    background: var(--accent2);
    color: #fff;
}

.watch__related-list {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

body.search-modal-open {
    overflow: hidden;
}

/* ── Search modal ── */
.search-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: start center;
    padding: max(.75rem, env(safe-area-inset-top)) 1rem 1.25rem;
    overflow: auto;
}

.search-modal[hidden] {
    display: none !important;
}

.search-modal__backdrop {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 0%, rgba(185, 28, 28, .28), transparent 50%),
        radial-gradient(ellipse at 80% 10%, rgba(30, 77, 107, .35), transparent 45%),
        rgba(0, 0, 0, .78);
    backdrop-filter: blur(6px);
}

.search-modal__panel {
    position: relative;
    width: min(640px, 100%);
    margin: 4vh auto 2vh;
    padding: 1.15rem 1.15rem 1.35rem;
    border-radius: 22px;
    background: linear-gradient(165deg, rgba(28, 34, 46, .97), rgba(12, 16, 24, .98));
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow:
        0 0 0 1px rgba(185, 28, 28, .12),
        0 28px 80px rgba(0, 0, 0, .65),
        0 0 60px rgba(185, 28, 28, .08);
}

.search-modal__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .85rem;
}

.search-modal__head h2 {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: .02em;
}

.search-modal__close {
    border: 0;
    background: rgba(255, 255, 255, .06);
    color: var(--muted);
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
}

.search-modal__close:hover {
    color: #fff;
    background: rgba(185, 28, 28, .35);
}

.search-modal__form {
    display: flex;
    gap: .5rem;
    margin-bottom: .9rem;
}

.search-modal__form input {
    flex: 1;
    padding: .75rem .95rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(0, 0, 0, .35);
    color: var(--text);
    font: inherit;
}

.search-modal__form input:focus {
    outline: none;
    border-color: rgba(185, 28, 28, .55);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, .18);
}

.search-modal__form .btn {
    border: 0;
    border-radius: 14px;
    padding: .75rem 1.15rem;
    background: linear-gradient(135deg, #e11d2e, #9f1239);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(185, 28, 28, .35);
}

.search-modal__status {
    color: var(--muted);
    font-size: .85rem;
    margin-bottom: .5rem;
}

.search-modal__status[hidden],
.search-modal__suggest[hidden],
.search-modal__section[hidden],
.search-modal__all[hidden] {
    display: none !important;
}

.search-modal__results {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.search-modal__results--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .65rem;
}

@media (max-width: 520px) {
    .search-modal__results--grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.search-modal__all {
    display: block;
    margin-top: .85rem;
    text-align: center;
    color: #fca5a5;
    font-weight: 700;
    text-decoration: none;
    padding: .55rem;
    border-radius: 12px;
    background: rgba(185, 28, 28, .12);
    border: 1px solid rgba(185, 28, 28, .25);
}

.search-modal__all:hover {
    background: rgba(185, 28, 28, .2);
}

/* ==== PATCH: dice/subscribe/search ==== */
/* ── Dice modal ── */
body.dice-modal-open {
    overflow: hidden;
}

.dice-modal {
    position: fixed;
    inset: 0;
    z-index: 160;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.dice-modal[hidden] {
    display: none !important;
}

.dice-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(6px);
}

.dice-modal__panel {
    position: relative;
    width: min(420px, 100%);
    padding: 1.35rem 1.25rem 1.15rem;
    border-radius: 18px;
    background: linear-gradient(165deg, #161c28, #0d121a);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
    animation: dice-in .35s ease both;
}

@keyframes dice-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.dice-modal__x {
    position: absolute;
    right: .75rem;
    top: .65rem;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}

.dice-modal__kicker {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent2);
    margin: 0 0 .35rem;
}

.dice-modal__panel h2 {
    font-family: var(--display);
    font-size: 1.35rem;
    margin: 0 0 .35rem;
}

.dice-modal__sub {
    color: var(--muted);
    font-size: .88rem;
    margin: 0 0 1rem;
}

.dice-modal__media {
    position: relative;
    aspect-ratio: 16/9;
    border-radius: 12px;
    overflow: hidden;
    background: #111;
    margin-bottom: .75rem;
}

.dice-modal__blur {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(18px) brightness(.55);
    transform: scale(1.15);
}

.dice-modal__veil {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .55));
}

.dice-modal__dur {
    position: absolute;
    right: .5rem;
    bottom: .5rem;
    z-index: 2;
    padding: .15rem .4rem;
    border-radius: 4px;
    font-size: .7rem;
    background: rgba(0, 0, 0, .8);
}

.dice-modal__meta {
    font-size: .8rem;
    color: var(--muted);
    margin: 0 0 .85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dice-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.dice-modal__actions .btn {
    flex: 1;
    min-width: 5.5rem;
    text-align: center;
    justify-content: center;
}

.dice-modal__upsell {
    margin: .85rem 0 0;
    font-size: .78rem;
    color: var(--muted);
    text-align: center;
}

.dice-modal__upsell a {
    color: var(--cyan);
}

/* ── Subscribe page ── */
.subscribe {
    max-width: 920px;
    margin: 0 auto;
    padding: 1.5rem 1.25rem 3rem;
}

.subscribe__hero {
    text-align: center;
    margin-bottom: 2rem;
}

.subscribe__kicker {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent2);
}

.subscribe__hero h1 {
    font-family: var(--display);
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    margin: .35rem 0;
}

.subscribe__lead {
    color: var(--muted);
    max-width: 34rem;
    margin: 0 auto;
}

.subscribe__status {
    margin-top: .85rem;
    font-size: .9rem;
}

.subscribe__uname {
    font-weight: 700;
    color: #fbbf24;
}

.subscribe__flash {
    margin: .85rem auto 0;
    max-width: 28rem;
    padding: .65rem .9rem;
    border-radius: 10px;
    font-size: .88rem;
}

.subscribe__flash--err {
    background: rgba(185, 28, 28, .15);
    border: 1px solid rgba(185, 28, 28, .35);
}

.subscribe__flash--ok {
    background: rgba(16, 185, 129, .12);
    border: 1px solid rgba(16, 185, 129, .3);
}

.subscribe__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (max-width: 700px) {
    .subscribe__grid {
        grid-template-columns: 1fr;
    }
}

.subscribe__card {
    padding: 1.35rem 1.25rem;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, .03);
}

.subscribe__card--premium {
    border-color: rgba(185, 28, 28, .4);
    background: linear-gradient(165deg, rgba(185, 28, 28, .14), rgba(255, 255, 255, .02));
}

.subscribe__card.is-active {
    box-shadow: 0 0 0 1px rgba(185, 28, 28, .5);
}

.subscribe__card h2 {
    margin: 0 0 .5rem;
    font-size: 1.2rem;
}

.subscribe__price {
    margin: 0 0 1rem;
    font-size: .95rem;
    color: var(--muted);
}

.subscribe__price strong {
    font-size: 1.6rem;
    color: var(--text);
}

.subscribe__feats {
    list-style: none;
    padding: 0;
    margin: 0 0 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.subscribe__feats li {
    font-size: .88rem;
    padding-left: 1.2rem;
    position: relative;
}

.subscribe__feats li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent2);
    font-weight: 700;
}

.subscribe__btn {
    width: 100%;
    justify-content: center;
    text-align: center;
}

.subscribe__btn--disabled,
.subscribe__btn--ghost {
    display: block;
    padding: .7rem;
    text-align: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    color: var(--muted);
    font-size: .88rem;
}

.subscribe__hint {
    font-size: .75rem;
    color: var(--muted);
    margin: .55rem 0 0;
}

.subscribe__auth-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 700px) {
    .subscribe__auth-grid {
        grid-template-columns: 1fr;
    }
}

.subscribe__form {
    padding: 1.15rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.subscribe__form h3 {
    margin: 0;
    font-size: 1rem;
}

.subscribe__form label {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    font-size: .8rem;
    color: var(--muted);
}

.subscribe__form input {
    padding: .6rem .75rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, .25);
    color: var(--text);
}

.subscribe__logout {
    text-align: center;
}

/* ── Search modal suggest ── */
.search-modal__suggest {
    margin-top: .35rem;
}

.search-modal__section {
    margin-bottom: 1.15rem;
}

.search-modal__section h3 {
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(252, 165, 165, .85);
    margin: 0 0 .7rem;
}

/* Instagram story tarzı pornostar slider */
.search-modal__stories {
    display: flex;
    gap: .85rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: .2rem .1rem .55rem;
    margin: 0 -.15rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(225, 29, 46, .45) transparent;
}

.search-modal__stories::-webkit-scrollbar {
    height: 4px;
}

.search-modal__stories::-webkit-scrollbar-thumb {
    background: rgba(225, 29, 46, .4);
    border-radius: 999px;
}

.search-modal__story {
    flex: 0 0 auto;
    width: 4.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
    color: inherit;
    scroll-snap-align: start;
    animation: search-pop .4s ease both;
    animation-delay: calc(var(--i, 0) * 35ms);
}

.search-modal__story-ring {
    width: 4.35rem;
    height: 4.35rem;
    border-radius: 50%;
    padding: 2.5px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    box-shadow: 0 8px 20px rgba(220, 39, 67, .28);
    transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
}

.search-modal__story:hover .search-modal__story-ring,
.search-modal__story:focus-visible .search-modal__story-ring {
    transform: scale(1.06);
    filter: brightness(1.08);
    box-shadow: 0 12px 28px rgba(220, 39, 67, .4);
}

.search-modal__story-img,
.search-modal__story-av {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    display: grid;
    place-items: center;
    background: #12151c;
    border: 2.5px solid #0b0d12;
    font-size: 1.25rem;
    font-weight: 800;
    color: #fff;
    box-sizing: border-box;
}

.search-modal__story-av {
    background: linear-gradient(145deg, #7c2d12, #e11d2e 55%, #1e4d6b);
}

.search-modal__story-name {
    font-size: .68rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-modal__results--mixed {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.search-modal__section--hits {
    margin-bottom: .95rem;
}

.search-modal__section--hits h3 {
    margin-bottom: .55rem;
}

.search-modal__trend,
.search-modal__results--grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .65rem;
}

@media (max-width: 520px) {
    .search-modal__trend,
    .search-modal__results--grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.search-modal__vcard {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    animation: search-pop .4s ease both;
    animation-delay: calc(var(--i, 0) * 35ms);
}

.search-modal__vcard-media {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    overflow: hidden;
    background: #151b26;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .3);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.search-modal__vcard:hover .search-modal__vcard-media {
    transform: translateY(-2px);
    border-color: rgba(225, 29, 46, .45);
    box-shadow: 0 14px 28px rgba(185, 28, 28, .22);
}

.search-modal__vcard-media img,
.search-modal__vcard-media .search-modal__ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.search-modal__vcard-dur {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 2;
    font-size: .62rem;
    font-weight: 700;
    padding: .15rem .35rem;
    border-radius: 5px;
    background: rgba(0, 0, 0, .82);
}

.search-modal__vcard-play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: .9rem;
    color: #fff;
    background: rgba(0, 0, 0, .25);
    opacity: 0;
    transition: opacity .2s ease;
}

.search-modal__vcard:hover .search-modal__vcard-play {
    opacity: 1;
}

.search-modal__vcard-title {
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-modal__vcard-meta {
    font-size: .65rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes search-pop {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.97);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* —— Pornostar page —— */
.ps-page {
    --ps-red: #e11d2e;
    --ps-red-hot: #ff3b4a;
    --ps-ink: #f4f1ec;
    --ps-dim: rgba(244, 241, 236, .68);
    --ps-panel: #0c1018;
    position: relative;
    margin: 0 auto;
    padding: 0 0 2.5rem;
    max-width: 1280px;
}

.ps-hero {
    position: relative;
    overflow: hidden;
    border-radius: 0 0 28px 28px;
    margin: 0 0 1.25rem;
    padding: 1.6rem 1.1rem 1.2rem;
    background:
        radial-gradient(120% 90% at 10% -10%, rgba(225, 29, 46, .45), transparent 55%),
        radial-gradient(90% 70% at 100% 0%, rgba(255, 120, 40, .22), transparent 50%),
        linear-gradient(165deg, #14080c 0%, #0b1018 55%, #0a0e14 100%);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

@media (min-width: 768px) {
    .ps-hero {
        margin: 1.75rem 0 1.75rem;
        padding: 2.4rem 2rem 1.6rem;
        border-radius: 28px;
    }
}

.ps-hero__glow {
    position: absolute;
    inset: auto -20% -40% auto;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(225, 29, 46, .35), transparent 70%);
    filter: blur(8px);
    animation: psPulse 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes psPulse {

    0%,
    100% {
        opacity: .55;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}

.ps-hero__kicker {
    margin: 0 0 .4rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ps-red-hot);
}

.ps-hero__title {
    margin: 0;
    font-family: "Bebas Neue", "Impact", "Arial Narrow", sans-serif;
    font-size: clamp(3.2rem, 14vw, 6.5rem);
    line-height: .9;
    letter-spacing: .02em;
    color: var(--ps-ink);
    text-shadow: 0 0 40px rgba(225, 29, 46, .35);
    animation: psTitleIn .7s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes psTitleIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.98);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ps-hero__lead {
    margin: .7rem 0 0;
    max-width: 34rem;
    font-size: .95rem;
    line-height: 1.45;
    color: var(--ps-dim);
}

.ps-sort {
    display: flex;
    gap: .45rem;
    margin-top: 1.15rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .15rem;
}

.ps-sort::-webkit-scrollbar {
    display: none;
}

.ps-sort__chip {
    flex: 0 0 auto;
    appearance: none;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .05);
    color: var(--ps-ink);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .55rem .9rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .15s;
}

.ps-sort__chip:active {
    transform: scale(.96);
}

.ps-sort__chip.is-active,
.ps-sort__chip:hover {
    background: linear-gradient(135deg, var(--ps-red), #9f1239);
    border-color: transparent;
    box-shadow: 0 8px 24px rgba(225, 29, 46, .35);
}

.ps-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem;
    padding: 0 .15rem;
}

@media (min-width: 560px) {
    .ps-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: .9rem;
    }
}

@media (min-width: 900px) {
    .ps-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1.1rem;
    }
}

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

.ps-card {
    --i: 0;
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    animation: psCardIn .55s cubic-bezier(.2, .8, .2, 1) both;
    animation-delay: calc(min(var(--i), 12) * 35ms);
}

@keyframes psCardIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ps-card__shot {
    position: relative;
    aspect-ratio: 3 / 4;
    background: #121821;
    overflow: hidden;
}

.ps-card__shot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

.ps-card:hover .ps-card__shot img,
.ps-card:focus-visible .ps-card__shot img {
    transform: scale(1.08);
}

.ps-card__fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 3rem;
    color: #fff;
    background: linear-gradient(145deg, #2a1218, #0f141c);
}

.ps-card__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, .55) 72%, rgba(0, 0, 0, .92) 100%);
    pointer-events: none;
}

.ps-card__rank {
    position: absolute;
    top: .55rem;
    left: .55rem;
    z-index: 2;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .04em;
    padding: .28rem .5rem;
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, .7);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .12);
}

.ps-card--hot .ps-card__rank {
    background: linear-gradient(135deg, var(--ps-red), #9f1239);
    border-color: transparent;
}

.ps-card__badges {
    position: absolute;
    top: .55rem;
    right: .55rem;
    z-index: 2;
    display: flex;
    gap: .25rem;
}

.ps-pill {
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    font-size: .7rem;
    font-weight: 700;
    color: #fff;
}

.ps-pill--ok {
    background: #2563eb;
}

.ps-pill--gold {
    background: linear-gradient(135deg, #f59e0b, #b45309);
}

.ps-card__foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: .85rem .75rem .8rem;
}

.ps-card__name {
    margin: 0;
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}

.ps-card__meta {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    margin: .35rem 0 0;
    font-size: .68rem;
    color: rgba(255, 255, 255, .78);
}

.ps-card--hot {
    box-shadow: 0 0 0 1px rgba(225, 29, 46, .45), 0 12px 28px rgba(225, 29, 46, .18);
}

.ps-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin: 1.75rem 0 0;
    flex-wrap: wrap;
}

.ps-pager__btn {
    text-decoration: none;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    padding: .65rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
}

.ps-pager__btn:hover {
    background: linear-gradient(135deg, var(--ps-red), #9f1239);
    border-color: transparent;
}

.ps-pager__page {
    font-size: .8rem;
    color: var(--ps-dim);
}

.ps-empty {
    margin: 2rem 1rem;
    text-align: center;
}

/* Profile */
.ps-profile {
    margin: 0 auto;
    max-width: 1280px;
}

.ps-profile__stage {
    position: relative;
    overflow: hidden;
    margin: 0 -1rem 1.25rem;
    border-radius: 0 0 28px 28px;
    min-height: 280px;
    background: #0b1018;
}

@media (min-width: 768px) {
    .ps-profile__stage {
        margin: 1.75rem 0 1.75rem;
        border-radius: 28px;
        min-height: 340px;
    }
}

.ps-profile__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: #0b1018;
    background-image: var(--ps-photo, none);
    background-size: cover;
    background-position: center 20%;
}

.ps-profile__banner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
    transform: scale(1.08);
    filter: saturate(1.15) contrast(1.05);
}

.ps-profile__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(8, 10, 14, .25) 0%, rgba(8, 10, 14, .55) 45%, rgba(8, 10, 14, .92) 100%),
        linear-gradient(90deg, rgba(8, 10, 14, .55) 0%, rgba(8, 10, 14, .15) 40%, rgba(8, 10, 14, .45) 100%);
    pointer-events: none;
}

.ps-profile__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 1.25rem 1.1rem 1.6rem;
}

@media (min-width: 720px) {
    .ps-profile__inner {
        flex-direction: row;
        text-align: left;
        align-items: flex-end;
        gap: 1.5rem;
        padding: 2rem 2rem 1.8rem;
    }
}

.ps-profile__back {
    align-self: flex-start;
    text-decoration: none;
    color: rgba(255, 255, 255, .8);
    font-size: .82rem;
    font-weight: 600;
    padding: .4rem .75rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .12);
}

@media (min-width: 720px) {
    .ps-profile__back {
        position: absolute;
        top: 1.25rem;
        left: 1.5rem;
    }
}

.ps-profile__avatar {
    width: min(42vw, 148px);
    height: min(42vw, 148px);
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: 3rem;
    color: #fff;
    background: #1a2230;
    border: 3px solid rgba(255, 255, 255, .2);
    box-shadow: 0 0 0 6px rgba(225, 29, 46, .25), 0 18px 40px rgba(0, 0, 0, .45);
}

.ps-profile__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ps-profile__kicker {
    margin: 0 0 .35rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ps-red-hot);
}

.ps-profile__name {
    margin: 0;
    font-family: "Bebas Neue", Impact, sans-serif;
    font-size: clamp(2.2rem, 8vw, 3.6rem);
    line-height: .95;
    letter-spacing: .02em;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    flex-wrap: wrap;
}

@media (min-width: 720px) {
    .ps-profile__name {
        justify-content: flex-start;
    }
}

.ps-profile__stats {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    justify-content: center;
}

@media (min-width: 720px) {
    .ps-profile__stats {
        justify-content: flex-start;
    }
}

.ps-profile__stats li {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 5.2rem;
    padding: .55rem .8rem;
    border-radius: 14px;
    background: rgba(0, 0, 0, .4);
    border: 1px solid rgba(255, 255, 255, .1);
}

.ps-profile__stats strong {
    font-size: 1.05rem;
    color: #fff;
}

.ps-profile__stats span {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .65);
}

.ps-profile__body {
    padding: 0 .15rem 2rem;
}

.ps-profile__section {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .85);
}

@media (prefers-reduced-motion: reduce) {

    .ps-hero__glow,
    .ps-hero__title,
    .ps-card {
        animation: none;
    }
}

/* cold-load skeletons */
.card--skel {
    pointer-events: none;
}

.ps-card--skel {
    pointer-events: none;
    opacity: .9;
}

.ps-card--skel .ps-card__shot {
    background: #121821;
}

.ps-profile__load {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: 1.25rem;
    color: var(--muted);
    font-size: .85rem;
}

.ps-profile__load[hidden] {
    display: none;
}

.ps-profile__end {
    text-align: center;
    color: var(--muted);
    font-size: .82rem;
    padding: .5rem 0 1.5rem;
}

.ps-profile__end[hidden] {
    display: none;
}

#ps-video-sentinel {
    height: 1px;
    width: 100%;
    pointer-events: none;
}

.watch__crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    margin: .75rem 0 0;
    font-size: .78rem;
    color: var(--muted);
}

.watch__crumbs a {
    color: inherit;
}

.watch__crumbs a:hover {
    color: #fff;
}

.watch__player-frame {
    position: relative;
}

.watch__tool-btn--dl {
    background: linear-gradient(135deg, rgba(185, 28, 28, .32), rgba(127, 29, 29, .4));
    border-color: rgba(248, 113, 113, .35);
    color: #fff;
}

.watch__tool-btn--dl:hover {
    background: linear-gradient(135deg, #e11d2e, #9f1239);
    border-color: transparent;
}

/* ===== FLASH HEADER + CATS ===== */
.header__bar,
.home-feed__bar {
    min-width: 0;
}

.header__menu-btn,
.home-feed__menu {
    min-width: 44px;
    min-height: 44px;
}

.ribbon--tiles,
.home-feed__cats {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.ribbon__tile {
    min-width: 44px;
}

.ribbon__tile--all .ribbon__caption {
    color: #fbbf24;
    font-weight: 800;
}

@media (min-width: 721px) {
    .header__nav-link.is-active,
    .header__nav-link:hover {
        box-shadow: 0 0 0 1px rgba(225, 29, 46, 0.18) inset;
    }

    .ribbon__tile:hover {
        transform: translateY(-3px);
    }

    .ribbon__tile.is-active .ribbon__glyph {
        animation: tile-pop .35s ease;
    }

    .home-feed__sub:hover,
    .header__sub:hover {
        filter: brightness(1.08);
        transform: translateY(-1px);
    }
}

@keyframes tile-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

@media (max-width: 720px) {
    .header {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    }

    .header__bar {
        height: 52px;
        padding: 0 .7rem;
        gap: .4rem;
        grid-template-columns: auto minmax(0, 1fr) auto;
        overflow: hidden;
    }

    .logo__text {
        display: none;
    }

    .header .search,
    .header__search {
        display: none !important;
    }

    .header__icon-btn--search {
        display: grid;
        min-width: 44px;
        min-height: 44px;
    }

    .header__actions .header__icon-btn:not(.header__menu-btn):not(.header__icon-btn--search) {
        display: none;
    }

    .header__sub {
        display: inline-flex;
        padding: .32rem .6rem;
        font-size: .65rem;
    }

    .header__menu-btn {
        display: grid;
    }

    .ribbon-wrap {
        padding: .1rem .55rem .65rem;
        overflow: hidden;
    }

    .ribbon-wrap__arrow {
        display: none;
    }

    .ribbon--tiles {
        gap: .5rem;
        padding: .2rem .05rem .15rem;
    }

    .ribbon__tile {
        width: 3.35rem;
        gap: .28rem;
        min-height: 44px;
    }

    .ribbon__glyph {
        width: 2.75rem;
        height: 2.75rem;
        min-width: 44px;
        min-height: 44px;
        border-radius: 12px;
        font-size: 1.2rem;
        box-shadow: 0 6px 14px rgba(0, 0, 0, .2);
    }

    .ribbon__tile:hover,
    .ribbon__tile:hover .ribbon__glyph {
        transform: none;
        filter: none;
    }

    .ribbon__caption {
        font-size: .62rem;
    }

    .home-feed__sticky {
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    }

    .home-feed__bar {
        padding: .4rem .7rem .3rem;
        gap: .4rem;
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .home-feed__brand-text {
        display: none;
    }

    .home-feed__search {
        display: none;
    }

    .home-feed__search-btn {
        display: grid;
        margin-right: auto;
    }

    .home-feed__tool {
        display: none;
    }

    .home-feed__menu {
        display: grid;
    }

    .home-feed__sub {
        padding: .32rem .58rem;
        font-size: .64rem;
    }

    .home-feed__cats {
        gap: .5rem;
        padding: .3rem .7rem .7rem;
        scroll-snap-type: x mandatory;
    }

    .home-feed__cats .ribbon__tile {
        width: 3.35rem;
    }
}

.admin-panel {
    width: min(1100px, 94vw);
}

.admin-stat {
    font-size: 1.05rem;
    margin: .35rem 0;
}

.admin-stat strong {
    font-size: 1.45rem;
}

.admin-top {
    display: flex;
    gap: .75rem;
    align-items: center;
    margin-top: .65rem;
    text-decoration: none;
    color: inherit;
}

.admin-top img {
    width: 72px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
    background: #111;
}

.admin-top__meta {
    min-width: 0;
}

.admin-top__meta strong {
    display: block;
    font-size: .88rem;
    line-height: 1.3;
}

.admin-top__meta span {
    color: var(--muted, #888);
    font-size: .78rem;
}

.admin-top-list {
    list-style: none;
    padding: 0;
    margin: .75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.admin-top-list a {
    color: inherit;
    text-decoration: none;
    font-size: .82rem;
}

.admin-members {
    list-style: none;
    padding: 0;
    margin: .75rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .82rem;
}

.admin-members code {
    color: #fbbf24;
}

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: 0 0 1.15rem;
}

.admin-nav a {
    padding: .4rem .75rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    color: var(--muted, #aaa);
    border: 1px solid rgba(255, 255, 255, .1);
    text-decoration: none;
}

.admin-nav a.is-active {
    color: #fff;
    background: linear-gradient(135deg, #e11d2e, #b45309);
    border-color: transparent;
}

.admin-panel--wide {
    width: min(920px, 94vw);
}

.admin-ads {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-ads__lead {
    color: var(--muted, #aaa);
    font-size: .9rem;
    margin: 0 0 1rem;
    line-height: 1.45;
}

.admin-ads__global,
.admin-ads__slot {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.admin-ads__slot-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
}

.admin-ads__slot-head h2 {
    font-size: 1rem;
    margin: 0;
}

.admin-ads__slot-head code,
.admin-ads__meta {
    color: var(--muted, #888);
    font-size: .75rem;
}

.admin-ads__field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .85rem;
}

.admin-ads__field input,
.admin-ads__field textarea {
    width: 100%;
    padding: .55rem .7rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .35);
    color: inherit;
    font: inherit;
}

.admin-ads__field textarea {
    min-height: 7.5rem;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
}

.admin-ads__actions {
    position: sticky;
    bottom: .75rem;
    padding: .35rem 0 0;
}

/* ===== ADMIN CONSOLE ===== */
.page-admin {
    min-height: 100vh;
    margin: 0;
    color: #e8edf4;
    background: #0c1118;
    font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.page-admin--app {
    display: block;
    align-items: stretch;
    justify-content: stretch;
}

.page-admin--login {
    display: grid;
    place-items: center;
    background:
        radial-gradient(900px 420px at 50% -10%, rgba(185, 28, 28, .18), transparent 55%),
        #0c1118;
}

.admin-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: 100vh;
}

.admin-shell__side {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1rem 1.1rem;
    background: #101722;
    border-right: 1px solid rgba(255, 255, 255, .06);
}

.admin-shell__brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 0 .2rem 1.4rem;
    color: inherit;
    text-decoration: none;
}

.admin-shell__mark {
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(145deg, #e11d2e, #9f1239);
}

.admin-shell__brand strong {
    display: block;
    font-size: .95rem;
    letter-spacing: -.02em;
}

.admin-shell__brand small {
    display: block;
    margin-top: .1rem;
    color: #8b98ab;
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin: 0;
}

.admin-nav__label {
    margin: .85rem .55rem .3rem;
    color: #6d7a8d;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.admin-nav a {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .7rem;
    border-radius: 8px;
    color: #b7c0cc;
    border: 0;
    background: transparent;
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
}

.admin-nav a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .04);
}

.admin-nav a.is-active {
    color: #fff;
    background: rgba(225, 29, 46, .14);
    box-shadow: inset 2px 0 0 #e11d2e;
}

.admin-nav__ico {
    width: 1.1rem;
    text-align: center;
    opacity: .75;
}

.admin-shell__side-note {
    margin-top: auto;
    padding: .7rem .75rem;
    color: #7b8796;
    font-size: .72rem;
    line-height: 1.4;
    border-radius: 8px;
    background: rgba(255, 255, 255, .03);
}

.admin-shell__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-shell__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: rgba(12, 17, 24, .92);
    backdrop-filter: blur(12px);
}

.admin-shell__kicker {
    margin: 0 0 .15rem;
    color: #8b98ab;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.admin-shell__top h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.03em;
}

.admin-shell__body {
    padding: 1.25rem 1.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.admin-banner {
    margin: 0;
    padding: .7rem .9rem;
    border-radius: 8px;
    font-size: .86rem;
}

.admin-banner--ok {
    color: #bbf7d0;
    background: rgba(22, 163, 74, .14);
    border: 1px solid rgba(22, 163, 74, .28);
}

.admin-banner--err {
    color: #fecaca;
    background: rgba(185, 28, 28, .16);
    border: 1px solid rgba(185, 28, 28, .3);
}

.admin-lead {
    margin: 0;
    max-width: 46rem;
    color: #8b98ab;
    font-size: .9rem;
    line-height: 1.5;
}

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

.admin-kpi {
    padding: 1rem 1.05rem;
    border-radius: 12px;
    background: #141c27;
    border: 1px solid rgba(255, 255, 255, .06);
}

.admin-kpi span {
    display: block;
    color: #8b98ab;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.admin-kpi strong {
    display: block;
    margin-top: .35rem;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -.03em;
}

.admin-grid {
    display: grid;
    gap: .9rem;
}

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

.admin-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-card {
    padding: 1.1rem 1.15rem 1.2rem;
    border-radius: 12px;
    background: #141c27;
    border: 1px solid rgba(255, 255, 255, .06);
}

.admin-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .9rem;
}

.admin-card__head h2 {
    margin: 0;
    font-size: .98rem;
    font-weight: 650;
}

.admin-card__head p {
    margin: .2rem 0 0;
    color: #8b98ab;
    font-size: .78rem;
}

.admin-card__sub {
    margin: 0 0 .55rem;
    color: #8b98ab;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
}

.admin-table th,
.admin-table td {
    padding: .55rem .4rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.admin-table th {
    color: #8b98ab;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.admin-table code {
    color: #fbbf24;
    font-size: .8rem;
}

.admin-pill {
    display: inline-flex;
    padding: .12rem .45rem;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    color: #cbd5e1;
    background: rgba(255, 255, 255, .06);
}

.admin-pill--gold {
    color: #111;
    background: linear-gradient(135deg, #f5c518, #d97706);
}

.admin-empty {
    margin: 0;
    color: #8b98ab;
    font-size: .86rem;
}

.admin-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.admin-media {
    display: flex;
    gap: .7rem;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.admin-media img {
    width: 88px;
    height: 56px;
    object-fit: cover;
    border-radius: 8px;
    background: #0b1018;
}

.admin-media strong {
    display: block;
    font-size: .86rem;
    line-height: 1.3;
}

.admin-media small {
    display: block;
    margin-top: .2rem;
    color: #8b98ab;
}

.admin-rank {
    list-style: none;
    margin: .7rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.admin-rank a {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    color: #d5dce6;
    text-decoration: none;
    font-size: .8rem;
}

.admin-rank em {
    color: #8b98ab;
    font-style: normal;
}

.admin-meta {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.admin-meta li {
    display: flex;
    justify-content: space-between;
    padding: .4rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    font-size: .86rem;
}

.admin-meta span {
    color: #8b98ab;
}

.admin-form {
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.admin-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .82rem;
    color: #c5ced8;
}

.admin-field--inline {
    min-width: 8rem;
}

.admin-field input,
.admin-field textarea,
.admin-login__box input {
    width: 100%;
    padding: .55rem .7rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: #0c1118;
    color: #e8edf4;
    font: inherit;
}

.admin-field textarea {
    min-height: 6.5rem;
    resize: vertical;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
}

.admin-field input:focus,
.admin-field textarea:focus,
.admin-login__box input:focus {
    outline: 0;
    border-color: rgba(225, 29, 46, .45);
    box-shadow: 0 0 0 3px rgba(225, 29, 46, .12);
}

.admin-switch {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .88rem;
}

.admin-switch small {
    display: block;
    color: #8b98ab;
    font-size: .75rem;
}

.admin-hint {
    margin: 0;
    color: #8b98ab;
    font-size: .75rem;
}

.admin-hint code {
    color: #fbbf24;
}

.admin-btn {
    appearance: none;
    border: 0;
    border-radius: 8px;
    padding: .55rem .9rem;
    font: inherit;
    font-size: .84rem;
    font-weight: 650;
    cursor: pointer;
}

.admin-btn--primary {
    color: #fff;
    background: linear-gradient(135deg, #e11d2e, #9f1239);
}

.admin-btn--ghost {
    color: #c5ced8;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .12);
}

.admin-btn--block {
    width: 100%;
}

.admin-links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.admin-links a {
    padding: .45rem .7rem;
    border-radius: 8px;
    color: #d5dce6;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .06);
    text-decoration: none;
    font-size: .82rem;
}

.admin-ads {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-ads__global-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-ads__bar {
    position: sticky;
    bottom: .75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .7rem .9rem;
    border-radius: 10px;
    background: #141c27;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}

.admin-ads__bar p {
    margin: 0;
    color: #8b98ab;
    font-size: .8rem;
}

.admin-login {
    width: min(400px, 92vw);
}

.admin-login__box {
    width: 100%;
    padding: 1.6rem 1.5rem 1.35rem;
    border-radius: 14px;
    background: #141c27;
    border: 1px solid rgba(255, 255, 255, .08);
}

.admin-login__mark {
    width: 2.3rem;
    height: 2.3rem;
    margin: 0 0 .85rem;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-weight: 800;
    background: linear-gradient(145deg, #e11d2e, #9f1239);
}

.admin-login__kicker {
    margin: 0;
    color: #8b98ab;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.admin-login__box h1 {
    margin: .2rem 0 1rem;
    font-size: 1.4rem;
}

.admin-login__error {
    margin: 0 0 .85rem;
    color: #fecaca;
    font-size: .85rem;
}

.admin-login__back {
    display: block;
    margin-top: .9rem;
    text-align: center;
    color: #8b98ab;
    font-size: .82rem;
}

.admin-panel,
.admin-panel--wide,
.admin-panel__grid,
.admin-panel__card,
.admin-panel__head,
.admin-panel__notice,
.admin-stat,
.admin-members,
.admin-top,
.admin-settings {
    /* eski kutu düzeni artık konsol kabuğunda */
}

.admin-kpi--gold strong { color: #f5c518; }
.admin-kpi--hot strong { color: #fb7185; }
.admin-kpi--on strong { color: #86efac; }

.admin-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
}

.admin-step {
    display: flex;
    flex-direction: column;
    min-height: 11.5rem;
    padding: 1.15rem 1.2rem 1.25rem;
    border-radius: 16px;
    text-decoration: none;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
    transition: transform .15s ease, box-shadow .15s ease;
}

.admin-step:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .28);
}

.admin-step__n {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-weight: 800;
    background: rgba(0, 0, 0, .22);
    margin-bottom: .85rem;
}

.admin-step h2 {
    margin: 0 0 .35rem;
    font-size: 1.35rem;
    letter-spacing: -.03em;
}

.admin-step p {
    margin: auto 0 0;
    color: rgba(255, 255, 255, .82);
    font-size: .92rem;
    line-height: 1.4;
}

.admin-step--videos { background: linear-gradient(160deg, #7c3aed, #4c1d95); }
.admin-step--ads { background: linear-gradient(160deg, #ea580c, #9a3412); }
.admin-step--members { background: linear-gradient(160deg, #e11d48, #9f1239); }
.admin-step--settings { background: linear-gradient(160deg, #0ea5e9, #1d4ed8); }

.admin-tabs {
    display: flex;
    gap: .4rem;
    margin: 0 0 1rem;
}

.admin-tabs a {
    padding: .4rem .8rem;
    border-radius: 999px;
    color: #c5ced8;
    background: rgba(255, 255, 255, .05);
    text-decoration: none;
    font-size: .82rem;
    font-weight: 650;
}

.admin-tabs a.is-active {
    color: #111;
    background: #f5c518;
}

.admin-search {
    display: flex;
    gap: .4rem;
}

.admin-search input {
    min-width: 12rem;
    padding: .45rem .65rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: #0c1118;
    color: #e8edf4;
    font: inherit;
}

.admin-form--row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .7rem;
}

.admin-form--row .admin-field {
    min-width: 12rem;
    flex: 1;
}

.admin-form--tight {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.admin-form--tight input[type="text"] {
    width: 8.5rem;
    padding: .35rem .45rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: #0c1118;
    color: #e8edf4;
    font: inherit;
    font-size: .75rem;
}

.admin-rowlink { cursor: pointer; }
.admin-rowlink:hover td { background: rgba(255, 255, 255, .03); }

.admin-pill--ban {
    color: #fecaca;
    background: rgba(185, 28, 28, .28);
}

.admin-pill--ok {
    color: #bbf7d0;
    background: rgba(22, 163, 74, .2);
}

.admin-btn--danger {
    color: #fff;
    background: linear-gradient(135deg, #be123c, #881337);
}

.admin-btn--tiny {
    padding: .3rem .55rem;
    font-size: .72rem;
}

.admin-actions {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    margin-top: .4rem;
}

.admin-back {
    margin: 0;
}

.admin-back a {
    color: #8b98ab;
    text-decoration: none;
    font-size: .84rem;
}

.admin-clip-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

.admin-log {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

.admin-log li {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem .75rem;
    font-size: .82rem;
}

.admin-log em {
    margin-left: auto;
    color: #8b98ab;
    font-style: normal;
}

.admin-muted {
    display: block;
    margin-top: .2rem;
    color: #8b98ab;
    font-size: .7rem;
    word-break: break-all;
}

.admin-ua {
    max-width: 16rem;
    font-size: .74rem;
    color: #9aa6b6;
    word-break: break-word;
}

.admin-thumb {
    width: 72px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    background: #0b1018;
}

.admin-table--videos input[type="text"] {
    width: 100%;
    min-width: 16rem;
    padding: .4rem .5rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: #0c1118;
    color: #e8edf4;
    font: inherit;
}

.admin-sticky-save {
    position: sticky;
    bottom: .75rem;
    margin: .9rem 0 0;
}

.admin-table-wrap {
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 1100px) {
    .admin-kpis,
    .admin-grid--3,
    .admin-split,
    .admin-steps {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 860px) {
    .admin-shell {
        grid-template-columns: 1fr;
    }

    .admin-shell__side {
        position: relative;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
    }

    .admin-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .admin-nav__label,
    .admin-shell__side-note {
        display: none;
    }

    .admin-kpis,
    .admin-grid--2,
    .admin-grid--3,
    .admin-split,
    .admin-steps {
        grid-template-columns: 1fr;
    }

    .admin-shell__body,
    .admin-shell__top {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .admin-search {
        width: 100%;
    }

    .admin-search input {
        flex: 1;
        min-width: 0;
    }

    .admin-form--row .admin-field {
        min-width: 100%;
    }
}

/* ── Erişilebilirlik: yalnızca ekran okuyucu ── */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .page-skeleton__spinner,
    .watch__spinner {
        animation: none !important;
        border-top-color: var(--accent2);
    }

    .skeleton {
        animation: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   Afterglow — tasarım token'ları, header, arama, kategori şeridi
   ══════════════════════════════════════════════════════════════ */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --ag-bg: #0A0B10;
    --ag-bg-rgb: 10, 11, 16;
    --ag-raised: #12141B;
    --ag-overlay: #171A23;
    --ag-line: rgba(255, 255, 255, .06);
    --ag-line-strong: rgba(255, 255, 255, .12);
    --ag-fg: #F2F3F7;
    --ag-muted: #A3A8B8;
    --ag-subtle: #6B7080;
    --ag-accent-400: #FF7A59;
    --ag-accent-500: #F2553D;
    --ag-accent-600: #D63F2E;
    --ag-gold-400: #F5C26B;
    --ag-gold-500: #E9A93F;
    --ag-grad-accent: linear-gradient(135deg, #FFB067 0%, #FF7A59 45%, #D63F2E 100%);
    --ag-grad-premium: linear-gradient(135deg, #F5C26B 0%, #E9A93F 50%, #C98522 100%);
    --ag-r-ctl: 12px;
    --ag-r-card: 16px;
    --ag-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ag-dur: 200ms;
    --ag-pad: 24px;
    --ag-header-h: 72px;
    --ag-shadow-pop: 0 24px 48px -16px rgba(0, 0, 0, .7), 0 0 0 1px var(--ag-line-strong);
}

html[data-theme="light"] {
    --bg: #F6F6F9;
    --text: #0A0B10;
    --muted: #4A4F5E;
    --ag-bg: #F6F6F9;
    --ag-bg-rgb: 246, 246, 249;
    --ag-raised: #FFFFFF;
    --ag-overlay: #FFFFFF;
    --ag-line: rgba(10, 11, 16, .08);
    --ag-line-strong: rgba(10, 11, 16, .14);
    --ag-fg: #0A0B10;
    --ag-muted: #4A4F5E;
    --ag-subtle: #5E6373;
    --ag-shadow-pop: 0 24px 48px -20px rgba(10, 11, 16, .28), 0 0 0 1px var(--ag-line-strong);
}

@media (min-width: 1024px) {
    :root {
        --ag-pad: 40px;
    }
}

@media (max-width: 639px) {
    :root {
        --ag-pad: 16px;
    }
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ag-skip {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1000;
    padding: 10px 16px;
    border-radius: var(--ag-r-ctl);
    background: var(--ag-fg);
    color: var(--ag-bg);
    font-weight: 700;
    font-size: 14px;
    transform: translateY(-160%);
    transition: transform var(--ag-dur) var(--ag-ease);
}

.ag-skip:focus-visible {
    transform: none;
    outline: 2px solid var(--ag-accent-400);
    outline-offset: 2px;
}

/* ── Header ── */
.ag-header {
    position: sticky;
    top: 0;
    z-index: 200;
    padding-top: env(safe-area-inset-top);
    background: rgba(var(--ag-bg-rgb), .8);
    -webkit-backdrop-filter: saturate(140%) blur(24px);
    backdrop-filter: saturate(140%) blur(24px);
    border-bottom: 1px solid var(--ag-line);
    transition: background-color var(--ag-dur) var(--ag-ease), box-shadow var(--ag-dur) var(--ag-ease);
}

.ag-header.is-scrolled {
    background: rgba(var(--ag-bg-rgb), .95);
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .6);
}

html[data-theme="light"] .ag-header.is-scrolled {
    box-shadow: 0 8px 24px -14px rgba(10, 11, 16, .25);
}

.ag-header__inner {
    position: relative;
    max-width: 1600px;
    height: var(--ag-header-h);
    margin: 0 auto;
    padding: 0 var(--ag-pad);
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 40px;
}

.ag-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ag-fg);
    border-radius: 10px;
}

.ag-logo__mark {
    flex: none;
    display: block;
}

.ag-logo__word {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
}

.ag-logo__glow {
    background: var(--ag-grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ag-accent-500);
}

.ag-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.ag-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 40px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ag-muted);
    border-radius: 8px;
    transition: color var(--ag-dur) var(--ag-ease);
}

.ag-nav__link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: var(--ag-accent-500);
    transform: translateX(-50%) scaleX(0);
    transition: transform var(--ag-dur) var(--ag-ease);
}

.ag-nav__link:hover {
    color: var(--ag-fg);
}

.ag-nav__link.is-active {
    color: var(--ag-fg);
}

.ag-nav__link.is-active::after {
    transform: translateX(-50%) scaleX(1);
}

/* ── Arama ── */
.ag-search {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 640px;
    height: 44px;
    display: flex;
    align-items: center;
    background: var(--ag-raised);
    border: 1px solid var(--ag-line-strong);
    border-radius: var(--ag-r-ctl);
    transition: border-color var(--ag-dur) var(--ag-ease), box-shadow var(--ag-dur) var(--ag-ease);
}

.ag-search:hover {
    border-color: rgba(255, 255, 255, .18);
}

html[data-theme="light"] .ag-search:hover {
    border-color: rgba(10, 11, 16, .22);
}

.ag-search:focus-within {
    border-color: rgba(242, 85, 61, .6);
    box-shadow: 0 0 0 4px rgba(242, 85, 61, .15);
}

.ag-search__icon {
    flex: none;
    margin-left: 14px;
    color: var(--ag-muted);
    pointer-events: none;
}

.ag-search__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 12px;
    border: 0;
    background: transparent;
    color: var(--ag-fg);
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.ag-search__input::placeholder {
    color: var(--ag-muted);
    opacity: 1;
}

.ag-search__input::-webkit-search-cancel-button,
.ag-search__input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.ag-search__kbd {
    flex: none;
    margin-right: 10px;
    padding: 3px 7px;
    border-radius: 6px;
    border: 1px solid var(--ag-line-strong);
    background: var(--ag-overlay);
    color: var(--ag-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .02em;
    white-space: nowrap;
    transition: opacity var(--ag-dur) var(--ag-ease);
}

.ag-search:focus-within .ag-search__kbd {
    opacity: 0;
}

.ag-search__close {
    display: none;
}

/* Öneri paneli */
.ag-suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
    border-radius: var(--ag-r-card);
    background: var(--ag-overlay);
    box-shadow: var(--ag-shadow-pop);
    z-index: 10;
    animation: ag-pop 180ms var(--ag-ease) both;
}

.ag-suggest[hidden] {
    display: none;
}

.ag-suggest__group + .ag-suggest__group {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--ag-line);
}

.ag-suggest__label {
    padding: 8px 10px 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ag-muted);
}

.ag-suggest__opt {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 10px;
    border-radius: 10px;
    color: var(--ag-fg);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms var(--ag-ease);
}

.ag-suggest__opt:hover,
.ag-suggest__opt.is-active {
    background: rgba(255, 255, 255, .06);
}

html[data-theme="light"] .ag-suggest__opt:hover,
html[data-theme="light"] .ag-suggest__opt.is-active {
    background: rgba(10, 11, 16, .05);
}

.ag-suggest__opt.is-active {
    box-shadow: inset 2px 0 0 var(--ag-accent-500);
}

.ag-suggest__thumb {
    flex: none;
    width: 28px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--ag-raised);
}

.ag-suggest__avatar {
    flex: none;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--ag-raised);
    color: var(--ag-muted);
}

.ag-suggest__opt--search {
    margin-top: 6px;
    color: var(--ag-muted);
}

.ag-suggest__opt--search svg {
    flex: none;
    margin: 0 6px;
}

.ag-suggest__text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ag-suggest__none {
    padding: 12px 10px 4px;
    font-size: 14px;
    color: var(--ag-muted);
}

@keyframes ag-pop {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
}

/* ── Aksiyonlar ── */
.ag-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ag-premium {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    margin-right: 6px;
    border-radius: 999px;
    background: var(--ag-grad-premium);
    color: #1A1206;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
    transition: box-shadow var(--ag-dur) var(--ag-ease), transform var(--ag-dur) var(--ag-ease);
}

.ag-premium:hover {
    box-shadow: 0 0 0 4px rgba(233, 169, 63, .15);
}

.ag-premium:active {
    transform: scale(.98);
}

.ag-icon-btn {
    position: relative;
    flex: none;
    width: 40px;
    height: 40px;
    display: inline-grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ag-muted);
    cursor: pointer;
    transition: background-color var(--ag-dur) var(--ag-ease), color var(--ag-dur) var(--ag-ease);
}

.ag-icon-btn:hover,
.ag-icon-btn.is-active {
    color: var(--ag-fg);
    background: rgba(255, 255, 255, .06);
}

html[data-theme="light"] .ag-icon-btn:hover,
html[data-theme="light"] .ag-icon-btn.is-active {
    background: rgba(10, 11, 16, .06);
}

.ag-theme-moon {
    display: none;
}

html[data-theme="light"] .ag-theme-sun {
    display: none;
}

html[data-theme="light"] .ag-theme-moon {
    display: block;
}

.ag-badge {
    position: absolute;
    top: 2px;
    right: 1px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--ag-accent-600);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px var(--ag-bg);
    pointer-events: none;
}

.ag-badge[hidden] {
    display: none;
}

.ag-search-toggle,
.ag-menu-btn {
    display: none;
}

/* Tooltip */
@media (hover: hover) {
    .ag-icon-btn[data-tip]::after {
        content: attr(data-tip);
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        padding: 6px 10px;
        border-radius: 8px;
        background: var(--ag-fg);
        color: var(--ag-bg);
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transform: translate(-50%, -4px);
        transition: opacity 150ms var(--ag-ease), transform 150ms var(--ag-ease);
        z-index: 20;
    }

    .ag-icon-btn[data-tip]:hover::after {
        opacity: 1;
        transform: translate(-50%, 0);
        transition-delay: 300ms;
    }
}

.ag-icon-btn[data-tip]:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Odak halkaları */
.ag-header :is(a, button):focus-visible,
.cat-strip :is(a, button):focus-visible,
.cat-strip__list:focus-visible,
.mobile-drawer :is(a, button):focus-visible {
    outline: 2px solid var(--ag-accent-400);
    outline-offset: 2px;
}

.ag-search__input:focus-visible {
    outline: none;
}

/* Header — 1024–1439px */
@media (max-width: 1439px) {
    .ag-header__inner {
        column-gap: 28px;
    }

    .ag-search {
        max-width: 480px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .ag-header__inner {
        column-gap: 20px;
    }

    .ag-nav {
        gap: 22px;
    }

    .ag-search__kbd {
        display: none;
    }
}

/* Header — < 1024px: nav/ikonlar gizli, arama ikon → tam genişlik */
@media (max-width: 1023px) {
    .ag-header__inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
        column-gap: 12px;
    }

    .ag-nav,
    .ag-icon-btn--desk {
        display: none;
    }

    .ag-search {
        display: none;
    }

    .ag-actions {
        grid-column: 3;
        gap: 4px;
    }

    .ag-search-toggle,
    .ag-menu-btn {
        display: inline-grid;
    }

    .ag-header.is-search-open .ag-search {
        display: flex;
        position: absolute;
        left: var(--ag-pad);
        right: var(--ag-pad);
        top: 50%;
        justify-self: stretch;
        width: auto;
        max-width: none;
        transform: translateY(-50%);
        z-index: 5;
        animation: ag-pop 180ms var(--ag-ease) both;
    }

    .ag-header.is-search-open .ag-logo,
    .ag-header.is-search-open .ag-actions {
        visibility: hidden;
    }

    .ag-header.is-search-open .ag-search__kbd {
        display: none;
    }

    .ag-header.is-search-open .ag-search__close {
        flex: none;
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        margin-right: 2px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--ag-muted);
        cursor: pointer;
    }

    .ag-header.is-search-open .ag-search__close:hover {
        color: var(--ag-fg);
    }
}

@media (max-width: 419px) {
    .ag-premium {
        width: 40px;
        padding: 0;
        margin-right: 0;
        justify-content: center;
    }

    .ag-premium span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* ── Mobil menü (Afterglow) ── */
.mobile-drawer__panel {
    background: var(--ag-raised);
    border-left: 1px solid var(--ag-line-strong);
    transition: transform 320ms var(--ag-ease);
}

html[data-theme="light"] .mobile-drawer__panel {
    background: #fff;
}

.mobile-drawer__brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font);
    font-size: 18px;
    letter-spacing: -.02em;
    color: var(--ag-fg);
}

.mobile-drawer__brand > span {
    background: none;
    -webkit-text-fill-color: currentColor;
}

.mobile-drawer__brand .ag-logo__glow {
    background: var(--ag-grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mobile-drawer__close {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border-color: var(--ag-line-strong);
    background: transparent;
}

.mobile-drawer__close:hover {
    color: var(--ag-fg);
    border-color: var(--ag-line-strong);
    background: rgba(255, 255, 255, .06);
}

.mobile-drawer__link {
    width: 100%;
    min-height: 44px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--ag-muted);
    text-align: left;
    cursor: pointer;
}

.mobile-drawer__link:hover,
.mobile-drawer__link.is-active {
    color: var(--ag-fg);
    background: rgba(255, 255, 255, .05);
    border-color: transparent;
}

html[data-theme="light"] .mobile-drawer__link:hover,
html[data-theme="light"] .mobile-drawer__link.is-active {
    background: rgba(10, 11, 16, .05);
}

.mobile-drawer__link.is-active {
    box-shadow: inset 2px 0 0 var(--ag-accent-500);
}

.mobile-drawer__icon {
    width: 20px;
    display: inline-grid;
    place-items: center;
}

.mobile-drawer__pill {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ag-muted);
    border-color: var(--ag-line-strong);
}

.mobile-drawer__pill:hover,
.mobile-drawer__pill.is-active {
    color: var(--ag-fg);
    border-color: rgba(242, 85, 61, .5);
    background: rgba(242, 85, 61, .12);
}

.mobile-drawer__all {
    margin-top: 12px;
    padding: 10px;
    border-radius: var(--ag-r-ctl);
    font-size: 14px;
    color: var(--ag-fg);
    background: transparent;
    border: 1px solid var(--ag-line-strong);
}

.mobile-drawer__badge {
    color: var(--ag-accent-400);
}

html[data-theme="light"] .mobile-drawer__badge {
    color: var(--ag-accent-600);
}

.mobile-drawer__legal a {
    font-size: 13px;
    color: var(--ag-muted);
}

/* ── Kategori şeridi ── */
.ag-strip-wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px var(--ag-pad) 4px;
}

.cat-strip {
    --cw: 148px;
    --ch: 196px;
    --fade: 64px;
}

.cat-strip__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.cat-strip__title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ag-fg);
}

.cat-strip__tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cat-strip__all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 40px;
    padding: 0 8px;
    margin-right: 4px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ag-accent-400);
    transition: color var(--ag-dur) var(--ag-ease);
}

.cat-strip__all span {
    transition: transform var(--ag-dur) var(--ag-ease);
}

.cat-strip__all:hover span {
    transform: translateX(3px);
}

html[data-theme="light"] .cat-strip__all {
    color: var(--ag-accent-600);
}

.cat-strip__arrow {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--ag-line-strong);
    background: var(--ag-raised);
    color: var(--ag-fg);
    cursor: pointer;
    transition: background-color var(--ag-dur) var(--ag-ease), border-color var(--ag-dur) var(--ag-ease), opacity var(--ag-dur) var(--ag-ease);
}

.cat-strip__arrow svg {
    width: 18px;
    height: 18px;
}

.cat-strip__arrow:hover:not(:disabled) {
    background: var(--ag-overlay);
    border-color: rgba(255, 255, 255, .22);
}

html[data-theme="light"] .cat-strip__arrow:hover:not(:disabled) {
    border-color: rgba(10, 11, 16, .24);
}

.cat-strip__arrow:disabled,
.cat-strip__arrow[aria-disabled="true"] {
    opacity: .4;
    cursor: default;
}

.cat-strip__viewport[hidden] {
    display: none;
}

.cat-strip__list {
    display: flex;
    gap: 12px;
    margin: 0 -6px;
    padding: 6px 6px 10px;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-radius: 4px;
}

.cat-strip__list::-webkit-scrollbar {
    display: none;
}

.cat-strip__viewport.has-left .cat-strip__list {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade));
    mask-image: linear-gradient(to right, transparent 0, #000 var(--fade));
}

.cat-strip__viewport.has-right .cat-strip__list {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - var(--fade)), transparent 100%);
}

.cat-strip__viewport.has-left.has-right .cat-strip__list {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--fade), #000 calc(100% - var(--fade)), transparent 100%);
}

.cat-card-item {
    flex: 0 0 var(--cw);
    scroll-snap-align: start;
}

.cat-card-item:not(.cat-card-item--skel) {
    animation: ag-rise 420ms var(--ag-ease) both;
    animation-delay: calc(var(--i, 0) * 30ms);
}

@keyframes ag-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

.cat-card {
    position: relative;
    display: block;
    width: var(--cw);
    height: var(--ch);
    border-radius: var(--ag-r-card);
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255, 122, 89, .22), transparent 60%),
        var(--ag-overlay);
    color: #fff;
    transition: transform var(--ag-dur) var(--ag-ease);
}

.cat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
    pointer-events: none;
    transition: box-shadow var(--ag-dur) var(--ag-ease);
}

.cat-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms var(--ag-ease);
}

.cat-card.is-broken .cat-card__img {
    display: none;
}

.cat-card__shade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60%;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .2) 55%, transparent 100%);
    pointer-events: none;
}

.cat-card__body {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cat-card__name {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

.cat-card__count {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, .6);
    white-space: nowrap;
}

.cat-card__go {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(10, 11, 16, .6);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    opacity: 0;
    transform: translateY(4px) scale(.9);
    transition: opacity var(--ag-dur) var(--ag-ease), transform var(--ag-dur) var(--ag-ease);
}

.cat-card__go svg {
    width: 14px;
    height: 14px;
}

@media (hover: hover) {
    .cat-card:hover {
        transform: translateY(-4px);
    }

    .cat-card:hover::after {
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
    }

    .cat-card:hover .cat-card__img {
        transform: scale(1.06);
    }

    .cat-card:hover .cat-card__go {
        opacity: 1;
        transform: none;
    }
}

.cat-card.is-active::after {
    box-shadow: inset 0 0 0 2px var(--ag-accent-500);
}

.cat-strip .cat-card:focus-visible {
    outline: 2px solid var(--ag-accent-400);
    outline-offset: 3px;
}

.cat-strip .cat-card:focus-visible .cat-card__go {
    opacity: 1;
    transform: none;
}

/* İskelet */
.cat-card--skel {
    background: linear-gradient(100deg, var(--ag-raised) 30%, var(--ag-overlay) 50%, var(--ag-raised) 70%);
    background-size: 220% 100%;
    animation: ag-shimmer 1.4s linear infinite;
}

.cat-card--skel::after {
    box-shadow: inset 0 0 0 1px var(--ag-line);
}

html[data-theme="light"] .cat-card--skel {
    background-image: linear-gradient(100deg, #ECECF1 30%, #F7F7FA 50%, #ECECF1 70%);
}

@keyframes ag-shimmer {
    from {
        background-position: 110% 0;
    }

    to {
        background-position: -110% 0;
    }
}

/* Hata / boş */
.cat-strip__error,
.cat-strip__empty {
    min-height: calc(var(--ch) + 16px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    border-radius: var(--ag-r-card);
    border: 1px dashed var(--ag-line-strong);
    background: var(--ag-raised);
    color: var(--ag-muted);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.cat-strip__error[hidden],
.cat-strip__empty[hidden] {
    display: none;
}

.cat-strip__retry {
    height: 40px;
    padding: 0 18px;
    border-radius: var(--ag-r-ctl);
    border: 1px solid var(--ag-line-strong);
    background: var(--ag-overlay);
    color: var(--ag-fg);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--ag-dur) var(--ag-ease);
}

.cat-strip__retry:hover {
    border-color: rgba(242, 85, 61, .6);
}

/* Şerit — duyarlı ölçüler */
@media (max-width: 1439px) {
    .cat-strip {
        --cw: 132px;
        --ch: 176px;
    }
}

@media (max-width: 1023px) {
    .cat-strip {
        --cw: 120px;
        --ch: 160px;
    }
}

@media (max-width: 639px) {
    .cat-strip {
        --cw: 108px;
        --ch: 144px;
        --fade: 40px;
    }

    .ag-strip-wrap {
        padding-top: 16px;
    }

    .cat-strip__arrow {
        display: none;
    }

    .cat-strip__all {
        margin-right: -8px;
    }
}

.footer__adult {
    color: var(--ag-accent-400);
}

html[data-theme="light"] .footer__adult {
    color: var(--ag-accent-600);
}

/* Tüm kategoriler sayfası */
.ag-cats {
    max-width: 1600px;
    margin: 0 auto;
    padding: 32px var(--ag-pad) 56px;
}

.ag-cats__head {
    margin-bottom: 24px;
}

.ag-cats__title {
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ag-fg);
}

.ag-cats__lead {
    margin-top: 6px;
    font-size: 15px;
    color: var(--ag-muted);
}

.ag-cats__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 16px;
    list-style: none;
}

.ag-cats .cat-card,
.ag-404 .cat-card {
    width: 100%;
    height: auto;
    aspect-ratio: 148 / 196;
}

.ag-cats .cat-card:focus-visible {
    outline: 2px solid var(--ag-accent-400);
    outline-offset: 3px;
}

@media (max-width: 639px) {
    .ag-cats__grid {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
        gap: 12px;
    }
}

/* 404 */
.ag-404 {
    max-width: 1600px;
    margin: 0 auto;
    padding: 56px var(--ag-pad) 64px;
}

.ag-404__hero {
    max-width: 640px;
    margin: 0 auto 56px;
    text-align: center;
}

.ag-404__code {
    font-size: clamp(88px, 16vw, 168px);
    font-weight: 800;
    line-height: .9;
    letter-spacing: -.05em;
    background: var(--ag-grad-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--ag-accent-500);
    filter: drop-shadow(0 12px 40px rgba(242, 85, 61, .25));
}

.ag-404__kicker {
    margin-top: 16px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ag-accent-400);
}

html[data-theme="light"] .ag-404__kicker {
    color: var(--ag-accent-600);
}

.ag-404__title {
    margin-top: 8px;
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ag-fg);
}

.ag-404__text {
    margin-top: 10px;
    font-size: 16px;
    color: var(--ag-muted);
}

.ag-404__search {
    display: flex;
    align-items: center;
    height: 52px;
    margin-top: 28px;
    padding: 4px;
    background: var(--ag-raised);
    border: 1px solid var(--ag-line-strong);
    border-radius: 14px;
    transition: border-color var(--ag-dur) var(--ag-ease), box-shadow var(--ag-dur) var(--ag-ease);
}

.ag-404__search:focus-within {
    border-color: rgba(242, 85, 61, .6);
    box-shadow: 0 0 0 4px rgba(242, 85, 61, .15);
}

.ag-404__search-icon {
    flex: none;
    margin: 0 4px 0 12px;
    color: var(--ag-muted);
}

.ag-404__search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--ag-fg);
    font: inherit;
    font-size: 15px;
    outline: none;
}

.ag-404__search input::placeholder {
    color: var(--ag-muted);
}

.ag-404__search button {
    flex: none;
    height: 100%;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: var(--ag-fg);
    color: var(--ag-bg);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.ag-404__search button:focus-visible,
.ag-404__btn:focus-visible {
    outline: 2px solid var(--ag-accent-400);
    outline-offset: 2px;
}

.ag-404__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.ag-404__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    border-radius: var(--ag-r-ctl);
    border: 1px solid var(--ag-line-strong);
    background: var(--ag-raised);
    color: var(--ag-fg);
    font-size: 14px;
    font-weight: 700;
    transition: border-color var(--ag-dur) var(--ag-ease), box-shadow var(--ag-dur) var(--ag-ease);
}

.ag-404__btn:hover {
    border-color: rgba(255, 255, 255, .24);
}

.ag-404__btn--primary {
    border-color: transparent;
    background: var(--ag-grad-accent);
    color: #1A0A06;
}

.ag-404__btn--primary:hover {
    border-color: transparent;
    box-shadow: 0 0 0 4px rgba(242, 85, 61, .18);
}

.ag-404__cats .ag-cats__grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}

@media (max-width: 639px) {
    .ag-404 {
        padding-top: 32px;
    }

    .ag-404__cats .ag-cats__grid {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    }
}

/* Ana sayfa akışı yeni header altında */
.page-feed .page-main--feed {
    width: 100%;
    max-width: 1600px;
}

.page-feed .sliders {
    padding: 12px var(--ag-pad) 0;
}

@media (prefers-reduced-motion: reduce) {
    .ag-header,
    .ag-search,
    .ag-suggest,
    .ag-premium,
    .ag-icon-btn,
    .ag-nav__link::after,
    .cat-card,
    .cat-card::after,
    .cat-card__img,
    .cat-card__go,
    .cat-strip__arrow,
    .mobile-drawer__panel {
        transition: none !important;
        animation: none !important;
    }

    .cat-card-item:not(.cat-card-item--skel) {
        animation: none;
    }

    .cat-card--skel {
        animation: none;
    }

    .cat-card:hover,
    .cat-card:hover .cat-card__img {
        transform: none !important;
    }
}
/* ===== Afterglow — Sponsorlu alanlar (AdSlot) ===== */
.ag-ad {
    --ad-cur-w: var(--ad-w);
    --ad-cur-ar: var(--ad-ar);
    width: min(100%, var(--ad-cur-w));
    margin: 24px auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

@media (min-width: 768px) {
    .ag-ad {
        --ad-cur-w: var(--ad-md-w, var(--ad-w));
        --ad-cur-ar: var(--ad-md-ar, var(--ad-ar));
    }
}

@media (min-width: 1280px) {
    .ag-ad {
        --ad-cur-w: var(--ad-xl-w, var(--ad-md-w, var(--ad-w)));
        --ad-cur-ar: var(--ad-xl-ar, var(--ad-md-ar, var(--ad-ar)));
    }
}

.ag-ad__label {
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ag-subtle);
}

.ag-ad__box {
    position: relative;
    width: 100%;
    aspect-ratio: var(--ad-cur-ar);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--ag-line);
    background: var(--ag-raised);
}

.ag-ad__link,
.ag-ad__img {
    display: block;
    width: 100%;
    height: 100%;
}

.ag-ad__img {
    object-fit: contain;
}

.ag-ad.is-empty {
    display: none;
}

.ag-ad__house {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    width: 100%;
    height: 100%;
    padding: 10px 16px;
    color: var(--ag-fg);
    text-decoration: none;
    background: radial-gradient(120% 140% at 0% 0%, rgba(255, 122, 89, .14), transparent 60%);
}

.ag-ad__house .ag-logo__mark {
    flex: none;
}

.ag-ad__house-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ag-ad__house-text strong {
    font-size: 14px;
    font-weight: 700;
}

.ag-ad__house-text span {
    font-size: 12px;
    color: var(--ag-muted);
}

.ag-ad__house-cta {
    flex: none;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    background: var(--accent);
}

.ag-ad__house:hover .ag-ad__house-cta {
    background: var(--accent2);
}

.ag-ad--sidebar .ag-ad__house,
.ag-ad--infeed .ag-ad__house {
    flex-wrap: wrap;
    text-align: center;
}

@media (min-width: 768px) {
    .ag-ad--infeed .ag-ad__house {
        flex-wrap: nowrap;
        text-align: left;
    }
}

.ag-ad--sidebar .ag-ad__house {
    flex-direction: column;
}

.ag-ad--desktop {
    display: none;
}

@media (min-width: 1280px) {
    .ag-ad--desktop {
        display: flex;
    }
}

.ag-ad--sticky {
    position: sticky;
    top: 88px;
}

.ag-ad--sidebar {
    margin: 0 0 16px;
}

/* Akış içi satır: grid'in tam satırını kaplar; dense akış boş hücre bırakmaz */
.grid:has(> .ag-ad--infeed),
.ag-vgrid:has(> .ag-ad--infeed) {
    grid-auto-flow: row dense;
}

.grid > .ag-ad--infeed,
.ag-vgrid > .ag-ad--infeed,
.sliders > .ag-ad--infeed {
    grid-column: 1 / -1;
    margin: 8px auto;
}

/* ===== Afterglow — Premium, hesap, listeler, filtreler ===== */
.ag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--ag-r-ctl);
    border: 1px solid var(--ag-line-strong);
    background: var(--ag-raised);
    color: var(--ag-fg);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--ag-dur) var(--ag-ease), box-shadow var(--ag-dur) var(--ag-ease), background-color var(--ag-dur) var(--ag-ease);
}

.ag-btn:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, .24);
}

.ag-btn--primary {
    border-color: transparent;
    background: var(--ag-grad-accent);
    color: #1A0A06;
}

.ag-btn--primary:hover:not(:disabled) {
    border-color: transparent;
    box-shadow: 0 0 0 4px rgba(242, 85, 61, .18);
}

.ag-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.ag-btn:focus-visible,
.ag-seg__btn:focus-visible,
.ag-faq summary:focus-visible,
.ag-avatar:focus-visible {
    outline: 2px solid var(--ag-accent-400);
    outline-offset: 2px;
}

/* Header: premium rozeti + avatar altın halka */
.ag-premium.is-premium {
    background: transparent;
    color: var(--ag-gold-400);
    box-shadow: inset 0 0 0 1px rgba(233, 169, 63, .55);
    padding: 0 12px;
}

.ag-avatar {
    flex: none;
    width: 36px;
    height: 36px;
    display: inline-grid;
    place-items: center;
    margin: 0 2px;
    border-radius: 50%;
    background: var(--ag-overlay);
    color: var(--ag-fg);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 0 0 1px var(--ag-line-strong);
}

.ag-avatar.is-premium {
    box-shadow: 0 0 0 2px var(--ag-bg), 0 0 0 3.5px var(--ag-gold-400);
}

.ag-avatar--lg {
    width: 56px;
    height: 56px;
    font-size: 22px;
}

/* /premium */
.ag-prem,
.ag-acct,
.ag-pl {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 40px var(--ag-pad) 64px;
}

.ag-prem__hero {
    text-align: center;
    margin-bottom: 28px;
}

.ag-prem__crown {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--ag-grad-premium);
    color: #1A1206;
    margin-bottom: 14px;
}

.ag-prem__hero h1,
.ag-acct__head h1,
.ag-pl__head h1 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--ag-fg);
}

.ag-prem__lead,
.ag-acct__head p,
.ag-pl__head p {
    margin-top: 8px;
    color: var(--ag-muted);
    font-size: 16px;
}

.ag-prem__flash {
    display: inline-block;
    margin-top: 14px;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(214, 63, 46, .14);
    color: var(--ag-fg);
    font-size: 14px;
}

.ag-prem__plans {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.ag-seg {
    display: inline-flex;
    padding: 4px;
    border-radius: 999px;
    background: var(--ag-raised);
    border: 1px solid var(--ag-line);
}

.ag-seg__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ag-muted);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.ag-seg__btn.is-active {
    background: var(--ag-overlay);
    color: var(--ag-fg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 4px 14px rgba(0, 0, 0, .25);
}

.ag-seg__save {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(233, 169, 63, .16);
    color: var(--ag-gold-400);
    font-size: 11px;
    font-weight: 800;
}

.ag-prem__card {
    width: min(100%, 440px);
    padding: 28px;
    border-radius: var(--ag-r-card);
    border: 1px solid rgba(233, 169, 63, .35);
    background: linear-gradient(180deg, rgba(233, 169, 63, .07), transparent 40%), var(--ag-raised);
    box-shadow: var(--ag-shadow-pop);
}

.ag-prem__price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--ag-muted);
}

.ag-prem__price strong {
    font-size: 36px;
    font-weight: 800;
    color: var(--ag-fg);
    letter-spacing: -.02em;
}

.ag-prem__sub {
    margin-top: 4px;
    font-size: 13px;
    color: var(--ag-muted);
}

.ag-prem__feats {
    list-style: none;
    margin: 20px 0 24px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.ag-prem__feats li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 15px;
    color: var(--ag-fg);
}

.ag-prem__feats svg {
    flex: none;
    margin-top: 2px;
    color: var(--ag-gold-400);
}

.ag-prem__cta {
    width: 100%;
}

.ag-prem__note {
    margin-top: 10px;
    font-size: 13px;
    color: var(--ag-muted);
    line-height: 1.5;
}

.ag-prem__compare,
.ag-prem__faq {
    margin-top: 56px;
}

.ag-prem__compare h2,
.ag-prem__faq h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--ag-fg);
}

.ag-prem__table-wrap {
    overflow-x: auto;
    border-radius: var(--ag-r-card);
    border: 1px solid var(--ag-line);
    background: var(--ag-raised);
}

.ag-prem__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.ag-prem__table th,
.ag-prem__table td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--ag-line);
    text-align: center;
    color: var(--ag-fg);
}

.ag-prem__table tbody tr:last-child > * {
    border-bottom: 0;
}

.ag-prem__table th[scope="row"] {
    text-align: left;
    font-weight: 500;
}

.ag-prem__table thead th {
    font-size: 13px;
    font-weight: 700;
    color: var(--ag-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.ag-prem__table thead th.is-premium {
    color: var(--ag-gold-400);
}

.ag-prem__table td.is-premium {
    background: rgba(233, 169, 63, .05);
}

.ag-prem__table td.is-yes svg {
    color: #34D399;
}

.ag-prem__table td.is-no svg {
    color: var(--ag-subtle);
}

.ag-faq {
    border-bottom: 1px solid var(--ag-line);
}

.ag-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    list-style: none;
    font-size: 16px;
    font-weight: 600;
    color: var(--ag-fg);
    cursor: pointer;
}

.ag-faq summary::-webkit-details-marker {
    display: none;
}

.ag-faq__chev {
    flex: none;
    color: var(--ag-muted);
    transition: transform var(--ag-dur) var(--ag-ease);
}

.ag-faq[open] .ag-faq__chev {
    transform: rotate(180deg);
}

.ag-faq p {
    padding: 0 0 18px;
    color: var(--ag-muted);
    line-height: 1.6;
}

/* Hesap */
.ag-acct__head,
.ag-pl__head {
    margin-bottom: 24px;
}

.ag-acct__card,
.ag-acct__form,
.ag-locked {
    padding: 24px;
    border-radius: var(--ag-r-card);
    border: 1px solid var(--ag-line);
    background: var(--ag-raised);
}

.ag-acct__who {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ag-acct__who strong {
    display: block;
    font-size: 17px;
    color: var(--ag-fg);
}

.ag-acct__who span {
    font-size: 14px;
    color: var(--ag-muted);
}

.ag-acct__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.ag-acct__meta div {
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--ag-overlay);
}

.ag-acct__meta dt {
    font-size: 12px;
    color: var(--ag-muted);
}

.ag-acct__meta dd {
    margin: 4px 0 0;
    font-weight: 700;
    color: var(--ag-fg);
}

.ag-acct__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.ag-acct__forms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.ag-acct__form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ag-acct__form h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--ag-fg);
}

.ag-acct__form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: var(--ag-muted);
}

.ag-acct__form input,
.ag-pl__new input {
    min-height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--ag-line-strong);
    background: var(--ag-bg);
    color: var(--ag-fg);
    font: inherit;
    font-size: 15px;
}

.ag-acct__form input:focus-visible,
.ag-pl__new input:focus-visible {
    outline: 2px solid var(--ag-accent-400);
    outline-offset: 1px;
}

/* Kilitli (premium) durum */
.ag-locked {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 24px;
}

.ag-locked__ico {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(233, 169, 63, .12);
    color: var(--ag-gold-400);
}

.ag-locked h2 {
    font-size: 20px;
    color: var(--ag-fg);
}

.ag-locked p {
    max-width: 440px;
    color: var(--ag-muted);
    margin-bottom: 6px;
}

/* Listeler */
.ag-pl__new {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.ag-pl__new input {
    flex: 1;
    min-width: 0;
}

.ag-pl__layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 767px) {
    .ag-pl__layout {
        grid-template-columns: 1fr;
    }
}

.ag-pl__lists ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.ag-pl__list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--ag-line);
    background: var(--ag-raised);
    color: var(--ag-fg);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.ag-pl__list small {
    color: var(--ag-muted);
    font-weight: 500;
}

.ag-pl__list.is-active {
    border-color: var(--ag-accent-500);
}

.ag-pl__none,
.ag-pl__hint {
    color: var(--ag-muted);
    font-size: 14px;
}

.ag-pl__hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 12px;
}

.ag-pl__detail-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.ag-pl__detail-head h2 {
    font-size: 20px;
    color: var(--ag-fg);
}

.ag-pl__detail-tools {
    display: flex;
    gap: 8px;
}

.ag-pl__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.ag-pl__item {
    display: grid;
    grid-template-columns: 20px 120px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--ag-line);
    background: var(--ag-raised);
}

.ag-pl__item.is-dragging {
    opacity: .5;
}

.ag-pl__item.is-over {
    border-color: var(--ag-accent-500);
}

.ag-pl__grip {
    color: var(--ag-subtle);
    cursor: grab;
    letter-spacing: -2px;
    text-align: center;
}

.ag-pl__thumb {
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ag-overlay);
}

.ag-pl__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ag-pl__name {
    color: var(--ag-fg);
    font-size: 14px;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ag-pl__ops {
    display: flex;
    gap: 2px;
}

.ag-pl__ops .ag-icon-btn:disabled {
    opacity: .35;
    cursor: default;
}

.ag-pl__empty {
    padding: 24px;
    text-align: center;
    color: var(--ag-muted);
    border: 1px dashed var(--ag-line-strong);
    border-radius: 12px;
}

@media (max-width: 559px) {
    .ag-pl__item {
        grid-template-columns: 16px 88px minmax(0, 1fr);
    }

    .ag-pl__ops {
        grid-column: 2 / -1;
        justify-content: flex-end;
    }
}

/* Gelişmiş filtreler */
.browse-filters__adv {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    margin: 0;
    padding: 10px 14px 12px;
    border: 1px solid var(--ag-line);
    border-radius: 12px;
    min-width: 0;
}

.browse-filters__legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ag-muted);
}

.browse-filters__adv.is-locked .browse-filters__legend {
    color: var(--ag-gold-400);
}

.browse-filters__adv.is-locked select,
.browse-filters__adv.is-locked summary {
    opacity: .5;
    cursor: not-allowed;
}

.browse-filters__unlock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(233, 169, 63, .14);
    color: var(--ag-gold-400);
    font-size: 13px;
    font-weight: 700;
}

.browse-filters__cats {
    position: relative;
}

.browse-filters__field-btn {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid var(--ag-line-strong);
    background: rgba(255, 255, 255, .05);
    color: var(--ag-fg);
    font-size: 13px;
    list-style: none;
    cursor: pointer;
}

.browse-filters__field-btn::-webkit-details-marker {
    display: none;
}

.browse-filters__cats-panel {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    width: min(320px, 80vw);
    max-height: 320px;
    overflow: auto;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--ag-line-strong);
    background: var(--ag-overlay);
    box-shadow: var(--ag-shadow-pop);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    font-size: 13px;
    color: var(--ag-fg);
}

.browse-filters__cats-panel p {
    grid-column: 1 / -1;
    color: var(--ag-muted);
    font-size: 12px;
    margin-bottom: 4px;
}

.browse-filters__cats-panel label {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
}

/* Yatay video şeridi */
.cat-strip--videos {
    --vw: 280px;
    width: 100%;
    max-width: 1400px;
    margin: 24px auto;
    padding: 0 var(--ag-pad);
}

.cat-strip--videos[hidden] {
    display: none;
}

.cat-strip--videos .cat-strip__list > * {
    flex: 0 0 var(--vw);
    scroll-snap-align: start;
}

@media (max-width: 639px) {
    .cat-strip--videos {
        --vw: 72vw;
    }
}

/* Kalite seçici — kilitli seçenekler görünür, agresif modal yok */
.ag-quality {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
}

.ag-quality__item {
    position: relative;
    display: inline-flex;
}

.ag-quality__opt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ag-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.ag-quality__opt[aria-checked="true"] {
    background: var(--ag-overlay);
    color: var(--ag-fg);
}

.ag-quality__opt.is-locked {
    color: var(--ag-subtle);
    cursor: help;
}

.ag-quality__opt.is-locked svg {
    color: var(--ag-gold-400);
}

.ag-quality__opt:focus-visible {
    outline: 2px solid var(--ag-accent-400);
    outline-offset: 1px;
}

.ag-quality__tip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--ag-fg);
    color: var(--ag-bg);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 4px);
    transition: opacity 150ms var(--ag-ease), transform 150ms var(--ag-ease), visibility 150ms;
}

.ag-quality__tip a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ag-quality__item:hover .ag-quality__tip,
.ag-quality__item:focus-within .ag-quality__tip,
.ag-quality__opt.is-tip-open + .ag-quality__tip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* ===== Afterglow — İzleme sayfası ===== */
.ag-watch__layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1536px;
    margin: 0 auto;
    padding: 16px var(--ag-pad, 16px) 0;
}

.ag-watch__main {
    flex: 1 1 auto;
    min-width: 0;
}

.ag-watch__side {
    min-width: 0;
}

@media (min-width: 1280px) {
    .ag-watch__layout {
        flex-direction: row;
        align-items: flex-start;
    }

    .ag-watch__main {
        max-width: 1100px;
    }

    .ag-watch__side {
        flex: 0 0 380px;
        width: 380px;
    }
}

.ag-watch__player.watch__player {
    border-radius: 16px;
}

.ag-watch__info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0 8px;
}

.ag-watch__info .watch__crumbs {
    margin: 0;
    font-size: 12px;
}

.ag-watch__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ag-fg);
    overflow-wrap: anywhere;
}

.ag-watch__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    font-size: 14px;
    color: var(--ag-muted);
    font-variant-numeric: tabular-nums;
}

.ag-watch__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ag-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ag-line);
    border-radius: 999px;
    background: var(--ag-raised);
    color: var(--ag-fg);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ag-dur, 150ms) var(--ag-ease), border-color var(--ag-dur, 150ms) var(--ag-ease), color var(--ag-dur, 150ms) var(--ag-ease);
}

.ag-pill:hover {
    background: var(--ag-overlay);
    border-color: var(--ag-line-strong);
}

.ag-pill:focus-visible {
    outline: 2px solid var(--ag-accent-400);
    outline-offset: 2px;
}

.ag-pill[aria-pressed="true"],
.ag-pill[aria-expanded="true"] {
    border-color: var(--ag-accent-500);
    color: var(--ag-accent-400);
}

.ag-pill.is-locked {
    color: var(--ag-subtle);
    cursor: help;
}

.ag-pill.is-locked svg {
    color: var(--ag-gold-400);
}

.ag-pill__heart {
    font-size: 16px;
    line-height: 1;
}

.ag-pop {
    position: relative;
}

.ag-pop__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    width: min(300px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--ag-line);
    border-radius: 12px;
    background: var(--ag-raised);
    box-shadow: var(--ag-shadow-pop);
}

.ag-pop__menu[hidden] {
    display: none;
}

.ag-pop__title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
}

.ag-pop__lists {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 220px;
    overflow: auto;
}

.ag-pop__item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 0 8px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

.ag-pop__item:hover {
    background: var(--ag-overlay);
}

.ag-pop__item input {
    width: 16px;
    height: 16px;
    accent-color: var(--ag-accent-500);
}

.ag-pop__empty {
    margin: 0;
    font-size: 13px;
    color: var(--ag-muted);
}

.ag-pop__new {
    display: flex;
    gap: 8px;
}

.ag-pop__new input {
    flex: 1;
    min-width: 0;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--ag-line);
    border-radius: 8px;
    background: var(--ag-bg);
    color: var(--ag-fg);
    font: inherit;
    font-size: 13px;
}

.ag-pop__link {
    font-size: 13px;
    color: var(--ag-muted);
}

.ag-pop__link:hover {
    color: var(--ag-fg);
}

.ag-pop:hover .ag-pop__tip,
.ag-pop:focus-within .ag-pop__tip,
.ag-pill.is-tip-open + .ag-pop__tip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.ag-btn--sm {
    min-height: 36px;
    padding: 0 12px;
    font-size: 13px;
}

.ag-watch__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ag-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border: 1px solid var(--ag-line);
    border-radius: 999px;
    font-size: 13px;
    color: var(--ag-muted);
    transition: color var(--ag-dur, 150ms) var(--ag-ease), border-color var(--ag-dur, 150ms) var(--ag-ease);
}

.ag-chip:hover {
    color: var(--ag-fg);
    border-color: var(--ag-line-strong);
}

.ag-chip--cat {
    color: var(--ag-fg);
    background: var(--ag-overlay);
}

.ag-watch__label {
    margin: 4px 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ag-subtle);
}

.ag-performers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ag-performer {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--ag-fg);
    font-size: 14px;
    font-weight: 600;
}

.ag-performer__av {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
}

.ag-performer__av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ag-performer:hover .ag-performer__name {
    color: var(--ag-accent-400);
}

.ag-watch__main > .ag-ad {
    margin: 16px 0 0;
}

.ag-watch__side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}

.ag-watch__side-head h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.ag-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    font-size: 13px;
    color: var(--ag-muted);
    cursor: pointer;
}

.ag-switch input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.ag-switch__track {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: var(--ag-line-strong);
    transition: background var(--ag-dur, 150ms) var(--ag-ease);
}

.ag-switch__track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform var(--ag-dur, 150ms) var(--ag-ease);
}

.ag-switch input:checked + .ag-switch__track {
    background: var(--ag-accent-500);
}

.ag-switch input:checked + .ag-switch__track::after {
    transform: translateX(14px);
}

.ag-switch input:focus-visible + .ag-switch__track {
    outline: 2px solid var(--ag-accent-400);
    outline-offset: 2px;
}

.ag-watch__next {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ag-watch__next .rel--row {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    color: var(--ag-fg);
}

.ag-watch__next .rel--row:hover {
    background: none;
}

.ag-watch__next .rel__thumb {
    width: 168px;
    height: 94px;
    aspect-ratio: auto;
    border-radius: 8px;
    overflow: hidden;
    margin: 0;
}

.ag-watch__next .rel__body {
    min-width: 0;
    padding: 0;
}

.ag-watch__next .rel__title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ag-watch__next .rel__channel,
.ag-watch__next .rel__meta {
    margin: 0;
    font-size: 12px;
    color: var(--ag-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ag-watch__next .rel--row:hover .rel__title {
    color: var(--ag-accent-400);
}

.ag-watch__next .ag-ad {
    margin: 4px 0;
}

.ag-watch .cat-strip--videos {
    max-width: 1536px;
    margin: 32px auto 0;
}

.ag-related {
    max-width: 1536px;
    margin: 32px auto 0;
    padding: 0 var(--ag-pad, 16px) 48px;
}

.ag-related__head h2 {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
}

.ag-vgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
}

@media (min-width: 640px) {
    .ag-vgrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

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

@media (min-width: 1280px) {
    .ag-vgrid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.ag-vgrid > .card[data-virtual] {
    pointer-events: none;
}

.ag-related__sentinel {
    height: 1px;
}

.ag-related__end,
.ag-related__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 0 8px;
    text-align: center;
    color: var(--ag-muted);
    font-size: 14px;
}

.ag-related__end[hidden],
.ag-related__error[hidden] {
    display: none;
}

.ag-related__end p,
.ag-related__error p {
    margin: 0;
}

body.theater-mode .ag-watch__side,
body.theater-mode .ag-watch .cat-strip--videos {
    display: none;
}

body.theater-mode .ag-watch__main {
    max-width: none;
}

/* ===== Afterglow — Ortak VideoCard ===== */
.card__thumb {
    border-color: var(--ag-line);
}

.card:hover .card__thumb {
    border-color: var(--ag-line-strong);
    box-shadow: none;
}

.card:hover .card__thumb:not(.is-previewing) img {
    transform: scale(1.03);
}

.card__shine {
    display: none;
}

.card__dur {
    right: 6px;
    bottom: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .75);
    backdrop-filter: none;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.card__hd {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .75);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}

.card__title-link h3,
.card__body h3 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ag-fg);
}

.card:hover .card__title-link h3,
.card:hover .card__body h3 {
    color: var(--ag-fg);
}

.card__meta {
    justify-content: flex-start;
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
    color: var(--ag-muted);
    white-space: nowrap;
    overflow: hidden;
}

.card__meta-date {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ag-watch__side .ag-ad {
    margin-inline: auto;
}