/* TubeSite Pro - Main Stylesheet */

/* ================================================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ================================================================ */
:root {
    /* Colors - Background */
    --color-bg-primary: #0f1014;
    --color-bg-secondary: #1a1d29;
    --color-bg-tertiary: #2d3142;
    --color-bg-elevated: #252836;
    --color-bg-dark: #080912;
    --color-bg-surface: #0d0f1a;

    /* Colors - Text */
    --color-text-primary: #e5e7eb;
    --color-text-secondary: #9ca3af;
    --color-text-muted: #6b7280;
    --color-text-white: #fff;

    /* Colors - Accent */
    --color-accent: #ef4444;
    --color-accent-hover: #dc2626;
    --color-accent-light: rgba(239, 68, 68, 0.15);
    --color-accent-glow: rgba(239, 68, 68, 0.35);
    --color-gold: #f4b400;
    --color-purple: #8b5cf6;
    --color-blue: #3b82f6;
    --color-green: #10b981;

    /* Colors - Border */
    --color-border: #2d3142;
    --color-border-light: rgba(255, 255, 255, 0.08);
    --color-border-hover: #3d4152;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 0.9rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.35rem;
    --font-size-2xl: 1.75rem;
    --font-size-3xl: 2.5rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 999px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(239, 68, 68, 0.2);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

    /* Z-index layers */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-header: 1000;
    --z-overlay: 5000;
    --z-modal: 9000;
    --z-toast: 9999;

    /* Layout */
    --container-max: 1400px;
    --header-height: 110px;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

/* Push footer to bottom */
main, .site-main {
    flex: 1;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

/* Focus visible styles for accessibility */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Skip to content for screen readers */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-accent);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    z-index: calc(var(--z-toast) + 1);
    font-weight: 600;
    transition: top var(--transition-fast);
}

.skip-to-content:focus {
    top: 0;
}

/* Selection styling */
::selection {
    background: var(--color-accent);
    color: #fff;
}

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

.preview-video::-webkit-media-controls {
    display: none !important;
}

/* Specific kontrolleri tek tek gizle */
.preview-video::-webkit-media-controls-panel {
    display: none !important;
}

.preview-video::-webkit-media-controls-play-button,
.preview-video::-webkit-media-controls-volume-slider,
.preview-video::-webkit-media-controls-mute-button,
.preview-video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

/* Firefox için */
video::-moz-media-controls {
    display: none !important;
}

/* Container */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* ================================================================
   HEADER — Unified Professional Design
   ================================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: rgba(17, 19, 28, 0.88);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), background 0.3s ease, box-shadow 0.3s ease;
}

/* ---- Main Bar: Logo / Search / Actions ---- */
.header-main {
    padding: 0.6rem 0;
}

.header-main__inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

/* Logo */
.site-logo-wrap {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    flex-shrink: 0;
}

.site-logo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: #fff;
    white-space: nowrap;
}

.site-logo__icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.site-logo:hover .site-logo__icon {
    transform: rotate(-8deg) scale(1.08);
}

.site-logo__text {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #fff 30%, rgba(255,255,255,0.7));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Search */
.header-search {
    flex: 1;
    max-width: 560px;
    margin: 0 auto;
}

.search-form {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.32);
    font-size: 13px;
    pointer-events: none;
    transition: color 0.2s ease;
    z-index: 1;
}

.search-input {
    width: 100%;
    height: 40px;
    padding: 0 3.5rem 0 2.4rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid transparent;
    border-radius: 10px;
    color: #fff;
    font-size: 0.875rem;
    transition: all 0.25s ease;
}

.search-input::placeholder {
    color: rgba(255,255,255,0.35);
}

.search-input:focus {
    outline: none;
    background: rgba(255,255,255,0.1);
    border-color: rgba(139,92,246,0.5);
    box-shadow: 0 0 0 3px rgba(139,92,246,0.12);
}

.search-input:focus + .search-shortcut {
    opacity: 0;
}

.search-form:focus-within .search-icon {
    color: var(--color-primary);
}

.search-shortcut {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-family: inherit;
    color: rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 5px;
    padding: 2px 6px;
    pointer-events: none;
    line-height: 1.3;
    transition: opacity 0.2s ease;
}

/* Header Actions */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.header-actions__account {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1rem;
    font-size: 0.825rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, var(--color-primary), #7c3aed);
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(139,92,246,0.25);
}

.header-actions__account:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(139,92,246,0.4);
    filter: brightness(1.1);
}

.header-actions__account i {
    font-size: 14px;
}

/* Burger — animated CSS lines */
.header-actions__burger {
    display: none;  /* shown via media query */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease;
}

.header-actions__burger:hover {
    background: rgba(255,255,255,0.1);
}

.burger-line {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    transform-origin: center;
}

.header-actions__burger.is-active .burger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.header-actions__burger.is-active .burger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.header-actions__burger.is-active .burger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---- Navigation Bar ---- */
.header-nav {
    background: rgba(0,0,0,0.18);
}

.main-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0.35rem 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.main-nav::-webkit-scrollbar {
    display: none;
}

.main-nav a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    border-radius: 7px;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s ease, background 0.2s ease;
}

.main-nav a:hover {
    color: #fff;
    background: rgba(255,255,255,0.07);
}

.main-nav a.active {
    color: #fff;
    background: rgba(139,92,246,0.15);
}

.main-nav a.active::after {
    content: '';
    position: absolute;
    bottom: -0.35rem;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    background: var(--color-primary);
    border-radius: 2px;
}

.main-nav a.current-menu-item,
.main-nav a[aria-current="page"] {
    color: #fff;
    background: rgba(139,92,246,0.15);
}

.main-nav a i {
    font-size: 0.75rem;
    opacity: 0.7;
}

.main-nav a:hover i {
    opacity: 1;
}

.main-nav a.active i {
    opacity: 1;
    color: var(--color-primary);
}

/* Mobile Nav Elements - Hidden on Desktop */
.mobile-nav-overlay,
.mobile-nav-header,
.mobile-nav-footer {
    display: none;
}

.videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}

/* Model tiles inside videos-grid (search results) */
.videos-grid .model-tile {
    height: 100%;
}

.videos-grid .model-tile__thumb {
    aspect-ratio: 16 / 9;
}

.video-card {
    position: relative;
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
    cursor: pointer;
    border: 1px solid transparent;
    will-change: transform;
}

/* Stretched link — title <a> covers entire card */
.video-card__link {
    color: inherit;
    text-decoration: none;
}

.video-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.video-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-border-light);
}

.video-card .thumbnail-wrapper {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background-color: #2d3142;
}

.video-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #2d3142 0%, #1a1d29 100%);
}

.video-card__placeholder i {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.1);
}

.video-card .thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s, opacity 0.3s;
}

.video-card .preview-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

/* Hide video controls on preview video */
.video-card .preview-video::-webkit-media-controls {
    display: none !important;
}

.video-card .preview-video::-webkit-media-controls-enclosure {
    display: none !important;
}

.video-card .preview-video::-webkit-media-controls-panel {
    display: none !important;
}

.video-card.previewing .thumbnail-image {
    opacity: 0;
}

.video-card.previewing .preview-video {
    opacity: 1;
}

/* YouTube Preview Animation */
.video-card .youtube-preview-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: none;
}

.video-card .youtube-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.2s ease;
}

.video-card:hover .thumbnail-image {
    transform: scale(1.05);
}

.video-card.previewing:hover .thumbnail-image {
    transform: none;
}

.video-card .thumbnail-wrapper img:not(.thumbnail-image):not(.preview-video):not(.model-avatar):not(.youtube-preview-img) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.video-card:hover .thumbnail-wrapper img:not(.thumbnail-image):not(.preview-video):not(.model-avatar):not(.youtube-preview-img) {
    transform: scale(1.05);
}

.video-card .duration {
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    background-color: rgba(0, 0, 0, 0.85);
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    backdrop-filter: blur(4px);
}

.video-card .quality {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background-color: var(--color-accent);
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.video-card .play-overlay {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    left: auto;
    bottom: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 2;
    text-decoration: none;
}

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

.video-card .play-button {
    width: 36px;
    height: 36px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-smooth);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.video-card:hover .play-button {
    transform: scale(1.1);
    background-color: var(--color-accent);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.video-card .play-button i {
    font-size: 0.8rem;
    margin-left: 2px;
}

.video-card .info {
    padding: var(--space-3);
}

.video-card h3 {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: var(--space-2);
    line-height: 1.4;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--transition-fast);
}

.video-card:hover h3 {
    color: var(--color-text-white);
}

.video-card .models {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.video-card .models .model-avatar {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px;
    max-width: 24px;
    min-height: 24px;
    max-height: 24px;
    border-radius: 50%;
    border: 2px solid var(--color-accent);
    object-fit: cover;
    flex-shrink: 0;
}

.video-card .models .model-avatar-placeholder {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #ef4444;
    background: linear-gradient(135deg, #1f2937, #374151);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    font-size: 10px;
    flex-shrink: 0;
}

/* ================================================================
   ACCOUNT PAGE - Auth & Dashboard
   ================================================================ */

/* ---- Toast notification ---- */
.acc-toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 0.85rem 1.5rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    animation: accToastIn .4s ease forwards;
    max-width: 90vw;
}
@keyframes accToastIn {
    from { opacity:0; transform:translateX(-50%) translateY(-20px); }
    to   { opacity:1; transform:translateX(-50%) translateY(0); }
}
.acc-toast--success {
    background: rgba(16,185,129,.15);
    border: 1px solid rgba(16,185,129,.3);
    color: #4ade80;
}
.acc-toast--error {
    background: rgba(239,68,68,.15);
    border: 1px solid rgba(239,68,68,.3);
    color: #f87171;
}

/* ---- Page wrapper ---- */
.acc-page {
    flex: 1;
    background: #080912;
}

/* ================================================================
   AUTH - Split Panel (Not Logged In)
   ================================================================ */
.acc-auth {
    display: flex;
    min-height: calc(100vh - 200px);
    min-height: calc(100dvh - 200px);
}

/* Left brand panel */
.acc-auth__brand {
    position: relative;
    width: 42%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(160deg, #0f1128 0%, #1a103a 50%, #0f1128 100%);
}
.acc-auth__brand-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 600px 600px at 30% 20%, rgba(239,68,68,.12) 0%, transparent 70%),
        radial-gradient(ellipse 400px 400px at 70% 80%, rgba(76,110,245,.1) 0%, transparent 70%);
    animation: accBrandPulse 8s ease-in-out infinite alternate;
}
@keyframes accBrandPulse {
    0%   { opacity: .6; }
    100% { opacity: 1; }
}
.acc-auth__brand-inner {
    position: relative;
    z-index: 2;
    padding: 3rem 2.5rem;
    max-width: 380px;
}
.acc-auth__logo {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 30px rgba(239,68,68,.35);
}
.acc-auth__brand-inner h1 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: .5rem;
    background: linear-gradient(135deg, #fff 0%, #c7cbe0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.acc-auth__brand-inner > p {
    color: #7c82a6;
    font-size: .95rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}
.acc-auth__perks {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
.acc-auth__perks li {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .9rem;
    color: #a5aac8;
}
.acc-auth__perks li i {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255,255,255,.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    color: #ef4444;
    flex-shrink: 0;
}

/* Right form panel */
.acc-auth__panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem 2rem;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
}

/* Auth tabs */
.acc-auth__tabs {
    display: flex;
    width: 100%;
    background: rgba(255,255,255,.04);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 2rem;
    border: 1px solid rgba(255,255,255,.06);
}
.acc-auth__tab {
    flex: 1;
    text-align: center;
    padding: .7rem 1rem;
    border-radius: 9px;
    font-weight: 600;
    font-size: .9rem;
    color: #7c82a6;
    transition: all .25s ease;
    text-decoration: none;
}
.acc-auth__tab:hover {
    color: #c5c9e0;
}
.acc-auth__tab--active {
    background: rgba(239,68,68,.12);
    color: #ef4444;
    box-shadow: 0 2px 12px rgba(239,68,68,.15);
}

/* Auth header */
.acc-auth__header {
    width: 100%;
    margin-bottom: 1.75rem;
}
.acc-auth__header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: .35rem;
    color: #f5f6ff;
}
.acc-auth__header p {
    color: #7c82a6;
    font-size: .95rem;
}
.acc-auth__header--icon {
    text-align: center;
}
.acc-auth__header-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(239,68,68,.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #ef4444;
    margin-bottom: 1rem;
}

/* Auth footer links */
.acc-auth__footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: .9rem;
    color: #6b7190;
    width: 100%;
}
.acc-auth__footer a {
    color: #ef4444;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s;
}
.acc-auth__footer a:hover {
    color: #f87171;
}
.acc-auth__footer a i {
    margin-right: .3rem;
}

/* ================================================================
   Shared Form Styles
   ================================================================ */
.acc-form {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    width: 100%;
}

/* Input group with icon */
.acc-input-group {
    position: relative;
    width: 100%;
}
.acc-input-group i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .9rem;
    color: #4a4f6e;
    pointer-events: none;
    transition: color .2s;
}
.acc-input-group input {
    width: 100%;
    padding: .9rem 1rem .9rem 2.75rem;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.07);
    background: #0a0c18;
    color: #f5f6ff;
    font-size: .95rem;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}
.acc-input-group input:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}
.acc-input-group:focus-within i {
    color: #ef4444;
}

/* Form row (remember me + forgot) */
.acc-form__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}
.acc-form__forgot {
    font-size: .85rem;
    color: #7c82a6;
    text-decoration: none;
    transition: color .2s;
}
.acc-form__forgot:hover {
    color: #ef4444;
}

/* Custom checkbox */
.acc-checkbox {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    font-size: .9rem;
    color: #9ca3c9;
}
.acc-checkbox input {
    display: none;
}
.acc-checkbox__mark {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 2px solid rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    flex-shrink: 0;
}
.acc-checkbox input:checked ~ .acc-checkbox__mark {
    background: #ef4444;
    border-color: #ef4444;
}
.acc-checkbox input:checked ~ .acc-checkbox__mark::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .6rem;
    color: #fff;
}

/* Buttons */
.acc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .85rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: .95rem;
    border: none;
    cursor: pointer;
    transition: all .25s ease;
    text-decoration: none;
    line-height: 1.4;
}
.acc-btn--primary {
    width: 100%;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    box-shadow: 0 4px 20px rgba(239,68,68,.3);
}
.acc-btn--primary:hover {
    box-shadow: 0 6px 30px rgba(239,68,68,.45);
    transform: translateY(-1px);
}
.acc-btn--secondary {
    background: rgba(255,255,255,.06);
    color: #d5d8ef;
    border: 1px solid rgba(255,255,255,.08);
}
.acc-btn--secondary:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.15);
}
.acc-btn--outline {
    background: transparent;
    color: #ef4444;
    border: 1px solid rgba(239,68,68,.3);
}
.acc-btn--outline:hover {
    background: rgba(239,68,68,.08);
    border-color: rgba(239,68,68,.5);
}
.acc-btn--gold {
    background: linear-gradient(135deg, #f4b400 0%, #f59e0b 100%);
    color: #000;
    box-shadow: 0 4px 20px rgba(244,180,0,.3);
}
.acc-btn--gold:hover {
    box-shadow: 0 6px 30px rgba(244,180,0,.45);
    transform: translateY(-1px);
}
.acc-btn--danger {
    background: rgba(239,68,68,.1);
    color: #f87171;
    border: 1px solid rgba(239,68,68,.2);
}
.acc-btn--danger:hover {
    background: rgba(239,68,68,.18);
    border-color: rgba(239,68,68,.35);
}

/* ================================================================
   DASHBOARD - Logged-In
   ================================================================ */
.acc-dash {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Profile Hero */
.acc-hero {
    border-radius: 20px;
    background: linear-gradient(135deg, #131640 0%, #0d0f1a 100%);
    background-size: cover;
    background-position: center;
    overflow: visible;
    border: 1px solid rgba(255,255,255,.06);
    position: relative;
}
.acc-hero__overlay {
    padding: 2rem;
    background: rgba(8,9,18,.85);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
    backdrop-filter: blur(10px);
    border-radius: 20px;
}
.acc-hero__main {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex: 1;
    min-width: 0;
}

/* -- Avatar upload in hero -- */
.acc-hero__avatar-wrap {
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 50%;
    width: auto;
    height: auto;
    border: none;
    background: none;
    overflow: visible;
}
.acc-hero__avatar-wrap input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 3;
    border-radius: 50%;
}
.acc-hero__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #ef4444;
    box-shadow: 0 0 20px rgba(239,68,68,.25);
    flex-shrink: 0;
    display: block;
    transition: filter .2s;
}
.acc-hero__avatar-wrap:hover .acc-hero__avatar {
    filter: brightness(.6);
}
.acc-hero__avatar-edit {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #8b5cf6;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    pointer-events: none;
    border: 2px solid #0d0f1a;
    transition: background .2s;
}
.acc-hero__avatar-wrap:hover .acc-hero__avatar-edit {
    background: #a78bfa;
}
.acc-hero__avatar-edit i {
    font-size: .6rem;
    color: #fff;
}
.acc-hero__avatar-wrap > .acc-img-upload__status {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: .68rem;
    text-align: center;
    z-index: 5;
}

/* -- Cover upload button (top-right) -- */
.acc-hero__cover-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .75rem;
    border-radius: 8px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity .25s, background .2s;
    width: auto;
    height: auto;
    border: 1px solid rgba(255,255,255,.1);
    overflow: visible;
}
.acc-hero:hover .acc-hero__cover-btn {
    opacity: 1;
}
.acc-hero__cover-btn i {
    font-size: .75rem;
    color: #fff;
}
.acc-hero__cover-btn > span {
    font-size: .72rem;
    color: rgba(255,255,255,.85);
    font-weight: 500;
}
.acc-hero__cover-btn input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 11;
}
.acc-hero__cover-btn:hover {
    background: rgba(139,92,246,.5);
}
.acc-hero__cover-btn > .acc-img-upload__status {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    white-space: nowrap;
    font-size: .68rem;
    text-align: right;
}
.acc-hero__text {
    min-width: 0;
    flex: 1;
}
.acc-hero__name-row {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
    margin-bottom: .25rem;
}
.acc-hero__name-row h1 {
    font-size: 1.35rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
}
.acc-vip-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .65rem;
    border-radius: 6px;
    background: linear-gradient(135deg, #f4b400 0%, #f59e0b 100%);
    color: #000;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.acc-hero__bio {
    color: #9ca3c9;
    font-size: .9rem;
    margin-bottom: .5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.acc-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    font-size: .82rem;
    color: #6b7190;
}
.acc-hero__meta i {
    margin-right: .25rem;
    opacity: .7;
}
.acc-hero__meta--vip {
    color: #f4b400;
}
.acc-hero__upgrade {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem 1.25rem;
    border-radius: 10px;
    background: linear-gradient(135deg, #f4b400 0%, #f59e0b 100%);
    color: #000;
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
    white-space: nowrap;
    transition: all .25s;
    box-shadow: 0 4px 15px rgba(244,180,0,.3);
}
.acc-hero__upgrade:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(244,180,0,.45);
}

