/*
Theme Name: KioVideo
Author: KioVideo
Description: A cinematic, RTL-ready movie discovery homepage.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: kiovideo
*/

    :root {
      color-scheme: dark;
      --bg: #080b12;
      --panel: #101520;
      --muted: #8d96a8;
      --text: #f5f7fb;
      --blue: #2586ff;
      --blue-bright: #57a4ff;
      --line: rgba(255,255,255,.09);
      --font: "Vazirmatn", "DM Sans", sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background:
        radial-gradient(ellipse at 85% 13%, rgba(19, 83, 164, .14), transparent 28rem),
        radial-gradient(ellipse at 8% 65%, rgba(15, 44, 90, .12), transparent 26rem),
        var(--bg);
      color: var(--text);
      font-family: var(--font);
      min-width: 320px;
    }
    button, input { font: inherit; }
    button { color: inherit; }
    a { color: inherit; text-decoration: none; }
    .shell { max-width: 1440px; margin: auto; padding: 0 6.1%; }
    .topbar {
      height: 88px;
      display: flex;
      align-items: center;
      gap: 48px;
      position: relative;
      z-index: 3;
    }
    .brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
    .brand-mark {
      width: 38px; height: 38px; border-radius: 12px;
      background: linear-gradient(145deg, #49a1ff, #1262d9);
      display: grid; place-items: center; box-shadow: 0 7px 25px #1873e64a;
    }
    .brand-mark svg { width: 20px; margin-right: 2px; }
    .brand-name { font-family: "DM Sans", var(--font); font-size: 21px; font-weight: 800; letter-spacing: -.8px; direction: ltr; }
    .brand-name span { color: var(--blue-bright); }
    .nav { display: flex; align-items: center; gap: 31px; color: #a7afbe; font-size: 13px; font-weight: 500; }
    .nav a { transition: color .2s; }
    .nav a:hover, .nav a.active { color: white; }
    .nav a.active { position: relative; }
    .nav a.active::after { content: ""; height: 2px; width: 15px; background: var(--blue); position: absolute; bottom: -12px; right: 0; border-radius: 3px; }
    .top-actions { margin-right: auto; display: flex; align-items: center; gap: 15px; }
    .icon-button {
      border: 0; background: transparent; padding: 8px; cursor: pointer; color: #d7dce5;
      display: grid; place-items: center; transition: color .2s, transform .2s;
    }
    .icon-button:hover { color: white; transform: translateY(-1px); }
    .icon-button svg { width: 19px; height: 19px; }
    .login {
      border: 1px solid #ffffff20; background: #ffffff08; border-radius: 9px;
      padding: 9px 18px; font-size: 12px; cursor: pointer; transition: .2s;
    }
    .login:hover { background: #ffffff14; border-color: #ffffff45; }
    .mobile-menu { display: none; }

    .hero {
      min-height: 510px; height: min(57vw, 610px); max-height: 610px;
      border-radius: 3px 28px 3px 3px; overflow: hidden; position: relative; isolation: isolate;
      background: #111a2b url("https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&w=2000&q=88") center 43%/cover no-repeat;
      box-shadow: 0 25px 90px #0008;
    }
    .hero::before {
      content: ""; position: absolute; inset: 0; z-index: -1;
      background: linear-gradient(270deg, rgba(6,10,18,.96) 0%, rgba(6,10,18,.81) 28%, rgba(6,10,18,.18) 68%, rgba(6,10,18,.04) 100%),
        linear-gradient(0deg, rgba(7,10,16,.78), transparent 57%),
        linear-gradient(90deg, rgba(7,10,16,.5), transparent 70%);
    }
    .hero::after {
      content: "01"; position: absolute; z-index: -1; left: 3%; top: -9%;
      color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.32);
      font: 800 clamp(190px, 31vw, 420px)/1 "DM Sans", sans-serif;
      letter-spacing: -.09em; direction: ltr; pointer-events: none;
    }
    .hero-content { position: absolute; right: 7.2%; bottom: 11%; padding: 0; max-width: 620px; }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 9px; color: #c5dfff;
      font-size: 11px; font-weight: 600; letter-spacing: .15px;
    }
    .eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--blue-bright); }
    .hero h1 { font-size: clamp(35px, 5vw, 58px); line-height: 1.24; margin: 16px 0 14px; letter-spacing: -1.6px; font-weight: 800; }
    .hero h1 span { color: #72b4ff; }
    .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; color: #d0d5df; font-size: 12px; }
    .meta .rating { color: #ffce5c; display: inline-flex; gap: 5px; align-items: center; }
    .quality { border: 1px solid #ffffff6b; border-radius: 4px; padding: 1px 5px; font-size: 9px; color: #fff; }
    .hero-copy { max-width: 430px; color: #c0c6d1; font-size: 13px; line-height: 2.15; margin: 17px 0 23px; }
    .hero-buttons { display: flex; align-items: center; gap: 11px; }
    .primary, .secondary {
      display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      border-radius: 8px; padding: 11px 20px; font-size: 12px; font-weight: 700;
      cursor: pointer; transition: .2s; border: 1px solid transparent;
    }
    .primary { color: white; background: linear-gradient(100deg, #1673ed, #3196ff); box-shadow: 0 6px 25px #0872ee3b; }
    .primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px #0872ee69; }
    .primary svg { width: 16px; }
    .secondary { background: #ffffff12; border-color: #ffffff20; color: #eef2f8; }
    .secondary:hover { background: #ffffff20; }
    .slider-dots { position: absolute; left: 31px; bottom: 28px; display: flex; gap: 7px; direction: ltr; }
    .slider-dots i { width: 6px; height: 6px; background: #ffffff70; border-radius: 8px; }
    .slider-dots i:first-child { width: 23px; background: var(--blue-bright); }
    .hero-edition { position: absolute; left: 32px; top: 31px; display: flex; direction: ltr; align-items: center; gap: 12px; color: #ffffffbd; font: 600 9px/1 "DM Sans", sans-serif; letter-spacing: .16em; }
    .hero-edition b { color: #70b6ff; font-weight: 700; }
    .hero-edition::before { content: ""; width: 31px; height: 1px; background: #70b6ff; }
    .hero-caption { position: absolute; left: 31px; bottom: 63px; direction: ltr; color: #ffffffbc; font: 500 9px/1.8 "DM Sans", sans-serif; letter-spacing: .12em; }
    .hero-caption span { color: #70b6ff; }
    .hero-stamp { position: absolute; top: 50%; left: 7%; transform: translateY(-50%); width: 86px; height: 86px; display: grid; place-content: center; gap: 4px; text-align: center; direction: ltr; border: 1px solid #ffffff53; border-radius: 50%; color: #fff; background: #07101e36; backdrop-filter: blur(7px); }
    .hero-stamp strong { font: 700 22px/1 "DM Sans", sans-serif; }
    .hero-stamp span { font: 500 7px/1 "DM Sans", sans-serif; letter-spacing: .15em; color: #c6dfff; }
    .film-ticker { height: 50px; margin: 20px 0 2px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; border-top: 1px solid #ffffff12; border-bottom: 1px solid #ffffff12; color: #78889f; font: 600 9px "DM Sans", var(--font); letter-spacing: .19em; }
    .film-ticker div { display: flex; align-items: center; gap: 22px; min-width: max-content; animation: ticker 30s linear infinite; }
    .film-ticker span { color: #69aaff; font-size: 13px; }
    @keyframes ticker { to { transform: translateX(-50%); } }

    .section { padding-top: 46px; }
    .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
    .section-title { display: flex; align-items: center; gap: 11px; margin: 0; font-size: 19px; font-weight: 700; }
    .section-title::before { content: "01"; width: auto; height: auto; color: var(--blue-bright); background: transparent; border-radius: 0; font: 600 11px "DM Sans", sans-serif; direction: ltr; }
    .section-link { color: #9aa5b7; font-size: 11px; display: flex; gap: 6px; align-items: center; transition: color .2s; }
    .section-link:hover { color: var(--blue-bright); }
    .section-link span { font-size: 17px; }
    .filters { display: flex; gap: 8px; margin: 0 0 20px; flex-wrap: wrap; }
    .filter {
      border: 1px solid var(--line); background: transparent; color: #aab3c1;
      border-radius: 2px; padding: 7px 14px; font-size: 11px; cursor: pointer; transition: .2s;
    }
    .filter:hover, .filter.selected { color: white; border-color: #2586ff80; background: #2586ff1b; }
    .movie-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 23px; align-items: start; }
    .movie-card { min-width: 0; cursor: pointer; }
    .poster {
      height: 270px; position: relative; overflow: hidden; border-radius: 2px;
      background: #131b29; border: 1px solid #ffffff14;
    }
    .movie-card:nth-child(2), .movie-card:nth-child(4) { margin-top: 25px; }
    .movie-card:nth-child(1) .poster, .movie-card:nth-child(3) .poster { height: 300px; }
    .movie-card:nth-child(1) .poster { border-color: #318dff8a; }
    .poster img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s, filter .3s; }
    .movie-card:hover .poster img { transform: scale(1.055); filter: brightness(.75); }
    .poster::after { content: ""; position: absolute; inset: 30% 0 0; background: linear-gradient(0deg, #080b12e8, transparent); pointer-events: none; }
    .badge { position: absolute; top: 10px; right: 10px; z-index: 1; background: #0a0e17b5; border: 1px solid #ffffff36; border-radius: 2px; padding: 4px 8px; font: 600 8px "DM Sans", var(--font); letter-spacing: .12em; color: #dce8f8; }
    .save {
      position: absolute; top: 8px; left: 8px; z-index: 2; width: 29px; height: 29px;
      display: grid; place-items: center; border: 1px solid #ffffff37; background: #080b126e;
      border-radius: 50%; cursor: pointer; opacity: 0; transform: translateY(-3px); transition: .2s;
    }
    .movie-card:hover .save, .save.saved { opacity: 1; transform: none; }
    .save svg { width: 14px; height: 14px; }
    .save.saved { color: #62aaff; border-color: #62aaff9c; }
    .poster-play { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; opacity: 0; transition: opacity .2s; }
    .poster-play span { width: 43px; height: 43px; border-radius: 50%; display: grid; place-items: center; background: #2586ffdf; box-shadow: 0 0 28px #2586ff77; }
    .poster-play svg { width: 16px; margin-left: 2px; }
    .movie-card:hover .poster-play { opacity: 1; }
    .card-rating { position: absolute; bottom: 11px; right: 11px; z-index: 1; font-size: 10px; color: #ffce5c; display: flex; gap: 4px; align-items: center; }
    .movie-title { margin: 11px 0 5px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .movie-meta { color: var(--muted); font-size: 10px; display: flex; gap: 9px; align-items: center; }
    .movie-meta span + span::before { content: "•"; margin-left: 8px; color: #536075; }

    .series-banner {
      min-height: 245px; margin-top: 55px; border: 1px solid #ffffff12; border-radius: 2px;
      overflow: hidden; position: relative; display: flex; align-items: center;
      background: linear-gradient(270deg, #101c30 0%, #111a28 48%, #111722 100%);
    }
    .series-banner::before { content: ""; position: absolute; left: 0; top: 0; width: 48%; height: 100%; opacity: .68; background: linear-gradient(90deg, #10172200, #101722), url("https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=900&q=80") center/cover; }
    .series-banner::after { content: ""; position: absolute; top: 0; right: 0; width: 3px; height: 100%; background: linear-gradient(transparent, var(--blue), transparent); }
    .banner-content { position: relative; z-index: 1; padding: 29px 35px; max-width: 580px; }
    .banner-content .eyebrow { color: #87bbff; font-size: 10px; }
    .banner-content h2 { font-size: 22px; margin: 9px 0 6px; }
    .banner-content p { color: #aeb8c8; font-size: 11px; margin: 0 0 14px; }
    .banner-content .primary { padding: 8px 14px; font-size: 10px; }
    .footer { margin-top: 60px; padding: 25px 0 30px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; color: #788294; font-size: 10px; }
    .footer .brand-name { font-size: 16px; }
    .footer .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
    .footer-note { display: flex; align-items: center; gap: 6px; }
    .footer-note span { color: #4a9cff; }

    .overlay { position: fixed; inset: 0; z-index: 10; background: #03060bd9; display: none; place-items: center; padding: 20px; backdrop-filter: blur(7px); }
    .overlay.open { display: grid; }
    .modal { width: min(520px, 100%); background: #111824; border: 1px solid #ffffff1c; border-radius: 15px; overflow: hidden; box-shadow: 0 24px 100px #000b; }
    .modal-top { height: 230px; background: linear-gradient(0deg, #111824, transparent 70%), url("https://images.unsplash.com/photo-1440404653325-ab127d49abc1?auto=format&fit=crop&w=1000&q=80") center/cover; position: relative; }
    .close-modal { position: absolute; left: 13px; top: 13px; width: 33px; height: 33px; border-radius: 50%; border: 1px solid #ffffff40; background: #060a11b8; font-size: 19px; cursor: pointer; }
    .modal-body { padding: 0 24px 23px; }
    .modal-body h2 { margin: 0 0 8px; font-size: 21px; }
    .modal-body p { color: #aab3c1; line-height: 1.9; font-size: 12px; }
    .toast { position: fixed; z-index: 12; bottom: 24px; right: 50%; transform: translate(50%, 20px); opacity: 0; pointer-events: none; padding: 10px 18px; border-radius: 9px; border: 1px solid #ffffff1e; background: #151d2a; color: white; font-size: 12px; transition: .25s; }
    .toast.visible { opacity: 1; transform: translate(50%, 0); }
    .empty-state { color: var(--muted); grid-column: 1/-1; text-align: center; padding: 30px; font-size: 13px; }
    @media (max-width: 950px) {
      .shell { padding: 0 4%; }
      .topbar { gap: 27px; }
      .nav { gap: 19px; }
      .movie-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
      .movie-card:nth-child(5) { display: none; }
      .poster { height: 230px; }
    }
    @media (max-width: 650px) {
      .shell { padding: 0 18px; }
      .topbar { height: 68px; gap: 14px; }
      .brand-mark { width: 34px; height: 34px; }
      .brand-name { font-size: 19px; }
      .mobile-menu { display: grid; }
      .nav { display: none; position: absolute; top: 58px; right: 0; left: 0; padding: 16px; border-radius: 10px; background: #111824; border: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 16px; }
      .nav.open { display: flex; }
      .nav a.active::after { display: none; }
      .top-actions { gap: 6px; }
      .login { padding: 8px 12px; font-size: 10px; }
      .hero { height: 570px; min-height: 0; border-radius: 3px 19px 3px 3px; background-position: 55% center; }
      .hero::before { background: linear-gradient(0deg, rgba(6,10,18,.98), rgba(6,10,18,.8) 52%, rgba(6,10,18,.12)); }
      .hero::after { font-size: 57vw; left: 1%; top: 11%; }
      .hero-content { position: absolute; bottom: 57px; right: 23px; left: 18px; padding: 0; }
      .hero h1 { font-size: 37px; margin: 12px 0; }
      .hero-edition { top: 22px; left: 18px; font-size: 8px; }
      .hero-caption { display: none; }
      .hero-stamp { top: 51%; left: 20px; width: 65px; height: 65px; }
      .hero-stamp strong { font-size: 18px; }
      .hero-stamp span { font-size: 6px; }
      .film-ticker { height: 42px; margin-top: 14px; }
      .hero-copy { font-size: 12px; line-height: 2; margin: 13px 0 19px; }
      .slider-dots { bottom: 17px; left: 17px; }
      .section { padding-top: 35px; }
      .section-title { font-size: 16px; }
      .movie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px 13px; }
      .movie-card:nth-child(5) { display: block; }
      .poster, .movie-card:nth-child(1) .poster, .movie-card:nth-child(3) .poster { height: clamp(185px, 61vw, 260px); }
      .movie-card:nth-child(2), .movie-card:nth-child(4) { margin-top: 18px; }
      .save { opacity: 1; transform: none; }
      .series-banner { margin-top: 36px; min-height: 200px; }
      .series-banner::before { width: 80%; }
      .banner-content { padding: 23px; }
      .banner-content h2 { font-size: 19px; }
      .footer { margin-top: 40px; gap: 15px; align-items: flex-start; flex-direction: column; }
    }
    article.movie-card[hidden] { display: none; }
    .hero[data-frame="01"]::after { content: "01"; }
    .hero[data-frame="02"]::after { content: "02"; }
    .hero[data-frame="03"]::after { content: "03"; }
    .hero::after { opacity: .76; transition: opacity .25s, transform .55s; }
    .hero.changing::after { opacity: .15; transform: translateX(-24px); }
    .hero-content { z-index: 1; bottom: 17%; }
    .hero h1 { font-size: clamp(42px, 6.2vw, 78px); letter-spacing: -2px; }
    .hero-edition { z-index: 2; }
    .hero-caption, .hero-stamp, .slider-dots { display: none; }
    .hero-selector {
      position: absolute; z-index: 2; left: 30px; bottom: 30px;
      display: flex; align-items: stretch; gap: 7px; direction: ltr;
    }
    .frame-choice {
      width: 120px; min-height: 76px; padding: 8px; border: 1px solid #ffffff27;
      background: #070b12a6; backdrop-filter: blur(12px); color: #b6c0cf;
      display: flex; align-items: center; gap: 9px; text-align: left; cursor: pointer;
      transition: background .25s, border-color .25s, transform .25s;
    }
    .frame-choice:hover { transform: translateY(-4px); border-color: #ffffff75; }
    .frame-choice.active { background: #0c1c31db; border-color: #4a9cff; color: white; }
    .frame-choice img { width: 38px; height: 56px; object-fit: cover; filter: saturate(.72); }
    .frame-choice.active img { filter: saturate(1); }
    .frame-copy { min-width: 0; display: grid; gap: 5px; }
    .frame-copy small { color: #70b6ff; font: 600 8px "DM Sans", sans-serif; letter-spacing: .14em; }
    .frame-copy b { font-size: 10px; white-space: nowrap; }
    .frame-copy em { color: #8e9aac; font: normal 8px "DM Sans", var(--font); }
    .frame-choice.active .frame-copy em { color: #c4d7ee; }
    .hero-content, .hero::before { transition: opacity .25s ease; }
    .hero.changing .hero-content { opacity: .18; }
    .hero[data-frame="02"] { background-position: center 52%; }
    .hero[data-frame="03"] { background-position: center 48%; }
    .hero-guide { position: absolute; z-index: 1; left: 31px; top: 78px; color: #ffffff80; font: 500 8px "DM Sans", sans-serif; letter-spacing: .2em; writing-mode: vertical-rl; }
    .hero-guide::after { content: ""; height: 42px; width: 1px; background: linear-gradient(#68aaff, transparent); margin: 11px auto 0; }
    .section-title::before { content: "K / 01"; color: var(--blue-bright); font: 600 9px "DM Sans", sans-serif; letter-spacing: .08em; }
    @media (max-width: 950px) {
      .hero-content { bottom: 19%; right: 6%; max-width: 53%; }
      .hero-selector { left: 20px; bottom: 22px; gap: 5px; }
      .frame-choice { width: 105px; }
      .frame-choice img { width: 32px; }
    }
    @media (max-width: 650px) {
      .hero { height: 650px; max-height: none; }
      .hero-content { right: 21px; left: 18px; bottom: 139px; max-width: none; }
      .hero h1 { font-size: 42px; }
      .hero-selector { left: 12px; right: 12px; bottom: 16px; gap: 5px; }
      .frame-choice { width: auto; min-width: 0; min-height: 69px; flex: 1; padding: 6px; gap: 5px; }
      .frame-choice img { width: 29px; height: 47px; }
      .frame-copy { gap: 3px; }
      .frame-copy b { font-size: 8px; }
      .frame-copy small { font-size: 7px; }
      .frame-copy em { font-size: 7px; }
      .hero-guide { left: auto; right: 15px; top: 78px; }
    }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } .film-ticker div { animation: none; } }
  
#mainNav { list-style: none; margin: 0; padding: 0; }