/* ============================================
   MEDIATEKA PAGE — მობილურის სტილი
   App-Like Design
   ============================================ */

/* ── CSS Variables ── */
:root {
    --mdk-primary: #8b5cf6;
    --mdk-primary-dark: #6d28d9;
    --mdk-neon-blue: #06b6d4;
    --mdk-dark-bg: #030014;
    --mdk-dark-card: #110a24;
    --mdk-dark-card-hover: #1a1035;
    --mdk-text-muted: #9ca3af;
    --mdk-gold: #fbbf24;
}

/* ── Hero Spotlight (App-Like) ── */
.mdk-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    margin-top: -80px;
    padding-top: 80px;
    background: linear-gradient(135deg, #030014 0%, #0f0a1e 100%);
}

.mdk-hero-backdrop {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 20%;
    filter: blur(3px) brightness(0.35) saturate(1.2);
    transform: scale(1.1);
    transition: background-image 1s cubic-bezier(.4,0,.2,1), filter 0.6s;
}

.mdk-hero-gradient {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, 
            var(--mdk-dark-bg) 0%, 
            rgba(3,0,20,.92) 25%,
            rgba(3,0,20,.6) 50%,
            rgba(3,0,20,.3) 75%,
            rgba(3,0,20,.15) 100%),
        linear-gradient(to right, rgba(3,0,20,.8) 0%, transparent 60%);
    pointer-events: none;
}

.mdk-hero-content {
    padding: 3.5rem 0 3rem;
    max-width: 700px;
    min-height: 320px;
    display: flex;
    align-items: flex-end;
}

.mdk-hero-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 200px;
}

/* ── Hero Shimmer ── */
.mdk-hero-shimmer {
    animation: shimmerPulse 1.8s ease-in-out infinite;
}
@keyframes shimmerPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

.mdk-hero-info { animation: fadeSlideUp 0.7s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(25px); }
    to { opacity: 1; transform: translateY(0); }
}

.mdk-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    background: linear-gradient(135deg, var(--mdk-primary), var(--mdk-neon-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.85rem;
}
.mdk-hero-badge i { 
    font-size: 0.65rem; 
    -webkit-text-fill-color: var(--mdk-gold);
    color: var(--mdk-gold);
}

.mdk-hero-title {
    font-family: 'BigTextFont', 'Inter', sans-serif;
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 1rem;
    text-shadow: 0 4px 40px rgba(0,0,0,.6);
}

.mdk-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

.mdk-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.75);
    backdrop-filter: blur(12px);
    transition: all .3s;
}
.mdk-hero-pill i { font-size: 0.65rem; color: var(--mdk-primary); }
.mdk-hero-pill--gold { 
    background: rgba(251,191,36,.12); 
    border-color: rgba(251,191,36,.2); 
    color: #fbbf24;
    box-shadow: 0 0 20px rgba(251,191,36,.15);
}
.mdk-hero-pill--gold i { color: #fbbf24; }

.mdk-hero-desc {
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(255,255,255,.55);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.mdk-hero-actions {
    display: flex;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.mdk-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.8rem;
    border-radius: 0.85rem;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
}
.mdk-hero-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,.15) 100%);
    opacity: 0;
    transition: opacity .3s;
}
.mdk-hero-btn:hover::before { opacity: 1; }

.mdk-hero-btn--primary {
    background: linear-gradient(135deg, var(--mdk-primary), var(--mdk-primary-dark));
    color: #fff;
    box-shadow: 0 6px 32px rgba(139,92,246,.4);
}
.mdk-hero-btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(139,92,246,.55);
}

.mdk-hero-btn--ghost {
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.75);
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(12px);
}
.mdk-hero-btn--ghost:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
    border-color: rgba(255,255,255,.2);
}

/* ── Quick Stats Bar ── */
.mdk-stats-bar {
    position: relative;
    z-index: 5;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(139,92,246,.12);
    background: rgba(15,10,30,.65);
    backdrop-filter: blur(24px);
}

.mdk-stats-inner {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.mdk-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,.45);
    transition: color .3s;
}
.mdk-stat:hover { color: rgba(255,255,255,.7); }
.mdk-stat i { 
    color: var(--mdk-primary); 
    font-size: 0.8rem;
    opacity: 0.8;
}
.mdk-stat span { 
    font-weight: 700; 
    color: rgba(255,255,255,.9);
    margin-right: 0.2rem;
}

/* ── Content Tabs (App-Like) ── */
.mdk-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.mdk-tab {
    padding: 0.6rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255,255,255,.5);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.06);
    cursor: pointer;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.mdk-tab i { font-size: 0.75rem; }