/* Tab Navigation */
.acc-nav {
    display: flex;
    gap: .35rem;
    background: rgba(255,255,255,.03);
    border-radius: 14px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,.05);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.acc-nav__btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .7rem 1rem;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: #6b7190;
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
    transition: all .25s ease;
    white-space: nowrap;
}
.acc-nav__btn:hover {
    color: #c5c9e0;
    background: rgba(255,255,255,.04);
}
.acc-nav__btn--active {
    background: rgba(239,68,68,.1);
    color: #ef4444;
    box-shadow: 0 2px 10px rgba(239,68,68,.12);
}
.acc-nav__btn i {
    font-size: .85rem;
}

/* Tab Panels */
.acc-panel {
    display: none;
}
.acc-panel--active {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    animation: accFadeIn .3s ease;
}
@keyframes accFadeIn {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Cards */
.acc-card {
    background: #0d0f1a;
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid rgba(255,255,255,.06);
}
.acc-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.acc-card__head h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #e4e7f5;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
}
.acc-card__head h2 i {
    font-size: .95rem;
    color: #ef4444;
}
.acc-card__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(239,68,68,.1);
    color: #ef4444;
    font-size: .8rem;
    font-weight: 700;
    padding: 0 .4rem;
}
.acc-card--danger-zone {
    border-color: rgba(239,68,68,.12);
}

/* Grid form */
.acc-form--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .9rem;
}
.acc-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.acc-field--full {
    grid-column: 1 / -1;
}
.acc-field label {
    font-size: .85rem;
    font-weight: 600;
    color: #9ca3c9;
}
.acc-field input,
.acc-field textarea,
.acc-field select {
    width: 100%;
    padding: .8rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.07);
    background: #080912;
    color: #f5f6ff;
    font-size: .9rem;
    transition: border-color .2s, box-shadow .2s;
    outline: none;
}
.acc-field input:focus,
.acc-field textarea:focus,
.acc-field select:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239,68,68,.08);
}

/* File upload */
.acc-file-upload {
    position: relative;
    border: 2px dashed rgba(255,255,255,.08);
    border-radius: 10px;
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: all .25s;
    background: rgba(255,255,255,.02);
}
.acc-file-upload:hover {
    border-color: rgba(239,68,68,.3);
    background: rgba(239,68,68,.03);
}
.acc-file-upload i {
    font-size: 1.2rem;
    color: #4a4f6e;
    display: block;
    margin-bottom: .4rem;
}
.acc-file-upload span {
    font-size: .82rem;
    color: #6b7190;
}
.acc-file-upload input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.acc-file-upload--has-file {
    border-color: rgba(16,185,129,.3);
    background: rgba(16,185,129,.04);
}
.acc-file-upload--has-file i {
    color: #10b981;
}
.acc-file-upload--has-file span {
    color: #4ade80;
}

/* Upload status & loading (shared) */
.acc-img-upload--loading {
    pointer-events: none;
}
.acc-upload-loading { color: #a78bfa; }
.acc-upload-ok      { color: #4ade80; }
.acc-upload-err     { color: #f87171; }

/* Toggle switch */
.acc-toggle-row {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    padding: .75rem 0;
}
.acc-toggle-row + .acc-toggle-row {
    border-top: 1px solid rgba(255,255,255,.05);
}
.acc-toggle {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    cursor: pointer;
}
.acc-toggle input {
    display: none;
}
.acc-toggle__track {
    display: block;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: rgba(255,255,255,.1);
    transition: background .25s;
    position: relative;
}
.acc-toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: transform .25s;
    box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.acc-toggle input:checked ~ .acc-toggle__track {
    background: #ef4444;
}
.acc-toggle input:checked ~ .acc-toggle__track .acc-toggle__thumb {
    transform: translateX(20px);
}
.acc-toggle__text strong {
    display: block;
    font-size: .9rem;
    color: #e4e7f5;
    margin-bottom: .15rem;
}
.acc-toggle__text p {
    font-size: .82rem;
    color: #6b7190;
    margin: 0;
}

/* Playlist list */
.acc-playlist-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
}
.acc-playlist-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
    gap: .5rem;
}
.acc-playlist-item:last-child {
    border-bottom: none;
}
.acc-playlist-item__left {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-width: 0;
}
.acc-playlist-item__left i {
    font-size: .8rem;
    color: #4a4f6e;
    flex-shrink: 0;
}
.acc-playlist-item__left a {
    color: #d5d8ef;
    font-weight: 500;
    font-size: .9rem;
    text-decoration: none;
    transition: color .2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.acc-playlist-item__left a:hover {
    color: #ef4444;
}
.acc-playlist-item__right {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-shrink: 0;
}
.acc-playlist-item__date {
    font-size: .78rem;
    color: #4a4f6e;
}

/* Badges */
.acc-badge {
    display: inline-flex;
    align-items: center;
    padding: .15rem .55rem;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 600;
}
.acc-badge--public {
    background: rgba(16,185,129,.1);
    color: #34d399;
}
.acc-badge--private {
    background: rgba(239,68,68,.1);
    color: #f87171;
}

/* Channels grid */
.acc-channels-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: .75rem;
}
.acc-channel-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .5rem;
    padding: 1rem .75rem;
    border-radius: 12px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.05);
    transition: all .2s;
    text-decoration: none;
}
.acc-channel-card:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
    transform: translateY(-2px);
}
.acc-channel-card__logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    overflow: hidden;
    background: #1a1d2e;
    display: flex;
    align-items: center;
    justify-content: center;
}
.acc-channel-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.acc-channel-card__logo span {
    font-size: 1.1rem;
    font-weight: 700;
    color: #6b7190;
}
.acc-channel-card h4 {
    font-size: .82rem;
    font-weight: 600;
    color: #e4e7f5;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.acc-channel-card__count {
    font-size: .72rem;
    color: #6b7190;
}

/* Empty state */
.acc-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: #4a4f6e;
}
.acc-empty i {
    font-size: 2rem;
    margin-bottom: .75rem;
    display: block;
    opacity: .5;
}
.acc-empty p {
    font-size: .9rem;
    margin-bottom: 1rem;
}

/* VIP Active Card */
.acc-vip-active {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}
.acc-vip-active__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem;
}
.acc-vip-active__badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .85rem;
    border-radius: 8px;
    background: rgba(16,185,129,.12);
    color: #4ade80;
    font-weight: 700;
    font-size: .8rem;
}
.acc-vip-active__plan-name {
    font-size: .8rem;
    color: #f4b400;
    font-weight: 600;
    background: rgba(244,180,0,.1);
    padding: .25rem .65rem;
    border-radius: 6px;
}
.acc-vip-active__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.acc-vip-active__detail {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem;
    border-radius: 10px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.06);
}
.acc-vip-active__detail > i {
    font-size: 1rem;
    color: #8b5cf6;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.acc-vip-active__detail span {
    display: block;
    font-size: .72rem;
    color: #6b7190;
    margin-bottom: .1rem;
}
.acc-vip-active__detail strong {
    display: block;
    font-size: .88rem;
    color: #e5e7f0;
}
.acc-vip-active__perks {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.acc-vip-active__perk {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: #9ca3c9;
}
.acc-vip-active__perk i {
    color: #4ade80;
    font-size: .7rem;
}
.acc-vip-active__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    padding-top: .35rem;
}
@media (max-width: 640px) {
    .acc-vip-active__details {
        grid-template-columns: 1fr;
    }
    .acc-vip-active__actions {
        flex-direction: column;
    }
    .acc-vip-active__actions .acc-btn {
        width: 100%;
        justify-content: center;
    }
}

/* VIP Promo (not subscribed) */
.acc-vip-promo {
    text-align: center;
    padding: 1.5rem;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(244,180,0,.06) 0%, rgba(245,158,11,.03) 100%);
    border: 1px solid rgba(244,180,0,.15);
}
.acc-vip-promo__icon {
    font-size: 2rem;
    color: #f4b400;
    margin-bottom: .75rem;
}
.acc-vip-promo h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f5f6ff;
    margin-bottom: .35rem;
}
.acc-vip-promo p {
    color: #7c82a6;
    font-size: .88rem;
    margin-bottom: 1.25rem;
}

/* ---- Responsive: Account ---- */
@media (max-width: 900px) {
    .acc-auth {
        flex-direction: column;
    }
    .acc-auth__brand {
        width: 100%;
        padding: 2rem 1.5rem;
    }
    .acc-auth__brand-inner {
        padding: 0;
        max-width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .acc-auth__perks {
        display: none;
    }
    .acc-auth__panel {
        padding: 2rem 1.5rem;
    }
}
@media (max-width: 640px) {
    .acc-auth__brand-inner h1 {
        font-size: 1.3rem;
    }
    .acc-auth__brand-inner > p {
        font-size: .85rem;
    }
    .acc-auth__header h2 {
        font-size: 1.25rem;
    }
    .acc-hero__overlay {
        padding: 1.25rem;
        flex-direction: column;
        align-items: flex-start;
    }
    .acc-hero__main {
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
    }
    .acc-hero__name-row {
        justify-content: center;
    }
    .acc-hero__meta {
        justify-content: center;
    }
    .acc-hero__upgrade {
        width: 100%;
        justify-content: center;
    }
    .acc-hero__avatar {
        width: 64px;
        height: 64px;
    }
    .acc-hero__cover-btn {
        opacity: 1;
        padding: .3rem .55rem;
    }
    .acc-hero__cover-btn > span {
        display: none;
    }
    .acc-hero__avatar-edit {
        width: 22px;
        height: 22px;
    }
    .acc-hero__avatar-edit i {
        font-size: .5rem;
    }
    .acc-nav__btn span {
        display: none;
    }
    .acc-nav__btn {
        padding: .7rem .85rem;
    }
    .acc-nav__btn i {
        font-size: 1rem;
    }
    .acc-form--grid {
        grid-template-columns: 1fr;
    }
    .acc-card {
        padding: 1.15rem;
    }
    .acc-dash {
        padding: 1rem .75rem 3rem;
    }
}


.video-card .model-name {
    font-size: 0.8rem;
    color: #ef4444;
}

.video-card .model-count {
    color: var(--color-text-muted);
}

.video-card .meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.75rem;
    color: #9ca3af;
}

.video-card .tags,
.video-card__tags {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.5rem 0.6rem;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease;
    z-index: 5;
    pointer-events: none;
}

/* Tags sit above the stretched link so they're independently clickable */
.video-card__tags .tag {
    position: relative;
    z-index: 2;
}

.video-card:hover .video-card__tags,
.video-card:hover .tags {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.video-card .tag,
.video-card__tags .tag {
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
    white-space: nowrap;
}

.video-card__tags a.tag:hover {
    color: #fff;
    background: rgba(139, 92, 246, 0.35);
}

/* Filter Bar */
.filter-bar {
    background-color: var(--color-bg-secondary);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
    border: 1px solid var(--color-border-light);
}

.filter-bar label {
    font-size: 0.9rem;
    color: #9ca3af;
}

.filter-bar select,
.filter-bar input[type="search"],
.filter-bar input[type="text"] {
    padding: 0.6rem 1rem;
    background-color: #2d3142;
    border: 1px solid #3d4152;
    border-radius: 8px;
    color: #e5e7eb;
    font-size: 0.9rem;
    cursor: pointer;
}

.filter-bar select:focus,
.filter-bar input[type="search"]:focus,
.filter-bar input[type="text"]:focus {
    outline: none;
    border-color: #3b82f6;
}

.filter-bar input[type="search"]::placeholder,
.filter-bar input[type="text"]::placeholder {
    color: #6b7280;
}

.filter-bar .results-count {
    margin-left: auto;
    font-size: 0.9rem;
    color: #9ca3af;
}

.filter-bar .results-count strong {
    color: #fff;
}

/* Page Header */
.page-header {
    margin-bottom: 2rem;
}

.page-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* Footer */
.site-footer {
    background-color: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    padding: var(--space-12) 0 var(--space-6);
    margin-top: var(--space-12);
    position: relative;
}

.acc-page + .site-footer,
.page-template-page-account .site-footer {
    margin-top: 0;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
    opacity: 0.3;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.footer-section h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-4);
    color: var(--color-text-white);
    font-weight: 700;
}

.footer-description {
    color: var(--color-text-secondary);
    line-height: 1.7;
    font-size: var(--font-size-sm);
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: var(--space-2);
}

.footer-section ul li a {
    color: var(--color-text-secondary);
    transition: all var(--transition-base);
    font-size: var(--font-size-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.footer-section ul li a:hover {
    color: var(--color-text-white);
    transform: translateX(4px);
}

.footer-section ul li a::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--color-accent);
    border-radius: 50%;
    opacity: 0;
    transition: opacity var(--transition-fast);
    flex-shrink: 0;
}

.footer-section ul li a:hover::before {
    opacity: 1;
}

.social-links {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-4);
}

.social-links a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    transition: all var(--transition-base);
    border: 1px solid transparent;
}

.social-links a:hover {
    background: var(--color-accent-light);
    color: var(--color-accent);
    border-color: rgba(239, 68, 68, 0.3);
    transform: translateY(-2px);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border-light);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.footer-bottom__tagline {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    opacity: 0.85;
}

.footer-keywords {
    margin-bottom: var(--space-8);
    padding: var(--space-6) 0;
    border-top: 1px solid var(--color-border);
}

.footer-keywords h3 {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-4);
    color: var(--color-text-white);
    font-weight: 700;
}

.footer-keywords__cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.65rem;
}

.footer-keywords__cloud a {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.footer-keywords__cloud a:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
    background: rgba(239, 68, 68, 0.08);
}

.page-header__desc {
    margin-top: 0.5rem;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    max-width: 52rem;
}

/* Premium Content Lock Styles */
.premium-content-lock {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 480px;
    background-color: #000;
    overflow: hidden;
    border-radius: 12px;
}

.lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.blur-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(20px);
    transform: scale(1.1);
    opacity: 0.6;
    z-index: 1;
}

.lock-content {
    position: relative;
    z-index: 20;
    text-align: center;
    padding: 2rem;
    max-width: 600px;
}

.lock-icon {
    font-size: 4rem;
    color: #f4b400;
    margin-bottom: 1.5rem;
    animation: pulse 2s infinite;
}

.lock-content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.lock-content p {
    font-size: 1.1rem;
    color: #e5e7eb;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.lock-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.pricing-preview {
    font-size: 1.1rem;
    color: #f4b400;
}

/* Premium Blur for Video Cards */
.video-card.premium-blur .thumbnail-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 4;
}

.video-card.premium-blur .thumbnail-image {
    filter: blur(5px);
}

/* Ensure the premium icon is above the blur */
.video-card__premium {
    z-index: 5 !important;
}

.video-card.premium-blur .lock-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    color: #f4b400;
    font-size: 3rem;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    opacity: 0.9;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}


.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: #9ca3af;
    transition: color 0.3s;
}

.footer-section a:hover {
    color: #ef4444;
}

.social-links {
    display: flex;
    gap: 1rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    background-color: #2d3142;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.social-links a:hover {
    background-color: #ef4444;
    transform: translateY(-2px);
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid #2d3142;
    color: #6b7280;
    font-size: 0.9rem;
}

/* Loading & Empty States */
.loading-indicator,
.no-more-videos,
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}



/* Homepage Hero SEO Section */
.homepage-hero {
    position: relative;
    text-align: center;
    padding: 2.5rem 1.5rem 2rem;
    margin-bottom: 1.5rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(88, 28, 235, 0.04) 50%, rgba(139, 92, 246, 0.06) 100%);
    border: 1px solid rgba(139, 92, 246, 0.12);
    overflow: hidden;
}

/* Decorative background orbs */
.homepage-hero__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.homepage-hero__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
}

.homepage-hero__orb--1 {
    width: 300px;
    height: 300px;
    background: rgba(139, 92, 246, 0.25);
    top: -100px;
    left: -60px;
    animation: hero-orb-float 8s ease-in-out infinite;
}

.homepage-hero__orb--2 {
    width: 250px;
    height: 250px;
    background: rgba(168, 85, 247, 0.2);
    bottom: -80px;
    right: -40px;
    animation: hero-orb-float 8s ease-in-out infinite reverse;
}

@keyframes hero-orb-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -15px) scale(1.1); }
}

.homepage-hero__content {
    position: relative;
    z-index: 1;
}

/* Eyebrow label */
.homepage-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary, #8b5cf6);
    background: rgba(139, 92, 246, 0.12);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    margin-bottom: 1rem;
}

.homepage-hero__eyebrow i {
    font-size: 0.65rem;
}

.homepage-hero__title {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, #fff 0%, #c4b5fd 40%, #a78bfa 60%, #fff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: hero-title-shine 4s linear infinite;
}

@keyframes hero-title-shine {
    to { background-position: 200% center; }
}

.homepage-hero__desc {
    font-size: 1rem;
    color: #9ca3af;
    max-width: 800px;
    margin: 0 auto 1.75rem;
    line-height: 1.7;
}

.homepage-hero__desc strong {
    color: #c4b5fd;
    font-weight: 600;
}

/* ---- Hero Cards (replaces .pro-banner) ---- */
.hero-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    max-width: 640px;
    margin: 0 auto;
}

