@import url("player.css"); /* ===================================================================== SHABLO — "Aurora Cinema" Design System 100% fluid & responsive. No fixed layout widths. Modes: desktop (windows) / mobile / tv (via [data-mode] on ) ===================================================================== */ /* ---------- Design tokens ---------- */ :root { /* brand */ --brand: #ff7a00; --brand-2: #ff9d2e; --brand-3: #ffb85c; --brand-glow: rgba(255, 122, 0, .55); /* surfaces */ --bg-0: #060608; --bg-1: #0b0b11; --bg-2: #12121b; --card: rgba(22, 22, 32, .55); --card-solid: #14141d; --stroke: rgba(255, 255, 255, .08); --stroke-strong: rgba(255, 255, 255, .16); /* text */ --text: #f4f5fa; --muted: #a3a5b5; --muted-2: #6f7180; /* status */ --good: #29d17d; --gold: #ffcf3f; /* fluid scale (all relative) */ --fs-xs: clamp(.68rem, .62rem + .3vw, .82rem); --fs-sm: clamp(.78rem, .72rem + .35vw, .95rem); --fs-md: clamp(.9rem, .82rem + .45vw, 1.08rem); --fs-lg: clamp(1.05rem, .95rem + .7vw, 1.4rem); --fs-xl: clamp(1.35rem, 1.1rem + 1.6vw, 2.4rem); --fs-2xl: clamp(1.8rem, 1.3rem + 3vw, 4rem); /* spacing rhythm */ --gap: clamp(.7rem, .4rem + 1vw, 1.4rem); --pad: clamp(1rem, .5rem + 2.5vw, 2.6rem); --radius: clamp(14px, 1vw + 10px, 22px); --radius-lg: clamp(20px, 2vw + 14px, 34px); /* layout */ --shell: min(96vw, 1680px); --header-h: clamp(58px, 4vw + 40px, 84px); --ease: cubic-bezier(.22, 1, .36, 1); --shadow: 0 18px 50px -18px rgba(0, 0, 0, .8); color-scheme: dark; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: "Vazirmatn", "Segoe UI", Tahoma, "Iran Sans", sans-serif; background: var(--bg-0); color: var(--text); line-height: 1.7; min-height: 100dvh; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; } ul { list-style: none; } :focus-visible { outline: none; } /* ---------- Living aurora background ---------- */ .aurora { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; background: radial-gradient(120% 90% at 50% -10%, #171019 0%, var(--bg-0) 55%), var(--bg-0); } .aurora::before, .aurora::after { content: ""; position: absolute; border-radius: 50%; filter: blur(clamp(50px, 8vw, 130px)); opacity: .5; mix-blend-mode: screen; } .aurora::before { width: 55vw; height: 55vw; left: -10vw; top: -12vw; background: radial-gradient(circle, rgba(255,122,0,.9), transparent 62%); animation: drift1 22s var(--ease) infinite alternate; } .aurora::after { width: 60vw; height: 60vw; right: -14vw; top: 4vw; background: radial-gradient(circle, rgba(126,60,255,.55), transparent 62%); animation: drift2 26s var(--ease) infinite alternate; } .aurora i { position: absolute; width: 42vw; height: 42vw; left: 30vw; bottom: -18vw; border-radius: 50%; filter: blur(clamp(50px,8vw,120px)); opacity: .35; background: radial-gradient(circle, rgba(255,203,63,.7), transparent 60%); animation: drift3 30s var(--ease) infinite alternate; } @keyframes drift1 { to { transform: translate(18vw, 12vh) scale(1.25); } } @keyframes drift2 { to { transform: translate(-16vw, 10vh) scale(1.15); } } @keyframes drift3 { to { transform: translate(-14vw, -12vh) scale(1.2); } } /* film-grain overlay */ .grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce) { .aurora::before, .aurora::after, .aurora i { animation: none; } } /* ---------- Shell / layout helpers ---------- */ .shell { width: var(--shell); margin-inline: auto; } .section { padding-block: clamp(1.6rem, 3vw, 3.4rem); } .stack { display: flex; flex-direction: column; gap: var(--gap); } .row { display: flex; align-items: center; gap: var(--gap); } .wrap { flex-wrap: wrap; } .spread { justify-content: space-between; } .center { justify-content: center; } .grow { flex: 1 1 auto; min-width: 0; } .hidden { display: none !important; } /* ===================================================================== HEADER (desktop top bar) ===================================================================== */ .top { position: sticky; top: 0; z-index: 60; backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); background: linear-gradient(180deg, rgba(6,6,9,.92), rgba(6,6,9,.55)); border-bottom: 1px solid var(--stroke); transition: background .3s var(--ease); } .top.scrolled { background: rgba(6,6,9,.96); box-shadow: var(--shadow); } .top__bar { height: var(--header-h); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(.6rem, 2vw, 2rem); width: var(--shell); margin-inline: auto; } /* brand */ .brand { display: flex; align-items: center; gap: clamp(.4rem, 1vw, .7rem); } .brand__logo { width: clamp(34px, 3.4vw, 50px); aspect-ratio: 1; border-radius: 12px; object-fit: contain; filter: drop-shadow(0 0 12px var(--brand-glow)); } .brand__name { font-weight: 800; letter-spacing: .5px; line-height: 1; font-size: clamp(1.05rem, 1.4vw, 1.5rem); background: linear-gradient(120deg, #fff, var(--brand-3)); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand__sub { font-size: var(--fs-xs); color: var(--muted); } /* primary nav */ .nav { display: flex; align-items: center; gap: clamp(.2rem, .8vw, .5rem); justify-content: center; } .nav__link { position: relative; display: inline-flex; align-items: center; gap: .45em; padding: clamp(.4rem, .8vw, .6rem) clamp(.7rem, 1.4vw, 1.1rem); border-radius: 999px; font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; transition: color .2s, background .2s, transform .2s; } .nav__link svg { width: 1.15em; height: 1.15em; } .nav__link:hover { color: var(--text); background: rgba(255,255,255,.05); } .nav__link.active { color: #1a1105; font-weight: 700; background: linear-gradient(120deg, var(--brand), var(--brand-2)); box-shadow: 0 6px 20px -6px var(--brand-glow); } .nav__link.ai.active, .nav__link.ai:hover { } .nav__link.ai::after { content: ""; position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 1px rgba(126,60,255,.4); opacity: 0; transition: opacity .2s; } .nav__link.ai:hover::after { opacity: 1; } /* header actions */ .actions { display: flex; align-items: center; gap: clamp(.4rem, 1vw, .7rem); justify-self: end; } .icon-btn { display: grid; place-items: center; width: clamp(38px, 3vw, 46px); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid var(--stroke); transition: transform .2s, background .2s, border-color .2s; } .icon-btn svg { width: 1.25em; height: 1.25em; } .icon-btn:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); } .chip-user { display: flex; align-items: center; gap: .5rem; padding: .35rem .35rem .35rem .9rem; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--stroke); } .chip-user__badge { font-size: var(--fs-xs); color: var(--good); background: rgba(41,209,125,.12); padding: .15em .6em; border-radius: 999px; border: 1px solid rgba(41,209,125,.3); } .chip-user__name { font-size: var(--fs-sm); font-weight: 600; } .avatar { width: clamp(32px, 2.6vw, 40px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #1a1105; background: linear-gradient(135deg, var(--brand), var(--brand-3)); } /* mobile menu toggle (hidden on desktop) */ .burger { display: none; } /* ===================================================================== BUTTONS ===================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: clamp(.55rem, 1vw, .85rem) clamp(1rem, 2vw, 1.6rem); border-radius: 999px; font-weight: 700; font-size: var(--fs-sm); border: 1px solid var(--stroke); background: rgba(255,255,255,.06); transition: transform .18s var(--ease), box-shadow .2s, background .2s, filter .2s; white-space: nowrap; } .btn svg { width: 1.2em; height: 1.2em; } .btn:hover { transform: translateY(-2px); } .btn--primary { color: #1a1105; border-color: transparent; background: linear-gradient(120deg, var(--brand), var(--brand-2)); box-shadow: 0 10px 30px -10px var(--brand-glow); } .btn--primary:hover { box-shadow: 0 16px 40px -10px var(--brand-glow); filter: brightness(1.05); } .btn--ghost { background: rgba(255,255,255,.05); } .btn--ghost.on, #btn-save.on, .btn--save.on { background: linear-gradient(135deg, rgba(229, 169, 60, 0.22), rgba(229, 169, 60, 0.1)); border-color: var(--brand); color: var(--brand); box-shadow: 0 0 16px rgba(229, 169, 60, 0.25); } .btn--ghost.on svg, #btn-save.on svg, .btn--save.on svg { fill: currentColor; } .btn--ai { color: #fff; border-color: transparent; background: linear-gradient(120deg, #7e3cff, #b06bff); box-shadow: 0 10px 30px -10px rgba(126,60,255,.6); } /* ===================================================================== SECTION HEADINGS ===================================================================== */ .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1rem, 2vw, 1.6rem); flex-wrap: wrap; } .head__titles h2 { font-size: var(--fs-xl); font-weight: 800; line-height: 1.15; display: flex; align-items: center; gap: .5rem; } .head__titles h2::before { content: ""; width: clamp(6px, .5vw, 9px); height: 1.1em; border-radius: 99px; background: linear-gradient(var(--brand), var(--brand-3)); } .head__titles p { color: var(--muted); font-size: var(--fs-sm); } .head__nav { display: flex; gap: .5rem; } /* ===================================================================== HERO ===================================================================== */ .hero { position: relative; padding-block: clamp(1.5rem, 4vw, 3.5rem); } .hero__stage { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: clamp(340px, 46vw, 640px); display: grid; align-items: end; border: 1px solid var(--stroke); box-shadow: var(--shadow); isolation: isolate; } .hero__bg { position: absolute; inset: 0; z-index: -2; } .hero__bg img { width: 100%; height: 100%; object-fit: cover; } .hero__stage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6,6,9,.95) 0%, rgba(6,6,9,.5) 45%, transparent 75%), linear-gradient(0deg, rgba(6,6,9,.98), transparent 55%); } [dir="rtl"] .hero__stage::after { background: linear-gradient(270deg, rgba(6,6,9,.95) 0%, rgba(6,6,9,.5) 45%, transparent 75%), linear-gradient(0deg, rgba(6,6,9,.98), transparent 55%); } .hero__content { padding: clamp(1.2rem, 4vw, 3.2rem); max-width: min(100%, 640px); } .hero__badge { display: inline-flex; align-items: center; gap: .5em; font-size: var(--fs-xs); padding: .3em .8em; border-radius: 999px; margin-bottom: 1rem; background: rgba(255,122,0,.14); border: 1px solid rgba(255,122,0,.35); color: var(--brand-3); } .hero__title { font-size: var(--fs-2xl); font-weight: 900; line-height: 1.05; letter-spacing: -.5px; } .hero__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; } .hero__desc { color: var(--muted); font-size: var(--fs-md); margin-bottom: 1.4rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .hero__cta { display: flex; gap: .7rem; flex-wrap: wrap; } /* hero slider dots */ .hero__dots { position: absolute; bottom: clamp(1rem, 2vw, 1.6rem); inset-inline-end: clamp(1.2rem, 4vw, 3.2rem); display: flex; gap: .5rem; z-index: 2; } .hero__dots button { width: 10px; height: 10px; border-radius: 99px; background: rgba(255,255,255,.3); transition: .3s; } .hero__dots button.on { width: 30px; background: var(--brand); } .pill { display: inline-flex; align-items: center; gap: .4em; font-size: var(--fs-xs); padding: .3em .75em; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid var(--stroke); color: var(--text); } .pill--star { color: var(--gold); } .pill--good { color: var(--good); border-color: rgba(41,209,125,.3); background: rgba(41,209,125,.1); } /* ===================================================================== MEDIA CARD (film-strip motif) ===================================================================== */ .grid-cards { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 15vw, 220px), 1fr)); } .rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(150px, 20vw, 230px); gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .6rem; scrollbar-width: thin; scrollbar-color: var(--brand) transparent; } .rail::-webkit-scrollbar { height: 8px; } .rail::-webkit-scrollbar-thumb { background: rgba(255,122,0,.5); border-radius: 99px; } .rail > * { scroll-snap-align: start; } .card { position: relative; display: block; border-radius: var(--radius); background: var(--card); border: 1px solid var(--stroke); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; will-change: transform; } .card:hover, .card:focus-visible { transform: translateY(-6px); border-color: rgba(255,122,0,.45); box-shadow: 0 24px 50px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,122,0,.25); } .card__poster { position: relative; aspect-ratio: 2/3; overflow: hidden; } .card__poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .card:hover .card__poster img { transform: scale(1.08); } /* perforation strip like the logo film reel */ .card__poster::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 0; width: 10px; z-index: 2; opacity: .85; background: repeating-linear-gradient(180deg, transparent 0 6px, rgba(0,0,0,.55) 6px 12px); border-inline-end: 1px solid rgba(255,122,0,.25); } .card__rank { position: absolute; top: .5rem; inset-inline-start: .8rem; z-index: 3; font-weight: 900; font-size: clamp(1.3rem, 3vw, 2.2rem); color: rgba(255,255,255,.9); text-shadow: 0 2px 10px rgba(0,0,0,.8); -webkit-text-stroke: 1px rgba(255,122,0,.6); } .card__badge { position: absolute; top: .6rem; inset-inline-end: .6rem; z-index: 3; display: inline-flex; align-items: center; gap: .3em; font-size: var(--fs-xs); font-weight: 700; color: #1a1105; padding: .2em .55em; border-radius: 8px; background: linear-gradient(120deg, var(--brand), var(--brand-2)); box-shadow: 0 4px 12px -4px rgba(0,0,0,.7); } .card__save { position: absolute; bottom: .6rem; inset-inline-start: .6rem; z-index: 3; width: 34px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: rgba(6,6,9,.6); border: 1px solid var(--stroke); backdrop-filter: blur(6px); opacity: 0; transform: translateY(6px); transition: .25s var(--ease); } .card:hover .card__save, .card:focus-within .card__save { opacity: 1; transform: none; } .card__save svg { width: 1.1em; } .card__save:hover { background: var(--brand); color: #1a1105; } .card__save.on { opacity: 1 !important; transform: none !important; background: var(--brand) !important; color: #1a1105 !important; border-color: var(--brand) !important; } .card__save.on svg { fill: currentColor; } /* play overlay */ .card__play { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: radial-gradient(circle at center, rgba(6,6,9,.35), rgba(6,6,9,.7)); opacity: 0; transition: opacity .3s; } .card:hover .card__play, .card:focus-within .card__play { opacity: 1; } .card__play span { width: clamp(44px, 4vw, 62px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #1a1105; background: linear-gradient(120deg, var(--brand), var(--brand-3)); box-shadow: 0 0 0 8px rgba(255,122,0,.18), 0 10px 30px -8px var(--brand-glow); transform: scale(.7); transition: transform .3s var(--ease); } .card:hover .card__play span { transform: scale(1); } .card__play svg { width: 45%; } .card__body { padding: clamp(.6rem, 1vw, .9rem); } .card__title { font-size: var(--fs-sm); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card__sub { font-size: var(--fs-xs); color: var(--muted-2); direction: ltr; text-align: start; } .card__foot { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; } .card__tag { font-size: var(--fs-xs); color: var(--muted); } .card__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-2); } .card__rate { color: var(--gold); font-size: var(--fs-xs); font-weight: 700; display: inline-flex; gap: .25em; align-items: center; } .card__dub { font-size: var(--fs-xs); color: var(--good); display: inline-flex; gap: .3em; align-items: center; } /* ===================================================================== SEARCH (advanced) ===================================================================== */ .searchbar { display: flex; gap: .7rem; align-items: stretch; flex-wrap: wrap; } .searchbar__field { flex: 1 1 320px; display: flex; align-items: center; gap: .7rem; padding: clamp(.7rem, 1.4vw, 1.1rem) clamp(1rem, 2vw, 1.5rem); border-radius: 999px; background: var(--card); border: 1px solid var(--stroke); backdrop-filter: blur(10px); } .searchbar__field:focus-within { border-color: rgba(255,122,0,.5); box-shadow: 0 0 0 4px rgba(255,122,0,.12); } .searchbar__field input { flex: 1; background: none; border: 0; color: var(--text); font-size: var(--fs-md); } .searchbar__field input::placeholder { color: var(--muted-2); } .searchbar__field svg { width: 1.4em; color: var(--muted); } .filters { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 22vw, 280px), 1fr)); background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius-lg); padding: var(--pad); backdrop-filter: blur(14px); } .field { display: flex; flex-direction: column; gap: .4rem; } .field > label { font-size: var(--fs-xs); color: var(--muted); } .select, .field input[type="number"] { width: 100%; padding: .7rem 1rem; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--stroke); color: var(--text); font-size: var(--fs-sm); } .seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--stroke); } .seg button { padding: .5rem 1.1rem; border-radius: 999px; font-size: var(--fs-sm); color: var(--muted); transition: .2s; } .seg button.on { color: #1a1105; background: linear-gradient(120deg, var(--brand), var(--brand-2)); font-weight: 700; } .toggle { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--stroke); } .toggle span { font-size: var(--fs-sm); } .switch { position: relative; width: 46px; height: 26px; flex: none; } .switch input { opacity: 0; width: 0; height: 0; } .switch i { position: absolute; inset: 0; border-radius: 99px; background: #2a2a38; transition: .25s; } .switch i::before { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; top: 3px; inset-inline-start: 3px; background: #fff; transition: .25s; } .switch input:checked + i { background: linear-gradient(120deg, var(--brand), var(--brand-2)); } .switch input:checked + i::before { transform: translateX(-20px); } [dir="ltr"] .switch input:checked + i::before { transform: translateX(20px); } .range { display: flex; align-items: center; gap: .6rem; } .range input { width: 100%; } /* ===================================================================== AI PAGE ===================================================================== */ .ai-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 40vw, 520px), 1fr)); } .ai-card { background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius-lg); padding: var(--pad); backdrop-filter: blur(14px); position: relative; overflow: hidden; } .ai-card::before { content: ""; position: absolute; inset: 0; opacity: .12; z-index: -1; background: radial-gradient(60% 60% at 100% 0%, var(--accent, var(--brand)), transparent 60%); } .ai-card--plot { --accent: #ffcf3f; } .ai-card--reco { --accent: #7e3cff; } .ai-card__tag { display: inline-flex; align-items: center; gap: .4em; font-size: var(--fs-xs); padding: .3em .8em; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--stroke); margin-bottom: 1rem; } .ai-card h3 { font-size: var(--fs-lg); margin-bottom: .5rem; } .ai-card p.lead { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 1.2rem; } .ai-card textarea { width: 100%; min-height: clamp(90px, 12vh, 140px); resize: vertical; padding: 1rem; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--stroke); color: var(--text); font: inherit; font-size: var(--fs-sm); } .ai-result { margin-top: 1rem; display: grid; gap: .7rem; } /* ===================================================================== APPS PAGE ===================================================================== */ .apps-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(clamp(240px, 28vw, 340px), 1fr)); } .app-card { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius-lg); padding: var(--pad); backdrop-filter: blur(12px); transition: transform .3s var(--ease), border-color .3s; } .app-card:hover { transform: translateY(-6px); border-color: rgba(255,122,0,.4); } .app-card__icon { width: clamp(54px, 5vw, 74px); aspect-ratio: 1; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(255,122,0,.18), rgba(126,60,255,.18)); border: 1px solid var(--stroke); color: var(--brand-3); } .app-card__icon svg { width: 55%; } .app-card h3 { font-size: var(--fs-lg); } .app-card p { color: var(--muted); font-size: var(--fs-sm); } .app-card small { color: var(--muted-2); font-size: var(--fs-xs); } /* ===================================================================== DETAIL PAGE ===================================================================== */ .detail__hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--stroke); } .detail__backdrop { position: absolute; inset: 0; z-index: -2; } .detail__backdrop img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); } .detail__hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--bg-0) 4%, rgba(6,6,9,.6) 40%, rgba(6,6,9,.5)); } .detail__body { display: grid; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: end; grid-template-columns: minmax(0, 1fr); padding: clamp(1.2rem, 4vw, 3rem); } @media (min-width: 720px) { .detail__body { grid-template-columns: clamp(180px, 20vw, 280px) 1fr; } } .detail__poster { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--stroke-strong); box-shadow: var(--shadow); aspect-ratio: 2/3; } .detail__poster img { width: 100%; height: 100%; object-fit: cover; } .detail__title { font-size: var(--fs-2xl); font-weight: 900; line-height: 1.05; } .detail__orig { color: var(--muted); direction: ltr; text-align: start; } .detail__meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; } .detail__desc { color: var(--muted); font-size: var(--fs-md); max-width: 70ch; } .dl-seasons { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 .4rem 0; } .dl-seasons button { padding: .65rem 1.4rem; border-radius: 12px; font-size: var(--fs-md); font-weight: 700; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--text-2); cursor: pointer; transition: all .2s ease; } .dl-seasons button:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.2); } .dl-seasons button.on { color: #fff; background: linear-gradient(135deg, rgba(230,92,0,0.85), rgba(247,159,31,0.85)); border-color: rgba(247,159,31,0.6); box-shadow: 0 4px 15px rgba(230,92,0,0.3); } .dl-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0; } .dl-tabs button { padding: .6rem 1.1rem; border-radius: 12px; font-size: var(--fs-sm); background: var(--bg-2); border: 1px solid var(--stroke); color: var(--muted); transition: .2s; } .dl-tabs button.on { color: #1a1105; background: linear-gradient(120deg, var(--brand), var(--brand-2)); font-weight: 700; } .dl-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: clamp(.75rem, 1.4vw, 1rem) clamp(.9rem, 1.6vw, 1.25rem); border-radius: 14px; background: var(--card); border: 1px solid var(--stroke); margin-bottom: .7rem; transition: border-color .2s, background .2s; } .dl-item:hover { border-color: rgba(255,255,255,.15); } .dl-item--watched { border-color: rgba(41, 209, 125, 0.35); background: linear-gradient(90deg, rgba(41, 209, 125, 0.05), var(--card)); } .dl-item__main { display: flex; align-items: center; gap: .85rem; min-width: 0; flex: 1; } .dl-item__q { font-size: var(--fs-xs); font-weight: 800; color: #1a1105; padding: .25em .65em; border-radius: 8px; background: linear-gradient(120deg, var(--brand), var(--brand-2)); flex-shrink: 0; letter-spacing: .02em; } .dl-item__info { min-width: 0; display: flex; flex-direction: column; gap: .2rem; } .dl-item__info b { font-size: var(--fs-sm); display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; word-break: break-word; } .dl-item__info small { display: block; color: var(--muted-2); font-size: var(--fs-xs); } .dl-item__actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; flex-shrink: 0; } @media (max-width: 640px) { .dl-item { flex-direction: column; align-items: stretch; gap: .75rem; } .dl-item__actions { width: 100%; justify-content: flex-end; } .dl-item__actions .btn { flex: 1; justify-content: center; } } .stats { display: grid; gap: 1rem; max-width: 520px; } .stat__row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; } .stat__label { font-size: var(--fs-sm); color: var(--muted); } .bar { height: 8px; border-radius: 99px; background: var(--bg-2); overflow: hidden; } .bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brand), var(--brand-3)); } /* ===================================================================== FOOTER ===================================================================== */ .foot { border-top: 1px solid var(--stroke); margin-top: clamp(2rem, 5vw, 4rem); background: rgba(6,6,9,.6); } .foot__grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(clamp(160px, 20vw, 240px), 1fr)); padding-block: clamp(1.8rem, 4vw, 3rem); } .foot h4 { font-size: var(--fs-sm); margin-bottom: 1rem; color: var(--text); } .foot a { display: block; color: var(--muted); font-size: var(--fs-sm); padding: .25rem 0; transition: color .2s; } .foot a:hover { color: var(--brand-3); } .foot__bottom { border-top: 1px solid var(--stroke); padding-block: 1.2rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; color: var(--muted-2); font-size: var(--fs-xs); } /* ===================================================================== MOBILE BOTTOM NAV + off-canvas drawer ===================================================================== */ .tabbar { display: none; } .drawer { display: none; } .scrim { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .3s; } .scrim.on { opacity: 1; pointer-events: auto; } /* mode switch floating */ .mode-fab { position: fixed; z-index: 80; inset-block-end: clamp(1rem, 3vw, 2rem); inset-inline-start: clamp(1rem, 3vw, 2rem); display: flex; gap: .3rem; padding: .35rem; border-radius: 999px; background: rgba(12,12,18,.85); border: 1px solid var(--stroke); backdrop-filter: blur(12px); box-shadow: var(--shadow); } .mode-fab button { width: 38px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: var(--muted); transition: .2s; } .mode-fab button svg { width: 1.2em; } .mode-fab button.on { color: #1a1105; background: linear-gradient(120deg, var(--brand), var(--brand-2)); } /* ===================================================================== RESPONSIVE — MOBILE / TABLET ===================================================================== */ @media (max-width: 900px) { .nav { display: none; } .chip-user__name, .chip-user__badge { display: none; } .burger { display: grid; place-items: center; width: clamp(40px, 10vw, 46px); aspect-ratio: 1; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid var(--stroke); } .burger svg { width: 1.4em; } .top__bar { grid-template-columns: auto 1fr auto; } /* bottom tab bar */ .tabbar { display: grid; position: fixed; z-index: 70; inset-inline: 0; inset-block-end: 0; grid-auto-flow: column; grid-auto-columns: 1fr; padding: .4rem clamp(.4rem, 3vw, 1rem) calc(.4rem + env(safe-area-inset-bottom)); background: rgba(8,8,12,.92); backdrop-filter: blur(20px); border-top: 1px solid var(--stroke); } .tabbar a { display: flex; flex-direction: column; align-items: center; gap: .2rem; font-size: clamp(.6rem, 2.6vw, .72rem); color: var(--muted); padding: .4rem 0; border-radius: 12px; transition: color .2s; } .tabbar a svg { width: 1.5em; height: 1.5em; } .tabbar a.active { color: var(--brand-3); } .tabbar a.active svg { filter: drop-shadow(0 0 8px var(--brand-glow)); } body { padding-bottom: clamp(64px, 16vw, 80px); } /* drawer */ /* base (LTR): slides in from the right edge */ .drawer { display: block; position: fixed; z-index: 95; top: 0; right: 0; left: auto; height: 100dvh; width: min(84vw, 340px); background: var(--bg-1); border-left: 1px solid var(--stroke); border-right: 0; transform: translateX(100%); transition: transform .35s var(--ease); padding: var(--pad); overflow-y: auto; } /* RTL: pin to the right, hide by pushing off-screen to the right */ [dir="rtl"] .drawer { right: 0; left: auto; border-right: 1px solid var(--stroke); border-left: 0; transform: translateX(100%); } .drawer.on { transform: translateX(0) !important; } .drawer__link { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border-radius: 14px; font-size: var(--fs-md); color: var(--muted); } .drawer__link svg { width: 1.4em; } .drawer__link.active { color: var(--text); background: rgba(255,122,0,.12); } .mode-fab { inset-block-end: calc(clamp(64px, 16vw, 80px) + 1rem); } } @media (max-width: 560px) { .head { align-items: center; } .hero__cta .btn { flex: 1 1 auto; } } /* ===================================================================== TV MODE (10-foot UI, remote navigation) ===================================================================== */ [data-mode="tv"] { --fs-sm: clamp(1rem, .7rem + .6vw, 1.3rem); --fs-md: clamp(1.15rem, .8rem + .8vw, 1.6rem); --radius: 20px; } [data-mode="tv"] body { padding-bottom: 0; cursor: none; background: #08080c !important; } /* 1. Disable heavy continuous GPU animations & SVG filters on TV */ [data-mode="tv"] .aurora, [data-mode="tv"] .grain { display: none !important; } /* 2. Completely eliminate expensive backdrop-filters across all elements on TV */ [data-mode="tv"] *, [data-mode="tv"] *::before, [data-mode="tv"] *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* 3. Solid high-performance dark backgrounds replacing transparent blurs */ [data-mode="tv"] .top { position: sticky; background: #09090f !important; box-shadow: 0 4px 20px rgba(0,0,0,.7) !important; } [data-mode="tv"] .top.scrolled { background: #0c0c14 !important; } [data-mode="tv"] .hero__bg-blur { filter: brightness(0.25) !important; transform: none !important; } [data-mode="tv"] .modal, [data-mode="tv"] .scrim, [data-mode="tv"] .drawer { background: rgba(10, 10, 16, 0.98) !important; } [data-mode="tv"] .card__save, [data-mode="tv"] .card__badge, [data-mode="tv"] .card__rank, [data-mode="tv"] .pill, [data-mode="tv"] .badge-soft { background: rgba(22, 22, 32, 0.9) !important; } /* Center and elevate Player Chooser & Login modals on Android TV */ [data-mode="tv"] .player-modal-backdrop { align-items: center !important; justify-content: center !important; background: rgba(0, 0, 0, 0.88) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 1.5rem !important; } [data-mode="tv"] .player-modal-sheet { border-radius: 24px !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; max-width: 580px !important; width: 90% !important; margin: auto !important; padding: 1.6rem 1.8rem !important; box-shadow: 0 15px 50px rgba(0, 0, 0, 0.95) !important; transform: scale(0.96) !important; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important; } [data-mode="tv"] .player-modal-backdrop.open .player-modal-sheet { transform: scale(1) !important; } [data-mode="tv"] .player-modal-handle { display: none !important; } /* 4. Hide mobile-only controls */ [data-mode="tv"] .tabbar, [data-mode="tv"] .burger, [data-mode="tv"] .mode-fab { display: none; } [data-mode="tv"] .nav { display: flex; } [data-mode="tv"] .grid-cards { grid-template-columns: repeat(auto-fill, minmax(clamp(190px, 16vw, 260px), 1fr)); } /* 5. Snappy, hardware-accelerated focus ring for remote */ [data-mode="tv"] .focusable:focus, [data-mode="tv"] .focusable:focus-visible, [data-mode="tv"] .card:focus, [data-mode="tv"] .nav__link:focus, [data-mode="tv"] .btn:focus { outline: 3px solid var(--brand) !important; outline-offset: 3px !important; transform: scale(1.05) translateZ(0) !important; box-shadow: 0 0 16px rgba(255, 122, 0, 0.5) !important; z-index: 5; position: relative; will-change: transform; } [data-mode="tv"] .card:focus { transform: translateY(-4px) scale(1.05) translateZ(0) !important; } /* 6. Instant auto scroll on TV (smooth is laggy on TV WebViews) */ [data-mode="tv"] .rail { scroll-behavior: auto !important; -webkit-overflow-scrolling: auto !important; } /* 7. Optimized transition times for D-Pad snappy movement */ [data-mode="tv"] .card, [data-mode="tv"] .btn, [data-mode="tv"] .nav__link { transition: transform 0.1s ease-out, outline 0.1s ease-out !important; } /* Generic focus-visible ring everywhere (keyboard/remote) */ .focusable:focus-visible, .card:focus-visible, .btn:focus-visible, .nav__link:focus-visible, .icon-btn:focus-visible, .tabbar a:focus-visible, .select:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-glow), 0 0 0 1px var(--brand); border-radius: var(--radius); } /* utility text */ .muted { color: var(--muted); } .section-lead { color: var(--muted); font-size: var(--fs-md); max-width: 60ch; } .badge-soft { display:inline-flex; align-items:center; gap:.4em; font-size: var(--fs-xs); padding:.3em .8em; border-radius:999px; background: rgba(255,255,255,.06); border: 1px solid var(--stroke); color: var(--muted); } /* empty state (no data yet) */ .empty-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; text-align: center; padding: clamp(2rem, 6vw, 4rem) 1rem; color: var(--muted); border: 1px dashed var(--stroke); border-radius: var(--radius-lg); background: var(--card); } .empty-state svg { width: clamp(40px, 6vw, 64px); height: auto; color: var(--brand); opacity: .6; } .empty-state p { font-size: var(--fs-md); color: var(--text); } .empty-state small { font-size: var(--fs-xs); } .empty-state code { background: var(--bg-2); padding: .1em .5em; border-radius: 6px; color: var(--brand-3); direction: ltr; display: inline-block; } /* skeleton shimmer for perceived speed */ .skeleton { position: relative; overflow: hidden; background: var(--bg-2); } .skeleton::after { content:""; position:absolute; inset:0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); animation: shimmer 1.4s infinite; } @keyframes shimmer { to { transform: translateX(100%); } } /* ===================================================================== WATCH PROGRESS ON MEDIA CARDS ===================================================================== */ .card__prog { position: absolute; bottom: 0; inset-inline: 0; height: 5px; background: rgba(255, 255, 255, .22); z-index: 4; } .card__prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-3)); box-shadow: 0 0 8px var(--brand-glow); transition: width .3s ease; } .card__prog-badge { position: absolute; bottom: .7rem; inset-inline-end: .7rem; z-index: 3; font-size: var(--fs-xs); padding: .2em .6em; border-radius: 6px; background: rgba(6, 6, 9, .85); border: 1px solid var(--stroke); color: var(--text); backdrop-filter: blur(4px); display: flex; align-items: center; gap: .3em; } /* ===================================================================== IN-BROWSER VIDEO PLAYER MODAL ===================================================================== */ .player-modal { position: fixed; inset: 0; z-index: 150; background: rgba(4, 4, 8, .93); backdrop-filter: blur(18px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(.5rem, 2vw, 1.5rem); opacity: 0; pointer-events: none; transition: opacity .3s ease; } .player-modal.on { opacity: 1; pointer-events: auto; } .player-modal__box { width: min(96vw, 1120px); background: var(--bg-1); border: 1px solid var(--stroke-strong); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 122, 0, .2); display: flex; flex-direction: column; } .player-modal__header { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.2rem; background: rgba(20, 20, 30, .85); border-bottom: 1px solid var(--stroke); gap: 1rem; } .player-modal__title { font-size: var(--fs-md); font-weight: 700; display: flex; align-items: center; gap: .6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .player-modal__video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; display: flex; align-items: center; justify-content: center; } .player-modal__video-wrap video { width: 100%; height: 100%; object-fit: contain; background: #000; } .player-modal__footer { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1.2rem; background: rgba(15, 15, 24, .9); border-top: 1px solid var(--stroke); flex-wrap: wrap; gap: .8rem; } .player-modal__resume-notice { font-size: var(--fs-xs); color: var(--brand-3); display: flex; align-items: center; gap: .4rem; } /* ===================================================================== AUTH & PROFILE UI ===================================================================== */ .auth-tabs { display: flex; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--stroke); padding: 4px; max-width: 360px; margin: 0 auto 1.6rem auto; } .auth-tabs button { flex: 1; padding: .65rem 1.2rem; border-radius: 999px; font-size: var(--fs-sm); color: var(--muted); transition: .2s; font-weight: 600; cursor: pointer; } .auth-tabs button.on { color: #1a1105; background: linear-gradient(120deg, var(--brand), var(--brand-2)); font-weight: 700; box-shadow: 0 4px 15px -4px var(--brand-glow); } .auth-box { max-width: 480px; margin: 0 auto 2rem auto; background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3.5vw, 2.4rem); backdrop-filter: blur(14px); } .input-control { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1.1rem; } .input-control label { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; } .input-field { width: 100%; padding: .8rem 1rem; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--stroke); color: var(--text); font: inherit; font-size: var(--fs-sm); transition: border-color .2s, box-shadow .2s; box-sizing: border-box; } .input-field:focus { outline: none; border-color: rgba(255, 122, 0, .5); box-shadow: 0 0 0 3px rgba(255, 122, 0, .15); } .alert-box { padding: .8rem 1.1rem; border-radius: 12px; font-size: var(--fs-xs); margin-bottom: 1.2rem; display: none; line-height: 1.5; } .alert-box.on { display: block; } .alert-box--error { background: rgba(240, 68, 82, .12); border: 1px solid rgba(240, 68, 82, .3); color: #ff6b77; } .alert-box--success { background: rgba(41, 209, 125, .12); border: 1px solid rgba(41, 209, 125, .3); color: var(--good); } /* ===================================================================== SUB-TABS UNDER QUALITY (Dub vs Subtitle) ===================================================================== */ .dl-subtabs { display: flex; gap: .5rem; margin-bottom: 1.1rem; flex-wrap: wrap; } .dl-subtabs button { padding: .4rem .95rem; border-radius: 999px; font-size: var(--fs-xs); background: var(--bg-2); border: 1px solid var(--stroke); color: var(--muted); transition: .2s; cursor: pointer; } .dl-subtabs button.on { color: #1a1105; background: linear-gradient(120deg, var(--brand), var(--brand-2)); font-weight: 700; border-color: transparent; } /* ===================================================================== VIP PAYWALL CARD FOR NON-SUBSCRIBERS ===================================================================== */ .vip-lock-card { padding: clamp(1.8rem, 4vw, 3rem) 1.5rem; border-radius: var(--radius-lg); background: linear-gradient(135deg, rgba(28, 22, 16, .75), rgba(15, 15, 22, .85)); border: 1px solid rgba(255, 122, 0, .35); box-shadow: 0 20px 50px -15px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 122, 0, .15); text-align: center; backdrop-filter: blur(14px); margin: 1.2rem 0; } .vip-lock-icon { width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 122, 0, .15); border: 1px solid rgba(255, 122, 0, .4); color: var(--brand); display: grid; place-items: center; font-size: 1.6rem; margin: 0 auto 1.1rem auto; } .vip-lock-card h3 { font-size: var(--fs-lg); margin-bottom: .6rem; color: var(--text); } .vip-lock-card p { color: var(--muted); font-size: var(--fs-sm); max-width: 56ch; margin: 0 auto 1.4rem auto; line-height: 1.6; } /* ===================================================================== HIDE MANUAL MODE FAB (Device mode is now 100% automatic) ===================================================================== */ .mode-fab { display: none !important; } /* ===================================================================== ADVANCED VIDEO PLAYER & TOUCH GESTURES (MX Player style) ===================================================================== */ .player-video-container { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; user-select: none; touch-action: none; } .player-video-container video { width: 100%; height: 100%; object-fit: contain; filter: brightness(var(--video-brightness, 1)); } .player-video-container.fit-cover video { object-fit: cover; } .player-video-container.fit-stretch video { object-fit: fill; } /* Gesture Touch OSD Feedback */ .player-osd { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.9); background: rgba(6, 6, 12, .9); border: 1px solid var(--stroke-strong); backdrop-filter: blur(14px); border-radius: 16px; padding: .8rem 1.6rem; display: flex; align-items: center; gap: .8rem; color: #fff; font-size: var(--fs-md); font-weight: 700; pointer-events: none; opacity: 0; transition: opacity .2s, transform .2s; z-index: 25; } .player-osd.show { opacity: 1; transform: translate(-50%, -50%) scale(1); } .player-osd__bar { width: 90px; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .2); overflow: hidden; } .player-osd__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-3)); } /* Custom Subtitles Display */ .player-video-container video::cue { color: var(--sub-color, #ffffff); background-color: var(--sub-bg, rgba(0, 0, 0, 0.75)); font-size: var(--sub-size, 1.15rem); font-family: 'Vazirmatn', sans-serif; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9); } .player-modal__box { direction: ltr !important; text-align: left; } .player-modal__header { direction: rtl !important; text-align: right; } .player-toolbar { direction: ltr !important; display: flex; align-items: center; justify-content: space-between; padding: .75rem 1.2rem; background: rgba(12, 12, 18, .96); border-top: 1px solid var(--stroke); flex-wrap: wrap; gap: .6rem; } .player-toolbar__group { direction: ltr !important; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .player-ctrl-btn { display: inline-flex; align-items: center; gap: .4em; padding: .35rem .75rem; border-radius: 8px; background: rgba(255, 255, 255, .08); border: 1px solid var(--stroke); color: var(--text); font-size: var(--fs-xs); cursor: pointer; transition: .2s; direction: ltr !important; } .player-ctrl-btn:hover { background: rgba(255, 255, 255, .16); border-color: var(--brand); } .player-ctrl-select-wrap { display: inline-flex; align-items: center; gap: .35rem; background: rgba(255, 255, 255, .08); border: 1px solid var(--stroke); border-radius: 8px; padding: .25rem .55rem; color: var(--text); font-size: var(--fs-xs); transition: .2s; cursor: pointer; direction: ltr !important; } .player-ctrl-select-wrap:hover { background: rgba(255, 255, 255, .16); border-color: var(--brand); } .player-ctrl-select { background: transparent; border: none; color: #fff; font-size: var(--fs-xs); font-family: 'Vazirmatn', sans-serif; cursor: pointer; outline: none; padding: 0; } .player-ctrl-select option { background: #12121c; color: #fff; } .player-vol-wrap { display: inline-flex; align-items: center; gap: .35rem; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--stroke); border-radius: 8px; padding: .2rem .5rem; direction: ltr !important; } .player-vol-slider { width: 55px; height: 4px; -webkit-appearance: none; appearance: none; background: rgba(255, 255, 255, 0.25); border-radius: 99px; outline: none; cursor: pointer; accent-color: var(--brand); } .player-vol-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10px; height: 10px; border-radius: 50%; background: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); } .player-vol-slider::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: #fff; cursor: pointer; border: none; } .player-time-display { display: inline-block; direction: ltr !important; unicode-bidi: isolate; font-family: monospace, sans-serif; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.9); padding: 0 4px; white-space: nowrap; } .player-settings-popover { position: absolute; bottom: 65px; right: 20px; left: auto !important; direction: rtl !important; text-align: right; background: rgba(15, 15, 24, .98); border: 1px solid var(--stroke-strong); border-radius: 14px; padding: 1.1rem; width: 320px; backdrop-filter: blur(16px); box-shadow: var(--shadow); display: none; flex-direction: column; gap: .8rem; z-index: 30; } .player-settings-popover.on { display: flex; } .player-settings-row { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); gap: .5rem; } .player-settings-row select { padding: .3rem .5rem; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--stroke); color: var(--text); font-size: var(--fs-xs); max-width: 170px; } .player-settings-note { font-size: 11px; line-height: 1.5; color: var(--muted); background: rgba(255, 255, 255, 0.05); border: 1px dashed var(--stroke); border-radius: 8px; padding: 6px 8px; margin-top: 4px; } /* Subtitle styling for WebVTT text tracks */ ::cue { color: var(--sub-color, #ffffff) !important; background-color: var(--sub-bg, rgba(0, 0, 0, 0.75)) !important; font-size: var(--sub-size, 1.15rem) !important; font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif !important; line-height: 1.4 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9) !important; } video::cue { color: var(--sub-color, #ffffff) !important; background-color: var(--sub-bg, rgba(0, 0, 0, 0.75)) !important; font-size: var(--sub-size, 1.15rem) !important; font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, sans-serif !important; line-height: 1.4 !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9) !important; } /* ===================================================================== MULTI-SELECT GENRE DROPDOWN ===================================================================== */ .genre-dropdown-wrap { position: relative; display: inline-block; margin-bottom: 1.2rem; } .genre-dropdown-btn { display: inline-flex; align-items: center; gap: .6rem; padding: .65rem 1.3rem; border-radius: 999px; background: var(--card); border: 1px solid var(--stroke); color: var(--text); font-size: var(--fs-sm); cursor: pointer; backdrop-filter: blur(10px); transition: .2s; } .genre-dropdown-btn:hover { border-color: var(--brand); } .genre-dropdown-menu { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; width: min(90vw, 340px); max-height: 380px; overflow-y: auto; background: var(--bg-1); border: 1px solid var(--stroke-strong); border-radius: var(--radius); padding: .8rem; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .9); backdrop-filter: blur(16px); z-index: 30; display: none; flex-direction: column; gap: .5rem; } .genre-dropdown-menu.on { display: flex; } .genre-search-input { width: 100%; padding: .5rem .8rem; border-radius: 8px; background: var(--bg-2); border: 1px solid var(--stroke); color: var(--text); font-size: var(--fs-xs); box-sizing: border-box; } .genre-item-checkbox { display: flex; align-items: center; justify-content: space-between; padding: .45rem .6rem; border-radius: 8px; cursor: pointer; transition: .15s; font-size: var(--fs-xs); } .genre-item-checkbox:hover { background: rgba(255, 255, 255, .06); } .genre-item-checkbox input { accent-color: var(--brand); } .genre-active-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; } .genre-chip { display: inline-flex; align-items: center; gap: .4em; padding: .3em .75em; border-radius: 999px; background: rgba(255, 122, 0, .15); border: 1px solid rgba(255, 122, 0, .35); color: var(--brand-3); font-size: var(--fs-xs); } .genre-chip button { background: none; border: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; } /* ===================================================================== AI COMMENTS SECTION ===================================================================== */ .comments-wrap { margin-top: 2.5rem; } .comment-form { background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius); padding: var(--pad); margin-bottom: 1.5rem; backdrop-filter: blur(12px); } .comment-form textarea { width: 100%; min-height: 100px; padding: .9rem 1rem; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--stroke); color: var(--text); font: inherit; font-size: var(--fs-sm); resize: vertical; box-sizing: border-box; margin-bottom: .8rem; } .comment-form textarea:focus { outline: none; border-color: rgba(255, 122, 0, .5); box-shadow: 0 0 0 3px rgba(255, 122, 0, .15); } .comment-list { display: grid; gap: 1rem; } .comment-item { background: var(--card); border: 1px solid var(--stroke); border-radius: 14px; padding: 1.1rem; position: relative; } .comment-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; } .comment-user { display: flex; align-items: center; gap: .6rem; } .comment-body { font-size: var(--fs-sm); line-height: 1.6; color: var(--text); } .comment-spoiler-box { padding: .8rem 1rem; border-radius: 10px; background: rgba(255, 122, 0, .12); border: 1px dashed rgba(255, 122, 0, .4); color: var(--brand-3); cursor: pointer; text-align: center; font-size: var(--fs-xs); margin-bottom: .5rem; } .comment-spoiler-content { display: none; } .comment-spoiler-content.revealed { display: block; } /* ===================================================================== HERO ENHANCEMENTS: Ambient Glow, Crisp 2:3 Poster Card, Clean Nav ===================================================================== */ .hero__stage { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--stroke); min-height: clamp(380px, 48vw, 490px); display: flex; align-items: center; } .hero__bg { position: absolute; inset: 0; z-index: 1; overflow: hidden; } .hero__bg-blur { position: absolute; inset: -30px; width: calc(100% + 60px); height: calc(100% + 60px); object-fit: cover; filter: blur(40px) brightness(0.28); transform: scale(1.1); } .hero__bg-gradient { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,6,9,0.92) 0%, rgba(6,6,9,0.7) 50%, rgba(6,6,9,0.3) 100%); } [dir="rtl"] .hero__bg-gradient { background: linear-gradient(270deg, rgba(6,6,9,0.92) 0%, rgba(6,6,9,0.7) 50%, rgba(6,6,9,0.3) 100%); } .hero__body { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 2.5rem; width: 100%; padding: clamp(1.5rem, 3.5vw, 3rem) clamp(2rem, 4.5vw, 4.2rem); } .hero__content { flex: 1; min-width: 0; max-width: 620px; } .hero__poster-card { flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .hero__poster-wrap { position: relative; display: block; width: clamp(180px, 18vw, 240px); aspect-ratio: 2 / 3; border-radius: 18px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.18); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease; background: #0d0d14; } .hero__poster-wrap:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 28px 60px rgba(0,0,0,0.9), 0 0 0 2px var(--brand); } .hero__poster-img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero__poster-badge { position: absolute; top: 10px; inset-inline-start: 10px; padding: .2em .6em; font-size: var(--fs-xs); font-weight: 800; color: #1a1105; background: linear-gradient(120deg, var(--brand), var(--brand-2)); border-radius: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.5); } .hero__poster-hover { position: absolute; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.25s ease; } .hero__poster-wrap:hover .hero__poster-hover { opacity: 1; } .hero__poster-play-btn { width: 54px; height: 54px; border-radius: 50%; background: var(--brand); color: #1a1105; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px var(--brand-glow); transform: scale(0.85); transition: transform 0.25s ease; } .hero__poster-wrap:hover .hero__poster-play-btn { transform: scale(1); } .hero__poster-play-btn svg { width: 24px; height: 24px; fill: currentColor; } @media (max-width: 820px) { .hero__stage { min-height: 420px; align-items: flex-end; } .hero__poster-card { display: none; } .hero__bg-blur { inset: 0 !important; width: 100% !important; height: 100% !important; filter: brightness(0.55) contrast(1.08) !important; transform: none !important; object-position: center 20% !important; } .hero__bg-gradient, [dir="rtl"] .hero__bg-gradient { background: linear-gradient(to top, rgba(6,6,9,0.98) 0%, rgba(6,6,9,0.82) 48%, rgba(6,6,9,0.3) 82%, rgba(6,6,9,0.5) 100%) !important; } .hero__body { padding: 1.4rem 1.2rem 2.8rem; width: 100%; } .hero__content { max-width: 100%; text-shadow: 0 2px 10px rgba(0,0,0,0.85); } .hero__title { font-size: 1.65rem; margin-bottom: .4rem; } .hero__desc { -webkit-line-clamp: 2; font-size: var(--fs-sm); margin-bottom: 1rem; color: #e2e2e8; } .hero__nav-btn { width: 36px; height: 36px; background: rgba(14,14,22,0.65); } .hero__dots { bottom: 1rem; inset-inline-end: 1.2rem; } } .hero__nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: rgba(14,14,22,0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.22); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 6; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 6px 20px rgba(0,0,0,0.45); } .hero__nav-btn:hover { background: var(--brand); border-color: var(--brand); color: #1a1105; transform: translateY(-50%) scale(1.12); } .hero__nav-btn svg { width: 24px; height: 24px; stroke-width: 2.2; } .hero__nav-btn--prev { inset-inline-start: 1rem; } .hero__nav-btn--next { inset-inline-end: 1rem; } /* ===================================================================== WATCHED EYE INDICATOR (علامت چشم دیده شده) ===================================================================== */ .dl-item__eye { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid var(--stroke); color: var(--muted-2); cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } .dl-item__eye svg { width: 18px; height: 18px; flex-shrink: 0; } .dl-item__eye:hover { background: rgba(255,255,255,0.14); color: var(--text); border-color: rgba(255,255,255,0.3); transform: scale(1.08); } .dl-item__eye.is-watched { background: rgba(41,209,125,0.18); border-color: rgba(41,209,125,0.55); color: var(--good); box-shadow: 0 0 10px rgba(41,209,125,0.25); } .dl-item__eye.is-watched svg { stroke: var(--good); } /* ===================================================================== ADVANCED VIDEO PLAYER CONTROLS & TIMELINE ===================================================================== */ .player-scrubber { direction: ltr !important; position: relative; width: 100%; padding: 10px 1.2rem 4px 1.2rem; background: rgba(12, 12, 18, 0.98); cursor: pointer; user-select: none; touch-action: none; } .player-scrubber__track { direction: ltr !important; position: relative; height: 6px; background: rgba(255, 255, 255, 0.16); border-radius: 99px; transition: height 0.15s ease; overflow: visible; } .player-scrubber:hover .player-scrubber__track { height: 9px; } .player-scrubber__buffered { position: absolute; top: 0; left: 0 !important; right: auto !important; height: 100%; background: rgba(255, 255, 255, 0.35); border-radius: 99px; width: 0%; pointer-events: none; transition: width 0.2s ease; } .player-scrubber__played { position: absolute; top: 0; left: 0 !important; right: auto !important; height: 100%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 99px; width: 0%; pointer-events: none; } .player-scrubber__thumb { position: absolute; top: 50%; right: -7px !important; left: auto !important; transform: translateY(-50%) scale(0.85); width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px var(--brand-glow), 0 2px 4px rgba(0,0,0,0.5); transition: transform 0.15s ease; } .player-scrubber:hover .player-scrubber__thumb, .player-scrubber.dragging .player-scrubber__thumb { transform: translateY(-50%) scale(1.25); } .player-scrubber__tooltip { position: absolute; bottom: 22px; left: 0; transform: translateX(-50%); background: rgba(18, 18, 28, 0.95); border: 1px solid var(--stroke); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 6px; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; white-space: nowrap; direction: ltr !important; } .player-scrubber:hover .player-scrubber__tooltip { opacity: 1; } /* Volume Slider in Player Toolbar */ .player-vol-wrap { display: flex; align-items: center; gap: 0.4rem; } .player-vol-slider { width: 70px; height: 4px; -webkit-appearance: none; appearance: none; background: rgba(255,255,255,0.22); border-radius: 99px; outline: none; cursor: pointer; transition: width 0.2s ease; } .player-vol-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); cursor: pointer; box-shadow: 0 0 6px rgba(0,0,0,0.5); } .player-vol-slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--brand); cursor: pointer; } /* Double-tap ripple animation for mobile */ .player-ripple { position: absolute; top: 0; bottom: 0; width: 38%; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; z-index: 20; background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 70%); transition: opacity 0.3s ease; } .player-ripple--left { inset-inline-start: 0; } .player-ripple--right { inset-inline-end: 0; } .player-ripple.animate { opacity: 1; animation: rippleFade 0.6s ease-out forwards; } .player-ripple span { font-size: 1.4rem; font-weight: 800; color: #fff; background: rgba(0,0,0,0.6); padding: 0.5rem 1rem; border-radius: 99px; border: 1px solid rgba(255,255,255,0.2); } @keyframes rippleFade { 0% { transform: scale(0.9); opacity: 0.9; } 100% { transform: scale(1.1); opacity: 0; } } /* ===================================================================== PLAYER SPINNER & ERROR FALLBACK ===================================================================== */ .player-spinner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border: 4px solid rgba(255,255,255,0.15); border-top-color: var(--brand); border-radius: 50%; animation: playerSpin 0.9s linear infinite; pointer-events: none; z-index: 10; display: none; } @keyframes playerSpin { to { transform: translate(-50%, -50%) rotate(360deg); } } .player-error-banner { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; background: rgba(10,10,16,0.92); z-index: 12; padding: 2rem; text-align: center; } .player-error-banner.on { display: flex; } /* ===================================================================== UNIVERSAL PLAYER CHOOSER & AUTH MODALS Centered on TV, Desktop, Tablet, and all Landscape devices ===================================================================== */ .player-modal-backdrop, .download-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.88) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; z-index: 10000000 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 1.5rem !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, visibility 0.22s ease; cursor: pointer; } .player-modal-backdrop.open, .download-modal-backdrop.open { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .player-modal-sheet, .download-modal-sheet { cursor: default; background: linear-gradient(180deg, #181926 0%, #0e0f18 100%); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 24px !important; width: 92% !important; max-width: 560px !important; margin: auto !important; padding: 1.6rem 1.8rem !important; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.9) !important; transform: scale(0.96) !important; opacity: 0; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease !important; direction: rtl; color: #fff; } .player-modal-backdrop.open .player-modal-sheet, .download-modal-backdrop.open .player-modal-sheet, .download-modal-backdrop.open .download-modal-sheet { transform: scale(1) !important; opacity: 1 !important; } .player-modal-handle { display: none !important; } /* Mobile-only portrait bottom sheet (never applied in TV mode) */ @media (max-width: 600px) and (orientation: portrait) { html:not([data-mode="tv"]) .player-modal-backdrop, html:not([data-mode="tv"]) .download-modal-backdrop { align-items: flex-end !important; padding: 0 !important; } html:not([data-mode="tv"]) .player-modal-sheet, html:not([data-mode="tv"]) .download-modal-sheet { border-radius: 24px 24px 0 0 !important; border-bottom: none !important; width: 100% !important; max-width: 100% !important; padding: 1rem 1.25rem 2.2rem !important; box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.7) !important; transform: translateY(100%) !important; opacity: 1 !important; transition: transform 0.28s cubic-bezier(0.33, 1, 0.68, 1) !important; } html:not([data-mode="tv"]) .player-modal-backdrop.open .player-modal-sheet, html:not([data-mode="tv"]) .download-modal-backdrop.open .player-modal-sheet, html:not([data-mode="tv"]) .download-modal-backdrop.open .download-modal-sheet { transform: translateY(0) !important; opacity: 1 !important; } html:not([data-mode="tv"]) .player-modal-handle { display: block !important; width: 44px; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.25); margin: 0 auto 1rem; } } .player-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; padding-bottom: .8rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .player-modal-head h3 { font-size: 1.15rem; font-weight: 800; margin: 0; display: flex; align-items: center; gap: .5rem; } .player-modal-head p { margin: .25rem 0 0; font-size: var(--fs-xs); color: var(--muted); } .player-modal-close { background: rgba(255, 255, 255, 0.08); border: none; border-radius: 50%; width: 34px; height: 34px; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; } .player-modal-close:hover { background: rgba(255, 255, 255, 0.16); } .player-options-list { display: flex; flex-direction: column; gap: .85rem; } .player-option-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; cursor: pointer; text-align: right; transition: all 0.22s ease; position: relative; text-decoration: none; color: inherit; } .player-option-card:hover, .player-option-card:active { background: rgba(255, 255, 255, 0.08); border-color: rgba(229, 169, 60, 0.4); transform: scale(0.99); } .player-option-card:focus, .player-option-card:focus-visible { background: rgba(255, 255, 255, 0.12); border-color: #e5a93c; outline: 2px solid rgba(229, 169, 60, 0.8); outline-offset: 3px; box-shadow: 0 0 18px rgba(229, 169, 60, 0.35); transform: scale(1.02); } .player-option-card.recommended { border-color: rgba(229, 169, 60, 0.5); background: linear-gradient(135deg, rgba(229, 169, 60, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%); } .player-option-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); } .player-option-icon.shablo { background: linear-gradient(135deg, #e5a93c, #c58925); color: #1a1105; } .player-option-icon.mx { background: linear-gradient(135deg, #0080ff, #0050c8); color: #fff; } .player-option-icon.vlc { background: linear-gradient(135deg, #ff7700, #d45500); color: #fff; } .player-option-icon.idm-icon { background: linear-gradient(135deg, #10b981, #059669); color: #fff; } .player-option-icon.adm-icon { background: linear-gradient(135deg, #0ea5e9, #0284c7); color: #fff; } .player-option-icon.browser-icon { background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; } .player-option-icon.other-player { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; } #btn-recheck-links { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.9rem; border-radius: 10px; font-size: var(--fs-xs); font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04); color: var(--text); cursor: pointer; transition: all 0.2s ease; } #btn-recheck-links:hover, #btn-recheck-links:focus-visible { background: rgba(255, 255, 255, 0.1); border-color: rgba(229, 169, 60, 0.5); color: var(--primary); transform: translateY(-1px); } #btn-recheck-links:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } @keyframes spinRecheck { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .recheck-icon.spin { animation: spinRecheck 0.9s linear infinite; } .player-option-content { flex: 1; min-width: 0; } .player-option-title { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; } .player-option-desc { font-size: var(--fs-xs); color: var(--muted); margin-top: .2rem; line-height: 1.4; } .player-badge-rec { background: rgba(229, 169, 60, 0.2); color: #e5a93c; border: 1px solid rgba(229, 169, 60, 0.4); border-radius: 6px; padding: .15em .5em; font-size: 0.72rem; font-weight: 600; } .player-option-arrow { color: var(--muted); display: flex; align-items: center; font-size: 1.2rem; } /* ===================================================================== SEARCH FILTERS COLLAPSIBLE (MOBILE) & QUICK RESULTS BAR ===================================================================== */ .search-mobile-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 1.2rem; flex-wrap: wrap; } .filter-toggle-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 1.1rem; font-size: var(--fs-sm); font-weight: 700; border-radius: 99px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; cursor: pointer; transition: all 0.22s ease; } .filter-toggle-btn:hover, .filter-toggle-btn.active { background: rgba(229, 169, 60, 0.16); border-color: rgba(229, 169, 60, 0.5); color: var(--brand); } .filter-count-badge { background: var(--brand); color: #1a1105; font-weight: 800; font-size: 0.72rem; padding: 0.15em 0.55em; border-radius: 99px; line-height: 1; } .filter-chevron { font-size: 0.85rem; transition: transform 0.25s ease; display: inline-block; } .filter-toggle-btn.active .filter-chevron { transform: rotate(180deg); } .quick-status-badge { font-size: var(--fs-sm); color: var(--muted); display: flex; align-items: center; gap: 0.4rem; } .quick-status-badge b { color: var(--brand); } .search-results-anchor { scroll-margin-top: 80px; } @media (max-width: 820px) { .filters--collapsible { display: none; margin-bottom: 1.4rem; padding: 1.2rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 18px; animation: fadeInDown 0.25s ease; } .filters--collapsible.open { display: grid !important; } } @media (min-width: 821px) { .search-mobile-bar { display: none; } .filters--collapsible { display: grid !important; } } /* AI Story Search & Assistant Page Styling */ .ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.8rem; margin-bottom: 2.5rem; } .ai-card { background: rgba(18, 18, 28, 0.65); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 22px; padding: 1.8rem; display: flex; flex-direction: column; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35); transition: transform 0.25s ease, border-color 0.25s ease; } .ai-card:hover { border-color: rgba(229, 169, 60, 0.3); } .ai-card__tag { font-size: var(--fs-xs); font-weight: 700; color: var(--brand); background: rgba(229, 169, 60, 0.1); border: 1px solid rgba(229, 169, 60, 0.25); padding: 0.3em 0.8em; border-radius: 99px; width: fit-content; margin-bottom: 1rem; } .ai-card h3 { font-size: 1.25rem; font-weight: 800; margin-bottom: 0.6rem; line-height: 1.4; } .ai-card .lead { font-size: var(--fs-sm); color: var(--muted); line-height: 1.6; margin-bottom: 1.2rem; } .ai-card textarea { width: 100%; min-height: 110px; padding: 0.9rem 1.1rem; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; font-family: inherit; font-size: var(--fs-sm); line-height: 1.6; resize: vertical; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .ai-card textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(229, 169, 60, 0.18); } .ai-result { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; } .btn--ai { background: linear-gradient(135deg, #7928ca, #ff0080); color: #fff; border: none; font-weight: 700; box-shadow: 0 4px 20px rgba(121, 40, 202, 0.35); transition: all 0.25s ease; } .btn--ai:hover { transform: translateY(-2px); box-shadow: 0 6px 26px rgba(255, 0, 128, 0.45); } .ai-result-item { display: flex; flex-direction: column; gap: 0.4rem; } .ai-match-badge { font-size: 0.72rem; color: var(--brand); background: rgba(229, 169, 60, 0.08); border: 1px solid rgba(229, 169, 60, 0.25); border-radius: 8px; padding: 0.35rem 0.6rem; line-height: 1.4; white-space: normal; text-align: right; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ===================================================================== MOBILE DOWNLOAD CHOOSER MODAL & TOASTS ===================================================================== */ .download-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 10000000 !important; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.28s ease; } .download-modal-backdrop.open { opacity: 1; pointer-events: auto; } .download-modal-backdrop.open .player-modal-sheet { transform: translateY(0); } .player-option-icon.idm-icon { background: linear-gradient(135deg, #10b981, #059669); color: #fff; } .player-option-icon.browser-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff; } .download-modal-footer { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: center; } .download-modal-footer .copy-link-btn { width: 100%; justify-content: center; gap: .5rem; font-size: var(--fs-sm); padding: .75rem 1rem; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px dashed rgba(255, 255, 255, 0.2); } .download-modal-footer .copy-link-btn:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--brand); color: var(--brand); } /* Toast Notifications */ .shablo-toast-container { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%); z-index: 99999; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; } @media (min-width: 768px) { .shablo-toast-container { bottom: 34px; } } .shablo-toast { background: rgba(18, 19, 28, 0.95); color: #fff; border: 1px solid rgba(229, 169, 60, 0.45); padding: 10px 20px; border-radius: 99px; font-size: 0.88rem; font-weight: 600; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(16px) scale(0.95); transition: all 0.28s cubic-bezier(0.33, 1, 0.68, 1); direction: rtl; white-space: nowrap; } .shablo-toast svg { width: 16px; height: 16px; fill: currentColor; } .shablo-toast.bookmark { border-color: var(--brand); color: var(--brand); } .shablo-toast.success { border-color: #10b981; color: #34d399; } .shablo-toast.show { opacity: 1; transform: translateY(0) scale(1); } /* ===================================================================== PROFILE NAVIGATION TABS & PANES ===================================================================== */ .profile-nav-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 1.2rem 0 1.2rem; background: rgba(255, 255, 255, 0.03); padding: 0.35rem; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.07); box-sizing: border-box; width: 100%; } .profile-nav-tab { display: flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.65rem 0.4rem; border-radius: 12px; background: transparent; border: 1px solid transparent; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.22s ease; user-select: none; width: 100%; box-sizing: border-box; } .profile-nav-tab svg { flex-shrink: 0; width: 17px; height: 17px; } .profile-nav-tab:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); } .profile-nav-tab.on { background: linear-gradient(135deg, rgba(229, 169, 60, 0.2), rgba(229, 169, 60, 0.08)); border-color: rgba(229, 169, 60, 0.45); color: #e5a93c; box-shadow: 0 4px 14px rgba(229, 169, 60, 0.12); } .profile-tab-badge { background: rgba(255, 255, 255, 0.1); color: inherit; border-radius: 99px; padding: 0.1em 0.5em; font-size: 0.72rem; font-weight: 700; line-height: 1; } .profile-nav-tab.on .profile-tab-badge { background: rgba(229, 169, 60, 0.25); color: #e5a93c; } @media (max-width: 580px) { .profile-nav-tabs { gap: 0.3rem; padding: 0.3rem; } .profile-nav-tab { padding: 0.6rem 0.2rem; font-size: 0.76rem; gap: 0.25rem; } .profile-nav-tab svg { width: 15px; height: 15px; } .profile-tab-badge { padding: 0.1em 0.35em; font-size: 0.68rem; } } @media (max-width: 360px) { .profile-nav-tab { font-size: 0.7rem; padding: 0.55rem 0.1rem; gap: 0.2rem; } .profile-nav-tab svg { width: 13px; height: 13px; } } .profile-tab-panes { width: 100%; } .profile-tab-pane { display: none; animation: fadeInPane 0.24s ease; } .profile-tab-pane.on { display: block; } @keyframes fadeInPane { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ===================================================================== SMART MOBILE APP & IOS PWA INSTALL BANNER ===================================================================== */ .shablo-install-banner { position: fixed; bottom: clamp(62px, 14vw, 76px); left: 0; right: 0; z-index: 999; padding: 0.75rem 1rem; display: flex; justify-content: center; pointer-events: none; opacity: 0; transform: translateY(100%); transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .shablo-install-banner.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .install-banner-inner { position: relative; width: 100%; max-width: 520px; background: rgba(18, 18, 22, 0.94); border: 1px solid rgba(229, 169, 60, 0.35); border-radius: 20px; padding: 1.1rem 1.2rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.75), 0 0 20px rgba(229, 169, 60, 0.12); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); direction: rtl; color: var(--text); } .install-banner-close { position: absolute; top: 0.75rem; left: 0.75rem; background: rgba(255, 255, 255, 0.08); border: none; color: var(--muted); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; transition: all 0.2s ease; } .install-banner-close:hover { background: rgba(255, 255, 255, 0.15); color: #fff; } .install-banner-header { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.85rem; } .install-banner-logo { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); object-fit: cover; } .install-banner-header h4 { font-size: 0.98rem; font-weight: 700; margin: 0 0 0.2rem; color: #fff; } .install-banner-header p { font-size: var(--fs-xs); color: var(--muted); margin: 0; line-height: 1.4; } .install-banner-guide { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; padding: 0.75rem 0.9rem; margin-bottom: 0.9rem; display: flex; flex-direction: column; gap: 0.55rem; font-size: var(--fs-xs); line-height: 1.5; } .install-step { display: flex; align-items: flex-start; gap: 0.55rem; } .step-num { background: rgba(229, 169, 60, 0.2); color: #e5a93c; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; flex-shrink: 0; margin-top: 1px; } .install-banner-actions { display: flex; align-items: center; gap: 0.6rem; } .install-banner-btn { flex: 1; padding: 0.65rem 1rem; font-size: var(--fs-xs); font-weight: 700; border-radius: 12px; text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; } @media (max-width: 480px) { .shablo-install-banner { padding-bottom: max(1rem, env(safe-area-inset-bottom, 1rem)); } }