.mdk-tab:hover { 
    color: rgba(255,255,255,.8); 
    background: rgba(139,92,246,.08); 
    border-color: rgba(139,92,246,.2); 
}
.mdk-tab.is-active { 
    color: #fff; 
    background: rgba(139,92,246,.15); 
    border-color: rgba(139,92,246,.4);
    box-shadow: 0 0 20px rgba(139,92,246,.2);
}

/* ── Section Headers (App-Like) ── */
.mdk-section {
    margin-bottom: 2.5rem;
}

.mdk-section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.mdk-section-icon {
    width: 46px;
    height: 46px;
    border-radius: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: #fff;
    background: linear-gradient(135deg, var(--mdk-primary), var(--mdk-primary-dark));
    box-shadow: 0 6px 24px rgba(139,92,246,.35);
    flex-shrink: 0;
    position: relative;
}
.mdk-section-icon::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--mdk-primary), var(--mdk-neon-blue));
    opacity: 0.3;
    z-index: -1;
    filter: blur(8px);
}

.mdk-section-icon--fire {
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    box-shadow: 0 6px 24px rgba(239,68,68,.3);
}
.mdk-section-icon--blue {
    background: linear-gradient(135deg, var(--mdk-neon-blue), #4F46E5);
    box-shadow: 0 6px 24px rgba(6,182,212,.3);
}
.mdk-section-icon--violet {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    box-shadow: 0 6px 24px rgba(99,102,241,.3);
}

.mdk-section-title {
    font-family: 'BigTextFont','Inter',sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
}

.mdk-section-subtitle {
    font-size: 0.8rem;
    color: var(--mdk-text-muted);
    margin-top: 0.15rem;
}

/* ── Carousel Container (App-Like) ── */
.mdk-carousel-container {
    position: relative;
    padding: 0.5rem 0 1.5rem;
    overflow: hidden;
}

.mdk-swiper {
    overflow: visible;
}

.mdk-swiper .swiper-button-next,
.mdk-swiper .swiper-button-prev {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(139,92,246,.25), rgba(99,102,241,.2));
    backdrop-filter: blur(20px);
    border: 1px solid rgba(139,92,246,.3);
    color: #fff;
    opacity: 0;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 4px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.1);
}
.mdk-swiper .swiper-button-next {
    right: 6px;
}
.mdk-swiper .swiper-button-prev {
    left: 6px;
}
.mdk-swiper:hover .swiper-button-next,
.mdk-swiper:hover .swiper-button-prev {
    opacity: 1;
}
.mdk-swiper .swiper-button-next:hover,
.mdk-swiper .swiper-button-prev:hover {
    background: linear-gradient(135deg, rgba(139,92,246,.5), rgba(99,102,241,.4));
    border-color: rgba(139,92,246,.6);
    transform: scale(1.12);
    box-shadow: 0 8px 28px rgba(139,92,246,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.mdk-swiper .swiper-button-next:active,
.mdk-swiper .swiper-button-prev:active {
    transform: scale(1.05);
}

/* Custom Arrow Icons */
.mdk-swiper .swiper-button-next::after,
.mdk-swiper .swiper-button-prev::after {
    font-size: 0 !important;
}
.mdk-swiper .swiper-button-next::before,
.mdk-swiper .swiper-button-prev::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2.5px solid #fff;
    border-bottom: 2.5px solid #fff;
}
.mdk-swiper .swiper-button-next::before {
    transform: rotate(-45deg);
    margin-left: -3px;
}
.mdk-swiper .swiper-button-prev::before {
    transform: rotate(135deg);
    margin-right: -3px;
}

/* Hide default Swiper SVG icons */
.mdk-swiper .swiper-button-next svg,
.mdk-swiper .swiper-button-prev svg,
.swiper-navigation-icon {
    display: none !important;
}

.mdk-swiper .swiper-button-next.swiper-button-disabled,
.mdk-swiper .swiper-button-prev.swiper-button-disabled {
    opacity: 0 !important;
}

/* ── Movie Card (App-Like) ── */
.mdk-card {
    display: block;
    position: relative;
    border-radius: 1.1rem;
    overflow: hidden;
    text-decoration: none;
    background: var(--mdk-dark-card);
    border: 1px solid rgba(255,255,255,0.05);
    transition: all .45s cubic-bezier(.4,0,.2,1);
}
.mdk-card:hover {
    transform: translateY(-8px);
    border-color: rgba(139,92,246,.4);
    box-shadow: 
        0 20px 50px -10px rgba(139,92,246,.25),
        0 0 0 1px rgba(139,92,246,.15),
        0 8px 24px rgba(0,0,0,.4);
}

.mdk-card-poster {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2/3;
}
.mdk-card-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.4,0,.2,1), filter .4s;
    content-visibility: auto;
}
.mdk-card:hover .mdk-card-poster img { 
    transform: scale(1.1); 
    filter: brightness(1.15); 
}