.hero-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(139, 92, 246, 0.15);
    background: rgba(139, 92, 246, 0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.hero-card:hover {
    border-color: rgba(139, 92, 246, 0.35);
    background: rgba(139, 92, 246, 0.12);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
}

/* Icon */
.hero-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.hero-card:hover .hero-card__icon {
    transform: scale(1.08);
}

.hero-card__icon i {
    font-size: 1.1rem;
    color: #fff;
}

/* Domain icon */
.hero-card--domain .hero-card__icon {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Telegram icon */
.hero-card--telegram .hero-card__icon {
    background: linear-gradient(135deg, #0088cc 0%, #0077b5 100%);
    box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3);
}

/* Pulse animation for telegram */
.hero-card__icon--pulse {
    animation: hero-icon-pulse 2.5s ease-in-out infinite;
}

@keyframes hero-icon-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(0, 136, 204, 0.3); }
    50% { transform: scale(1.06); box-shadow: 0 6px 20px rgba(0, 136, 204, 0.45); }
}

/* Body text */
.hero-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    flex: 1;
    text-align: left;
}

.hero-card__label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    width: fit-content;
}

.hero-card--domain .hero-card__label {
    color: #c4b5fd;
    background: rgba(139, 92, 246, 0.15);
}

.hero-card--telegram .hero-card__label {
    color: #fff;
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    animation: hero-badge-pulse 2s ease-in-out infinite;
}