/* Gradient overlay */
.mdk-card-poster::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(8,3,32,.98) 0%,
        rgba(8,3,32,.55) 35%,
        transparent 55%,
        rgba(8,3,32,.2) 100%);
    transition: opacity .4s;
    pointer-events: none;
}

/* Play button on hover */
.mdk-card-play {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .35s;
}
.mdk-card-play i {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    background: linear-gradient(135deg, rgba(139,92,246,.85), rgba(109,40,217,.85));
    backdrop-filter: blur(8px);
    border: 2px solid rgba(255,255,255,.2);
    box-shadow: 0 8px 32px rgba(139,92,246,.4);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.mdk-card:hover .mdk-card-play { opacity: 1; }
.mdk-card:hover .mdk-card-play i { transform: scale(1.1); }

/* IMDb Rating badge (top-left) */
.mdk-card-rating {
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(251,191,36,.9);
    color: #1a1a2e;
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 12px rgba(251,191,36,.3);
}
.mdk-card-rating i { font-size: 0.55rem; }

/* Year badge (top-right) */
.mdk-card-year {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    z-index: 4;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.3rem 0.7rem;
    border-radius: 0.5rem;
    background: rgba(139,92,246,.8);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
}

/* Type tag (serial indicator) */
.mdk-card-type {
    position: absolute;
    top: 2.6rem;
    left: 0.7rem;
    z-index: 4;
    width: 28px;
    height: 28px;
    border-radius: 0.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 2px 8px rgba(99,102,241,.3);
}
.mdk-card-type i { font-size: 0.65rem; color: #fff; }

/* Reaction badge */
.mdk-card-reaction {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px;
    border-radius: 0.55rem;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.12);
    animation: reactionBounce 2.5s ease-in-out infinite;
}
.mdk-card-reaction img { width: 24px; height: 24px; object-fit: contain; }
.mdk-card-reaction span { font-size: 0.62rem; font-weight: 700; color: #fff; }

/* Position year badge when reaction exists */
.mdk-card-reaction ~ .mdk-card-year { top: 3.5rem; }

@keyframes reactionBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Info area */
.mdk-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4;
    padding: 0 1rem 1rem;
    transform: translateY(6px);
    transition: transform .4s cubic-bezier(.4,0,.2,1), opacity .35s;
    opacity: 0.9;
}
.mdk-card:hover .mdk-card-info { transform: translateY(0); opacity: 1; }

.mdk-card-title {
    font-family: 'BigTextFont','Inter',sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.mdk-card-genres {
    font-size: 0.74rem;
    color: rgba(255,255,255,.45);
    margin-top: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Category Pills (App-Like) ── */
.mdk-category-bar {
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
    scrollbar-width: none;
}
.mdk-category-bar::-webkit-scrollbar { display: none; }

.mdk-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.15rem;
    border-radius: 2rem;
    font-size: 0.82rem;
    font-weight: 600;
    background: rgba(15,10,30,.7);
    border: 1px solid rgba(255,255,255,.06);
    color: rgba(255,255,255,.55);
    cursor: pointer;
    transition: all .3s cubic-bezier(.4,0,.2,1);
    white-space: nowrap;
    flex-shrink: 0;
}
.mdk-cat-pill:hover {
    background: rgba(139,92,246,.1);
    border-color: rgba(139,92,246,.25);
    color: rgba(255,255,255,.85);
}
.mdk-cat-pill.is-active {
    background: linear-gradient(135deg, rgba(139,92,246,.2), rgba(99,102,241,.15));
    border-color: rgba(139,92,246,.45);
    color: #fff;
    box-shadow: 0 0 20px rgba(139,92,246,.2);
}

/* ── Emoji Sort Bar (App-Like) ── */
.mdk-emoji-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.6rem 1rem;
    background: rgba(15,10,30,.5);
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,.05);
}
.mdk-emoji-bar-label {
    font-size: 0.75rem;
    color: var(--mdk-text-muted);
    margin-right: 0.5rem;
}
.mdk-emoji-btn {
    width: 38px;
    height: 38px;
    border-radius: 0.65rem;
    background: rgba(255,255,255,.04);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
}
.mdk-emoji-btn img { width: 100%; height: 100%; object-fit: contain; }
.mdk-emoji-btn:hover {
    background: rgba(139,92,246,.1);
    border-color: rgba(139,92,246,.3);
    transform: scale(1.1);
}
.mdk-emoji-btn.is-active {
    background: rgba(139,92,246,.2);
    border-color: rgba(139,92,246,.5);
    box-shadow: 0 0 15px rgba(139,92,246,.3);
}

/* ── Filter Bar (App-Like) ── */
.mdk-filter-bar {
    margin-bottom: 2rem;
}

.mdk-filter-row {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.mdk-filter-group {
    flex: 1;
    min-width: 180px;
}
.mdk-filter-group--search {
    flex: 1.5;
    min-width: 220px;
}

.mdk-filter-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mdk-text-muted);
    margin-bottom: 0.5rem;
}

.mdk-filter-select {
    width: 100%;
    padding: 0.75rem 2.8rem 0.75rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.85rem;
    background-color: rgba(15,10,30,.7);
    border: 1px solid rgba(255,255,255,.06);
    color: #fff;
    transition: all .25s;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="%23FFFFFF"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>');
    background-position: right 0.8rem center;
    background-repeat: no-repeat;
    background-size: 1.3em;
}
.mdk-filter-select:focus {
    border-color: var(--mdk-primary);
    box-shadow: 0 0 0 3px rgba(139,92,246,.15);
}

.mdk-search-wrap {
    position: relative;
}
.mdk-search-wrap i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--mdk-text-muted);
    font-size: 0.88rem;
    pointer-events: none;
}
.mdk-search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.8rem;
    border-radius: 0.75rem;
    font-size: 0.85rem;
    background: rgba(15,10,30,.7);
    border: 1px solid rgba(255,255,255,.06);
    color: #fff;
    transition: all .25s;
    outline: none;
}
.mdk-search-input::placeholder { color: var(--mdk-text-muted); }
.mdk-search-input:focus {
    border-color: var(--mdk-primary);
    box-shadow: 0 0 0 3px rgba(139,92,246,.15);
    background: rgba(15,10,30,.9);
}

/* ── Movie Grid (App-Like) ── */
.mdk-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.1rem;
}

@media (min-width: 480px) {
    .mdk-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}