@keyframes hero-badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.hero-card__value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Arrow */
.hero-card__arrow {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.hero-card:hover .hero-card__arrow {
    color: var(--color-primary, #8b5cf6);
    transform: translateX(3px);
}

/* Responsive */
@media (max-width: 768px) {
    .homepage-hero {
        padding: 1.75rem 1rem 1.5rem;
        border-radius: 12px;
        margin-bottom: 1rem;
    }

    .homepage-hero__eyebrow {
        font-size: 0.6rem;
    }

    .homepage-hero__title {
        font-size: 1.3rem;
    }

    .homepage-hero__desc {
        font-size: 0.88rem;
        margin-bottom: 1.25rem;
    }

    .hero-cards {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .hero-card {
        padding: 0.75rem 0.85rem;
    }

    .hero-card__icon {
        width: 36px;
        height: 36px;
    }

    .hero-card__icon i {
        font-size: 1rem;
    }

    .hero-card__value {
        font-size: 0.88rem;
    }
}

/* Section eyebrow */
.section-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    color: #9ca3af;
    margin-bottom: 0.5rem;
}

/* Home benefits */
.home-benefits {
    margin-top: 3rem;
}

.home-benefits__inner {
    background: rgba(17, 19, 32, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 32px;
    padding: 2.5rem;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.home-benefits__inner h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

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

@media (max-width: 768px) {
    .home-benefits__grid {
        grid-template-columns: 1fr;
    }
}

.benefit-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 18px;
    padding: 1.75rem;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.benefit-card__icon {
    min-width: 54px;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: rgba(239, 68, 68, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    font-size: 1.35rem;
    flex-shrink: 0;
}

/* Icon color variants */
.benefit-card__icon--red {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.benefit-card__icon--orange {
    background: rgba(249, 115, 22, 0.15);
    color: #f97316;
}

.benefit-card__icon--blue {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.benefit-card__icon--green {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

.benefit-card h3 {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.benefit-card p {
    color: #9ca3af;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* SEO Text section */
.home-benefits__seo-text {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.home-benefits__seo-text h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: #f3f4f6;
}

.home-benefits__seo-text p {
    color: #9ca3af;
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.home-benefits__seo-text p:last-child {
    margin-bottom: 0;
}

.home-benefits__seo-text strong {
    color: #d1d5db;
    font-weight: 500;
}

/* Home categories pills */
.home-categories {
    margin-top: 2rem;
}

.home-categories__inner {
    background: rgba(17, 18, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 32px;
    padding: 2.5rem;
}

.home-categories__header {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.home-categories__header h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.home-categories__header p {
    color: #9ca3af;
}

.home-categories__cta {
    background-color: #1f2433;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 0.75rem 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #e5e7eb;
    transition: background 0.2s ease, color 0.2s ease;
}

.home-categories__cta:hover {
    background-color: #ef4444;
    color: #fff;
}

.home-category-pills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.category-pill {
    background-color: #1c1f2d;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.95rem 1.15rem;
    border-radius: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    color: #e5e7eb;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.category-pill:hover {
    border-color: #ef4444;
    transform: translateY(-1px);
}

.category-pill__name {
    font-size: 0.95rem;
}

.category-pill__count {
    font-size: 0.8rem;
    color: #9ca3af;
}

@media (max-width: 1024px) {
    .home-benefits__inner,
    .home-categories__inner {
        padding: 1.75rem;
    }

    /* Video card mobil optimizasyonu */
    .video-card .info {
        padding: 0.65rem;
    }

    .video-card h3 {
        font-size: 0.8rem;
        line-height: 1.25;
        margin-bottom: 0.4rem;
    }

    .video-card .model-name {
        font-size: 0.75rem;
    }

    .video-card .meta {
        font-size: 0.7rem;
        gap: 0.75rem;
    }

    .video-card .models .model-avatar {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
        max-width: 22px;
        max-height: 22px;
    }
}

@media (max-width: 640px) {

    .home-benefits__inner h2,
    .home-categories__header h2 {
        font-size: 1.5rem;
    }

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

    /* Video card daha fazla mobil optimizasyonu */
    .video-card .info {
        padding: 0.5rem;
    }

    .video-card h3 {
        font-size: 0.75rem;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .video-card .duration,
    .video-card .quality {
        font-size: 0.65rem;
        padding: 0.2rem 0.4rem;
    }
}

/* Extra mobile - Category pills compact */
@media (max-width: 480px) {
    .home-categories {
        padding: 0 12px;
    }

    .home-categories__inner {
        padding: 16px;
        border-radius: 12px;
    }

    .home-categories__header {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 14px;
    }

    .home-categories__header h2 {
        font-size: 1.2rem;
        line-height: 1.3;
    }

    .home-categories__header p {
        font-size: 0.8rem;
        display: none;
        /* Hide description on mobile */
    }

    .home-categories__cta {
        padding: 10px 16px;
        font-size: 0.85rem;
        border-radius: 10px;
        align-self: flex-start;
    }

    .home-category-pills {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .category-pill {
        padding: 10px 12px;
        border-radius: 10px;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .category-pill__name {
        font-size: 0.85rem;
        font-weight: 700;
        word-break: break-word;
    }

    .category-pill__count {
        font-size: 0.7rem;
    }
}

/* Playlist cards */
.playlist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}

.playlist-card {
    background: #15192a;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.playlist-card:hover {
    transform: translateY(-4px);
    border-color: rgba(239, 68, 68, 0.5);
}

.playlist-card__thumb {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
}

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

.playlist-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1c1f2e, #101222);
    color: rgba(255, 255, 255, 0.3);
    font-size: 2rem;
}

.playlist-card__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: rgba(17, 24, 39, 0.75);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
}

.playlist-card__body {
    padding: 1.25rem;
}

.playlist-card__body h3 {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.playlist-card__body p {
    color: #9ca3af;
    font-size: 0.9rem;
    min-height: 40px;
}

.playlist-card__meta {
    margin-top: 0.75rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #9ca3af;
}

/* Playlist hero */
.single-playlist {
    padding-bottom: 3rem;
}

.playlist-hero {
    padding: 1.5rem 0 3rem;
    background: linear-gradient(180deg, rgba(21, 25, 42, 0.8) 0%, transparent 100%);
}

.playlist-breadcrumbs {
    margin-bottom: 1.5rem;
}

.playlist-hero__content {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
}

.playlist-hero__thumb {
    flex-shrink: 0;
    width: 400px;
    aspect-ratio: 16/9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

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

.playlist-hero__thumb .playlist-card__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1e2235 0%, #15192a 100%);
}

.playlist-hero__thumb .playlist-card__placeholder i {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.15);
}

.playlist-hero__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.playlist-hero__info .badge {
    align-self: flex-start;
}

.playlist-hero__info h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.playlist-hero__info>p {
    color: #9ca3af;
    margin: 0;
    line-height: 1.6;
}

.playlist-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-top: 0.5rem;
    color: #9ca3af;
    font-size: 0.9rem;
}

.playlist-hero__meta span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.playlist-owner {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.playlist-owner img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.playlist-owner span {
    color: #fff;
    transition: color 0.2s;
}

.playlist-owner:hover span {
    color: #ef4444;
}

.playlist-videos {
    margin-top: 1rem;
}

.playlist-videos h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.playlist-comments {
    margin: 2rem 0;
    padding: 1.5rem;
    border-radius: 16px;
    background: rgba(21, 25, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.playlist-comments h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #9ca3af;
}

/* Author page */
.author-page {
    background: #080912;
}

.author-hero {
    padding: 4rem 0 3rem;
    background-size: cover;
    background-position: center;
    position: relative;
}

.author-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(8, 9, 18, 0.6), rgba(8, 9, 18, 0.95));
}

.author-hero>.container {
    position: relative;
    z-index: 1;
}

.author-hero__card {
    background: #101223;
    border-radius: 24px;
    padding: 2rem;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4);
}

.author-hero__avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #ef4444;
    object-fit: cover;
    flex-shrink: 0;
}

.author-hero__card h1 {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.author-hero__card>div>p {
    color: #a5a9c6;
    margin-bottom: 0.5rem;
}

.author-hero__meta {
    display: flex;
    gap: 1.25rem;
    margin-top: 0.5rem;
    color: #8b91b0;
    font-size: 0.9rem;
}

.author-hero__meta i {
    margin-right: 0.35rem;
    color: #ef4444;
}

.author-content {
    padding: 2rem 0 4rem;
}

.author-section {
    margin-bottom: 3rem;
}

.author-section .section-header {
    margin-bottom: 1.5rem;
}

.author-section .section-header h2 {
    font-size: 1.35rem;
}

.author-comments {
    background: #101223;
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Reddit-style Comment System */
.ts-comments__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ts-comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ts-comment-list .children {
    list-style: none;
    padding-left: 2rem;
    margin-top: 0.75rem;
    border-left: 2px solid rgba(255, 255, 255, 0.08);
}

.ts-comment {
    margin-bottom: 1rem;
}

.ts-comment__body {
    background: #0d0f18;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    transition: border-color 0.2s ease;
}

.ts-comment__body:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.ts-comment__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.ts-comment__avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.ts-comment__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.ts-comment__author {
    font-weight: 600;
    color: #60a5fa;
}

.ts-comment__author a {
    color: inherit;
    text-decoration: none;
}

.ts-comment__author a:hover {
    text-decoration: underline;
}

.ts-comment__op-badge {
    background: #ef4444;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.ts-comment__date {
    color: #6b7280;
}

.ts-comment__content {
    color: #d1d5db;
    font-size: 0.95rem;
    line-height: 1.65;
}

.ts-comment__content p {
    margin: 0 0 0.75rem;
}

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

.ts-comment__moderation {
    background: #fbbf24;
    color: #78350f;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
}

.ts-comment__footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.ts-comment__reply a,
.ts-comment__edit a {
    color: #9ca3af;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.2s ease;
}

.ts-comment__reply a:hover,
.ts-comment__edit a:hover {
    color: #ef4444;
}

.ts-comments__closed {
    color: #9ca3af;
    font-size: 0.95rem;
    text-align: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}

/* ==========================================
   Modern AJAX Comment System
   ========================================== */

/* Comment Composer */
.ts-comment-composer {
    margin-bottom: 1.5rem;
}

.ts-composer-logged-in {
    display: flex;
    gap: 1rem;
}

.ts-composer-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.ts-composer-main {
    flex: 1;
}

.ts-composer-input-wrap {
    position: relative;
}

.ts-composer-textarea {
    width: 100%;
    background: #0d0f18;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
    color: #fff;
    font-size: 0.95rem;
    font-family: inherit;
    resize: none;
    transition: all 0.2s ease;
    min-height: auto;
}

.ts-composer-textarea:focus {
    outline: none;
    border-color: #ef4444;
    background: #0a0c14;
}

.ts-composer-textarea::placeholder {
    color: #6b7280;
}

.ts-composer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
}

.ts-composer-info {
    color: #9ca3af;
    font-size: 0.85rem;
}

.ts-composer-user {
    color: #60a5fa;
    font-weight: 500;
}

.ts-composer-buttons {
    display: flex;
    gap: 10px;
}

.ts-btn-cancel {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #9ca3af;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ts-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.ts-btn-submit {
    background: #ef4444;
    border: none;
    color: #fff;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.ts-btn-submit:hover:not(:disabled) {
    background: #dc2626;
    transform: translateY(-1px);
}

.ts-btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Guest Notice */
.ts-composer-guest {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1rem 1.25rem;
}

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

.ts-guest-notice i {
    font-size: 1.25rem;
    color: #9ca3af;
}

.ts-guest-notice p {
    color: #9ca3af;
    font-size: 0.9rem;
    margin: 0;
    flex: 1;
}

.ts-btn-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ef4444;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.ts-btn-login:hover {
    background: #dc2626;
}

/* Comments Header */
.ts-comments-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ts-comments-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.ts-comments-title i {
    color: #ef4444;
}

.ts-comments-sort {
    display: flex;
    gap: 6px;
}

.ts-sort-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #9ca3af;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ts-sort-btn:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.ts-sort-btn.active {
    background: #ef4444;
    border-color: #ef4444;
    color: #fff;
}

@media (max-width: 480px) {
    .ts-no-comments {
        text-align: center;
        padding: 1rem 1rem;
        color: #6b7280;
    }

    .ts-comment-composer {
        margin-bottom: 0.5rem;
    }
}

/* No Comments State */
.ts-no-comments {
    text-align: center;
    padding: 3rem 2rem;
    color: #6b7280;
}

.ts-no-comments i {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.ts-no-comments p {
    font-size: 1rem;
    margin: 0;
}

/* Comment Action Buttons */
.ts-comment__action {
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.ts-comment__action:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.ts-comment__action.ts-delete-btn:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

/* Reply Form in Comment */
.ts-reply-form-container {
    margin-top: 0.75rem;
}

.ts-reply-composer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin-top: 0.5rem;
}

.ts-reply-composer .ts-composer-avatar img {
    width: 36px;
    height: 36px;
}

.ts-reply-textarea {
    width: 100%;
    background: #0d0f18;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px 14px;
    color: #fff;
    font-size: 0.9rem;
    font-family: inherit;
    resize: none;
    margin-bottom: 10px;
    transition: border-color 0.2s ease;
}

.ts-reply-textarea:focus {
    outline: none;
    border-color: #ef4444;
}

.ts-reply-composer .ts-composer-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.ts-reply-composer .ts-btn-cancel,
.ts-reply-composer .ts-btn-submit {
    padding: 8px 16px;
    font-size: 0.85rem;
}

/* New Comment Highlight */
.ts-comment--new .ts-comment__body {
    animation: commentHighlight 3s ease;
}

@keyframes commentHighlight {

    0%,
    50% {
        background: rgba(239, 68, 68, 0.15);
        border-color: rgba(239, 68, 68, 0.3);
    }

    100% {
        background: #0d0f18;
        border-color: rgba(255, 255, 255, 0.06);
    }
}

/* Comments Closed */
.ts-comments-closed {
    text-align: center;
    padding: 1.5rem;
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ts-comments-closed i {
    color: #6b7280;
}

/* Comments Mobile Responsive */
@media (max-width: 480px) {
    .ts-comments-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    .ts-comments-title {
        font-size: 0.95rem;
        gap: 8px;
    }

    .ts-comments-title i {
        font-size: 0.9rem;
    }

    .ts-comments-sort {
        width: 100%;
    }

    .ts-sort-btn {
        flex: 1;
        text-align: center;
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    /* Composer */
    .ts-composer-logged-in {
        gap: 10px;
    }

    .ts-composer-avatar img {
        width: 32px;
        height: 32px;
    }

    .ts-composer-textarea {
        padding: 10px 12px;
        font-size: 0.85rem;
        min-height: 40px;
    }

    .ts-composer-actions {
        padding: 8px 10px;
    }

    .ts-composer-user {
        font-size: 0.8rem;
    }

    .ts-composer-buttons {
        gap: 6px;
    }

    .ts-btn-cancel,
    .ts-btn-submit {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    /* Guest notice */
    .ts-guest-notice {
        padding: 16px;
    }

    .ts-guest-notice i {
        font-size: 1.5rem;
    }

    .ts-guest-notice p {
        font-size: 0.85rem;
        margin: 8px 0;
    }

    .ts-btn-login {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    /* No comments */
    .ts-no-comments {
        padding: 2rem 1rem;
    }

    .ts-no-comments i {
        font-size: 2rem;
    }

    .ts-no-comments p {
        font-size: 0.85rem;
    }

    /* Comment items */
    .ts-comment__body {
        padding: 12px;
    }

    .ts-comment__avatar img {
        width: 28px;
        height: 28px;
    }

    .ts-comment__author {
        font-size: 0.85rem;
    }

    .ts-comment__date {
        font-size: 0.7rem;
    }

    .ts-comment__content {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .ts-comment__action {
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    /* Reply composer smaller */
    .ts-reply-composer .ts-composer-avatar img {
        width: 28px;
        height: 28px;
    }

    .ts-reply-composer .ts-btn-cancel,
    .ts-reply-composer .ts-btn-submit {
        padding: 6px 12px;
        font-size: 0.8rem;
    }

    /* Nested comments less indentation */
    .ts-comment-list .children {
        margin-left: 16px;
        padding-left: 12px;
    }
}

.loading-indicator i {
    font-size: 3rem;
    color: #ef4444;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.empty-state {
    background-color: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    padding: 4rem 2rem;
    text-align: center;
    border: 1px solid var(--color-border-light);
}

.empty-state i {
    font-size: 4rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.empty-state h3 {
    font-size: 1.5rem;
    margin-bottom: var(--space-2);
}

.empty-state p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

/* Note: .btn-primary is now defined in the video page section as gradient button */

/* Pagination */
.pagination,
.pagination-wrapper {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 3rem 0;
}

.pagination-wrapper ul {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.pagination-wrapper li {
    margin: 0;
}

.pagination a,
.pagination span,
.pagination-wrapper a,
.pagination-wrapper span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0.5rem 0.75rem;
    background-color: #1a1d29;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s;
    color: #e5e7eb;
    text-decoration: none;
    gap: 0.25rem;
}

.pagination a:hover,
.pagination-wrapper a:hover {
    background-color: #2d3142;
    color: #fff;
}

.pagination .current,
.pagination-wrapper .current {
    background-color: #ef4444;
    color: #fff;
}

.pagination-wrapper .dots {
    background: transparent;
    color: #6b7280;
}

.pagination-wrapper .prev,
.pagination-wrapper .next {
    padding: 0.5rem 1rem;
}

.pagination-wrapper .prev i,
.pagination-wrapper .next i {
    font-size: 0.75rem;
}

/* Responsive */
@media (max-width: 768px) {
    .videos-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 1rem;
    }

    .page-header h1 {
        font-size: 1.75rem;
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-bar .results-count {
        margin-left: 0;
        text-align: center;
    }
}

/* Mobile Filter Bar - Extra Compact */
@media (max-width: 480px) {
    .page-header {
        margin-bottom: 1rem;
    }

    .page-header h1 {
        font-size: 1.4rem;
    }

    .filter-bar {
        padding: 12px;
        border-radius: 10px;
        margin-bottom: 1rem;
        gap: 10px;
    }

    .filter-bar>.flex {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
    }

    .filter-bar label {
        font-size: 0.8rem;
        min-width: 55px;
        flex-shrink: 0;
        color: #9ca3af;
    }

    .filter-bar select {
        flex: 1;
        padding: 10px 12px;
        font-size: 0.85rem;
        border-radius: 8px;
        min-width: 0;
    }

    .filter-bar .results-count {
        font-size: 0.8rem;
        padding-top: 8px;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }

    .filter-bar .results-count i {
        font-size: 0.75rem;
    }
}

/* Utility Classes */
.hidden {
    display: none !important;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.text-center {
    text-align: center;
}

.font-bold {
    font-weight: 700;
}

.font-semibold {
    font-weight: 600;
}

.rounded-lg {
    border-radius: 0.5rem;
}

.rounded-xl {
    border-radius: 0.75rem;
}

/* Lazy Loading */
.lazy {
    opacity: 0;
    transition: opacity 0.3s;
}

.lazy.loaded {
    opacity: 1;
}

/* Live Search Results */
#search-results {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background-color: #1a1d29;
    border: 1px solid #2d3142;
    border-radius: 8px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

#search-results a {
    padding: 0.75rem;
    border-bottom: 1px solid #2d3142;
    display: flex;
    gap: 0.75rem;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s;
    text-decoration: none;
    color: inherit;
}

#search-results a:hover {
    background-color: #2d3142;
}

#search-results a:last-child {
    border-bottom: none;
}



/* Search Sections */
.search-section {
    padding: 0;
}

.search-section:not(:first-child) {
    border-top: 2px solid #2d3142;
}

.search-section-title {
    padding: 0.75rem 0.75rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #9ca3af;
    letter-spacing: 0.05em;
}

.search-section a:first-of-type {
    border-top: none;
}

/* ====================================
   Search Page - Models Section
   ==================================== */

.search-models-section {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #2d3142;
}

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

.search-models-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.search-models-title i {
    color: #ef4444;
    font-size: 1.1rem;
}

.search-models-count {
    background: #ef4444;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

.search-models-more {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #9ca3af;
    font-size: 0.875rem;
    font-weight: 500;
    transition: color 0.2s;
}

.search-models-more:hover {
    color: #ef4444;
}

.search-models-grid {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.search-models-grid::-webkit-scrollbar {
    display: none;
}

.search-model-card {
    flex: 0 0 auto;
    width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    scroll-snap-align: start;
    transition: transform 0.2s;
}

.search-model-card:hover {
    transform: translateY(-4px);
}

.search-model-card__avatar {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 0.75rem;
}

.search-model-card__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #2d3142;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.search-model-card:hover .search-model-card__avatar img {
    border-color: #ef4444;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

.search-model-card__badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.search-model-card__badge i {
    font-size: 0.55rem;
}

.search-model-card__info {
    width: 100%;
}

.search-model-card__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s;
}

.search-model-card:hover .search-model-card__name {
    color: #ef4444;
}

.search-model-card__meta {
    font-size: 0.75rem;
    color: #6b7280;
}

/* Search Videos Section */
.search-videos-section {
    margin-bottom: 2rem;
}

.search-videos-header {
    margin-bottom: 1.25rem;
}

.search-videos-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.search-videos-title i {
    color: #ef4444;
    font-size: 1.1rem;
}

.search-videos-count {
    background: #374151;
    color: #9ca3af;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .search-models-section {
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .search-models-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .search-models-title {
        font-size: 1.1rem;
    }

    .search-models-grid {
        gap: 1rem;
    }

    .search-model-card {
        width: 100px;
    }

    .search-model-card__avatar {
        width: 80px;
        height: 80px;
    }

    .search-model-card__name {
        font-size: 0.8rem;
    }

    .search-videos-title {
        font-size: 1.1rem;
    }
}

/* Search Form Position */
.search-form {
    position: relative;
}

/* Video Player Styles */
.plyr {
    border-radius: 12px;
    overflow: hidden;
}

.plyr--video {
    background-color: #000;
    height: 100% !important;
}

/* Plyr video wrapper - yükseklik kontrolü */
.plyr__video-wrapper {
    background: #000;
    height: 100% !important;
    padding-bottom: 0 !important;
    /* Plyr'ın aspect ratio padding'ini kaldır */
}

.plyr video,
.plyr__video-wrapper video {
    object-fit: contain !important;
    max-height: 100% !important;
}

/* Like Button States */
.like-video-btn {
    cursor: pointer;
    user-select: none;
}

.like-video-btn.liked {
    background-color: #ef4444 !important;
}

.like-video-btn.liked i {
    animation: heartbeat 0.3s;
}

@keyframes heartbeat {

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

    50% {
        transform: scale(1.2);
    }
}

.animate-bounce {
    animation: bounce 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-6px); }
    50% { transform: translateY(0); }
    70% { transform: translateY(-3px); }
}

/* Model Cards */
.model-card {
    background-color: #1a1d29;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.model-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.model-card img {
    transition: transform 0.3s;
}

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

/* Single Video Page */
.video-details {
    background-color: #1a1d29;
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.video-actions {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0;
}

.video-actions button {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Related Videos Sidebar */
.related-video-item {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: #1a1d29;
    border-radius: 8px;
    transition: background-color 0.3s;
}

.related-video-item:hover {
    background-color: #2d3142;
}

.related-video-thumb {
    width: 120px;
    aspect-ratio: 16/9;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.related-video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.related-video-item:hover .related-video-thumb img {
    transform: scale(1.1);
}

/* Model Profile */
.model-header {
    background-color: #1a1d29;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 2rem;
}

.model-cover {
    height: 300px;
    background: linear-gradient(135deg, #2d3142 0%, #1a1d29 100%);
    position: relative;
}

.model-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

.model-info-wrapper {
    padding: 1.5rem;
    margin-top: -80px;
    position: relative;
}

.model-avatar-large {
    width: 150px;
    height: 150px;
    border-radius: 16px;
    border: 4px solid #0f1014;
    overflow: hidden;
    margin-bottom: 1rem;
}

.model-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.model-stats {
    display: flex;
    gap: 2rem;
    margin: 1rem 0;
}

.model-stat {
    text-align: center;
}

.model-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ef4444;
}

.model-stat-label {
    font-size: 0.85rem;
    color: #9ca3af;
}

/* Category Archive */
.category-header {
    background-color: #1a1d29;
    padding: 3rem 2rem;
    border-radius: 16px;
    text-align: center;
    margin-bottom: 2rem;
}

.category-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.category-icon i {
    font-size: 2rem;
}

/* Shared Archive Hero Styles */
.archive-hero {
    padding: 4rem 0 3rem;
    background: radial-gradient(circle at 20% 20%, rgba(118, 75, 162, 0.2), transparent 35%),
        radial-gradient(circle at 80% 10%, rgba(240, 147, 251, 0.25), transparent 40%),
        linear-gradient(180deg, #12131a 0%, #0f1014 100%);
}

.archive-hero--categories {
    background: radial-gradient(circle at 30% 20%, rgba(239, 68, 68, 0.15), transparent 35%),
        radial-gradient(circle at 70% 10%, rgba(251, 146, 60, 0.2), transparent 40%),
        linear-gradient(180deg, #12131a 0%, #0f1014 100%);
}

.archive-hero--taxonomy {
    background: radial-gradient(circle at 25% 15%, rgba(59, 130, 246, 0.2), transparent 35%),
        radial-gradient(circle at 75% 20%, rgba(16, 185, 129, 0.15), transparent 40%),
        linear-gradient(180deg, #12131a 0%, #0f1014 100%);
}

/* Taxonomy Archive */
.taxonomy-archive {
    background: #0f1014;
    color: #e5e7eb;
    min-height: 100vh;
}

.taxonomy-archive>.container {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

.archive-hero__inner {
    text-align: center;
}

.archive-hero__title {
    font-size: clamp(2.2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: 1rem;
    color: #fff;
}

.archive-hero__subtitle {
    max-width: 800px;
    margin: 0 auto;
    color: #cbd5e1;
    line-height: 1.7;
    font-size: 1.05rem;
}

.archive-hero__highlight {
    color: #f5c542;
    font-weight: 700;
}

/* Playlist Archive */
.playlist-archive {
    background: #0f1014;
    color: #e5e7eb;
    min-height: 100vh;
}

.playlist-archive>.container {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

/* Categories Page */
.categories-page {
    background: #0f1014;
    color: #e5e7eb;
    min-height: 100vh;
}

.categories-container {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

/* Models Archive */
.models-archive {
    background: #0f1014;
    color: #e5e7eb;
    min-height: 100vh;
}

.models-hero {
    padding: 4rem 0 3rem;
    background: radial-gradient(circle at 20% 20%, rgba(118, 75, 162, 0.2), transparent 35%),
        radial-gradient(circle at 80% 10%, rgba(240, 147, 251, 0.25), transparent 40%),
        linear-gradient(180deg, #12131a 0%, #0f1014 100%);
}

.models-hero__inner {
    text-align: center;
}

.models-hero__title {
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    font-weight: 800;
    margin-bottom: 1rem;
    color: #fff;
}

.models-hero__subtitle {
    max-width: 960px;
    margin: 0 auto 1.5rem;
    color: #cbd5e1;
    line-height: 1.7;
    font-size: 1.05rem;
}

.models-hero__highlight {
    color: #f5c542;
    font-weight: 700;
}

.models-search-wrapper {
    max-width: 600px;
    margin: 1.5rem auto;
}

.models-search {
    position: relative;
    display: flex;
    align-items: center;
}

.models-search input {
    width: 100%;
    padding: 1rem 3rem 1rem 3rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    color: #fff;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.models-search input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.25);
}

.models-search__icon {
    position: absolute;
    left: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
}

.models-search__clear,
.models-search__loading {
    position: absolute;
    right: 1.1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.models-search__clear:hover {
    color: #ef4444;
}

.models-search__loading {
    cursor: default;
    color: #8b5cf6;
}

.models-hero__filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.models-hero__filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.models-hero__filter label {
    font-size: 0.95rem;
    color: #cbd5e1;
}

.models-select {
    background: #1f2937;
    color: #fff;
    border: 1px solid #334155;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
}

.models-hero__count {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: rgba(76, 175, 80, 0.08);
    color: #bbf7d0;
    border: 1px solid rgba(76, 175, 80, 0.25);
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    font-weight: 700;
}

.models-container {
    padding: 0 1.5rem 3rem;
}

.models-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.1rem;
}

.model-tile {
    position: relative;
}

.model-tile__link {
    display: block;
}

.model-tile__thumb {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #1f2937;
    aspect-ratio: 3 / 4;
}

.model-tile__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

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

.model-tile__placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: #4b5563;
    font-size: 2rem;
}

.model-tile__badge {
    position: absolute;
    top: 0.65rem;
    left: 0.65rem;
    background: rgba(0, 0, 0, 0.75);
    color: #f8fafc;
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.model-tile__verified {
    position: absolute;
    top: 0.65rem;
    right: 0.65rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #22c55e;
    color: #0f172a;
    display: grid;
    place-items: center;
    font-size: 0.9rem;
    box-shadow: 0 8px 22px rgba(34, 197, 94, 0.35);
}

.model-tile__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.75) 100%);
}

.model-tile__title {
    position: absolute;
    bottom: 0.9rem;
    left: 1rem;
    right: 1rem;
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    text-shadow: 0 10px 25px rgba(0, 0, 0, 0.55);
}

.models-pagination {
    margin: 2.5rem 0 1rem;
    display: flex;
    justify-content: center;
}

.models-pagination ul {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
}

.models-pagination a,
.models-pagination span {
    background: #111827;
    border: 1px solid #1f2937;
    color: #e5e7eb;
    padding: 0.65rem 0.9rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.models-pagination .current {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: #0b0c10;
    font-weight: 700;
}

.models-empty {
    text-align: center;
    padding: 4rem 0;
}

.models-empty__card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    background: #161823;
    border: 1px solid #1f2937;
    border-radius: 16px;
    padding: 2.5rem 3rem;
    color: #cbd5e1;
}

.models-empty__card i {
    font-size: 2.5rem;
    color: #4b5563;
}

/* Models Load More */
.models-load-more {
    text-align: center;
    padding: 2rem 0;
}

.btn-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: #fff;
    border: none;
    padding: 14px 32px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 200px;
}

.btn-load-more:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
}

.btn-load-more:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Models Grid Transition */
.models-grid {
    transition: opacity 0.2s ease;
}

/* Model Detail Videos Grid */
.model-videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

@media (min-width: 1024px) {
    .model-videos-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1.25rem;
    }
}

/* Single Model Page */
.model-page {
    background: #0f1014;
    color: #e5e7eb;
    min-height: 100vh;
    padding: 32px 0 40px;
}

.model-page__container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 16px;
}

.model-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9ca3af;
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.model-breadcrumbs a {
    color: #cbd5e1;
}

.model-breadcrumbs .current {
    color: #fff;
    font-weight: 600;
}

.model-stories {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 132px;
    overflow-x: auto;
    gap: 14px;
    padding: 14px 12px;
    margin-bottom: 14px;
    background: linear-gradient(145deg, rgba(26, 29, 41, 0.75), rgba(15, 16, 20, 0.55));
    border: 1px solid #2d3142;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22);
}

.model-story {
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #cbd5e1;
    font-size: 0.8rem;
    line-height: 1.2;
    padding: 10px 8px 12px;
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(26, 29, 41, 0.85), rgba(12, 13, 18, 0.7));
    border: 1px solid rgba(45, 49, 66, 0.9);
    transition: transform 0.2s, border-color 0.2s;
    isolation: isolate;
}

.model-story__avatar {
    position: relative;
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
}

.model-story:hover {
    transform: translateY(-2px);
    border-color: rgba(239, 68, 68, 0.45);
}

.model-story__avatar img,
.model-story__avatar .story-placeholder {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg, #f59e0b, #d946ef);
    position: relative;
    z-index: 1;
    border: 4px solid #0f1014;
}

.model-story p {
    margin-top: 8px;
    color: #e5e7eb;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 2.4em;
}

.model-story .story-placeholder {
    display: grid;
    place-items: center;
    color: #0b0c10;
}

.story-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 180deg, #f59e0b, #ef4444, #d946ef, #f59e0b);
    z-index: 0;
    pointer-events: none;
}

.story-ring::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: #0f1014;
}

.model-story--short {
    cursor: pointer;
}

.model-story--short:focus {
    outline: 2px solid #ef4444;
    outline-offset: 4px;
}

/* Shorts modal (Instagram-style) */
.ts-shorts-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: #0f1014;
    z-index: 9999;
    padding: 18px;
}

.ts-shorts-modal.is-open {
    display: flex;
}

.ts-shorts-modal__stage {
    position: relative;
    z-index: 1;
    width: min(420px, 100%);
    max-height: calc(100vh - 36px);
    background: #1a1d29;
    border: 1px solid #2d3142;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ts-shorts-modal__progress {
    display: flex;
    gap: 6px;
    padding: 10px 10px 8px;
    background: rgba(15, 16, 20, 0.35);
}

.ts-shorts-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    overflow: hidden;
    cursor: pointer;
}

.ts-shorts-progress-fill {
    height: 100%;
    width: 0%;
    background: #ef4444;
    border-radius: 999px;
}

.ts-shorts-modal__player {
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #0f1014;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ts-shorts-modal__player iframe,
.ts-shorts-modal__player video {
    width: 100%;
    height: 100%;
}

.ts-shorts-video {
    object-fit: cover;
    background: #0f1014;
}

.ts-shorts-modal__meta {
    padding: 12px 14px;
    border-top: 1px solid #2d3142;
}

.ts-shorts-modal__title {
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.ts-shorts-modal__sub {
    margin-top: 4px;
    color: #9ca3af;
    font-size: 0.9rem;
}

.ts-shorts-modal__close {
    position: fixed;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid #2d3142;
    background: #1a1d29;
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
}

.ts-shorts-modal__nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid #2d3142;
    background: #1a1d29;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
}

.ts-shorts-modal__nav--prev {
    left: 16px;
}

.ts-shorts-modal__nav--next {
    right: 16px;
}

.model-hero-card {
    background: linear-gradient(145deg, rgba(17, 24, 39, 0.9), rgba(31, 41, 55, 0.92));
    border: 1px solid #1f2937;
    border-radius: 18px;
    padding: 24px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
}

.model-hero-card h1 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 800;
    margin-bottom: 8px;
    color: #fff;
}

.model-hero-card p {
    color: #d1d5db;
    margin: 0 0 12px;
    line-height: 1.5;
}

.model-hero-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.model-hero-card .badge {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 10px;
    border-radius: 12px;
    font-weight: 600;
    color: #e5e7eb;
    font-size: 0.9rem;
}

.model-hero-card__cta {
    flex-shrink: 0;
}

.model-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #f43f5e, #fb7185);
    border-radius: 14px;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 15px 30px rgba(244, 63, 94, 0.35);
}

.model-videos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 12px;
    background: #0c0d12;
    border: 1px solid #1f2937;
    border-radius: 14px;
    padding: 14px 16px;
}

.model-videos-header h2 {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
}

.model-videos-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
}

.model-videos-filter select {
    background: #111827;
    border: 1px solid #1f2937;
    color: #e5e7eb;
    padding: 8px 10px;
    border-radius: 10px;
}

.model-gallery-section {
    margin: 12px 0 18px;
}

.model-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.model-gallery-item {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #1f2937;
    background: #111827;
}

.model-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.model-gallery-item:hover img {
    transform: scale(1.03);
}

.model-gallery-page .model-gallery-grid {
    margin-top: 12px;
}

.model-gallery-grid--lightbox .model-gallery-item {
    cursor: zoom-in;
}

.lightbox {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1000;
}

.lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

.lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(2px);
}

.lightbox__content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    z-index: 1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.lightbox__content img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0f1117;
}

.lightbox__close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    border: none;
    border-radius: 999px;
    width: 36px;
    height: 36px;
    font-size: 22px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.lightbox__close:hover {
    background: rgba(0, 0, 0, 0.85);
}

/* Lightbox Navigation */
.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    font-size: 20px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.lightbox__nav:hover {
    background: rgba(239, 68, 68, 0.8);
    transform: translateY(-50%) scale(1.1);
}

.lightbox__nav--prev {
    left: 20px;
}

.lightbox__nav--next {
    right: 20px;
}

.lightbox__counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .lightbox__nav {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .lightbox__nav--prev {
        left: 10px;
    }

    .lightbox__nav--next {
        right: 10px;
    }
}

/* Single Video Page */
.video-page {
    padding: 28px 0 48px;
}

.video-container {
    max-width: 1200px;
}

/* Shared Breadcrumb Styles */
.video-breadcrumbs,
.model-breadcrumbs,
.category-breadcrumbs,
.playlist-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #cbd5e1;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.video-breadcrumbs a,
.model-breadcrumbs a,
.category-breadcrumbs a,
.playlist-breadcrumbs a {
    color: #e5e7eb;
    text-decoration: none;
    transition: color 0.2s;
}

.video-breadcrumbs a:hover,
.model-breadcrumbs a:hover,
.category-breadcrumbs a:hover,
.playlist-breadcrumbs a:hover {
    color: #8b5cf6;
}

.video-breadcrumbs .current,
.model-breadcrumbs .current,
.category-breadcrumbs .current,
.playlist-breadcrumbs .current {
    color: #9ca3af;
}

.video-breadcrumbs .sep,
.model-breadcrumbs .sep,
.category-breadcrumbs .sep,
.playlist-breadcrumbs .sep {
    color: #6b7280;
}

/* Hero eyebrow breadcrumbs */
.models-hero__eyebrow,
.archive-hero__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    color: #9ca3af;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
}

.models-hero__eyebrow a,
.archive-hero__eyebrow a {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.2s;
}

.models-hero__eyebrow a:hover,
.archive-hero__eyebrow a:hover {
    color: #fff;
}

.models-hero__eyebrow .current,
.archive-hero__eyebrow .current {
    color: #cbd5e1;
}

.models-hero__eyebrow .sep,
.archive-hero__eyebrow .sep {
    color: #6b7280;
}

.video-hero {
    margin-bottom: 18px;
}

.video-player-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}

.video-player {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    max-height: 80vh;
    width: 100%;
}

/* Custom player inside video-player wrapper */
.video-player .ts-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: unset;
    border-radius: 0;
}

.video-player iframe,
.video-player video:not(.ts-video),
.video-player .plyr,
.video-player .plyr--video {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0;
    display: block;
}

.video-player video {
    object-fit: contain;
    /* Dikey videolar için - video oranını koruyarak sığdır */
    background: #000;
}

/* HLS Video Player - Plyr wrapper düzeltmesi */
.video-player .plyr__video-wrapper {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
}

.video-player .plyr__video-wrapper video {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* ============================================
   TUBESITE CUSTOM VIDEO PLAYER
   ============================================ */

.ts-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    user-select: none;
}

/* YouTube Player Specific Styles */
.ts-youtube-player .ts-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1;
    transition: opacity 0.3s;
}

.ts-youtube-player .ts-yt-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.ts-youtube-player .ts-yt-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.ts-youtube-player .ts-controls {
    z-index: 10;
}

.ts-youtube-player .ts-play-overlay {
    z-index: 5;
}

.ts-youtube-player .ts-loader {
    z-index: 8;
}

.ts-player.ts-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    border-radius: 0 !important;
    aspect-ratio: unset !important;
}

.ts-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}

/* IMA Ad Container */
.ts-ad-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    pointer-events: none;
    display: none;
    background: #000;
}

.ts-ad-container * {
    pointer-events: auto;
}

/* Ad playing state - hide player controls */
.ts-player.ts-ad-playing .ts-controls,
.ts-player.ts-ad-playing .ts-play-overlay {
    display: none !important;
}

.ts-player.ts-ad-playing .ts-ad-container {
    display: block;
}

/* Proxy video for YouTube VAST */
.ts-proxy-video {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.plyr-player-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
}

.plyr-player-wrapper .plyr-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.plyr-player-wrapper .ts-ad-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

/* Loading Spinner */
.ts-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 10;
}

.ts-player.ts-loading .ts-loader {
    display: block;
}

.ts-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ef4444;
    border-radius: 50%;
    animation: ts-spin 0.8s linear infinite;
}

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