@media (min-width: 768px) {
    .mdk-grid { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
}
@media (min-width: 1024px) {
    .mdk-grid { grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
}
@media (min-width: 1280px) {
    .mdk-grid { grid-template-columns: repeat(6, 1fr); gap: 1.6rem; }
}

/* ── Skeleton Loading (App-Like) ── */
.mdk-skeleton {
    background: linear-gradient(90deg, 
        var(--mdk-dark-card) 0%,
        var(--mdk-dark-card-hover) 50%,
        var(--mdk-dark-card) 100%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease-in-out infinite;
    border-radius: 1.1rem;
}
@keyframes skeletonShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.mdk-skeleton-card {
    aspect-ratio: 2/3;
    max-height: 200px;
    border-radius: 0.8rem;
    border: 1px solid rgba(255,255,255,.04);
}

/* ── Loading Spinner ── */
.mdk-loader {
    display: flex;
    justify-content: center;
    padding: 3rem 0;
}
.mdk-spinner {
    width: 45px;
    height: 45px;
    border: 3px solid rgba(139,92,246,.15);
    border-top-color: var(--mdk-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Pagination (App-Like) ── */
.mdk-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin-top: 3rem;
    flex-wrap: wrap;
}

.mdk-page-btn {
    min-width: 42px;
    height: 42px;
    padding: 0 0.75rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.88rem;
    font-weight: 600;
    color: rgba(255,255,255,.6);
    background: rgba(15,10,30,.6);
    border: 1px solid rgba(255,255,255,.06);
    cursor: pointer;
    transition: all .3s;
}
.mdk-page-btn:hover {
    background: rgba(139,92,246,.12);
    border-color: rgba(139,92,246,.25);
    color: #fff;
}
.mdk-page-btn.is-active {
    background: linear-gradient(135deg, var(--mdk-primary), var(--mdk-primary-dark));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 20px rgba(139,92,246,.35);
}
.mdk-page-btn.is-arrow {
    background: rgba(139,92,246,.08);
}
.mdk-page-dots {
    color: rgba(255,255,255,.3);
    padding: 0 0.3rem;
}

/* ── Divider ── */
.mdk-divider {
    height: 1px;
    background: linear-gradient(to right, 
        transparent, 
        rgba(139,92,246,.25), 
        rgba(99,102,241,.2), 
        transparent);
    margin: 2rem 0 2.5rem;
}

/* ── Empty State ── */
.mdk-empty {
    text-align: center;
    padding: 4rem 2rem;
}
.mdk-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 1.25rem;
    background: rgba(139,92,246,.08);
    border: 1px solid rgba(139,92,246,.15);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mdk-empty-icon i {
    font-size: 2rem;
    color: var(--mdk-primary);
    opacity: 0.5;
}
.mdk-empty-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255,255,255,.7);
    margin-bottom: 0.5rem;
}
.mdk-empty-text {
    font-size: 0.88rem;
    color: var(--mdk-text-muted);
}

/* ── Watch Modal (App Download Prompt) ── */
.mdk-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(3,0,20,.85);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all .35s cubic-bezier(.4,0,.2,1);
    padding: 1.5rem;
}
.mdk-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.mdk-modal {
    background: linear-gradient(180deg, #1a1035 0%, #110a24 100%);
    border: 1px solid rgba(139,92,246,.2);
    border-radius: 1.5rem;
    padding: 2.5rem;
    max-width: 420px;
    width: 100%;
    text-align: center;
    transform: translateY(30px) scale(0.95);
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    box-shadow: 
        0 25px 80px rgba(139,92,246,.2),
        0 0 0 1px rgba(255,255,255,.05) inset;
}
.mdk-modal-overlay.is-open .mdk-modal {
    transform: translateY(0) scale(1);
}

.mdk-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s;
}
.mdk-modal-close:hover {
    background: rgba(239,68,68,.15);
    border-color: rgba(239,68,68,.3);
    color: #ef4444;
}

.mdk-modal-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mdk-primary), var(--mdk-neon-blue));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 40px rgba(139,92,246,.4);
    animation: modalIconPulse 2s ease-in-out infinite;
}
.mdk-modal-icon i { font-size: 2rem; color: #fff; }

@keyframes modalIconPulse {
    0%, 100% { box-shadow: 0 8px 40px rgba(139,92,246,.4); }
    50% { box-shadow: 0 8px 60px rgba(139,92,246,.6); }
}

.mdk-modal-title {
    font-family: 'BigTextFont','Inter',sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.75rem;
}

.mdk-modal-text {
    font-size: 0.95rem;
    line-height: 1.7;
    color: rgba(255,255,255,.6);
    margin-bottom: 2rem;
}

.mdk-modal-btns {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.mdk-modal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem;
    border-radius: 0.85rem;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: all .35s;
    cursor: pointer;
    border: none;
}
.mdk-modal-btn--primary {
    background: linear-gradient(135deg, var(--mdk-primary), var(--mdk-primary-dark));
    color: #fff;
    box-shadow: 0 6px 32px rgba(139,92,246,.4);
}
.mdk-modal-btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 40px rgba(139,92,246,.55);
}
.mdk-modal-btn--ghost {
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.7);
    border: 1px solid rgba(255,255,255,.1);
}
.mdk-modal-btn--ghost:hover {
    background: rgba(255,255,255,.1);
    color: #fff;
}

/* Store badges */
.mdk-store-badges {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1rem;
}
.mdk-store-badge {
    height: 45px;
    border-radius: 0.5rem;
    opacity: 0.85;
    transition: all .3s;
}
.mdk-store-badge:hover {
    opacity: 1;
    transform: scale(1.05);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .mdk-hero { min-height: 420px; }
    .mdk-hero-content { padding: 2.5rem 0 2rem; }
    .mdk-hero-title { font-size: 1.8rem; }
    .mdk-stats-inner { gap: 1.25rem; }
    .mdk-stat { font-size: 0.78rem; }
    .mdk-section-icon { width: 40px; height: 40px; font-size: 0.95rem; }
    .mdk-section-title { font-size: 1.2rem; }
    .mdk-filter-row { flex-direction: column; gap: 0.75rem; }
    .mdk-filter-group { min-width: 100%; }
    .mdk-tabs { overflow-x: auto; padding-bottom: 0.5rem; }
    .mdk-tab { padding: 0.5rem 1.1rem; font-size: 0.82rem; }
}

@media (max-width: 480px) {
    .mdk-hero { min-height: 360px; }
    .mdk-hero-desc { -webkit-line-clamp: 2; }
    .mdk-hero-actions { flex-direction: column; }
    .mdk-hero-btn { justify-content: center; }
    .mdk-modal { padding: 2rem 1.5rem; }
    .mdk-modal-title { font-size: 1.3rem; }
}

/* ── Reveal Animation ── */
.mdk-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(.4,0,.2,1), transform 0.6s cubic-bezier(.4,0,.2,1);
}
.mdk-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}