/* Play Overlay */
.ts-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    z-index: 5;
    transition: opacity 0.3s, visibility 0.3s;
}

.ts-player.ts-playing .ts-play-overlay,
.ts-player.ts-loading .ts-play-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.ts-big-play {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, background 0.2s;
}

.ts-big-play:hover {
    transform: scale(1.1);
    background: #ef4444;
}

.ts-big-play i {
    font-size: 32px;
    color: #fff;
    margin-left: 4px;
}

/* Controls Container */
.ts-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    padding: 40px 16px 12px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    z-index: 20;
}

.ts-player:hover .ts-controls,
.ts-player.ts-paused .ts-controls,
.ts-player:not(.ts-playing) .ts-controls,
.ts-player.ts-controls-visible .ts-controls {
    opacity: 1;
    visibility: visible;
}

/* Progress Bar */
.ts-progress-container {
    position: relative;
    margin-bottom: 12px;
    padding: 8px 0;
    cursor: pointer;
}

.ts-progress-bar {
    position: relative;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    transition: height 0.15s;
}

.ts-progress-container:hover .ts-progress-bar {
    height: 6px;
}

.ts-progress-buffered {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    width: 0%;
}

.ts-progress-played {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #f97316);
    border-radius: 2px;
    width: 0%;
}

.ts-progress-handle {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.15s;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.ts-progress-container:hover .ts-progress-handle {
    transform: translate(-50%, -50%) scale(1);
}

/* Preview Tooltip */
.ts-preview-tooltip {
    position: absolute;
    bottom: 24px;
    left: 0;
    transform: translateX(-50%);
    display: none;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    z-index: 30;
}

.ts-progress-container:hover .ts-preview-tooltip {
    display: flex;
}

.ts-preview-thumb {
    width: 160px;
    height: 90px;
    background: #0a0a0a;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
    margin-bottom: 6px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    position: relative;
}

/* Preview loading animation */
.ts-preview-thumb::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    margin: -12px 0 0 -12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: ts-spin 0.8s linear infinite;
    opacity: 0;
    transition: opacity 0.2s;
}

.ts-preview-thumb:not([style*="background-image"])::before,
.ts-preview-thumb[style*="background-image: url(\"\")"]::before {
    opacity: 1;
}

.ts-preview-time {
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Bottom Controls */
.ts-controls-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ts-controls-left,
.ts-controls-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Buttons */
.ts-btn {
    background: transparent;
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.2s;
    position: relative;
}

.ts-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.ts-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    background: rgba(255, 255, 255, 0.08);
}

.ts-btn i {
    font-size: 16px;
}

.ts-skip-back,
.ts-skip-forward {
    font-size: 14px;
}

.ts-skip-back span,
.ts-skip-forward span {
    position: absolute;
    font-size: 9px;
    font-weight: 700;
}

/* Volume Control */
.ts-volume-control {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ts-volume-slider {
    width: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    overflow: hidden;
    transition: width 0.2s;
    cursor: pointer;
}

.ts-volume-control:hover .ts-volume-slider {
    width: 70px;
}

.ts-volume-level {
    height: 100%;
    background: #fff;
    width: 100%;
    border-radius: 2px;
}

/* Time Display */
.ts-time {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    margin-left: 8px;
    white-space: nowrap;
}

.ts-current-time {
    color: #fff;
}

.ts-duration {
    color: rgba(255, 255, 255, 0.6);
}

/* Settings Menu */
.ts-settings-menu {
    position: relative;
}

.ts-settings-panel {
    position: absolute;
    bottom: 50px;
    right: 0;
    background: rgba(20, 20, 20, 0.95);
    border-radius: 10px;
    padding: 12px;
    min-width: 180px;
    display: none;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.ts-settings-menu.ts-open .ts-settings-panel {
    display: block;
}

.ts-settings-group {
    margin-bottom: 12px;
}

.ts-settings-group:last-child {
    margin-bottom: 0;
}

.ts-settings-label {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.ts-speed-options,
.ts-quality-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ts-speed-options button,
.ts-quality-options button {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.ts-speed-options button:hover,
.ts-quality-options button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.ts-speed-options button.ts-active,
.ts-quality-options button.ts-active {
    background: #ef4444;
}

/* Mobile Double Tap Seek Indicator */
.ts-seek-indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 25;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.ts-seek-indicator.ts-show {
    opacity: 1;
}

.ts-seek-indicator i {
    font-size: 32px;
    animation: seekPulse 0.4s ease-out;
}

.ts-seek-indicator span {
    font-size: 12px;
}

.ts-seek-left {
    left: 15%;
}

.ts-seek-right {
    right: 15%;
}

@keyframes seekPulse {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
    }

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

/* Fullscreen adjustments */
.ts-player.ts-fullscreen .ts-controls {
    padding: 60px 24px 20px;
}

.ts-player.ts-fullscreen .ts-btn {
    width: 48px;
    height: 48px;
}

.ts-player.ts-fullscreen .ts-btn i {
    font-size: 20px;
}

.ts-player.ts-fullscreen .ts-time {
    font-size: 15px;
}

.ts-player.ts-fullscreen .ts-preview-thumb {
    width: 200px;
    height: 112px;
}

/* iOS Video Fullscreen */
.ts-video::-webkit-media-controls {
    display: none !important;
}

.ts-video::-webkit-media-controls-enclosure {
    display: none !important;
}

/* iOS Fullscreen video element */
video::-webkit-media-controls-panel {
    display: flex !important;
}

/* When iOS native fullscreen is active */
.ts-video:-webkit-full-screen {
    width: 100%;
    height: 100%;
}

/* Mobile Adjustments */
@media (max-width: 640px) {

    /* Video player card - remove card styling on mobile */
    .video-player-card {
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0 -16px;
        /* Full width on mobile */
    }

    /* Hide quality and duration badges on mobile */
    .video-player-meta {
        display: none !important;
    }

    /* Video player - full width, no border radius */
    .video-player {
        border-radius: 0 !important;
        max-height: 56.25vw;
        /* 16:9 aspect ratio */
    }

    .ts-player {
        border-radius: 0 !important;
    }

    /* Smaller, more compact controls with less intrusive gradient */
    .ts-controls {
        padding: 16px 8px 6px;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    }

    .ts-controls-bottom {
        padding: 0 4px;
        gap: 4px;
        margin-bottom: 0;
    }

    .ts-controls-left,
    .ts-controls-right {
        gap: 2px;
    }

    .ts-btn {
        width: 28px;
        height: 28px;
        min-width: 28px;
    }

    .ts-btn i {
        font-size: 11px;
    }

    /* Hide skip buttons on mobile */
    .ts-skip-back,
    .ts-skip-forward {
        display: none !important;
    }

    /* Smaller time display */
    .ts-time {
        font-size: 9px;
        gap: 2px;
    }

    /* Hide volume slider on mobile - tap to mute/unmute instead */
    .ts-volume-slider {
        display: none;
    }

    .ts-volume-control {
        gap: 0;
    }

    /* Progress bar - easier touch target for mobile */
    .ts-progress-container {
        padding: 16px 0 12px;
        margin-bottom: 4px;
        touch-action: none;
        /* Prevent browser scroll/zoom while dragging */
        position: relative;
        z-index: 50;
        /* Above other controls for touch */
    }

    .ts-progress-bar {
        height: 6px;
    }

    .ts-progress-bar:hover,
    .ts-progress-bar:active {
        height: 8px;
    }

    .ts-progress-handle {
        width: 18px;
        height: 18px;
        opacity: 1;
        transform: translate(-50%, -50%);
    }

    /* Hide preview tooltip on mobile - it blocks video */
    .ts-preview-tooltip {
        display: none !important;
    }

    /* Hide PiP button on mobile */
    .ts-pip-btn {
        display: none !important;
    }

    /* Smaller settings panel */
    .ts-settings-panel {
        min-width: 120px;
        padding: 6px 0;
        bottom: 32px;
        right: 0;
    }

    .ts-settings-label {
        font-size: 10px;
        padding: 4px 12px;
    }

    .ts-speed-options button,
    .ts-quality-options button {
        padding: 5px 10px;
        font-size: 10px;
    }

    /* Big play button - smaller */
    .ts-big-play {
        width: 48px;
        height: 48px;
    }

    .ts-big-play i {
        font-size: 18px;
    }

    /* Loading spinner - smaller */
    .ts-spinner {
        width: 32px;
        height: 32px;
        border-width: 2px;
    }
}

/* Extra small screens (iPhone SE, etc.) */
@media (max-width: 380px) {
    .ts-controls {
        padding: 12px 4px 4px;
    }

    .ts-btn {
        width: 24px;
        height: 24px;
        min-width: 24px;
    }

    .ts-btn i {
        font-size: 10px;
    }

    .ts-time {
        font-size: 8px;
    }

    /* Hide mute button on very small screens */
    .ts-mute-btn {
        display: none;
    }

    .ts-settings-btn {
        display: none;
    }

    .ts-big-play {
        width: 40px;
        height: 40px;
    }

    .ts-big-play i {
        font-size: 14px;
    }
}

/* ============================================
   END CUSTOM VIDEO PLAYER
   ============================================ */

/* Video Embed Container */
.video-embed-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-embed-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-player-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.video-header {
    margin: 12px 0 18px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.video-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--color-text-white);
    margin-bottom: 6px;
    line-height: 1.3;
}

.video-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--color-text-secondary);
    font-size: 0.95rem;
}

.video-meta i {
    color: var(--color-purple);
    margin-right: 6px;
}

.video-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.btn-primary,
.btn-secondary,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    padding: 10px 16px;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-base), background var(--transition-base), border-color var(--transition-base);
    font-size: var(--font-size-sm);
}

.btn-primary {
    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #fff;
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.25);
}

.btn-primary.liked {
    background: linear-gradient(135deg, #ec4899, #ef4444);
    box-shadow: 0 8px 20px rgba(236, 72, 153, 0.25);
}

.btn-secondary {
    background: #111827;
    color: var(--color-text-primary);
    border-color: #1f2937;
}

.btn-ghost {
    background: transparent;
    color: #cbd5e1;
    border-color: #1f2937;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-ghost:hover {
    transform: translateY(-2px);
}

.btn-primary:hover {
    box-shadow: 0 12px 28px rgba(124, 58, 237, 0.35);
}

.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active {
    transform: translateY(0);
}

.video-section-card {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--space-5);
}

.video-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-light);
    font-weight: 600;
    font-size: var(--font-size-sm);
    transition: all var(--transition-base);
}

.pill:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.pill-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}
.pill-golden {
    background: #d96000;
    border-color: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
}
.video-description {
    color: #e5e7eb;
    line-height: 1.7;
}

.video-models {
    margin-top: 14px;
}

.video-models h3 {
    margin-bottom: 10px;
    color: #fff;
    font-size: 1.05rem;
}

.video-models-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.video-model-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #111827;
    border: 1px solid #1f2937;
    color: var(--color-text-primary);
    padding: 8px 14px;
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.video-model-chip img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
    transition: border-color var(--transition-base);
}

.video-model-chip .model-chip-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1f2937, #374151);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    font-size: 14px;
}

.video-model-chip:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

.video-model-chip:hover img {
    border-color: var(--color-accent);
}

.video-comments h3 {
    margin-bottom: 12px;
}

.video-related {
    margin: 10px 0 24px;
}

.video-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.video-section-header h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.video-section-header h3 i {
    color: var(--primary-color);
    font-size: 1rem;
}

.view-all-link {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s;
}

.view-all-link:hover {
    color: var(--primary-color);
}

.view-all-link i {
    font-size: 0.75rem;
    transition: transform 0.2s;
}

.view-all-link:hover i {
    transform: translateX(3px);
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.video-grid .video-card {
    background-color: #111827;
    border: 1px solid #1f2937;
}

.video-grid .video-card:hover {
    transform: translateY(-6px);
}

.video-grid .video-card .thumbnail-wrapper {
    background: #0b0d14;
}

@media (max-width: 960px) {
    .video-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .video-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .video-actions .btn-primary,
    .video-actions .btn-secondary,
    .video-actions .btn-ghost {
        flex: 1 1 auto;
        min-width: calc(50% - 4px);
        justify-content: center;
    }

    /* Like button gets more emphasis */
    .video-actions .btn-primary {
        min-width: 100%;
    }

    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

/* Mobile Single Video Page */
@media (max-width: 640px) {
    .video-page {
        padding: 0 0 24px;
    }

    .video-hero {
        margin-bottom: 12px;
    }

    .video-container {
        padding: 0;
    }

    /* Breadcrumbs - hide on mobile video page */
    .video-page .video-breadcrumbs {
        display: none;
    }

    .video-header {
        padding: 0 16px;
        margin: 12px 0;
        gap: 12px;
    }

    .video-title {
        font-size: 1.1rem;
        line-height: 1.3;
    }

    .video-meta {
        font-size: 0.8rem;
        gap: 8px;
    }

    .video-actions {
        padding: 0 16px;
        gap: 8px;
    }

    .video-actions .btn-primary,
    .video-actions .btn-secondary,
    .video-actions .btn-ghost {
        padding: 8px 12px;
        font-size: 0.85rem;
    }

    .video-section-card {
        margin: 0 16px 12px;
        padding: 14px;
        border-radius: 12px;
    }

    .video-badges {
        gap: 6px;
        margin-bottom: 10px;
    }

    .pill {
        padding: 5px 10px;
        font-size: 0.75rem;
    }
}

/* Extra mobile optimizations for video page elements */
@media (max-width: 480px) {

    /* Action buttons - horizontal row, compact */
    .video-actions {
        display: flex;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px;
        padding: 0 12px;
    }

    .video-actions .btn-primary,
    .video-actions .btn-secondary,
    .video-actions .btn-ghost {
        flex: 1;
        width: auto !important;
        min-width: 0 !important;
        padding: 10px 6px;
        font-size: 0.75rem;
        gap: 4px;
        justify-content: center;
    }

    /* Smaller icons in buttons */
    .video-actions .btn-primary i,
    .video-actions .btn-secondary i,
    .video-actions .btn-ghost i {
        font-size: 0.85rem;
    }

    /* Hide text on playlist button, show only icon */
    .video-actions .btn-ghost .ts-playlist-btn-text {
        display: none;
    }

    /* Video header compact */
    .video-header {
        padding: 0 12px;
        margin: 10px 0;
        gap: 8px;
    }

    .video-title {
        font-size: 1rem;
        line-height: 1.25;
        margin-bottom: 4px;
    }

    .video-meta {
        font-size: 0.75rem;
        gap: 6px;
    }

    .video-meta i {
        margin-right: 3px;
    }

    /* Section cards - tighter */
    .video-section-card {
        margin: 0 0 10px;
        padding: 12px;
        border-radius: 10px;
    }

    /* Badges compact */
    .video-badges {
        gap: 5px;
        margin-bottom: 8px;
    }

    .pill {
        padding: 4px 8px;
        font-size: 0.7rem;
        border-radius: 6px;
    }

    /* Model chips - smaller */
    .video-models h3 {
        font-size: 0.9rem;
        margin-bottom: 8px;
    }

    .video-models-list {
        gap: 6px;
    }

    .video-model-chip {
        padding: 6px 10px;
        gap: 6px;
        font-size: 0.8rem;
        border-radius: 8px;
    }

    .video-model-chip img {
        width: 26px;
        height: 26px;
    }

    /* Comments section */
    .video-comments h3 {
        font-size: 0.95rem;
        margin-bottom: 10px;
    }

    .video-comments h3 i {
        font-size: 0.85rem;
    }

    /* Comment form compact */
    .comment-form textarea,
    .comment-form input[type="text"],
    .comment-form input[type="email"] {
        padding: 10px 12px;
        font-size: 0.85rem;
    }

    .comment-form .submit {
        padding: 10px 16px;
        font-size: 0.85rem;
    }

    /* Related videos header */
    .video-section-header {
        margin-bottom: 12px;
    }

    .video-section-header h3 {
        font-size: 1rem;
    }

    .video-section-header h3 i {
        font-size: 0.85rem;
    }

    .view-all-link {
        font-size: 0.8rem;
    }

    /* Videos grid - 2 columns on mobile */
    .video-related .videos-grid {
        gap: 10px;
    }
}

/* Categories Listing - Legacy styles removed, using archive-hero now */
.category-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-size: 0.95rem;
    margin-bottom: 14px;
}

.category-breadcrumbs a {
    color: #e5e7eb;
}

.category-breadcrumbs .current {
    color: #9ca3af;
}

.category-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #e5e7eb;
}

.category-meta i {
    color: #8b5cf6;
    margin-right: 6px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.category-card {
    display: block;
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.32);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.category-card__thumb {
    position: relative;
    padding-top: 70%;
    background: linear-gradient(135deg, #1f2937, #0f172a);
    background-size: cover;
    background-position: center;
}

.category-card__body {
    padding: 14px;
}

.category-card__body h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 6px;
}

.category-card__body .count {
    color: #cbd5e1;
    font-size: 0.95rem;
}

.category-card:hover {
    transform: translateY(-6px);
    border-color: #2563eb;
    box-shadow: 0 24px 50px rgba(37, 99, 235, 0.2);
}

/* Category term page reuse video grid spacing */
.category-term-page .video-grid {
    margin-top: 12px;
}

/* ==========================================
   Playlist Modal
   ========================================== */

.ts-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.ts-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
}

.ts-modal-container {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    background: #12141f;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    animation: modalIn 0.25s ease;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

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

.ts-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ts-modal-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ts-modal-header h3 i {
    color: #ef4444;
}

.ts-modal-close {
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s ease;
}

.ts-modal-close:hover {
    color: #fff;
}

.ts-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem 1.5rem;
}

/* Create Playlist Section */
.ts-playlist-create {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ts-playlist-create-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #60a5fa;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 10px 0;
    transition: color 0.2s ease;
}

.ts-playlist-create-toggle:hover {
    color: #93c5fd;
}

.ts-playlist-create-toggle i {
    font-size: 1.25rem;
}

.ts-playlist-create-form {
    margin-top: 1rem;
}

.ts-playlist-create-form input[type="text"] {
    width: 100%;
    background: #0d0f18;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 14px;
    color: #fff;
    font-size: 0.95rem;
    margin-bottom: 12px;
    transition: border-color 0.2s ease;
}

.ts-playlist-create-form input[type="text"]:focus {
    outline: none;
    border-color: #ef4444;
}

.ts-playlist-visibility {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ts-playlist-visibility label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #9ca3af;
    font-size: 0.9rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.ts-playlist-visibility label:hover {
    color: #fff;
}

.ts-playlist-visibility input[type="radio"] {
    accent-color: #ef4444;
}

.ts-btn-create {
    width: 100%;
    background: #ef4444;
    border: none;
    color: #fff;
    padding: 12px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s ease;
}

.ts-btn-create:hover {
    background: #dc2626;
}

/* Playlists List */
.ts-playlists-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ts-playlists-loading,
.ts-playlists-empty {
    text-align: center;
    padding: 2rem;
    color: #6b7280;
}

.ts-playlists-empty i {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    display: block;
}

.ts-playlist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #0d0f18;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ts-playlist-item:hover {
    background: #161827;
    border-color: rgba(255, 255, 255, 0.12);
}

.ts-playlist-item--active {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
}

.ts-playlist-item--active:hover {
    background: rgba(239, 68, 68, 0.15);
}

.ts-playlist-item--loading {
    opacity: 0.6;
    pointer-events: none;
}

.ts-playlist-item-thumb {
    width: 56px;
    height: 40px;
    background: #1a1d2e;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ts-playlist-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ts-playlist-item-thumb i {
    color: #4b5563;
    font-size: 1.1rem;
}

.ts-playlist-item-info {
    flex: 1;
    min-width: 0;
}

.ts-playlist-item-title {
    display: block;
    font-weight: 600;
    color: #fff;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ts-playlist-item-meta {
    font-size: 0.8rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

.ts-playlist-item-action {
    background: transparent;
    border: none;
    color: #6b7280;
    font-size: 1.35rem;
    cursor: pointer;
    padding: 4px;
    transition: all 0.2s ease;
}

.ts-playlist-item:hover .ts-playlist-item-action {
    color: #9ca3af;
}

.ts-playlist-item--active .ts-playlist-item-action {
    color: #ef4444;
}

/* Playlist Button Active State */
.ts-playlist-btn--active {
    background: rgba(239, 68, 68, 0.15) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #ef4444 !important;
}

/* Toast Notifications */
.ts-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #1f2937;
    color: #fff;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 500;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    z-index: 10001;
    opacity: 0;
    transition: all 0.3s ease;
}

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

.ts-toast--success {
    border-left: 4px solid #10b981;
}

.ts-toast--error {
    border-left: 4px solid #ef4444;
}

@media (max-width: 480px) {
    .ts-modal-container {
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        animation: modalSlideUp 0.3s ease;
    }

    @keyframes modalSlideUp {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }

    .ts-modal {
        align-items: flex-end;
        padding: 0;
    }

    .ts-playlist-visibility {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* 404 Page */
.error-404 {
    text-align: center;
    padding: 4rem 2rem;
}

.error-404-number {
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    color: #ef4444;
    margin-bottom: 1rem;
}

/* Print Styles */
@media print {

    header,
    footer,
    .filter-bar,
    .video-actions {
        display: none;
    }
}

/* ==========================================
   RESPONSIVE STYLES - Mobile First
   ========================================== */

/* Extra Small devices (phones, 480px and below) */
@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }

    /* Header */
    .site-header .container {
        padding: 0 0.75rem;
    }

    .site-logo__text {
        font-size: 1rem;
    }

    /* Hero sections */
    .author-hero {
        padding: 2rem 0 1.5rem;
    }

    .author-hero__card {
        padding: 1.25rem;
        border-radius: 16px;
        gap: 1rem;
    }

    .author-hero__avatar {
        width: 70px;
        height: 70px;
    }

    .author-hero__card h1 {
        font-size: 1.25rem;
    }

    .author-hero__meta {
        font-size: 0.8rem;
        gap: 0.75rem;
    }

    /* Content sections */
    .author-content {
        padding: 1.5rem 0 2rem;
    }

    .author-section {
        margin-bottom: 2rem;
    }

    .author-section .section-header h2 {
        font-size: 1.15rem;
    }

    /* Comments */
    .author-comments {
        padding: 1.25rem;
        border-radius: 16px;
    }

    .ts-comments-title {
        font-size: 1rem;
    }

    .ts-composer-textarea {
        padding: 12px 14px;
        font-size: 0.9rem;
    }

    .ts-btn-submit,
    .ts-btn-cancel {
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    .ts-guest-notice {
        padding: 1.5rem;
    }

    .ts-guest-notice i {
        font-size: 2rem;
    }

    .ts-guest-notice p {
        font-size: 0.9rem;
    }

    .ts-btn-login {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    /* Grids */
    .playlist-grid,
    .video-grid,
    .videos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

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

    /* Cards */
    .video-card,
    .playlist-card,
    .model-card {
        border-radius: 10px;
    }

    .form-group label {
        font-size: 0.85rem;
    }

    .form-group input,
    .form-group textarea,
    .form-group select {
        padding: 0.65rem 0.85rem;
        font-size: 0.9rem;
    }

    .btn-primary {
        padding: 0.65rem 1.25rem;
        font-size: 0.9rem;
    }

    /* Video page */
    .video-player-wrapper {
        border-radius: 0;
        margin: 0 -1rem;
        width: calc(100% + 2rem);
    }

    .video-info {
        padding: 1rem 0;
    }

    .video-title {
        font-size: 1.1rem;
    }

    .video-meta {
        flex-direction: column;
        gap: 0.75rem;
    }

    /* Footer */
    .site-footer {
        padding: 2rem 0 1.5rem;
    }
}

/* Small devices (phones landscape, small tablets, 481px to 768px) */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }

    /* ---- Header Mobile ---- */
    .header-main__inner {
        gap: 0.5rem;
    }

    .site-logo__text {
        display: none;
    }

    .site-logo__icon {
        width: 32px;
        height: 32px;
    }

    .header-search {
        max-width: none;
        margin: 0;
    }

    .search-shortcut {
        display: none;
    }

    .search-input {
        height: 40px;
        font-size: 0.8125rem;
        padding-right: 1rem;
    }

    .header-actions__account {
        display: none; /* shown in mobile nav instead */
    }

    .header-actions__burger {
        display: flex;
    }

    /* Hide desktop nav bar */
    .header-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        height: 100dvh;
        background: linear-gradient(180deg, #13151f 0%, #0d0f16 100%);
        border-right: 1px solid rgba(255,255,255,0.06);
        border-top: none;
        padding: 0;
        z-index: 9999;
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
        box-shadow: none;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .header-nav.is-open {
        transform: translateX(0);
        box-shadow: 8px 0 40px rgba(0,0,0,0.6);
    }

    /* Mobile Nav Overlay */
    .mobile-nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.55);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 9998;
    }

    .mobile-nav-overlay.is-visible {
        opacity: 1;
        visibility: visible;
    }

    /* Mobile Nav Header */
    .mobile-nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }

    .mobile-nav-logo {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        color: #fff;
        font-weight: 700;
        font-size: 1rem;
    }

    .mobile-nav-logo img {
        width: 28px;
        height: 28px;
    }

    .mobile-nav-close {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,0.06);
        border: none;
        border-radius: 8px;
        color: rgba(255,255,255,0.5);
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.2s ease;
    }

    .mobile-nav-close:hover {
        background: rgba(239,68,68,0.15);
        color: #ef4444;
    }

    /* Mobile Nav Links */
    .main-nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.75rem 0;
        flex: 1;
        overflow-x: visible;
    }

    .main-nav a {
        padding: 0.85rem 1.25rem;
        border-radius: 0;
        font-size: 0.9375rem;
        font-weight: 500;
        color: rgba(255,255,255,0.65);
        white-space: normal;
        position: relative;
    }

    .main-nav a::after {
        display: none; /* remove desktop underline indicator */
    }

    .main-nav a::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 0;
        background: var(--color-primary);
        border-radius: 0 3px 3px 0;
        transition: height 0.2s ease;
    }

    .main-nav a.active::before,
    .main-nav a:hover::before {
        height: 55%;
    }

    .main-nav a.active {
        color: #fff;
        background: rgba(139,92,246,0.08);
    }

    .main-nav a i {
        width: 22px;
        text-align: center;
        font-size: 0.9rem;
        opacity: 0.5;
    }

    .main-nav a:hover {
        color: #fff;
        background: rgba(255,255,255,0.04);
    }

    .main-nav a:hover i,
    .main-nav a.active i {
        opacity: 1;
        color: var(--color-primary);
    }

    /* Mobile Nav Footer */
    .mobile-nav-footer {
        display: block;
        padding: 1rem 1.25rem;
        border-top: 1px solid rgba(255,255,255,0.06);
        margin-top: auto;
    }

    .mobile-nav-footer__account {
        margin-bottom: 0.75rem;
    }

    .mobile-nav-footer__account a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.7rem 1rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: #fff;
        background: linear-gradient(135deg, var(--color-primary), #7c3aed);
        border-radius: 8px;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .mobile-nav-footer__account a:hover {
        filter: brightness(1.15);
    }

    .mobile-nav-footer p {
        font-size: 0.75rem;
        color: rgba(255,255,255,0.25);
        text-align: center;
        margin: 0;
    }

    /* Author page */
    .author-hero {
        padding: 2.5rem 0 2rem;
    }

    .author-hero__card {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    .author-hero__avatar {
        width: 80px;
        height: 80px;
    }

    .author-hero__meta {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .author-hero__card h1 {
        font-size: 1.4rem;
    }

    .author-content {
        padding: 1.5rem 0 3rem;
    }

    .author-comments {
        padding: 1.5rem;
        border-radius: 18px;
    }

    /* Archive hero responsive */
    .archive-hero {
        padding: 2.5rem 0 2rem;
    }

    .archive-hero__title {
        font-size: 1.75rem;
    }

    .archive-hero__subtitle {
        font-size: 0.95rem;
    }

    /* Playlist page */
    .playlist-hero {
        padding: 1.5rem 0 2rem;
    }

    .playlist-hero__content {
        flex-direction: column;
        gap: 1.5rem;
    }

    .playlist-hero__thumb {
        width: 100%;
        max-width: 400px;
    }

    .playlist-hero__info h1 {
        font-size: 1.5rem;
    }

    .playlist-hero__meta {
        gap: 1rem;
    }

    .playlist-owner img {
        width: 32px;
        height: 32px;
    }

    .playlist-videos h2 {
        font-size: 1.25rem;
    }

    .playlist-comments {
        padding: 1.5rem;
        border-radius: 18px;
        margin: 2rem 0;
    }

    /* Grids */
    .playlist-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .video-grid,
    .videos-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

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

    .category-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 1rem;
    }

    /* Model page */
    .model-hero-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .model-cta-btn {
        width: 100%;
        justify-content: center;
    }

    .model-videos-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    /* Playlist page */
    .playlist-hero__content {
        grid-template-columns: 1fr;
    }

    /* Comments */
    .ts-comment-list .children {
        padding-left: 1rem;
    }

    .ts-comment__header {
        flex-wrap: wrap;
    }

    .ts-comment__body {
        padding: 0.85rem 1rem;
    }

    .ts-composer-logged-in {
        flex-direction: column;
    }

    .ts-composer-avatar {
        display: none;
    }

    .ts-composer-actions {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .ts-composer-buttons {
        justify-content: flex-end;
    }

    .ts-comments-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .ts-reply-composer {
        flex-direction: column;
    }

    .ts-reply-composer .ts-composer-avatar {
        display: none;
    }
}

/* Medium devices (tablets, 769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 1.5rem;
    }

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

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

    .models-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }

    .author-hero__card {
        padding: 1.75rem;
    }

    .author-comments {
        padding: 1.75rem;
    }
}

/* Large devices (desktops, 1025px and above) */
@media (min-width: 1025px) {
    .container {
        padding: 0 2rem;
    }

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

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

    .models-grid {
        gap: 1.35rem;
    }
}

/* Extra large devices (large desktops, 1400px and above) */
@media (min-width: 1400px) {
    .playlist-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .video-grid,
    .videos-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {

    .video-card:hover,
    .playlist-card:hover,
    .model-card:hover,
    .category-card:hover {
        transform: none;
    }

    .ts-btn-submit:hover:not(:disabled),
    .ts-btn-login:hover {
        transform: none;
    }
}

/* Safe area for notched devices */
@supports (padding: max(0px)) {

    .site-header .container,
    .site-footer .container {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    @media (max-width: 768px) {
        .container {
            padding-left: max(1rem, env(safe-area-inset-left));
            padding-right: max(1rem, env(safe-area-inset-right));
        }
    }
}

/* Landscape phone orientation */
@media (max-height: 500px) and (orientation: landscape) {
    .author-hero {
        padding: 1.5rem 0;
    }

    .author-hero__card {
        flex-direction: row;
        text-align: left;
    }

    .author-hero__avatar {
        width: 60px;
        height: 60px;
    }
}

/* No Results */
.no-results {
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    max-width: 500px;
    margin: 2rem auto;
}

.no-results__icon {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 1.5rem;
}

.no-results__title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #fff;
}

.no-results__text {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.no-results__suggestions {
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
}

.no-results__suggestions p {
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
}

.no-results__suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.no-results__suggestions li {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    padding: 0.25rem 0;
}

.no-results__suggestions li::before {
    content: "•";
    margin-right: 0.5rem;
    color: var(--primary-color);
}

/* ========================================
   Channel Styles
======================================== */

/* Channel Profile */
.channel-profile {
    background: #1a1d29;
    border-radius: 16px;
    margin-bottom: 2rem;
    overflow: hidden;
}

.channel-profile__banner {
    height: 120px;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

.channel-profile__content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    margin-top: -40px;
}

.channel-profile__logo {
    width: 100px;
    height: 100px;
    border-radius: 16px;
    background: #2d3142;
    overflow: hidden;
    border: 4px solid #1a1d29;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.channel-profile__initial {
    font-size: 2rem;
    font-weight: 700;
    color: #6b7280;
}

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

.channel-profile__header {
    flex: 1;
}

.channel-profile__name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.channel-profile__verified {
    flex-shrink: 0;
}

.channel-profile__stats {
    display: flex;
    gap: 1.5rem;
}

.channel-profile__stat {
    font-size: 0.95rem;
    color: #9ca3af;
}

.channel-profile__stat span:first-child {
    font-weight: 600;
    color: #fff;
}

.channel-profile__actions {
    display: flex;
    gap: 0.75rem;
}

.channel-profile__follow {
    height: 40px;
    border-radius: 20px;
    border: 1px solid #4b5563;
    background: transparent;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
    padding: 0 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.channel-profile__follow:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #6b7280;
}

.channel-profile__follow.following {
    background: #3b82f6;
    border-color: #3b82f6;
}

.channel-profile__follow.following:hover {
    background: #2563eb;
}

.channel-description {
    color: #9ca3af;
    font-size: 0.95rem;
    line-height: 1.6;
    padding: 0 1.5rem 1rem;
}

.channel-links-row {
    display: flex;
    gap: 0.75rem;
    padding: 0 1.5rem 1.5rem;
}

.channel-link-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    color: #9ca3af;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.channel-link-pill:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Channel Models */
.channel-models {
    padding: 1.5rem;
    border-top: 1px solid #2d3142;
}

.channel-models h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 1rem;
}

.channel-models__grid {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.channel-model-avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.channel-model-avatar img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.channel-model-avatar span {
    font-size: 0.75rem;
    color: #9ca3af;
    max-width: 70px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Channel Videos */
.channel-videos__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.channel-videos__header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
}

.channel-videos__header h2 span {
    color: #6b7280;
    font-weight: 400;
}

/* Channel Archive Grid */
.channels-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.channel-archive-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: #1a1d29;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.channel-archive-card:hover {
    background: #252836;
    transform: translateY(-2px);
}

.channel-archive-card__logo {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: #2d3142;
    display: flex;
    align-items: center;
    justify-content: center;
}

.channel-archive-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.channel-archive-card__initial {
    font-size: 1.25rem;
    font-weight: 700;
    color: #6b7280;
}

.channel-archive-card__info h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.25rem;
}

.channel-archive-card__info span {
    font-size: 0.8rem;
    color: #6b7280;
}

/* Archive Filters */
.archive-filters {
    margin-bottom: 1.5rem;
}

.filter-form {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.search-inline {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.search-inline i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
}

.search-inline input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    background: #1a1d29;
    border: 1px solid #2d3142;
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
}

.search-inline input:focus {
    outline: none;
    border-color: #3b82f6;
}

.sort-select select {
    padding: 0.75rem 2rem 0.75rem 1rem;
    background: #1a1d29;
    border: 1px solid #2d3142;
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}

/* Archive Header */
.archive-header {
    margin-bottom: 1.5rem;
}

.archive-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.25rem;
}

.archive-header p {
    color: #6b7280;
    font-size: 0.95rem;
}

/* Toast Notifications */
.ts-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #1a1d29;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid #2d3142;
}

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

.ts-toast.success {
    border-color: #10b981;
}

.ts-toast.error {
    border-color: #ef4444;
}

/* Responsive */
@media (max-width: 768px) {
    .channel-profile__content {
        flex-direction: column;
        align-items: flex-start;
        margin-top: -30px;
    }

    .channel-profile__logo {
        width: 80px;
        height: 80px;
    }

    .channel-profile__info {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .channel-profile__name {
        font-size: 1.25rem;
    }

    .channels-archive-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* Video Card - Watched Badge */
.video-card__watched {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.65rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 3;
}

/* Video Card - Subtitle Badge */
.video-card__subtitle-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.video-card__subtitle-badge i {
    font-size: 0.65rem;
}

.video-card__watched--shifted {
    top: 30px;
}

/* Video Card - Pinned Badge */
.video-card__pinned {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #d63384, #c2255c);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(214, 51, 132, 0.4);
    animation: pinPulse 2s ease-in-out infinite;
}

.video-card__pinned i {
    font-size: 0.65rem;
}

@keyframes pinPulse {

    0%,
    100% {
        box-shadow: 0 2px 8px rgba(214, 51, 132, 0.4);
    }

    50% {
        box-shadow: 0 2px 12px rgba(214, 51, 132, 0.7);
    }
}

/* Video Card - Channel Logo */
.video-card__channel {
    position: absolute;
    bottom: 40px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    background: #2d3142;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

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

.video-card__channel-initial {
    font-size: 0.85rem;
    font-weight: 700;
    color: #6b7280;
}

/* Button Icon */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: #3b82f6;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.btn-icon:hover {
    background: #2563eb;
}

/* =====================================================
   Announcement Banner - Ana Sayfa Duyuru Banner
   ===================================================== */
.announcement-banner {
    margin: 1.5rem 0;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1d29 0%, #1a1d29 45%, #7f1d1d 45%, #991b1b 100%);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    max-height: 300px;
}

.announcement-banner__inner {
    display: flex;
    align-items: stretch;
    min-height: 180px;
}

/* Sol Taraf - Yeni Adres */
.announcement-banner__left {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    background: linear-gradient(135deg, #0f1014 0%, #1a1d29 100%);
    position: relative;
}

.announcement-banner__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: pulse-badge 2s ease-in-out infinite;
}

@keyframes pulse-badge {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px 5px rgba(239, 68, 68, 0.3);
    }
}

.announcement-banner__content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.announcement-banner__label {
    font-size: 0.85rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
}

.announcement-banner__link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
    transition: all 0.3s ease;
}

.announcement-banner__link i {
    color: #ef4444;
    font-size: 1.5rem;
}

.announcement-banner__link:hover {
    color: #ef4444;
    transform: translateX(5px);
}

.announcement-banner__hint {
    font-size: 0.8rem;
    color: #6b7280;
    font-style: italic;
}

/* Orta Ayırıcı */
.announcement-banner__divider {
    width: 4px;
    background: linear-gradient(180deg, transparent 0%, #ef4444 20%, #ef4444 80%, transparent 100%);
    position: relative;
}

.announcement-banner__divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: #ef4444;
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(239, 68, 68, 0.6);
}

.announcement-banner__divider::after {
    content: '\f0da';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1rem;
    z-index: 1;
}

/* Sağ Taraf - Telegram */
.announcement-banner__right {
    flex: 1.2;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 50%, #b91c1c 100%);
    position: relative;
    overflow: hidden;
}

.announcement-banner__right::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    border-radius: 50%;
}

.announcement-banner__telegram-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, #0088cc 0%, #0077b5 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 25px rgba(0, 136, 204, 0.4);
    animation: float 3s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.announcement-banner__telegram-icon i {
    font-size: 2rem;
    color: #fff;
}

.announcement-banner__right .announcement-banner__content {
    flex: 1;
}

.announcement-banner__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.announcement-banner__text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.5;
    margin-bottom: 1rem;
}

.announcement-banner__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    color: #0088cc;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.65rem 1.25rem;
    border-radius: 25px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.announcement-banner__btn:hover {
    background: #0088cc;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 136, 204, 0.4);
}

.announcement-banner__btn i {
    font-size: 1.1rem;
}

/* Responsive - Tablet */
@media (max-width: 900px) {
    .announcement-banner__inner {
        flex-direction: column;
    }

    .announcement-banner__left,
    .announcement-banner__right {
        padding: 1.5rem;
    }

    .announcement-banner__divider {
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, transparent 0%, #ef4444 20%, #ef4444 80%, transparent 100%);
    }

    .announcement-banner__divider::before,
    .announcement-banner__divider::after {
        display: none;
    }

    .announcement-banner__link {
        font-size: 1.4rem;
    }

    .announcement-banner__telegram-icon {
        width: 55px;
        height: 55px;
    }

    .announcement-banner__telegram-icon i {
        font-size: 1.5rem;
    }
}

/* Responsive - Mobile */
@media (max-width: 600px) {
    .announcement-banner {
        margin: 1rem 0;
        border-radius: 12px;
    }

    .announcement-banner__left,
    .announcement-banner__right {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem 1rem;
        gap: 0.75rem;
    }

    .announcement-banner__badge {
        position: static;
        align-self: center;
        margin-bottom: 0.5rem;
    }

    .announcement-banner__content {
        align-items: center;
    }

    .announcement-banner__link {
        font-size: 1.2rem;
    }

    .announcement-banner__title {
        font-size: 1.1rem;
    }

    .announcement-banner__text {
        font-size: 0.8rem;
    }

    .announcement-banner__btn {
        padding: 0.55rem 1rem;
        font-size: 0.85rem;
    }
}

/* Old .pro-banner styles removed — replaced by .hero-cards inside .homepage-hero */

/* =====================================================
   AMP Sidebar Styles
   ===================================================== */
amp-sidebar {
    background: linear-gradient(180deg, #1a1d29 0%, #12141c 100%);
    width: 280px;
    max-width: 85vw;
}

.amp-sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.amp-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.amp-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
}

.amp-sidebar-logo img {
    width: 32px;
    height: 32px;
}

.amp-sidebar-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.amp-sidebar-nav {
    flex: 1;
    padding: 1rem 0;
    overflow-y: auto;
}

.amp-sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    color: #e5e7eb;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.amp-sidebar-nav a:hover,
.amp-sidebar-nav a:active {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-left-color: #ef4444;
}

.amp-sidebar-nav a i {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    opacity: 0.8;
}

.amp-sidebar-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.amp-sidebar-footer p {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}

/* ==========================================================================
   PROMO STYLES (Adblock-safe naming)
   ========================================================================== */

/* Promo Containers (adblock-safe: data-slot) */
[data-slot="video_above_player"],
[data-slot="hp-promos"],
[data-slot="homepage_fullwidth_banner"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    padding: 0 1rem;
}

/* Promo Box */
.promo-slot {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 728px;
    overflow: hidden;
}

/* Promo Single/Carousel */
.promo-single,
.promo-carousel {
    width: 100%;
}

.promo-link {
    display: block;
    width: 100%;
    transition: opacity 0.3s ease;
}

.promo-link:hover {
    opacity: 0.9;
}

.promo-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Promo Carousel */
.promo-carousel {
    position: relative;
}

.promo-item {
    display: none;
    width: 100%;
    animation: promoFadeIn 0.5s ease;
}

.promo-item.active {
    display: block;
}

@keyframes promoFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .promo-slot {
        max-width: 100%;
    }

    .promo-image {
        border-radius: 6px;
    }
}

@media (max-width: 480px) {
    [data-slot="video_above_player"],
    [data-slot="hp-promos"],
    [data-slot="homepage_fullwidth_banner"] {
        padding: 0 0.5rem;
        margin: 1rem 0;
    }

    .promo-image {
        border-radius: 4px;
    }
}

/* Sidebar Promo */
.sidebar .promo-slot {
    max-width: 300px;
    margin: 1rem auto;
}

/* Footer Promo */
.footer .promo-slot {
    max-width: 970px;
    margin: 1rem auto;
}

/* Footer Promo (adblock-safe) */
[data-slot="footer_banner"] {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
    padding: 0 1rem;
}

[data-slot="footer_banner"] > [data-zone] {
    max-width: 970px;
}

@media (max-width: 768px) {
    [data-slot="footer_banner"] > [data-zone] {
        max-width: 100%;
    }
}

/* Subscription Page Styles */
.subscription-page {
    padding: 0 0 5rem;
    background-color: #0f1014;
    min-height: 100vh;
}

/* Hero Section */
.subscription-hero {
    padding: 6rem 1rem 4rem;
    text-align: center;
    background: radial-gradient(circle at center top, rgba(59, 130, 246, 0.15), transparent 70%);
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
}

.hero-badge {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 99px;
    font-size: 0.9rem;
    color: #f4b400;
    margin-bottom: 2rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    background: linear-gradient(to bottom, #ffffff, #9ca3af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-text {
    background: linear-gradient(135deg, #f4b400 0%, #fbbf24 50%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: #9ca3af;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto 5rem;
    padding: 0 1.5rem;
}

.feature-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2rem;
    border-radius: 20px;
    text-align: center;
    transition: transform 0.3s;
}

.feature-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.05);
}

.feature-icon-box {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.2));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #60a5fa;
    margin: 0 auto 1.5rem;
}

.feature-item:nth-child(2) .feature-icon-box {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.2));
    color: #fbbf24;
}

.feature-item:nth-child(3) .feature-icon-box {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(220, 38, 38, 0.2));
    color: #f87171;
}

.feature-item h3 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 1rem;
}

.feature-item p {
    color: #9ca3af;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Pricing Modern */
.pricing-section {
    max-width: 1200px;
    margin: 0 auto 5rem;
    padding: 0 1.5rem;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    color: #fff;
}

.pricing-cards-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.pricing-card-modern {
    background: #11121d;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s;
}

.pricing-card-modern:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.pricing-card-modern.featured {
    background: linear-gradient(145deg, #161824 0%, #1e2130 100%);
    border: 1px solid rgba(244, 180, 0, 0.4);
    transform: scale(1.05);
    z-index: 2;
}

.popular-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #f4b400;
    color: #000;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.5rem 1.5rem;
    border-bottom-left-radius: 16px;
}

.card-header {
    padding: 2.5rem 2rem 1.5rem;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.card-header h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #e5e7eb;
}

.pricing-card-modern .price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.pricing-card-modern .currency {
    font-size: 1.5rem;
    font-weight: 600;
    color: #9ca3af;
}

.pricing-card-modern .amount {
    font-size: 3.5rem;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}

.pricing-card-modern .period {
    font-size: 1rem;
    color: #6b7280;
    align-self: flex-end;
    margin-bottom: 0.5rem;
    margin-left: 0.25rem;
}

.card-body {
    padding: 2rem;
}

.feature-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #d1d5db;
    font-size: 1rem;
}

.feature-list li i {
    color: #34d399;
    font-size: 1.1rem;
}

/* Payment Section */
.payment-section {
    max-width: 900px;
    margin: 0 auto 5rem;
    padding: 0 1.5rem;
}

.payment-tabs {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.tab-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem 2rem;
    border-radius: 12px;
    color: #9ca3af;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tab-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.tab-btn.active {
    background: #fff;
    color: #000;
    border-color: #fff;
}

.tab-content {
    display: none;
    animation: fadeIn 0.4s ease;
}

.tab-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.payment-detail-card {
    background: #1a1d29;
    padding: 2.5rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.detail-header {
    margin-bottom: 2rem;
}

.detail-header h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

.detail-header p {
    color: #9ca3af;
}

.highlight-price {
    color: #f4b400;
    font-weight: 700;
}

.contact-box {
    background: rgba(255, 255, 255, 0.03);
    padding: 1.5rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    text-align: left;
}

.contact-icon {
    width: 48px;
    height: 48px;
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.contact-text {
    font-size: 1rem;
    line-height: 1.5;
    color: #e5e7eb;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s;
}

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

.primary-btn {
    background: #3b82f6;
    color: #fff;
    box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3);
}

.secondary-btn {
    background: #10b981;
    color: #fff;
    box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
}

/* Crypto specific */
.crypto-wallet-box {
    background: #000;
    border: 1px solid #333;
    padding: 1.5rem;
    border-radius: 16px;
    margin-bottom: 2rem;
    position: relative;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.network-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #9ca3af;
    padding: 0.25rem 1rem;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid #444;
}

.wallet-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: 0.5rem;
}

.wallet-row code {
    flex: 1;
    color: #f59e0b;
    font-family: monospace;
    font-size: 1rem;
    word-break: break-all;
    text-align: center;
}

.copy-btn-modern {
    background: #333;
    border: none;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.copy-btn-modern:hover {
    background: #444;
}

.step-guide {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
    text-align: left;
}

.step {
    flex: 1;
    background: rgba(255, 255, 255, 0.02);
    padding: 1rem;
    border-radius: 12px;
    position: relative;
}

.step-num {
    display: block;
    width: 24px;
    height: 24px;
    background: #333;
    color: #fff;
    text-align: center;
    line-height: 24px;
    border-radius: 50%;
    font-size: 0.75rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.step p {
    font-size: 0.85rem;
    color: #9ca3af;
    margin: 0;
}

/* Telegram Promo Modern */
.telegram-promo-modern {
    background: linear-gradient(135deg, #0088cc 0%, #0077b5 100%);
    max-width: 900px;
    margin: 0 auto;
    border-radius: 20px;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0, 136, 204, 0.2);
}

.tg-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.tg-content i {
    font-size: 2.5rem;
    background: rgba(255, 255, 255, 0.2);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tg-text h3 {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.tg-text p {
    font-size: 0.9rem;
    opacity: 0.9;
}

.tg-btn {
    background: #fff;
    color: #0088cc;
    padding: 0.75rem 1.5rem;
    border-radius: 99px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: transform 0.2s;
}

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

/* New Premium Icon for Video Cards */
.video-card__premium-icon {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
    background: linear-gradient(135deg, #f4b400 0%, #f59e0b 100%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 0.8rem;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    border: 2px solid #fff;
}

/* Modern Dashboard Styles */
.vip-dashboard {
    max-width: 800px;
    margin: 0 auto;
}

.vip-dashboard-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.vip-crown-animation {
    position: relative;
    font-size: 4rem;
    color: #f4b400;
    margin-bottom: 1rem;
    display: inline-block;
    animation: crown-glow 2.5s ease-in-out infinite;
}

.vip-crown-animation .shine {
    display: none;
}

@keyframes crown-glow {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(244, 180, 0, 0.3));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 20px rgba(244, 180, 0, 0.7));
        transform: scale(1.05);
    }
}

.vip-header-content h1 {
    font-size: 2rem;
    font-weight: 800;
    color: #fff;
    margin: 0 0 0.5rem;
}

.vip-welcome {
    color: #94a3b8;
    font-size: 1rem;
    margin: 0;
}

.status-active {
    color: #34d399;
    font-weight: 700;
}

.vip-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.vip-stat-card {
    background: #1a1d29;
    padding: 1.5rem;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-icon {
    width: 48px;
    height: 48px;
    background: rgba(34, 197, 94, 0.1);
    color: #34d399;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-info .label {
    font-size: 0.8rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.stat-info .value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

.section-title-sm {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: #fff;
    padding-left: 1rem;
    border-left: 4px solid #f4b400;
}

.vip-quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.quick-link-card {
    position: relative;
    background: #1a1d29;
    height: 160px;
    border-radius: 20px;
    padding: 2rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    transition: all 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-decoration: none;
}

.quick-link-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
}

.link-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    opacity: 0.1;
    transition: transform 0.3s;
}

.quick-link-card:hover .link-bg {
    transform: scale(1.1);
}

.link-content {
    position: relative;
    z-index: 1;
}

.link-content i {
    font-size: 2rem;
    color: #f4b400;
    margin-bottom: 0.5rem;
}

.link-content h3 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 0.25rem;
}

.link-content p {
    color: #9ca3af;
    font-size: 0.9rem;
}

.arrow-icon {
    position: absolute;
    right: 2rem;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
}

.quick-link-card:hover .arrow-icon {
    color: #fff;
    transform: translateX(5px);
}

@media (max-width: 768px) {
    .pricing-card-modern.featured {
        transform: none;
    }

    .step-guide {
        flex-direction: column;
        gap: 1rem;
    }

    .telegram-promo-modern {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
    }

    .tg-content {
        flex-direction: column;
    }
}

/* Enhanced Lock Screen Actions */
.lock-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
    width: 100%;
}

.lock-actions .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    min-width: 160px;
    text-decoration: none;
    line-height: 1.2;
}

/* Login Button - Glass Style */
.lock-actions .btn-outline {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    backdrop-filter: blur(10px);
}

.lock-actions .btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
}

/* Premium Button - Gold Gradient */
.lock-actions .btn-primary {
    background: linear-gradient(135deg, #f4b400 0%, #f59e0b 100%);
    border: none;
    color: #000;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.lock-actions .btn-primary:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6);
    transform: translateY(-2px) scale(1.02);
}

.lock-actions i {
    font-size: 1.1rem;
}

/* Pricing Preview Text */
.pricing-preview {
    margin-top: 1.5rem;
    color: #9ca3af;
    font-size: 0.95rem;
    opacity: 0.8;
}

.pricing-preview strong {
    color: #f4b400;
}

/* Premium Content Lock - Mobile Responsive */
@media (max-width: 768px) {
    .premium-content-lock {
        min-height: 280px;
    }
    
    .lock-content {
        padding: 1rem 1rem;
    }
    
    .lock-icon {
        font-size: 2.2rem;
        margin-bottom: 0.75rem;
    }
    
    .lock-content h2 {
        font-size: 1.15rem;
        margin-bottom: 0.5rem;
    }
    
    .lock-content p {
        font-size: 0.8rem;
        margin-bottom: 1rem;
        line-height: 1.4;
    }
    
    .lock-actions {
        flex-direction: row;
        gap: 0.6rem;
        margin-top: 0.75rem;
    }
    
    .lock-actions .btn {
        padding: 0.6rem 1rem;
        font-size: 0.8rem;
        min-width: auto;
        gap: 0.4rem;
        border-radius: 8px;
    }
    
    .lock-actions i {
        font-size: 0.85rem;
    }
    
    .pricing-preview {
        margin-top: 0.75rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .premium-content-lock {
        min-height: 220px;
    }
    
    .lock-content {
        padding: 0.75rem;
    }
    
    .lock-icon {
        font-size: 1.8rem;
        margin-bottom: 0.5rem;
    }
    
    .lock-content h2 {
        font-size: 1rem;
        margin-bottom: 0.4rem;
    }
    
    .lock-content p {
        font-size: 0.72rem;
        margin-bottom: 0.75rem;
    }
    
    .lock-actions .btn {
        padding: 0.5rem 0.8rem;
        font-size: 0.75rem;
    }
    
    .lock-actions i {
        font-size: 0.75rem;
    }
}

/* =====================================================
   VIP STATUS BOX - Account Page
   ===================================================== */

.vip-status-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.vip-status-box__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.vip-status-box__content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.35rem;
}

.vip-status-box__content p {
    font-size: 0.9rem;
    color: #94a3b8;
    margin: 0;
    line-height: 1.5;
}

/* =====================================================
   SUBSCRIPTION PAGE REDESIGN
   ===================================================== */

.subscription-page-redesign {
    padding: 3rem 0 5rem;
    min-height: 80vh;
}

.page-title-icon {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
}

.page-title-icon i {
    color: #3b82f6;
}

.page-title-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    width: 100%;
    margin-bottom: 2.5rem;
}

/* Payment Methods Grid */
.payment-methods-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 3rem;
}

.payment-card {
    background: #1f2937;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.payment-card--full {
    grid-column: 1 / -1;
}

.payment-card--blue {
    background: #1e293b;
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
}

.payment-card--dark {
    background: #18181b;
}

/* Bank Transfer Card */
.payment-card--bank {
    background: linear-gradient(135deg, #1a2332 0%, #162029 100%);
    border-color: rgba(6, 182, 212, 0.3);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.08);
}

.payment-card-header .icon-box.bank-icon {
    background: rgba(6, 182, 212, 0.15);
    color: #06b6d4;
}

.payment-amount-box .amount.amount-bank {
    color: #22d3ee;
}

.bank-info-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(6, 182, 212, 0.08);
    border: 1px solid rgba(6, 182, 212, 0.15);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 1.25rem;
}

.bank-info-note .bank-info-icon {
    flex-shrink: 0;
    color: #06b6d4;
    font-size: 1.1rem;
    margin-top: 1px;
}

.bank-info-note p {
    margin: 0;
    font-size: 0.8rem;
    color: #94a3b8;
    line-height: 1.5;
}

.btn-bank-telegram {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3);
}

.btn-bank-telegram:hover {
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4);
    transform: translateY(-2px);
    color: #fff;
}

.payment-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 1.5rem;
}

.payment-card-header .icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.payment-card-header .icon-box.star-icon {
    background: rgba(234, 179, 8, 0.15);
    color: #facc15;
}

.payment-card-header .icon-box.green-icon {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.payment-card-header h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.payment-card-header p {
    font-size: 0.85rem;
    margin: 3px 0 0;
    color: #9ca3af;
}

.payment-amount-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.payment-amount-box .label {
    font-weight: 500;
    color: #fff;
}

.payment-amount-box .amount {
    font-size: 1.25rem;
    font-weight: 800;
    color: #60a5fa;
}

.payment-amount-box .amount.amount-star {
    color: #facc15;
    display: flex;
    align-items: center;
    gap: 5px;
}

.payment-amount-box .amount.amount-star i {
    font-size: 1rem;
}

.payment-amount-box .amount.green-text {
    color: #34d399;
}

.payment-note p {
    font-size: 0.85rem;
    color: #9ca3af;
    margin-bottom: 0.5rem;
}

.note-badge {
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.75rem;
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d1d5db;
    margin-bottom: 1.5rem;
}

.method-badges,
.coin-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    margin-bottom: 1.5rem;
}

.accepted-methods span,
.accepted-coins span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
}

.badge {
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #e5e7eb;
}

.badge.coin-bnb {
    color: #f3ba2f;
    border: 1px solid rgba(243, 186, 47, 0.2);
}

.badge.coin-eth {
    color: #8c8c8c;
    border: 1px solid rgba(140, 140, 140, 0.2);
}

.badge.coin-trx {
    color: #ff0013;
    border: 1px solid rgba(255, 0, 19, 0.2);
}

.badge.coin-usdt {
    color: #26a17b;
    border: 1px solid rgba(38, 161, 123, 0.2);
}

.feature-check-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.feature-check-list li {
    font-size: 0.85rem;
    color: #d1d5db;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.feature-check-list li i {
    color: #10b981;
    font-size: 0.75rem;
}

.feature-check-list.horizontal-list {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.how-it-works-mini {
    margin-bottom: 1rem;
}

.how-it-works-mini h4 {
    font-size: 0.9rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.how-it-works-mini ol {
    margin: 0;
    padding-left: 1.2rem;
    color: #9ca3af;
    font-size: 0.8rem;
}

.how-it-works-mini ol li {
    margin-bottom: 4px;
}

.telegram-mini-steps {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.payment-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-top: auto;
    font-size: 1rem;
}

.btn-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.btn-blue:hover {
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    transform: translateY(-2px);
}

.btn-telegram-stars {
    background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    box-shadow: 0 4px 15px rgba(2, 132, 199, 0.3);
}

.btn-green {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

/* Info Sections Grid */
.info-sections-grid {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: 20px;
    margin-bottom: 3rem;
}

.info-card {
    background: #1f2937;
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.info-card.dark-card {
    background: #181a20;
    border-color: rgba(59, 130, 246, 0.1);
}

.card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.5rem;
}

.section-desc {
    color: #9ca3af;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.link-blue {
    color: #3b82f6;
    text-decoration: none;
}

.bullet-list-custom {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bullet-list-custom li {
    font-size: 0.95rem;
    color: #d1d5db;
    margin-bottom: 12px;
    position: relative;
    padding-left: 18px;
}

.bullet-list-custom li::before {
    content: "•";
    color: #6b7280;
    position: absolute;
    left: 0;
    font-weight: bold;
}

.features-box-gray {
    background: #27272a;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.features-box-gray h4 {
    font-size: 0.95rem;
    color: #fff;
    margin-bottom: 10px;
}

.bullet-list-gray {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bullet-list-gray li {
    font-size: 0.85rem;
    color: #9ca3af;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bullet-list-gray li::before {
    content: "";
    width: 4px;
    height: 4px;
    background: #6b7280;
    border-radius: 50%;
}

.how-it-works-gray {
    background: #27272a;
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.how-it-works-gray h4 {
    font-size: 0.95rem;
    color: #fff;
    margin-bottom: 10px;
}

.how-it-works-gray ol {
    margin: 0;
    padding-left: 1.2rem;
    color: #9ca3af;
    font-size: 0.85rem;
}

.how-it-works-gray ol li {
    margin-bottom: 6px;
}

.highlight-blue {
    color: #60a5fa;
}

.note-bar-left {
    border-left: 3px solid #3b82f6;
    padding-left: 12px;
    color: #9ca3af;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.note-bar-left span {
    color: #60a5fa;
    font-weight: 600;
}

.btn-blue-rect {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #2563eb;
    color: #fff;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: background 0.2s;
}

.btn-blue-rect:hover {
    background: #1d4ed8;
}

/* System How To */
.system-howto-section {
    margin-bottom: 3rem;
}

.section-title-sm {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.5rem;
}

.system-steps {
    list-style: decimal;
    padding-left: 1.5rem;
    color: #d1d5db;
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.system-steps li {
    margin-bottom: 8px;
}

.contact-hint {
    color: #9ca3af;
    font-size: 0.9rem;
}

.contact-hint a {
    color: #60a5fa;
}

/* Important Warning */
.important-warning-section {
    margin-bottom: 3rem;
}

.bullet-list-warning li::before {
    color: #ef4444;
    /* Red bullets for warning */
}

/* Telegram Banner */
.telegram-banner-box {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.tg-content-wrapper {
    display: flex;
    gap: 20px;
    align-items: center;
}

.tg-icon-circle {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

.tg-content h3 {
    font-size: 1.25rem;
    color: #fff;
    margin: 0 0 5px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.emoji-img {
    width: 24px;
    height: 24px;
}

.tg-subtitle {
    color: #dbeafe;
    margin: 0 0 10px 0;
    font-weight: 600;
}

.tg-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}

.tg-features li {
    font-size: 0.85rem;
    color: #bfdbfe;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tg-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.btn-telegram-blue {
    background: #fff;
    color: #1e40af;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.2s;
}

.btn-telegram-blue:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.tg-username {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

/* Fraud Alert */
.fraud-alert-box {
    background: rgba(127, 29, 29, 0.4);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.fraud-icon {
    color: #ef4444;
    font-size: 1.5rem;
    margin-top: 2px;
}

.fraud-content h4 {
    color: #fca5a5;
    margin: 0 0 5px 0;
    font-size: 1rem;
    font-weight: 700;
}

.fraud-content p {
    color: #fecaca;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Crypto Details */
#crypto-details code {
    background: #000;
    color: #10b981;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Responsive */
@media (max-width: 900px) {
    .payment-methods-grid {
        grid-template-columns: 1fr;
    }

    .info-sections-grid {
        grid-template-columns: 1fr;
    }

    .telegram-banner-box {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .tg-content-wrapper {
        flex-direction: column;
    }

    .tg-features {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }
}

/* ==========================================
   Scroll-to-Top Button
   ========================================== */
.scroll-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    box-shadow: 0 4px 16px rgba(139,92,246,.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px) scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.2s ease;
    z-index: 1000;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.scroll-to-top:hover {
    background: var(--color-primary-hover);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 24px rgba(139,92,246,.5);
}

.scroll-to-top:active {
    transform: translateY(0) scale(0.95);
}

@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 16px;
        right: 16px;
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

/* ==========================================
   Card Reveal Animations
   ========================================== */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   Smart Header
   ========================================== */
.site-header {
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease;
}

.site-header.header-hidden {
    transform: translateY(-100%);
}

/* ==========================================
   Improved Search Results
   ========================================== */
.search-loading,
.search-empty {
    padding: 20px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 14px;
}

.search-loading i,
.search-empty i {
    font-size: 18px;
    margin-bottom: 6px;
    display: block;
}

.search-section {
    padding: 4px 0;
}

.search-section + .search-section {
    border-top: 1px solid var(--color-border);
}

.search-section-title {
    padding: 8px 16px 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.search-section-title i {
    margin-right: 4px;
    font-size: 10px;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    text-decoration: none;
    color: var(--color-text);
    transition: background 0.15s ease;
    border-radius: 0;
}

.search-result-item:hover,
.search-result-item.is-active {
    background: rgba(255,255,255,0.06);
}

.search-result-item.is-active {
    outline: none;
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.search-result-thumb {
    width: 80px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    background: var(--color-surface-2);
}

.search-result-thumb--round {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.search-result-info {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-meta {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

#search-results {
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

#search-results::-webkit-scrollbar {
    width: 6px;
}

#search-results::-webkit-scrollbar-track {
    background: transparent;
}

#search-results::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}

/* ==========================================
   Skeleton Loading States
   ========================================== */
.skeleton {
    background: var(--color-surface-2);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}

.skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,0.04) 50%,
        transparent 100%
    );
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.skeleton-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-thumb {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--radius-md);
}

.skeleton-line {
    height: 14px;
    border-radius: 4px;
}

.skeleton-line--short {
    width: 60%;
}

.skeleton-line--long {
    width: 90%;
}

/* ==========================================
   Page Transition Loading Bar
   ========================================== */
.page-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent, #ec4899));
    z-index: 10000;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px var(--color-primary);
}

.page-loading-bar.loading {
    width: 85%;
    transition: width 8s cubic-bezier(0.1, 0.5, 0.3, 1);
}

.page-loading-bar.done {
    width: 100%;
    transition: width 0.15s ease;
    opacity: 0;
    transition: width 0.15s ease, opacity 0.4s ease 0.2s;
}

/* ==========================================
   Micro Interactions
   ========================================== */

/* Tooltip helper */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: 5px 10px;
    background: var(--color-surface-3, #374151);
    color: var(--color-text);
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 100;
}

[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Improved loading indicator for infinite scroll */
.loading-indicator {
    text-align: center;
    padding: 32px 16px;
    color: var(--color-text-muted);
}

.loading-indicator::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-bottom: 8px;
}

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

/* No more videos message */
.no-more-videos {
    text-align: center;
    padding: 24px 16px;
    color: var(--color-text-muted);
    font-size: 14px;
    border-top: 1px solid var(--color-border);
    margin-top: 16px;
}

/* Subtitle button & overlay */
.ts-subtitle-btn.active {
    color: #fbbf24;
}

.ts-subtitle-overlay {
    position: absolute;
    bottom: 80px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 25;
    pointer-events: none;
    padding: 0 10%;
    transition: bottom 0.2s ease;
}

.ts-subtitle-overlay:empty {
    display: none;
}

.ts-subtitle-overlay span {
    display: inline;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1.8;
    padding: 3px 10px;
    border-radius: 4px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.ts-player:not(:hover):not(.ts-paused) .ts-subtitle-overlay {
    bottom: 20px;
}

.ts-player.ts-fullscreen .ts-subtitle-overlay {
    bottom: 100px;
    padding: 0 15%;
}

.ts-player.ts-fullscreen .ts-subtitle-overlay span {
    font-size: 1.6rem;
}

.ts-player.ts-fullscreen:not(:hover):not(.ts-paused) .ts-subtitle-overlay {
    bottom: 30px;
}

@media (max-width: 640px) {
    .ts-subtitle-overlay {
        bottom: 52px;
        padding: 0 3%;
    }

    .ts-subtitle-overlay span {
        font-size: 1.25rem;
        padding: 3px 8px;
        line-height: 1.7;
    }

    .ts-player:not(:hover):not(.ts-paused) .ts-subtitle-overlay {
        bottom: 14px;
    }
}

@media (max-width: 640px) and (orientation: landscape) {
    .ts-subtitle-overlay {
        bottom: 56px;
    }

    .ts-subtitle-overlay span {
        font-size: 1.1rem;
    }

    .ts-player:not(:hover):not(.ts-paused) .ts-subtitle-overlay {
        bottom: 16px;
    }
}

@media (max-width: 380px) {
    .ts-subtitle-overlay span {
        font-size: 0.95rem;
        padding: 2px 6px;
    }
}

.ts-video::cue {
    visibility: hidden;
}