/* ------------------------------------------------------------------
   Brand colour system — one dominant background per sub-brand page,
   with a halo/spectrum of the secondary colours, alternating heading
   and menu colours, and a fixed body-text colour.
   Applies to every page of a brand (portal, archive, article, static).
   ------------------------------------------------------------------ */

body[class*="theme-"]{
  --halo-1:transparent;--halo-2:transparent;--halo-3:transparent;
  --nav-1:currentColor;--nav-2:currentColor;
  --surface:#fff;--surface-ink:#1a1420;--surface-muted:#625b63;
  --title-shadow:none;
}

/* ---- سینماجهت: مشکی غالب، هاله فیروزه‌ای و سرخابی ---- */
body.theme-cinemajahat{
  --page-bg:#000;--page-text:#fff;
  --halo-1:rgba(80,227,223,.30);--halo-2:rgba(238,40,115,.28);--halo-3:rgba(80,227,223,.16);
  --nav-1:#50e3df;--nav-2:#ee2873;
  --brand-a:#50e3df;--brand-b:#ee2873;--brand-ink:#000;--brand-paper:#0b0f10;
}
/* ---- سینماجرا: فیروزه‌ای غالب، هاله سرخابی و مشکی ----
   Die Hintergrund-Werte (Grundflaeche + drei Halos) stehen genau EINMAL hier.
   Die Klasse bg-match-jera (Admin-Option) haengt سینماجهت an dieselben
   Variablen, damit die Flaeche exakt der von سینماجرا entspricht statt aus
   zweitrangigen Farbwerten nachgebaut zu werden. Text-, Menu- und
   Akzentfarben von سینماجهت bleiben unberuehrt. */
body.theme-cinemajera,
body.theme-cinemajahat.bg-match-jera{
  --page-bg:#0B1117;
  --halo-1:rgba(72,190,184,.16);
  --halo-2:rgba(0,0,0,.45);
  --halo-3:rgba(184,62,108,.12);
}
body.theme-cinemajera{
  --page-text:#F2F4F5;
  --nav-1:#14242A;
  --nav-2:#F2F4F5;
  --brand-a:#48BEB8;
  --brand-b:#B83E6C;
  --brand-ink:#FFFFFF;
  --brand-paper:#EAF7F6;
  --title-shadow:0 2px 8px rgba(0,0,0,.45);
}
/* ---- سینماعود: تیره دقیقاً مثل سینماجرا، هاله قرمز ---- */
body.theme-cinemaoud{
  /* Kundenwunsch: Hintergrund exakt wie سینماجرا (#0B1117 mit hellem Text),
     nur der Halo ist rot (EE2873) statt gruen -- gleiche Staerke (.16). */
  /* cr1196: --nav-* wie vom Kunden notiert; die Lesbarkeit regelt der
     cr1196-Block am Dateiende. */
  --page-bg:#0B1117;--page-text:#F2F4F5;
  --halo-1:rgba(238,40,115,.16);--halo-2:rgba(0,0,0,.45);--halo-3:rgba(184,62,108,.12);
  --nav-1:#fff;--nav-2:#fff;
  --brand-a:#ee2873;--brand-b:#fff;--brand-ink:#26000f;--brand-paper:#fff7fa;
  --title-shadow:0 2px 8px rgba(0,0,0,.45);
}
/* ---- فَرهُنر: ارغوانی غالب، هاله مشکی ---- */
body.theme-farhonar{
  /* cr1201: Block woertlich nach Kundenvorgabe. --page-bg wird fast schwarz,
     die Halos tragen jetzt das Violett. --nav-* bleiben hier wie notiert;
     die Lesbarkeit regelt der cr1201-Block am Dateiende. */
  --page-bg:#0b0509;--page-text:#fff;
  --halo-1:rgba(130,7,102,.18);--halo-2:rgba(130,7,102,.12);--halo-3:rgba(0,0,0,.45);
  --nav-1:#000;--nav-2:#000;
  --brand-a:#820766;--brand-b:#000;--brand-ink:#12000e;--brand-paper:#fdf6fb;
  --title-shadow:0 2px 0 rgba(255,255,255,.28);
}

/* ---------- page canvas: dominant colour + halo/spectrum ---------- */
body[class*="theme-"]{
  background-color:var(--page-bg);
  color:var(--page-text);
  background-image:
    /* cr1216: the side halos span the FULL viewport height on purpose. At 48%/44%
       height they only tinted the top third and the rest of the page fell back to bare
       black, which is what the customer saw as "only that one section is coloured". */
    radial-gradient(ellipse 62% 104% at 8% 46%,var(--halo-1),transparent 70%),
    radial-gradient(ellipse 58% 104% at 92% 50%,var(--halo-2),transparent 72%),
    radial-gradient(ellipse 78% 52% at 50% 106%,var(--halo-3),transparent 74%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}
body[class*="theme-"] .portal-main,
body[class*="theme-"] main{background:transparent}

/* ---------- header / navigation ---------- */
body[class*="theme-"] .site-header{
  background:color-mix(in srgb,var(--page-bg) 82%,transparent);
  border-block-end-color:color-mix(in srgb,var(--page-text) 22%,transparent);
  color:var(--page-text);
}
body[class*="theme-"] .site-header.scrolled{
  border-color:color-mix(in srgb,var(--page-text) 28%,transparent);
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}
body[class*="theme-"] .brand{color:var(--page-text)}
body[class*="theme-"] .logo-mark path:first-child{fill:var(--nav-1);stroke:var(--page-text)}
body[class*="theme-"] .logo-mark path:last-child{stroke:var(--page-text)}

/* «یکی در میان» — alternating menu colours */
body[class*="theme-"] .desktop-nav>a:nth-child(odd),
body[class*="theme-"] .desktop-nav>.dropdown:nth-child(odd)>button{color:var(--nav-1)}
body[class*="theme-"] .desktop-nav>a:nth-child(even),
body[class*="theme-"] .desktop-nav>.dropdown:nth-child(even)>button{color:var(--nav-2)}
body[class*="theme-"] .desktop-nav>a:hover,
body[class*="theme-"] .desktop-nav>.dropdown>button:hover{color:var(--page-text)}

/* submenus — same alternating rhythm */
body[class*="theme-"] .dropdown-menu{
  background:color-mix(in srgb,var(--page-bg) 94%,#000);
  border-color:var(--nav-1);
}
body[class*="theme-"] .dropdown-menu a:nth-child(odd){color:var(--nav-1)}
body[class*="theme-"] .dropdown-menu a:nth-child(even){color:var(--nav-2)}
body[class*="theme-"] .dropdown-menu a:hover{background:var(--nav-1);color:var(--page-bg)}

body[class*="theme-"] .icon-btn{
  background:transparent;
  border-color:color-mix(in srgb,var(--page-text) 42%,transparent);
  color:var(--page-text);
}
body[class*="theme-"] .icon-btn:hover{background:color-mix(in srgb,var(--page-text) 12%,transparent)}
body[class*="theme-"] .gateway-link{color:var(--nav-1);border-color:currentColor}

body[class*="theme-"] .mobile-menu{background:var(--page-bg);color:var(--page-text)}
body[class*="theme-"] .mobile-menu nav .nav-c1{color:var(--nav-1)}
body[class*="theme-"] .mobile-menu nav .nav-c2{color:var(--nav-2)}
body[class*="theme-"] .mobile-menu nav .m-portal{color:var(--page-text)}
body[class*="theme-"] .mobile-menu nav .mobile-sub{color:color-mix(in srgb,var(--page-text) 78%,transparent)}
body[class*="theme-"] .mobile-menu nav .m-acc{border-block-end-color:color-mix(in srgb,var(--page-text) 25%,transparent)}
body[class*="theme-"] .mobile-menu nav a{border-block-end-color:color-mix(in srgb,var(--page-text) 25%,transparent)}

/* ---------- headings: alternating, per the palette ---------- */
body[class*="theme-"] .portal-hero h1{
  color:var(--nav-1);text-shadow:var(--title-shadow);
}
body[class*="theme-"] .portal-slogan{color:var(--nav-2);text-shadow:var(--title-shadow)}
body[class*="theme-"] .portal-hero-copy>p:last-of-type{color:color-mix(in srgb,var(--page-text) 86%,transparent)}
body[class*="theme-"] .portal-kicker,
body[class*="theme-"] .weekly>span{color:var(--nav-1)}
body[class*="theme-"] .portal-kicker:before,
body[class*="theme-"] .portal-section-head>span:before{background:var(--nav-2)}

body[class*="theme-"] main>section:nth-of-type(odd) .portal-section-head>span{color:var(--nav-1)}
body[class*="theme-"] main>section:nth-of-type(even) .portal-section-head>span{color:var(--nav-2)}
body[class*="theme-"] main>section:nth-of-type(odd) .portal-section-head h2,
body[class*="theme-"] main>section:nth-of-type(odd)>.shell .portal-section-head h2{
  color:var(--nav-1);text-shadow:var(--title-shadow);
}
body[class*="theme-"] main>section:nth-of-type(even) .portal-section-head h2,
body[class*="theme-"] main>section:nth-of-type(even)>.shell .portal-section-head h2{
  color:var(--nav-2);text-shadow:var(--title-shadow);
}
body[class*="theme-"] .page-hero h1{color:var(--nav-1);text-shadow:var(--title-shadow)}
body[class*="theme-"] .page-hero .kicker{color:var(--nav-2)}
body[class*="theme-"] .page-hero p{color:color-mix(in srgb,var(--page-text) 86%,transparent)}
body[class*="theme-"] .portal-scroll{color:var(--nav-2);border-block-end-color:var(--nav-1)}

/* ---------- content surfaces stay light so body copy is readable ---------- */
body[class*="theme-"] .portal-card,
body[class*="theme-"] .portal-more article,
body[class*="theme-"] .news-card,
body[class*="theme-"] .weekly,
body[class*="theme-"] .prose-box,
body[class*="theme-"] .contact-form,
body[class*="theme-"] .empty-state,
body[class*="theme-"] .article .prose{
  background:var(--surface);color:var(--surface-ink);
}
body[class*="theme-"] .portal-card h3 a,
body[class*="theme-"] .portal-more article h3 a,
body[class*="theme-"] .news-card h2 a{color:var(--surface-ink)}
body[class*="theme-"] .portal-card p,
body[class*="theme-"] .news-card p{color:var(--surface-muted)}
body[class*="theme-"] .portal-card span,
body[class*="theme-"] .portal-more article span,
body[class*="theme-"] .news-card .cat{color:var(--nav-2)}
body[class*="theme-"] .portal-card,
body[class*="theme-"] .news-card{border-block-start:7px solid var(--nav-1)}
body[class*="theme-"] .portal-more article{border-block-end:5px solid var(--nav-2)}
body[class*="theme-"] .weekly{
  border-color:color-mix(in srgb,var(--surface-ink) 22%,transparent);
  box-shadow:14px 14px 0 var(--nav-2);
}
body[class*="theme-"] .weekly h2{color:var(--surface-ink);text-shadow:none}
body[class*="theme-"] .weekly a{background:var(--nav-1);color:var(--page-bg)}

/* article body + breadcrumbs sit on the coloured canvas */
body[class*="theme-"] .article>header h1{color:var(--nav-1);text-shadow:var(--title-shadow)}
body[class*="theme-"] .article>header .lead,
body[class*="theme-"] .article .byline,
body[class*="theme-"] .breadcrumbs{color:color-mix(in srgb,var(--page-text) 84%,transparent)}
body[class*="theme-"] .article .prose{padding:26px;border-radius:4px}

/* strips & panels keep the second colour */
body[class*="theme-"] .content-strip{background:var(--nav-2);color:var(--page-bg)}
body[class*="theme-"] .content-strip span{color:var(--page-bg)}
body[class*="theme-"] .content-strip nav a{border-color:var(--page-bg)}
body[class*="theme-"] .content-strip nav a:hover{background:var(--page-bg);color:var(--nav-2)}
body[class*="theme-"] .category-scene{background:var(--nav-1)}
body[class*="theme-"] .category-scene .portal-section-head h2,
body[class*="theme-"] .category-scene .portal-section-head>span,
body[class*="theme-"] .category-scene nav a{color:var(--page-bg);text-shadow:none}
body[class*="theme-"] .category-scene nav a{border-block-end-color:color-mix(in srgb,var(--page-bg) 38%,transparent)}
body[class*="theme-"] .special-links a{background:var(--nav-1);color:var(--page-bg)}
body[class*="theme-"] .special-links a:last-child{background:var(--nav-2);color:var(--page-bg)}

/* forms / buttons */
body[class*="theme-"] .btn.primary{background:var(--nav-1);color:var(--page-bg)}
body[class*="theme-"] .btn.secondary{border-color:var(--page-text);color:var(--page-text)}
body[class*="theme-"] .search-form label,
body[class*="theme-"] .contact-form label{color:var(--surface-ink)}
body[class*="theme-"] .search-form label{color:var(--page-text)}
body[class*="theme-"] .search-form input{background:#fff;color:#1a1420;border:1px solid var(--nav-1)}

/* footer */
body[class*="theme-"] .footer{
  background:color-mix(in srgb,var(--page-bg) 82%,#000);
  color:#fff;
  border-block-start:1px solid color-mix(in srgb,#fff 20%,transparent);
}
body[class*="theme-"] .footer h3{color:var(--nav-1)}
body[class*="theme-"] .footer a:hover{color:var(--nav-1)}

/* focus ring must stay visible on every canvas */
body[class*="theme-"] :focus-visible{outline:3px solid var(--nav-1);outline-offset:3px}

@media(max-width:900px){
  body[class*="theme-"] .site-header{background:color-mix(in srgb,var(--page-bg) 94%,transparent)}
}

/* The palette puts white menu items on the light turquoise سینماجرا canvas and on
   the سینماعود magenta canvas. Keep the specified colours, but give them a soft
   dark shadow so they stay readable. */
body.theme-cinemajera .desktop-nav>a,
body.theme-cinemajera .desktop-nav>.dropdown>button,
body.theme-cinemajera .mobile-menu nav a,
body.theme-cinemajera .portal-kicker,
body.theme-cinemajera .page-hero .kicker,
body.theme-cinemaoud .desktop-nav>a,
body.theme-cinemaoud .desktop-nav>.dropdown>button,
body.theme-cinemaoud .mobile-menu nav a,
body.theme-cinemaoud .portal-kicker,
body.theme-cinemaoud .page-hero .kicker{text-shadow:0 1px 2px rgba(0,0,0,.45)}


/* --- Ticket #428 / brief section 41: BRAND LOGO SYSTEM (real reference assets) --- */
/* Logos ship on their original black plate; per 41.x only the SURROUNDING area may be
   theme-aware, the logo itself must never be recoloured, restyled or stretched. */
.brand-band{width:100%;background-color:#000;background:radial-gradient(120% 200% at 50% 0%,
  color-mix(in srgb,var(--nav-1) 20%,#000) 0%,#000 62%);background-color:#000;}
.brand-band-inner{position:relative;display:flex;align-items:center;justify-content:center;
  /* tkt443h: Kopfzeile war auf dem Rechner 247-286 px hoch und hat den Seitenanfang
     erschlagen. Weniger Luft im Band + kleinere Logos druecken sie deutlich. */
  padding:9px 24px;box-sizing:border-box;}
.brand-band-inner .brand-logotype{display:block;width:clamp(150px,23%,270px);height:auto;
  max-width:27%;object-fit:contain;}
.brand-band-inner .brand-secondary{position:absolute;inset-inline-start:24px;top:50%;
  transform:translateY(-50%);display:block;height:46%;width:auto;max-width:17%;object-fit:contain;}
.brand-band-inner .brand-logotype:hover,.brand-band-inner .brand-secondary:hover{opacity:.92;}
.site-header .brand.brand-home{min-width:0;}
@media (max-width:640px){
  .brand-band-inner{padding:8px 14px;}
  .brand-band-inner .brand-logotype{width:clamp(105px,32%,175px);max-width:36%;}
  .brand-band-inner .brand-secondary{inset-inline-start:16px;height:38%;max-width:26%;}
}


/* ivos_tkt428_oudswap: the swapped Persian logotype carries the brand on cinemaoud,
   so it gets a touch more room than the latin one has on the other brands. */
body.theme-cinemaoud .brand-band-inner .brand-logotype{width:clamp(165px,26%,300px); max-width:30%;}
/* tkt443h: die Navigationszeile selbst bringt 82 px mit (style.css). Fuer die
   Markenseiten reicht 64 -- die Knoepfe darin sind 48 px hoch, das Tap-Target
   bleibt also unangetastet. */
body[class*="theme-"] .shell.nav{min-height:64px}
@media (max-width:768px){body[class*="theme-"] .shell.nav{min-height:58px}}
@media (max-width:640px){
  body.theme-cinemaoud .brand-band-inner .brand-logotype{width:clamp(120px,37%,200px); max-width:40%;}
}

/* ===== ivos-cr1121-cinemajera — لایهٔ خوانایی =====
   در این فایل متغیر --nav-1 نقشِ «رنگِ متن/تأکید» را دارد (نه رنگِ نوارِ منو).
   با پالت جدید (#14242A روی پس‌زمینهٔ #0B1117) عنوان‌ها، دکمه‌ها و لینک‌های
   منو عملاً نامرئی می‌شدند. طبق بندهای ۸ و ۱۰ درخواست، تنها برای حفظ خوانایی
   و تنها با رنگ‌های همین پالت اصلاح شده است؛ ساختار CSS، نام کلاس‌ها و نام
   متغیرها دست‌نخورده مانده‌اند و هیچ Theme دیگری تغییر نکرده است. */
body.theme-cinemajera .desktop-nav>a:nth-child(odd),
body.theme-cinemajera .desktop-nav>.dropdown:nth-child(odd)>button,
body.theme-cinemajera .dropdown-menu a:nth-child(odd),
body.theme-cinemajera .gateway-link,
body.theme-cinemajera .mobile-menu nav .nav-c1,
body.theme-cinemajera .portal-hero h1,
body.theme-cinemajera .portal-kicker,
body.theme-cinemajera .weekly>span,
body.theme-cinemajera main>section:nth-of-type(odd) .portal-section-head>span,
body.theme-cinemajera main>section:nth-of-type(odd) .portal-section-head h2,
body.theme-cinemajera main>section:nth-of-type(odd)>.shell .portal-section-head h2,
body.theme-cinemajera .page-hero h1,
body.theme-cinemajera .article>header h1,
body.theme-cinemajera .footer h3,
body.theme-cinemajera .footer a:hover{color:var(--brand-a)}
body.theme-cinemajera .dropdown-menu{border-color:var(--brand-a)}
body.theme-cinemajera .portal-scroll{border-block-end-color:var(--brand-a)}
body.theme-cinemajera .search-form input{border-color:var(--brand-a)}
body.theme-cinemajera :focus-visible{outline-color:var(--brand-a)}
body.theme-cinemajera .dropdown-menu a:hover,
body.theme-cinemajera .weekly a,
body.theme-cinemajera .special-links a,
body.theme-cinemajera .btn.primary{background:var(--brand-a);color:var(--page-bg)}
body.theme-cinemajera .category-scene .portal-section-head h2,
body.theme-cinemajera .category-scene .portal-section-head>span,
body.theme-cinemajera .category-scene nav a{color:var(--page-text)}
body.theme-cinemajera .category-scene nav a{border-block-end-color:color-mix(in srgb,var(--page-text) 38%,transparent)}
body.theme-cinemajera .portal-card,
body.theme-cinemajera .news-card{border-block-start-color:var(--brand-a)}
body.theme-cinemajera .portal-card span,
body.theme-cinemajera .portal-more article span,
body.theme-cinemajera .news-card .cat{color:var(--brand-b)}
/* ===== /ivos-cr1121-cinemajera ===== */

/* ===== ivos-tkt443-slogan — شعار برند در هدر (Ticket #443) =====
   Der Slogan steht an der LINKEN Bandkante, spiegelbildlich zum Marken-Logo an
   der rechten Kante. In RTL ist `inset-inline-end` die linke Kante. */
.brand-band-inner .brand-slogan{
  position:absolute;inset-inline-end:24px;top:50%;transform:translateY(-50%);
  max-width:24%;text-align:start;pointer-events:none;
  font-weight:700;font-size:clamp(.78rem,1.3vw,1.05rem);line-height:1.5;
  /* ivos-tkt443b: das Band ist IMMER schwarz -> feste helle Farbe, niemals --page-text
     (dessen Wert je Marke wechselt und hier unsichtbar werden kann). */
  color:#fff;opacity:.95;text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 10px rgba(0,0,0,.55);
}
@media(max-width:900px){
  .brand-band-inner .brand-slogan{inset-inline-end:14px;max-width:27%;font-size:.66rem;line-height:1.35}
}
/* ===== /ivos-tkt443-slogan ===== */

/* ===== ivos-cr1133-categories — «دسته‌ها» unsichtbar + Kachel-Optik (CR#1133) =====
   1) Bug: die nth-of-type-Regeln weiter oben (Ueberschrift/Kicker => var(--nav-1))
      haben MEHR Spezifitaet (0,3,4) als der .category-scene-Block (0,3,2). Da der
      Abschnitt SELBST var(--nav-1) als Hintergrund traegt, stand die Ueberschrift
      Tuerkis auf Tuerkis — unsichtbar. Gegen-Regel mit gleicher nth-of-type-Form.
   2) Wunsch: die Links (فیلم / فیلم کوتاه / …) als quadratische Kacheln statt Zeilen. */
body[class*="theme-"] main>section.category-scene:nth-of-type(odd) .portal-section-head h2,
body[class*="theme-"] main>section.category-scene:nth-of-type(even) .portal-section-head h2,
body[class*="theme-"] main>section.category-scene:nth-of-type(odd)>.shell .portal-section-head h2,
body[class*="theme-"] main>section.category-scene:nth-of-type(even)>.shell .portal-section-head h2,
body[class*="theme-"] main>section.category-scene:nth-of-type(odd) .portal-section-head>span,
body[class*="theme-"] main>section.category-scene:nth-of-type(even) .portal-section-head>span{
  color:var(--page-bg);text-shadow:none;
}
body.theme-cinemajera main>section.category-scene:nth-of-type(odd) .portal-section-head h2,
body.theme-cinemajera main>section.category-scene:nth-of-type(even) .portal-section-head h2,
body.theme-cinemajera main>section.category-scene:nth-of-type(odd) .portal-section-head>span,
body.theme-cinemajera main>section.category-scene:nth-of-type(even) .portal-section-head>span{
  color:var(--page-text);
}
body[class*="theme-"] .category-scene .portal-section-head{margin-block-end:clamp(24px,3vw,44px)}
body[class*="theme-"] .category-scene nav{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(12px,1.6vw,22px);
}
body[class*="theme-"] .category-scene nav a{
  aspect-ratio:1/1;min-height:0;padding:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-align:center;
  font:400 clamp(1.35rem,2.6vw,2.3rem)/1.15 Lalezar,Vazirmatn,sans-serif;
  border:2px solid color-mix(in srgb,var(--page-bg) 60%,transparent);
  border-radius:16px;
  background:color-mix(in srgb,var(--page-bg) 8%,transparent);
  transition:background .2s ease,transform .2s ease;
}
body[class*="theme-"] .category-scene nav a:after{
  content:"←";font-family:Vazirmatn,sans-serif;font-size:1.15rem;opacity:.75;transition:transform .2s ease;
}
body[class*="theme-"] .category-scene nav a:hover{
  background:color-mix(in srgb,var(--page-bg) 18%,transparent);transform:translateY(-4px);
}
body[class*="theme-"] .category-scene nav a:hover:after{transform:translateX(-8px)}
@media(max-width:768px){
  body[class*="theme-"] .category-scene nav{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px}
  body[class*="theme-"] .category-scene nav a{border-radius:14px;padding:10px}
}
@media(prefers-reduced-motion:reduce){
  body[class*="theme-"] .category-scene nav a,
  body[class*="theme-"] .category-scene nav a:after{transition:none}
  body[class*="theme-"] .category-scene nav a:hover{transform:none}
  body[class*="theme-"] .category-scene nav a:hover:after{transform:none}
}
/* ===== /ivos-cr1133-categories ===== */

/* ===== ivos_cr1120 — Mosaik-Abschnitte auf jeder Marken-Portalseite (CR#1120) =====
   Der Kunde wollte «صفحه از چندین بخش تشکیل بشه شبیه موزاییک» wie auf der Startseite:
   Poster-Wand (gross), پرفروش‌ترین, در حال اکران, آخرین اخبار, خبرنامه.
   Inhalte kommen je Marke aus cinemajahat_films.section bzw. den Artikeln derselben Marke. */
.portal-mosaic{padding-block:clamp(26px,4vw,54px)}
/* cr1177: 10 Spuren statt 3, damit die erste Reihe exakt 70/30 werden kann. */
.pm-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(12px,1.5vw,20px);align-items:stretch}
.pm-tile{display:flex;flex-direction:column;gap:12px;min-width:0;padding:clamp(15px,1.8vw,24px);
  border:1px solid color-mix(in srgb,var(--page-text,#111) 20%,transparent);border-radius:16px 4px;
  background:color-mix(in srgb,var(--page-text,#111) 7%,var(--page-bg,#fff));color:var(--page-text,inherit);
  box-shadow:0 8px 26px rgba(0,0,0,.14);
  /* ivos — Menüpunkt scrollt zur eigenen Box; Versatz, damit der sticky Header sie nicht verdeckt. */
  scroll-margin-block-start:clamp(82px,10vw,96px)}
.pm-tile-title{margin:0;font-size:clamp(1rem,1.5vw,1.28rem);font-weight:800;line-height:1.5;color:var(--page-text,inherit);text-shadow:var(--title-shadow,none)}
.pm-tile-title:after{content:"";display:block;width:46px;height:3px;margin-block-start:8px;background:var(--brand-b,currentColor);opacity:.85}
.pm-posters{grid-column:span 7;grid-row:span 2}
/* Bei 10 Spuren traegt KEINE Kachel mehr die stille Vorgabe «span 1» (= 10%);
   jede Kachel bekommt ihre Breite deshalb ausdruecklich. */
.pm-best,.pm-showing,.pm-news,.pm-letter{grid-column:span 3}
.pm-news{grid-column:span 7}
.pm-soon{margin:0;opacity:.72;font-size:.9rem;line-height:1.9}

.pm-poster-wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1vw,15px)}
.pm-poster-wall>.pm-poster-wrap{display:block;min-width:0;border-radius:14px;color:inherit;text-decoration:none}
.pm-poster-wall>.pm-poster-wrap:hover .pm-poster>img,.pm-poster-wall>.pm-poster-wrap:hover .pm-poster-plate{filter:brightness(.8)}
.pm-poster-wall>.pm-poster-wrap:hover figcaption b{text-decoration:underline;text-underline-offset:3px}
.pm-poster-wall>.pm-poster-wrap:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.pm-poster{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0}
.pm-poster>img,.pm-poster-plate{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:14px;
  border:2px solid color-mix(in srgb,var(--brand-b,#ee2873) 70%,currentColor)}
.pm-poster-plate{position:relative;display:grid;align-content:center;justify-items:center;gap:10px;overflow:hidden;
  background:linear-gradient(148deg,color-mix(in srgb,var(--brand-a,#50e3df) 78%,#000) 0%,color-mix(in srgb,var(--brand-b,#ee2873) 55%,#000) 100%)}
.pm-poster-plate:before{content:"";position:absolute;inset-inline:0;inset-block-start:12px;height:11px;
  background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(255,255,255,.42) 9px 16px);opacity:.55}
.pm-poster-plate:after{content:"";position:absolute;inset-inline:0;inset-block-end:12px;height:11px;
  background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(255,255,255,.42) 9px 16px);opacity:.55}
.pm-poster-plate i{display:block;width:46%;height:6px;border-radius:3px;background:rgba(255,255,255,.34)}
.pm-poster-plate i:nth-child(2){width:32%}.pm-poster-plate i:nth-child(3){width:38%}
.pm-tone-1 .pm-poster-plate{background:linear-gradient(148deg,color-mix(in srgb,var(--brand-b,#ee2873) 72%,#000),#111 100%)}
.pm-tone-2 .pm-poster-plate{background:linear-gradient(148deg,#151515,color-mix(in srgb,var(--brand-a,#50e3df) 62%,#000) 100%)}
.pm-tone-3 .pm-poster-plate{background:linear-gradient(148deg,color-mix(in srgb,var(--brand-a,#50e3df) 55%,#000),color-mix(in srgb,var(--brand-b,#ee2873) 70%,#000) 100%)}
.pm-poster figcaption{display:flex;flex-direction:column;gap:2px;min-width:0}
.pm-poster figcaption b{font-size:.88rem;font-weight:700;line-height:1.6;overflow-wrap:anywhere}
.pm-poster figcaption span{font-size:.76rem;opacity:.68;overflow-wrap:anywhere}

.pm-rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:none}
.pm-rank li{display:flex;align-items:flex-start;gap:11px;min-width:0;
  background:linear-gradient(150deg,rgba(24,12,34,.94),rgba(8,6,16,.94));
  border:1px solid rgba(238,40,115,.28);
  box-shadow:inset 0 0 0 1px rgba(80,227,223,.07),0 4px 14px rgba(0,0,0,.45);
  border-radius:12px 3px;padding:10px 12px}
body.theme-farhonar .pm-rank li{
  background:linear-gradient(150deg,rgba(23,9,19,.96),rgba(6,3,7,.96));
  border-color:rgba(224,111,198,.20);
  box-shadow:0 4px 14px rgba(0,0,0,.45)}
.pm-rank li b{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  background:var(--page-text,#111);color:var(--page-bg,#fff);font-size:.86rem;font-weight:800;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-b,#ee2873) 60%,transparent)}
.pm-rank li span{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:.92rem;font-weight:700;line-height:1.6;overflow-wrap:anywhere}
.pm-rank li small{font-size:.76rem;font-weight:400;opacity:.68}

.pm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pm-list li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0;
  padding-block-end:9px;border-block-end:1px dashed color-mix(in srgb,var(--page-text,#111) 24%,transparent)}
.pm-list li:last-child{border-block-end:0;padding-block-end:0}
.pm-list li span{font-size:.92rem;font-weight:700;line-height:1.6;min-width:0;overflow-wrap:anywhere}
.pm-list li em{flex:0 0 auto;font-style:normal;font-size:.74rem;opacity:.7}

.pm-news-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pm-news-list a{display:flex;flex-direction:column;gap:4px;min-width:0;padding:11px 13px;border-radius:10px 3px;
  background:color-mix(in srgb,var(--page-text,#111) 9%,transparent);color:inherit;text-decoration:none;transition:background .2s ease}
.pm-news-list a:hover{background:color-mix(in srgb,var(--page-text,#111) 18%,transparent)}
.pm-news-cat{font-size:.7rem;font-weight:700;opacity:.72;color:inherit}
.pm-news-list b{font-size:.9rem;font-weight:700;line-height:1.7;overflow-wrap:anywhere}
.pm-more{align-self:flex-start;font-size:.84rem;font-weight:700;color:inherit;border-block-end:2px solid color-mix(in srgb,var(--brand-b,currentColor) 70%,currentColor);text-decoration:none}

.pm-letter-copy{margin:0;font-size:.88rem;line-height:1.9;opacity:.82}
.pm-letter-form{display:flex;flex-direction:column;gap:9px;min-width:0}
.pm-letter-form label{font-size:.78rem;font-weight:700;opacity:.8}
.pm-letter-form input{width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding:11px 13px;border-radius:9px 3px;
  border:1px solid color-mix(in srgb,var(--page-text,#111) 34%,transparent);background:#fff;color:#1a1420;font:inherit}
.pm-letter-form .btn{width:100%;text-align:center}
.pm-note{margin:0;padding:9px 12px;border-radius:9px 3px;font-size:.82rem;line-height:1.8;
  background:color-mix(in srgb,var(--page-text,#111) 13%,transparent);color:var(--page-text,inherit);border-inline-start:4px solid currentColor}
.pm-note.ok{border-inline-start-color:#3ddc84}
.pm-note.bad{border-inline-start-color:#ff7a7a}

@media(max-width:900px){
 .pm-posters{grid-column:span 10;grid-row:auto}
 .pm-showing,.pm-letter{grid-column:span 5}
 .pm-news{grid-column:span 10}
 .pm-poster-wall{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
 .pm-posters{grid-row:auto}
 .pm-posters,.pm-news,.pm-best,.pm-showing,.pm-letter,.pm-stories{grid-column:span 10}
 .pm-poster-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
 .pm-news-list{grid-template-columns:minmax(0,1fr)}
 .pm-tile{border-radius:12px 3px}
}
/* cr1152 */
.portal-mosaic{padding-block-start:clamp(34px,5vw,66px)}
.portal-section-head.pm-head h1{margin:8px 0 0;font-family:Lalezar,Vazirmatn,sans-serif;font-size:clamp(2.6rem,6vw,5.2rem);font-weight:400;line-height:1;color:var(--page-text,inherit);text-shadow:var(--title-shadow,none)}
.portal-section-head.pm-head .pm-slogan{margin:14px 0 4px;font-size:clamp(1.1rem,2vw,1.6rem);font-weight:900;color:color-mix(in srgb,var(--page-text,currentColor) 92%,transparent)}
.portal-section-head.pm-head .pm-intro{margin:0;max-width:52ch;font-size:.95rem;line-height:1.9;color:color-mix(in srgb,var(--page-text,currentColor) 74%,transparent)}
.pm-expand{margin-block-start:14px}
.pm-expand>summary{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 16px;list-style:none;cursor:pointer;font-size:.86rem;font-weight:800;color:inherit;border:2px solid color-mix(in srgb,var(--brand-b,currentColor) 70%,currentColor);border-radius:10px 3px}
.pm-expand>summary::-webkit-details-marker{display:none}
.pm-expand>summary:after{content:"+";font-weight:900;line-height:1}
.pm-expand[open]>summary:after{content:"−"}
.pm-expand>summary:hover,.pm-expand>summary:focus-visible{background:color-mix(in srgb,var(--brand-b,currentColor) 16%,transparent)}
.pm-expand>.pm-poster-wall,.pm-expand>.lead-grid{margin-block-start:14px}
.portal-stories .pm-expand{margin-block-start:24px}
.portal-stories .pm-expand>summary{min-height:48px;font-size:.95rem}
/* cr1152b */
.portal-section-head.pm-head h1{font-size:clamp(1.7rem,7.2vw,5.2rem);word-break:normal;overflow-wrap:anywhere}
@media(max-width:430px){.portal-section-head.pm-head h1{font-size:clamp(1.55rem,6.6vw,2.1rem)}
 .portal-section-head.pm-head .pm-slogan{font-size:1.05rem}}

/* cr1152c */
@media(max-width:900px){.portal-section-head.pm-head{padding-inline-start:54px}}

/* ===== cr1157 — «بیشتر» fuehrt auf eine EIGENE Seite statt inline aufzuklappen =====
   Das native <details> aus cr1152 ist ersetzt; der Knopf behaelt sein Aussehen,
   ist jetzt aber ein Link. */
.pm-more-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;
  padding:6px 18px;margin-block-start:14px;box-sizing:border-box;
  font-size:.86rem;font-weight:800;color:inherit;text-decoration:none;
  border:2px solid color-mix(in srgb,var(--brand-b,currentColor) 70%,currentColor);
  border-radius:10px 3px;transition:background .2s ease}
.pm-more-btn:after{content:"›";font-weight:900;line-height:1}
.pm-more-btn:hover,.pm-more-btn:focus-visible{background:color-mix(in srgb,var(--brand-b,currentColor) 16%,transparent)}
.pm-more-btn:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.pm-posters .pm-more-btn{align-self:flex-start}
/* ivos — Kundenwunsch: der «بیشتر»-Knopf steht in Desktop-Breite oben links,
   nicht unten. Auf Handy/Tablet (≤900px) bleibt er unten an seinem Platz. */
@media(min-width:901px){.pm-posters .pm-more-btn{order:-1;align-self:flex-end;margin-block-start:0}}
.stories-more-wrap{display:flex;justify-content:center}
.portal-stories .pm-more-btn{margin-block-start:24px;min-height:48px;font-size:.95rem}
@media (prefers-reduced-motion:reduce){.pm-more-btn{transition:none}}

/* Die eigene Seite hinter «بیشتر» */
.brandmore-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;
  padding-block:clamp(22px,4vw,44px) 4px}
.brandmore-head .portal-section-head{margin:0;min-width:0}
.brandmore-head .pm-more-btn{margin-block-start:0}
.bm-tile{width:100%;box-sizing:border-box}
.brandmore-main .bm-films{padding-block-end:clamp(28px,5vw,56px)}

/* ===== cr1163 — «صفحه نخست» gehoert IN die Kopfzeile =====
   Der frei schwebende Knopf sass auf dem Rechner an einer Stelle, die der Kunde als
   falsch empfand, und musste sich oben einen Streifen freihalten lassen. Jetzt ist er
   ein normales Element der Navigationsleiste neben Suche und Menue. Damit entfallen
   der 74px-Streifen und die Nachfuehrung der absolut gesetzten Geschwister --
   beide werden hier bewusst ZURUECKGEBAUT, sonst bliebe ein leerer Streifen stehen. */
/* 🔴 Der Knopf steht mal auf heller, mal auf schwarzer Kopfzeile (body.portal-page).
   Deshalb KEINE feste Farbe und kein Sonderfall je Seitenart, sondern alles aus dem
   Kontext ableiten: Text erbt die Kopfzeilenfarbe, Rahmen und Symbol folgen ueber
   currentColor, der Hintergrund bleibt durchscheinend. Ein fest gesetztes var(--paper)
   ergab auf der schwarzen Kopfzeile weisse Schrift auf weissem Grund. */
/* tkt443h: nur noch das Haus-Symbol. Die Beschriftung war doppelt gemoppelt,
   seit die Seitenlasche wieder da ist -- der Knopf bleibt, der Text faellt weg.
   Die Bedeutung haengt jetzt allein am aria-label, deshalb steht das im Markup. */
.portal-home{display:inline-flex;align-items:center;justify-content:center;gap:0;
  width:48px;height:48px;min-height:48px;padding:0;color:inherit;
  border:1px solid color-mix(in srgb,currentColor 34%,transparent);
  background:color-mix(in srgb,currentColor 7%,transparent);
  border-radius:18px 6px 18px 6px;font-weight:700;font-size:.86rem;
  transition:background .2s,color .2s,border-color .2s}
.portal-home svg{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.portal-home:hover{background:var(--coral);border-color:var(--coral);color:#fff}
.portal-home:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
@media(max-width:768px){
  /* Auf dem Handy ist neben dem Menue nur wenig Platz: kompakter, aber mit Text --
     ein reines Haus-Symbol haetten wir selbst nicht sicher gedeutet. */
  .portal-home{width:42px;height:42px;min-height:42px;padding:0;gap:0;
    border-radius:14px 5px 14px 5px}
  .portal-home svg{width:16px;height:16px}
}
/* Die 360px-Sonderregel ist hinfaellig: es gibt keinen Text mehr, den man
   ausblenden koennte, und der Knopf ist ohnehin quadratisch. */
/* cr1163: der mobile Gegenpart des 74px-Streifens. Auch er faellt weg, sonst bleibt
   auf dem Handy genau der leere Balken stehen, den der Kunde bemaengelt hat. */
/* cr1152c wird damit hinfaellig — die Lasche steht nicht mehr neben der H1. */
@media(max-width:900px){.portal-section-head.pm-head{padding-inline-start:0}}

/* ===== cr1159 Karussell — «روی پردهٔ امروز» als Mosaik-Kachel =====
   Hoechstens 4 Karten je Reihe, horizontal scrollbar mit Snap. RTL-sicher:
   die Spaltenbreite wird gerechnet, es wird nichts an scrollLeft gemessen. */
.pm-stories{grid-column:span 7;--pmc-gap:clamp(8px,1vw,15px)}
/* cr1177: genau EIN Film im Blickfeld; das Schnappen ist jetzt zwingend,
   damit der Schieber nie zwischen zwei Karten stehen bleibt. */
.pm-carousel{display:grid;grid-auto-flow:column;
  grid-auto-columns:100%;
  gap:var(--pmc-gap);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;padding-block-end:8px;scrollbar-width:thin}
.pm-carousel:focus-visible{outline:2px solid var(--brand-b,currentColor);outline-offset:3px}
.pm-story{scroll-snap-align:start;min-width:0;display:flex;flex-direction:column;gap:7px}
/* cr1165: dieselben Masse und derselbe Rahmen wie ein Filmposter (.pm-poster>img). */
/* cr1177: als EINZELNE, 70% breite Karte waere das Posterformat 2:3 mannshoch —
   die Buehne liegt deshalb quer und bleibt neben der Rangliste in einer Zeile. */
.pm-story-media{display:block;overflow:hidden;border-radius:10px 3px;aspect-ratio:16/10;
  border:1px solid color-mix(in srgb,var(--page-text,#111) 26%,transparent);
  background:color-mix(in srgb,var(--page-text,#111) 12%,transparent)}
.pm-story-media img{width:100%;height:100%;object-fit:cover;display:block}
.pm-story-cat{font-size:.72rem;font-weight:800;opacity:.8;color:var(--brand-b,currentColor)}
.pm-story h4{margin:0;font-size:.92rem;line-height:1.7;font-weight:700}
.pm-story h4 a{color:inherit;text-decoration:none}
.pm-story h4 a:hover,.pm-story h4 a:focus-visible{text-decoration:underline}
.pm-stories .pm-more-btn{align-self:flex-start}
/* cr1165: Kopfzeile der Kachel traegt Titel links und die zwei Karussell-Knoepfe
   rechts; die Knoepfe sind gross genug fuer den Daumen (44px) und funktionieren
   in RTL, weil site.js die Richtung aus getComputedStyle().direction ableitet. */
.pm-tile-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pm-tile-bar .pm-tile-title{flex:1 1 auto;min-width:0}
.pm-cnav-group{display:flex;gap:8px;flex:0 0 auto}
.pm-cnav{width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  border:1px solid color-mix(in srgb,var(--page-text,#111) 30%,transparent);border-radius:10px 3px;
  background:color-mix(in srgb,var(--page-bg,#fff) 70%,transparent);color:var(--page-text,inherit);
  font:800 1.25rem/1 inherit;transition:background .2s,opacity .2s}
.pm-cnav:before{content:"‹"}
.pm-cnav[data-pmc="next"]:before{content:"›"}
.pm-cnav:hover:not(:disabled),.pm-cnav:focus-visible{background:color-mix(in srgb,var(--brand-b,currentColor) 18%,transparent)}
.pm-cnav:focus-visible{outline:2px solid var(--brand-b,currentColor);outline-offset:2px}
.pm-cnav:disabled{opacity:.32;cursor:default}
/* die Leiste bleibt bedienbar (Touch-Wisch, Tastatur, Trackpad), sieht aber nicht
   mehr nach einem nackten Balken aus — das war die Beanstandung des Kunden. */
.pm-carousel{scroll-behavior:smooth;scrollbar-color:color-mix(in srgb,var(--brand-b,currentColor) 55%,transparent) transparent}
.pm-carousel::-webkit-scrollbar{height:6px}
.pm-carousel::-webkit-scrollbar-track{background:transparent}
.pm-carousel::-webkit-scrollbar-thumb{border-radius:99px;background:color-mix(in srgb,var(--brand-b,currentColor) 55%,transparent)}
@media (prefers-reduced-motion:reduce){.pm-carousel{scroll-behavior:auto}.pm-cnav{transition:none}}
@media(max-width:900px){
  .pm-stories{grid-column:span 6}
  .pm-best{grid-column:span 4}
}
@media(max-width:620px){
  .pm-stories,.pm-best{grid-column:span 10}
}
/* cr1160: «مطالب بیشتر» zeigt 3 Beitraege, der Knopf fuehrt auf die eigene Seite */
.portal-more .stories-more-wrap{margin-block-start:20px}

/* ===== ivos_tkt443e — Rueckweg zum Mosaik als echter Aufkleber ==================
   Ticket #443: die Seitenlasche war bei cr1163 mit dem Umbau der Kopfzeile weggefallen;
   der Kunde hat sie zweimal zurueckgefordert. Der Knopf «صفحه نخست» in der Navigations-
   leiste BLEIBT daneben bestehen -- er war eine eigene Bestellung (cr1163), keine
   Ablösung. Die Lasche klebt an der Seitenkante jeder Markenseite, Rechner wie Handy.

   🔴 Farbwahl: die Marken-Variablen sind KEIN Kontrastpaar. Auf farhonar sind
   --brand-a (#820766) und --brand-b (#000) beide dunkel und --brand-ink ist #12000e --
   eine Platte daraus waere schwarz auf schwarz. Die Platte nimmt deshalb das garantierte
   Paar --page-text (Grund) / --page-bg (Schrift); die Markenfarben sitzen als Streifen
   an der Klebekante und im aufgerollten Eck. So traegt jede Marke ihre eigene Farbe,
   ohne dass eine davon unlesbar wird.

   🔴 Nur PHYSISCHE Positionierung. Logische Eigenschaften sind hier doppelt verdreht:
   das Dokument ist RTL (inset-inline-start waere rechts) UND die Lasche steht auf
   writing-mode:vertical-rl, was Block- und Inline-Achse zusaetzlich vertauscht. Ein
   erster Versuch mit inset-inline-end/margin-block hat die Lasche nach OBEN gesetzt
   statt nach links -- gemessen, nicht vermutet. Sie klebt rechts (wie vor cr1163),
   senkrecht mittig ueber margin-top/bottom:auto statt translateY(-50%), damit
   `transform` frei bleibt fuer die Bewegung beim Ueberfahren. */
.portal-sticker{
  /* 🔴 PHYSISCH, nicht logisch: bei writing-mode:vertical-rl ist die Block-Achse
     WAAGERECHT und die Inline-Achse SENKRECHT. `margin-block:auto` zentriert dort
     also nicht senkrecht, und `inset-inline-end` meint unten statt links. */
  position:fixed; right:0; left:auto; top:0; bottom:0;
  height:max-content; margin-top:auto; margin-bottom:auto; z-index:90;
  display:inline-flex; align-items:center; justify-content:center;
  writing-mode:vertical-rl; text-orientation:mixed;
  padding:17px 13px 17px 10px; min-width:40px; box-sizing:border-box;
  border-radius:15px 0 4px 15px;
  background:var(--page-text,#fff); color:var(--page-bg,#000);
  font-size:.76rem; font-weight:800; letter-spacing:.2px; line-height:1;
  text-decoration:none; border:0;
  box-shadow:-5px 7px 22px rgba(0,0,0,.42);
  transform-origin:100% 42%;
  transition:transform .26s cubic-bezier(.34,1.56,.64,1), box-shadow .26s ease;
}
/* Klebekante: der Farbstreifen der Marke, von --brand-a nach --brand-b. */
.portal-sticker::before{
  content:""; position:absolute; right:0; top:0; bottom:0; width:6px;
  background:linear-gradient(to bottom,var(--brand-a,#888),var(--brand-b,#444));
  border-radius:2px 0 0 2px;
}
/* Das aufgerollte Eck unten an der freien Kante: die dunklere RUECKSEITE des Aufklebers
   plus eine feine Falzlinie. Waechst beim Ueberfahren weiter auf, als loese es sich. */
.portal-sticker::after{
  content:""; position:absolute; left:0; bottom:0; pointer-events:none;
  width:var(--ps-curl,16px); height:var(--ps-curl,16px);
  border-bottom-left-radius:4px;
  background:
    linear-gradient(45deg,transparent 0 49%,rgba(0,0,0,.5) 49% 52%,transparent 52%),
    linear-gradient(225deg,color-mix(in srgb,var(--page-bg,#000) 52%,var(--page-text,#fff)) 0 50%,transparent 50%);
  transition:width .3s cubic-bezier(.34,1.56,.64,1), height .3s cubic-bezier(.34,1.56,.64,1);
}
.portal-sticker .ps-txt{display:block}
.portal-sticker:hover,.portal-sticker:focus-visible{
  box-shadow:-9px 11px 30px rgba(0,0,0,.55);
  animation:ivosStickerPeel .6s cubic-bezier(.34,1.56,.64,1) both;
}
.portal-sticker:hover::after,.portal-sticker:focus-visible::after{--ps-curl:27px}
.portal-sticker:focus-visible{outline:3px solid var(--brand-a,#fff); outline-offset:3px}
/* Rechts geklebt, also schwingt sie nach LINKS heraus -- von der Klebekante weg. */
@keyframes ivosStickerPeel{
  0%  {transform:translateX(0) rotate(0deg)}
  45% {transform:translateX(-8px) rotate(-1.8deg)}
  100%{transform:translateX(-5px) rotate(-1deg)}
}
@media (max-width:640px){
  /* Auf dem Handy bleibt sie -- ausdruecklich bestellt -- und behaelt die volle
     Daumenflaeche (44px), sonst ist sie da, aber nicht treffbar. */
  .portal-sticker{min-width:44px; padding:15px 14px 15px 11px; font-size:.74rem;
    border-radius:13px 0 4px 13px}
  .portal-sticker::after{--ps-curl:14px}
}
@media (prefers-reduced-motion:reduce){
  .portal-sticker{transition:none}
  .portal-sticker:hover,.portal-sticker:focus-visible{animation:none; transform:translateX(-5px)}
  .portal-sticker::after{transition:none}
}
@media print{.portal-sticker{display:none}}
/* ===== ende ivos_tkt443e ======================================================== */

/* ===== tkt443h — die Lasche bewegt sich beim Scrollen mit =======================
   Wunsch des Kunden: «زبانه بنظرم همراه با اسکرول حرکت کنه بهتره». Umgesetzt als
   scroll-getriebene Animation, ganz ohne JavaScript: die Lasche wippt ueber den
   Verlauf der Seite langsam von -1,6 auf +1,6 Grad, wie ein Aufkleber, der bei
   jeder Bewegung ein wenig nachgibt.

   🔴 Bewusst mit `:not(:hover):not(:focus-visible)`: zwei Animationen auf DEMSELBEN
   Element wuerden sich um `transform` streiten, und die Hover-Bewegung (ivosStickerPeel)
   wuerde verlieren. So uebernimmt beim Ueberfahren sauber die Hover-Animation.
   Wo `animation-timeline` fehlt (u. a. Safari), passiert schlicht nichts -- die
   Lasche bleibt ruhig stehen, nichts geht kaputt. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .portal-sticker:not(:hover):not(:focus-visible){
      animation:ivosStickerRock linear;
      animation-timeline:scroll(root block);
    }
    @keyframes ivosStickerRock{
      from{transform:translateX(0) rotate(-1.6deg)}
      to  {transform:translateX(-3px) rotate(1.6deg)}
    }
  }
}

/* ===== cr1186 — «روی پردهٔ امروز» als Poster-Buehne ==========================
   Der Kunde hat im markierten Bild die Scrollleiste (rot) und die beiden Pfeil-
   knoepfe (gelb) gestrichen. An ihre Stelle treten Punkte UNTER dem Bild, ein
   selbsttaetiger Wechsel alle 5 Sekunden und ein «نمایش همه» auf eine eigene
   Seite mit allen Filmen, die in diesem Kino laufen.
   Die Punkte starten [hidden] und werden erst von site.js eingeblendet -- ohne
   JavaScript steht so kein toter Schalter da, sondern schlicht das erste Poster. */
.pm-onscreen{grid-column:span 7}
.pm-os{display:flex;flex-direction:column;gap:14px;min-width:0}
.pm-os-stage{display:grid;justify-items:stretch;align-items:center;min-width:0}
.pm-os-slide{grid-area:1/1;margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;
  width:100%;min-width:0;max-width:100%;opacity:0;visibility:hidden;transition:opacity .45s ease}
.pm-os-slide.is-on{opacity:1;visibility:visible}
/* Kein display: hier -- sonst verliert die Ersatzplatte (.pm-poster-plate) ihr grid. */
.pm-os-poster{width:min(248px,62%);aspect-ratio:2/3;border-radius:14px 4px;
  border:1px solid color-mix(in srgb,var(--brand-b,currentColor) 42%,transparent);
  box-shadow:0 14px 34px rgba(0,0,0,.42),0 0 24px color-mix(in srgb,var(--brand-b,currentColor) 26%,transparent)}
img.pm-os-poster{display:block;object-fit:cover}
.pm-os-link{display:flex;flex-direction:column;align-items:center;gap:inherit;width:100%;min-width:0;color:inherit;text-decoration:none}
.pm-os-link:focus-visible{outline:2px solid var(--brand-b,currentColor);outline-offset:3px;border-radius:14px 4px}
.pm-os-cap{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;max-width:34ch}
.pm-os-cap b{font-size:1rem;font-weight:800;line-height:1.7;overflow-wrap:anywhere}
.pm-os-cap span{font-size:.82rem;opacity:.72;overflow-wrap:anywhere}
.pm-os-cap em{font-style:normal;font-size:.74rem;font-weight:800;color:var(--brand-b,currentColor);opacity:.92}
.pm-os-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
.pm-os-dot{width:30px;height:30px;padding:0;display:grid;place-items:center;cursor:pointer;
  background:none;border:0;color:inherit;-webkit-appearance:none;appearance:none}
.pm-os-dot:before{content:"";display:block;width:10px;height:10px;border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--page-text,#111) 55%,transparent);background:transparent;
  transition:background .25s,border-color .25s,transform .25s}
.pm-os-dot.is-on:before{background:var(--brand-b,currentColor);border-color:var(--brand-b,currentColor);transform:scale(1.3)}
.pm-os-dot:hover:before{border-color:var(--brand-b,currentColor)}
.pm-os-dot:focus-visible{outline:2px solid var(--brand-b,currentColor);outline-offset:2px;border-radius:50%}
.pm-onscreen .pm-more-btn{align-self:flex-start}
@media(max-width:900px){.pm-onscreen{grid-column:span 6}}
@media(max-width:620px){.pm-onscreen{grid-column:span 10}.pm-os-poster{width:min(220px,72%)}}
@media (prefers-reduced-motion:reduce){.pm-os-slide{transition:none}.pm-os-dot:before{transition:none}}

/* ===== tkt443i — Kopfzeile von سینماجهت schlanker, Logos anteilig groesser =====
   Vorher (1280 px): Kopfzeile 178 = Band 113 + Nav 64; Logotype 260x95.
   Nachher: schmaleres Logotype traegt ein niedrigeres Band, das Markenzeichen
   waechst anteilig, damit es NICHT kleiner wirkt. Nur diese Marke. */
body.theme-cinemajahat .brand-band-inner{padding:8px 24px}
body.theme-cinemajahat .brand-band-inner .brand-logotype{width:clamp(140px,19%,224px);max-width:23%}
body.theme-cinemajahat .brand-band-inner .brand-secondary{height:54%;max-width:16%}
@media (max-width:640px){
  body.theme-cinemajahat .brand-band-inner{padding:7px 14px}
  body.theme-cinemajahat .brand-band-inner .brand-logotype{width:clamp(98px,29%,158px);max-width:33%}
  body.theme-cinemajahat .brand-band-inner .brand-secondary{height:44%;max-width:24%}
}


/* ===== ivos-cr1196-cinemaoud — پس‌زمینهٔ تیره دقیقاً مثل سینماجرا با هالهٔ قرمز =====
   Kundenwunsch: Hintergrund exakt wie سینماجرا (dunkles #0B1117 mit hellem Text),
   nur der Halo ist rot (EE2873) statt gruen. Der Hintergrund kommt aus der
   generischen body[class*="theme-"]-Regel weiter oben (mit den --halo-*
   Werten aus dem theme-cinemaoud-Block); hier steht deshalb KEIN background
   mehr, sonst wuerde er die dunkle Flaeche uebermalen.
   --nav-2 ist jetzt hell (#F2F4F5 wie bei سینماجرا), weil das alte #26000F auf
   dem dunklen Grund unsichtbar waere; --nav-1 bleibt Marken-Pink #EE2873.
   ۳) فوتر عمداً دست‌نخورده مانده: همان #c3215e wie bisher. */
body.theme-cinemaoud{
  --nav-1:#ee2873;--nav-2:#F2F4F5;
}
/* سایهٔ نرم زیر متن منو تا روی زمینهٔ تیره خوانا بماند، مثل سینماجرا */
body.theme-cinemaoud .desktop-nav>a,
body.theme-cinemaoud .desktop-nav>.dropdown>button,
body.theme-cinemaoud .mobile-menu nav a,
body.theme-cinemaoud .portal-kicker,
body.theme-cinemaoud .page-hero .kicker{text-shadow:0 1px 2px rgba(0,0,0,.45)}
/* فوتر بدون تغییر نسبت به قبل */
body.theme-cinemaoud .footer{background:#c3215e;color:#fff}
body.theme-cinemaoud .footer h3,
body.theme-cinemaoud .footer a:hover{color:#fff}
/* ===== /ivos-cr1196-cinemaoud ===== */

/* ===== ivos-cr1201-farhonar — پس‌زمینهٔ بنفش و مشکی با درخشش ظریف (CR#1201) =====
   ۱) پس‌زمینه دقیقاً مطابق کدی که در درخواست آمده است. این قاعده باید بعد از
      قاعدهٔ عمومیِ body[class*="theme-"] بیاید، وگرنه آن قاعده پس‌زمینه را پس می‌گیرد.
   ۲) خوانایی: در کد ارسالی --nav-1 و --nav-2 روی مشکی مانده بودند. چون
      پس‌زمینه حالا تقریباً مشکی است، منو، تیترها، دکمه‌ها و نوارها مشکی روی
      مشکی و نامرئی می‌شدند. طبق بندِ «رنگ بنفش همچنان در Accentها و بخش‌های
      تأکیدی استفاده شود»، یک تُنِ روشنِ همان بنفش برند (#E06FC6، همان مایه با
      روشنایی بیشتر) و یک سفیدِ ملایم (#F2E6EF) جای آن نشسته‌اند. رنگ اصلی برند
      #820766 در --brand-a دست‌نخورده مانده است.
   ۳) روی کارت‌های سفید همان بنفش اصلی #820766 می‌نشیند، چون آنجا سطح روشن است.
   ۴) فوتر عمداً دست‌نخورده: رنگ امروزش از --page-bg ساخته می‌شد، پس همان
      مقدار محاسبه‌شده (#6a0553) ثابت شد تا ظاهرش تغییر نکند. */
body.theme-farhonar{
  --nav-1:#e06fc6;--nav-2:#f2e6ef;
  background:
    radial-gradient(circle at 75% 15%,rgba(130,7,102,.22),transparent 38%),
    radial-gradient(circle at 15% 80%,rgba(130,7,102,.12),transparent 35%),
    linear-gradient(135deg,#0b0509 0%,#160812 50%,#050305 100%);
  background-color:#0b0509;
  background-attachment:fixed;
  background-repeat:no-repeat;
}
/* روی کارت‌های سفید، بنفشِ اصلی برند خوانا است؛ سفیدِ منو آنجا دیده نمی‌شد */
body.theme-farhonar .portal-card span,
body.theme-farhonar .portal-more article span,
body.theme-farhonar .news-card .cat{color:#820766}
/* فوتر بدون تغییر نسبت به قبل */
body.theme-farhonar .footer{background:#6a0553;color:#fff}
/* ===== /ivos-cr1201-farhonar ===== */

/* =====================================================================
   ivos_cr1190_css — cinemajahat: Kopfzeile der Portalseite /cinemajahat
   Logo + Menue + Suche in EINER Reihe, ohne separates Markenband,
   ohne Slogan, ohne Zweitlogo. Gilt nur auf dieser einen Seite.
   ===================================================================== */
.site-header.jahat-oneline .shell.nav{min-height:76px;gap:16px;flex-wrap:nowrap}
.site-header.jahat-oneline .brand.brand-home{flex:0 0 auto}
.site-header.jahat-oneline .nav-logotype{display:block;width:clamp(120px,14vw,208px);height:auto}
.site-header.jahat-oneline .desktop-nav{flex:1 1 auto;justify-content:center;gap:16px}
.site-header.jahat-oneline .nav-actions{flex:0 0 auto}
.site-header.jahat-oneline .nav-actions .icon-btn,
.site-header.jahat-oneline .nav-actions .portal-home{
  background:transparent;border:0;border-radius:12px;
  width:44px;height:44px;min-height:44px;padding:0;color:var(--page-text);
}
.site-header.jahat-oneline .nav-actions .icon-btn svg,
.site-header.jahat-oneline .nav-actions .portal-home svg{width:24px;height:24px;stroke-width:2.8}
.site-header.jahat-oneline .nav-actions .icon-btn:hover,
.site-header.jahat-oneline .nav-actions .portal-home:hover{
  background:color-mix(in srgb,var(--page-text) 14%,transparent);
  border:0;color:var(--page-text);
}
@media(max-width:900px){
  .site-header.jahat-oneline .nav-logotype{width:clamp(96px,26vw,150px)}
  .site-header.jahat-oneline .shell.nav{min-height:62px;gap:10px}
}
body.theme-cinemajahat .desktop-nav>a.is-active,
body.theme-cinemajahat .desktop-nav>.dropdown.is-active>button,
body.theme-cinemajahat .mobile-menu nav a.is-active,
body.theme-cinemajahat .mobile-menu nav .m-acc.is-active{
  color:#ee2873;font-weight:800;text-shadow:0 0 14px rgba(238,40,115,.45);
}

/* =====================================================================
   ivos_cr1205_css — Kontaktseite: die beiden Karten tragen jetzt die
   dunkle Markenflaeche statt reinem Weiss.
   ===================================================================== */
body.page-contact .static-layout{align-items:start;gap:clamp(24px,4vw,40px)}
body.page-contact .prose-box,
body.page-contact .contact-form{
  background:linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  color:var(--page-text);
  border:1px solid color-mix(in srgb,var(--nav-1) 42%,transparent);
  border-radius:26px 6px 26px 6px;
  padding:clamp(22px,3vw,32px);
  box-shadow:0 20px 46px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.08);
}
body.page-contact .prose-box{border-color:color-mix(in srgb,var(--nav-2) 45%,transparent)}
body.page-contact .contact-form label{color:var(--page-text)}
body.page-contact .contact-form input,
body.page-contact .contact-form textarea{
  background:rgba(0,0,0,.42);color:var(--page-text);
  border:1px solid color-mix(in srgb,var(--page-text) 28%,transparent);
}
body.page-contact .contact-form input::placeholder,
body.page-contact .contact-form textarea::placeholder{
  color:color-mix(in srgb,var(--page-text) 58%,transparent);
}
body.page-contact .contact-form input:focus,
body.page-contact .contact-form textarea:focus{outline:3px solid var(--nav-1);border-color:transparent}
body.page-contact .form-note.is-success{background:rgba(80,227,223,.14);color:var(--nav-1)}
body.page-contact .form-note.is-error{background:rgba(238,40,115,.16);color:#ffd2e2}


/* =====================================================================
   ivos_cr1191_css — سینماجهت: erste Mosaik-Reihe
   rechts «روی پردهٔ امروز» ueber ZWEI Reihen, links darueber
   «پرفروش‌ترین فیلم‌ها» und direkt darunter «فیلم‌های در حال اکران».
   «نمایش همه» sitzt jetzt oben in der Kopfzeile der Kachel.
   ===================================================================== */
.pm-tile-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pm-tile-head .pm-tile-title{flex:1 1 auto}
.pm-os-all-top{flex:0 0 auto;align-self:flex-start;margin:0}
body.theme-cinemajahat .pm-grid .pm-onscreen{grid-row:span 2}
@media(max-width:900px){
  body.theme-cinemajahat .pm-grid .pm-onscreen{grid-row:auto}
  .pm-tile-head{gap:8px}
}


/* =====================================================================
   ivos_cr1192_css — «روی پردهٔ امروز» zeigt jetzt das BREITE Banner-Poster
   ueber die volle Breite der Kachel. Das Hochkant-Poster bleibt unveraendert
   fuer «پوستر فیلم‌ها» und bleibt auch hier der Rueckfall ohne Banner.
   ===================================================================== */
img.pm-os-poster.pm-os-banner{width:100%;max-width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px 5px}
.pm-os-slide:has(.pm-os-banner){gap:12px}
.field-hint-wide{grid-column:1/-1}
@media(max-width:620px){
  img.pm-os-poster.pm-os-banner{width:100%;aspect-ratio:16/10}
}

/* ================= ivos_cr1185 — Einstieg («ورودی») der Portalseiten =================
   Kundenreferenz: Neon-Licht + Perspektive, ein grosses Feature-Feld, zwei gestapelte
   Kacheln daneben, darunter vier gleich breite Kacheln. Nur die سینماجهت-Portalseite
   bekommt das Mosaik; die drei anderen Marken bekommen einen einzelnen grossen Rahmen
   mit grossem Bild und Titel auf dem Bild. Alles unterhalb bleibt unberuehrt.        */
/* cr1225: clip the INLINE axis only. The blurred halos bleed below the section by
   design; clipping the block axis cut them off at the bottom edge and left a visible
   hairline there (measured: colour step 13 with clip, 5 without -- ordinary gradient
   noise). Horizontal clipping has to stay: .cj-e-floor sits at inset-inline:-30%. */
.cj-entry{position:relative;isolation:isolate;overflow:clip visible;padding-block:clamp(20px,3vw,40px) clamp(24px,3.6vw,48px)}
.cj-entry>.shell{position:relative;z-index:2}
/* cr1220: the page halo (body background-attachment:fixed) has to show through --
   an opaque fill here made the mosaic read as a detached black block with a hard
   seam at its bottom edge. overflow:clip was NOT the cause (proven: removing it
   alone renders identically), the opaque background was. */
.cj-entry-mosaic{background:transparent}
.cj-entry-lead{background:transparent}
.cj-entry-lead .cj-e-scene{display:none}

/* Perspektive: ein in die Tiefe kippendes Neon-Raster plus zwei weiche Lichtkegel. */
.cj-e-scene{position:absolute;inset:0;z-index:0;pointer-events:none}
.cj-e-floor{position:absolute;inset-block-end:-34%;inset-inline:-30%;block-size:72%;
  background:repeating-linear-gradient(90deg,transparent 0 78px,rgba(238,40,115,.32) 78px 80px),
             repeating-linear-gradient(0deg,transparent 0 54px,rgba(80,227,223,.24) 54px 56px);
  transform:perspective(560px) rotateX(64deg);transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 74%);
          mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 74%);opacity:.5}
.cj-e-halo{position:absolute;border-radius:50%;filter:blur(72px);opacity:.5}
/* cr1213: physical left/right on purpose -- inset-inline-* flips in RTL and
   mirrored the hero against the fixed page halo (teal left / pink right). */
.cj-e-halo-a{inset-block-start:-16%;right:6%;inline-size:42%;aspect-ratio:1;background:rgba(238,40,115,.6)}
.cj-e-halo-b{inset-block-start:8%;left:-8%;inline-size:36%;aspect-ratio:1;background:rgba(80,227,223,.34)}

/* Raster: 4 gleiche Spalten. Das Feature-Feld belegt 3 Spalten und 2 Reihen, die beiden
   gestapelten Kacheln fallen von selbst in die 4. Spalte, die vier gleichen in Reihe 3. */
.cj-e-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.3vw,18px)}
.cj-e-hero{grid-column:span 3;grid-row:span 2}

.cj-e-card{position:relative;display:flex;border-radius:14px;overflow:hidden;
  background:linear-gradient(150deg,rgba(24,12,34,.94),rgba(8,6,16,.94));
  border:1px solid rgba(238,40,115,.28);
  box-shadow:inset 0 0 0 1px rgba(80,227,223,.07),0 16px 38px rgba(0,0,0,.55);
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.cj-e-card:hover,.cj-e-card:focus-within{border-color:rgba(238,40,115,.72);
  box-shadow:inset 0 0 0 1px rgba(80,227,223,.16),0 0 24px rgba(238,40,115,.32),0 20px 44px rgba(0,0,0,.6);
  transform:translateY(-3px)}
.cj-e-card a{color:inherit}
.cj-e-card a:focus-visible{outline:2px solid #50e3df;outline-offset:3px;border-radius:6px}

.cj-e-body{position:relative;z-index:2;display:flex;flex-direction:column;gap:6px;
  padding:clamp(12px,1.1vw,18px);min-inline-size:0}
.cj-e-eyebrow{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  color:#50e3df;font-weight:800;font-size:clamp(.66rem,.78vw,.8rem);line-height:1.6;
  letter-spacing:.02em;text-shadow:0 0 12px rgba(80,227,223,.55)}
.cj-e-eyebrow:before{content:"";inline-size:6px;block-size:6px;border-radius:50%;
  background:#ee2873;box-shadow:0 0 8px rgba(238,40,115,.9);flex:0 0 auto}

/* --- Feature-Feld --- */
.cj-e-hero{min-block-size:clamp(258px,25vw,352px);align-items:stretch;justify-content:flex-start}
.cj-e-hero-img{position:absolute;inset:0;z-index:0;inline-size:100%;block-size:100%;object-fit:cover}
.cj-e-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(270deg,rgba(6,13,48,.94) 0%,rgba(33,12,54,.72) 30%,rgba(96,17,62,.40) 50%,rgba(126,22,74,.16) 64%,rgba(126,22,74,0) 82%)}
.cj-e-hero .cj-e-body{justify-content:center;gap:10px;
  padding:clamp(18px,2.1vw,34px);inline-size:min(52%,470px)}
.cj-e-hero-t{margin:0;font:400 clamp(1.55rem,2.7vw,2.7rem)/1.24 Lalezar,Vazirmatn,Tahoma,sans-serif;
  color:#fff;text-shadow:0 0 26px rgba(238,40,115,.55),0 2px 18px rgba(0,0,0,.8)}
.cj-e-hero-t a:hover{color:#ee2873}
.cj-e-hero-x{margin:0;color:rgba(255,255,255,.82);font-size:clamp(.82rem,.95vw,1rem);line-height:1.85;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cj-e-cta{align-self:flex-start;margin-block-start:6px;padding:9px 20px;min-block-size:44px;
  display:inline-flex;align-items:center;border-radius:8px;font-weight:800;
  font-size:clamp(.78rem,.9vw,.92rem);color:#fff;border:1px solid rgba(80,227,223,.75);
  background:rgba(80,227,223,.08);box-shadow:0 0 16px rgba(80,227,223,.22);
  transition:background .25s ease,box-shadow .25s ease,color .25s ease}
.cj-e-cta:hover{background:#50e3df;color:#04121a;box-shadow:0 0 22px rgba(80,227,223,.6)}
/* cr1185c: die Regel fuer Karten-Links steht eine Stufe hoeher als der Knopf selbst,
   deshalb erbte der Knopf die Textfarbe der Marke. Auf einer der vier Marken ist das
   Schwarz -- schwarzer Text auf dunklem Bild. Farbe darum auf derselben Stufe setzen. */
.cj-e-card a.cj-e-cta{color:#fff}
.cj-e-card a.cj-e-cta:hover{color:#04121a}

/* --- gleich grosse Kacheln (2 gestapelt + 4 nebeneinander) --- */
.cj-e-tile{min-block-size:clamp(118px,10.6vw,158px);align-items:stretch}
.cj-e-tile .cj-e-body{flex:1 1 auto;justify-content:center}
.cj-e-tile-t{margin:0;font:800 clamp(.82rem,1vw,1.02rem)/1.6 Vazirmatn,Tahoma,sans-serif;color:#fff;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cj-e-tile-t a:hover{color:#ee2873}
.cj-e-link{margin-block-start:auto;color:#50e3df;font-weight:800;font-size:clamp(.7rem,.82vw,.82rem)}
.cj-e-link:after{content:" ‹"}
.cj-e-thumb{position:relative;flex:0 0 34%;max-inline-size:34%;overflow:hidden;
  background:radial-gradient(120% 120% at 30% 20%,rgba(238,40,115,.35),rgba(8,6,16,.95) 68%)}
.cj-e-thumb img{inline-size:100%;block-size:100%;object-fit:cover;opacity:.92}
.cj-e-thumb:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(80,227,223,.22),transparent 55%);mix-blend-mode:screen}
.cj-e-plate{display:block;inline-size:100%;block-size:100%;
  background:repeating-linear-gradient(135deg,rgba(238,40,115,.22) 0 10px,rgba(8,6,16,.9) 10px 22px)}

/* --- die drei anderen Marken: EIN grosser Rahmen, Titel auf dem Bild --- */
.cj-e-lead{display:block;padding:clamp(9px,.9vw,14px);border-radius:18px;
  border:1px solid rgba(238,40,115,.35);background:linear-gradient(150deg,rgba(24,12,34,.9),rgba(8,6,16,.9))}
.cj-e-lead-frame{position:relative;display:flex;align-items:flex-end;overflow:hidden;border-radius:12px;
  min-block-size:clamp(280px,32vw,440px)}
.cj-e-lead-img{position:absolute;inset:0;z-index:0;inline-size:100%;block-size:100%;object-fit:cover}
.cj-e-lead .cj-e-veil{background:linear-gradient(to top,rgba(5,4,10,.94) 4%,rgba(5,4,10,.58) 46%,rgba(5,4,10,.12))}
.cj-e-lead .cj-e-body{inline-size:100%;gap:9px;padding:clamp(16px,2vw,30px)}
.cj-e-lead-t{margin:0;font:400 clamp(1.45rem,2.5vw,2.5rem)/1.26 Lalezar,Vazirmatn,Tahoma,sans-serif;color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.9)}
.cj-e-lead-t a:hover{color:var(--nav-2,#ee2873)}
.cj-e-lead-x{margin:0;color:rgba(255,255,255,.85);font-size:clamp(.82rem,.95vw,1rem);line-height:1.85;
  max-inline-size:62ch;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

@media(max-width:1024px){
  .cj-e-grid{grid-template-columns:repeat(2,1fr)}
  .cj-e-hero{grid-column:span 2;grid-row:auto;min-block-size:clamp(240px,34vw,320px)}
  .cj-e-hero .cj-e-body{inline-size:min(66%,480px)}
}
@media(max-width:620px){
  /* cr1185b: ohne dieses Zuruecksetzen behaelt das Feature-Feld seine Spaltenspanne
     aus der Grundregel; im einspaltigen Raster erzeugt das eine IMPLIZITE zweite
     Spalte, in die drei der sechs Kacheln fallen -- dort 2 px breit und unsichtbar.
     Die Perspektivflaeche wird hier abgeschaltet: ihre 3D-Kippung spannt bei 390 px
     ein ueber 170000 px breites Malfeld auf (unsichtbar, aber teuer). */
  .cj-e-grid{grid-template-columns:1fr}
  .cj-e-hero{grid-column:1/-1}
  .cj-e-floor{display:none}
  .cj-e-hero{min-block-size:300px}
  .cj-e-hero .cj-e-body{inline-size:100%;padding:16px}
  .cj-e-veil{background:linear-gradient(to top,rgba(5,4,10,.95) 8%,rgba(5,4,10,.66) 52%,rgba(5,4,10,.2))}
  .cj-e-hero{align-items:flex-end}
  .cj-e-tile{min-block-size:112px}
  .cj-e-thumb{flex:0 0 38%;max-inline-size:38%}
  .cj-e-lead-frame{min-block-size:260px}
}
@media(prefers-reduced-motion:reduce){
  .cj-e-card,.cj-e-cta{transition:none}
  .cj-e-card:hover,.cj-e-card:focus-within{transform:none}
}

/* ivos_cr1209 — Portalseite سینماجهت: خبرنامه · آخرین اخبار · فیلم‌های در حال اکران
   bilden EINE Reihe. RTL: das erste Element sitzt rechts, also genau die vom
   Owner gewuenschte Reihenfolge (rechts -> links). Die Spannen ergeben zusammen
   10 Spuren, damit die drei Kacheln dieselbe Zeile fuellen. Nur .pm-grid-cj —
   cinemajera/cinemaoud/farhonar bleiben unveraendert. */
.pm-grid-cj .pm-letter  {order:1;grid-column:span 3}
.pm-grid-cj .pm-news    {order:2;grid-column:span 3}
.pm-grid-cj .pm-onscreen{order:3;grid-column:span 4}
/* Spezifitaet: body.theme-cinemajahat .pm-grid .pm-onscreen (0,3,1) setzt weiter
   oben grid-row:span 2 und schlaegt eine 0,2,0-Regel. Deshalb hier ausdruecklich
   hoeher gewichtet - sonst belegt die Poster-Kachel zwei Zeilen und die Reihe
   steht schief (gemessen: 728 px gegen 550 px). */
body.theme-cinemajahat .pm-grid.pm-grid-cj .pm-onscreen{grid-row:auto}
.pm-grid-cj .pm-posters {order:4}
.pm-grid-cj .pm-best    {order:5}
@media(max-width:900px){
 .pm-grid-cj .pm-letter,.pm-grid-cj .pm-news{grid-column:span 5}
 .pm-grid-cj .pm-onscreen{grid-column:span 10}
}
@media(max-width:620px){
 .pm-grid-cj .pm-letter,.pm-grid-cj .pm-news,.pm-grid-cj .pm-onscreen{grid-column:span 10}
}
/* ivos_cr1209b — Poster in dieser Reihe deckeln, damit die drei Kaesten
   auf einer Linie enden (Vorlage: Bild 2 des Owners). */
.pm-grid-cj .pm-onscreen .pm-os-poster{max-height:clamp(180px,17vw,260px);width:auto;max-width:100%;object-fit:contain;margin-inline:auto}
.pm-grid-cj .pm-onscreen .pm-os-stage{align-items:center}

/* ivos_cr1211 — Die Dreier-Leiste sitzt jetzt direkt unter den Einstiegs-Karten
   (frueher unterhalb der Mosaik-Ueberschrift) und traegt deren Optik: derselbe
   Verlauf, derselbe rosa Rahmen, dieselbe Rundung wie .cj-e-card. RTL: das erste
   Kind steht rechts, also خبرنامه · آخرین اخبار · فیلم‌های در حال اکران. */
.cj-strip{padding:clamp(14px,2vw,26px) 0 0}
.cj-strip-grid{display:grid;grid-template-columns:3fr 3fr 4fr;gap:clamp(12px,1.5vw,20px);align-items:stretch}
.cj-strip-grid .pm-tile{border-radius:14px;
  background:linear-gradient(150deg,rgba(24,12,34,.94),rgba(8,6,16,.94));
  border:1px solid rgba(238,40,115,.28);
  box-shadow:inset 0 0 0 1px rgba(80,227,223,.07),0 16px 38px rgba(0,0,0,.55);
  transition:border-color .25s ease,box-shadow .25s ease}
.cj-strip-grid .pm-tile:hover,.cj-strip-grid .pm-tile:focus-within{border-color:rgba(238,40,115,.72)}
.cj-strip-grid .pm-onscreen .pm-os-poster{max-height:clamp(180px,17vw,260px);width:auto;max-width:100%;object-fit:contain;margin-inline:auto}
.cj-strip-grid .pm-onscreen .pm-os-stage{align-items:center}
@media(max-width:900px){.cj-strip-grid{grid-template-columns:1fr 1fr}.cj-strip-grid .pm-onscreen{grid-column:span 2}}
@media(max-width:620px){.cj-strip-grid{grid-template-columns:1fr}.cj-strip-grid .pm-onscreen{grid-column:auto}}
/* ivos_cr1211b — die Kacheln tragen aus dem Mosaik noch `grid-column:span 3|7`.
   In einem DREI-Spalten-Raster belegt das jeweils die ganze Zeile, die Leiste
   stapelte sich deshalb untereinander. Hier ausdruecklich zuruecksetzen. */
.cj-strip-grid .pm-tile{grid-column:auto;grid-row:auto}
@media(max-width:900px){.cj-strip-grid .pm-onscreen{grid-column:span 2}}
@media(max-width:620px){.cj-strip-grid .pm-tile{grid-column:auto}}

/* ── ivos_cr1228 + ivos_cr1232 (nur die سینماجهت-Portalseite) ───────────────
   cr1228a: der Abstand UNTER der Vierer-Reihe war 74px (48px Polster der
     Einstiegs-Sektion + 26px Polster des Streifens), der Abstand DARUEBER nur
     18px -- das ist die Zeilen-Luecke von .cj-e-grid. Der Kunde wollte beide
     gleich gross. Der Streifen uebernimmt deshalb exakt dieselbe clamp()-Formel
     wie die Rasterluecke, und das Polster der Sektion darueber faellt weg. Nur
     die Seite, auf der wirklich ein .cj-strip folgt, ist betroffen.
   cr1228b: eine Nachricht je Zeile; Knopf in der Kopfzeile statt darunter.
   cr1232: hoechstens drei Poster nebeneinander statt eines Karussells.
     Die beiden Regeln fuer .pm-os-poster/.pm-os-stage weiter oben stehen auf
     .cj-strip-grid .pm-onscreen (0,3,1) -- eine Regel auf .pm-os-grid allein
     (0,2,0) wuerde sie NICHT schlagen. Deshalb dieselbe Tiefe. */
.cj-entry-mosaic:has(+ .cj-strip){padding-block-end:0}
.cj-strip{padding-block-start:clamp(12px,1.3vw,18px)}
.cj-strip .pm-news-list{grid-template-columns:minmax(0,1fr)}
.cj-strip .pm-news .pm-tile-head{margin-block-end:12px}
.cj-strip .pm-news .pm-news-all-top{flex:0 0 auto;align-self:flex-start;margin:0}
.cj-strip-grid .pm-os-grid .pm-os-stage{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1vw,15px);align-items:start;justify-items:stretch}
.cj-strip-grid .pm-os-grid .pm-os-slide{grid-area:auto;opacity:1;visibility:visible;justify-content:flex-start}
.cj-strip-grid .pm-os-grid .pm-os-poster{width:100%;max-width:100%;max-height:none;aspect-ratio:2/3;object-fit:cover;margin-inline:0}
.cj-strip-grid .pm-os-grid .pm-os-cap{max-width:100%}
.cj-strip-grid .pm-os-grid .pm-os-cap b{font-size:.86rem}
.cj-strip-grid .pm-os-grid .pm-os-cap span{font-size:.76rem}
@media(max-width:620px){.cj-strip-grid .pm-os-grid .pm-os-stage{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pm-best .pm-os-grid .pm-os-stage{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1vw,15px);align-items:start;justify-items:stretch}
.pm-best .pm-os-grid .pm-os-slide{grid-area:auto;opacity:1;visibility:visible;justify-content:flex-start}
.pm-best .pm-os-grid .pm-os-poster{width:100%;max-width:100%;max-height:none;aspect-ratio:2/3;object-fit:cover;margin-inline:0}
.pm-best .pm-os-grid .pm-os-cap{max-width:100%}
.pm-best .pm-os-grid .pm-os-cap b{font-size:.86rem}
.pm-best .pm-os-grid .pm-os-cap span{font-size:.76rem}
@media(max-width:900px){.pm-best .pm-os-grid .pm-os-stage{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.pm-best .pm-os-grid .pm-os-stage{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* pm-best now uses pm-reports-slider: stacked on narrow boxes, two-column only on cinemajahat */
@media(min-width:1201px){
  .pm-best .pm-reports-slider{grid-template-columns:minmax(0,1fr);grid-template-areas:"bar" "head" "rail" "dots"}
  .pm-grid-cj .pm-best .pm-reports-slider{grid-template-columns:clamp(220px,24%,300px) minmax(0,1fr);grid-template-areas:"bar bar" "head rail" "head dots"}
}

/* ── ivos_cr1242 + ivos_cr1244 (nur die سینماجهت-Portalseite) ─────────────
   cr1242: die Rasterzelle der Newsletter-Kachel traegt jetzt ZWEI Kacheln
     untereinander -- oben «شبکه‌های اجتماعی», darunter der Newsletter. Das
     Rasterkind ist der Wrapper .cj-letter-col; die Kachel-Optik kommt weiter
     aus `.cj-strip-grid .pm-tile` (Nachfahren-Selektor, greift also auch eine
     Ebene tiefer). Eingabefeld und Knopf liegen auf 0,4,0 -- die Grundregel
     `body[class*="theme-"] .btn.primary` ist 0,3,1 und wuerde eine flachere
     Regel schlagen.
   cr1244: jede Nachricht in «آخرین اخبار» bekommt ihr Bild wie die Karten
     darueber. `.pm-news-list a` setzt `flex-direction:column` (0,1,1); die
     Zeilenform steht deshalb auf 0,3,2. */
.cj-letter-col{grid-column:auto;grid-row:auto;display:flex;flex-direction:column;min-width:0;
  gap:clamp(12px,1.5vw,20px)}
.cj-letter-col .pm-letter{flex:1 1 auto}
.cj-letter-col .cj-e-interview-day{flex:1 1 auto;min-block-size:0}
.pm-social-copy{margin:0;font-size:.88rem;line-height:1.9;opacity:.82}
.pm-social-row{display:flex;flex-wrap:wrap;gap:10px;margin-block-start:2px;direction:ltr;justify-content:flex-end}
.pm-social-ic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:12px;color:#fff;text-decoration:none;background:rgba(255,255,255,.05);
  border:1px solid rgba(238,40,115,.45);
  transition:transform .2s ease,box-shadow .25s ease,border-color .25s ease,color .25s ease}
.pm-social-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.pm-social-ic:hover,.pm-social-ic:focus-visible{transform:translateY(-2px);color:#50e3df;
  border-color:rgba(80,227,223,.8);box-shadow:0 0 18px rgba(80,227,223,.45)}
.pm-social-telegram{border-color:rgba(80,227,223,.5)}
.pm-social-twitter{border-color:rgba(255,255,255,.3)}
.pm-social-ic img{width:26px;height:26px;object-fit:contain;background:#fff;border-radius:7px;padding:3px;box-sizing:border-box}
.cj-strip .pm-letter-form input{background:rgba(255,255,255,.06);color:#fff;border-radius:12px;
  padding:13px 15px;border:1px solid rgba(238,40,115,.4);
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.cj-strip .pm-letter-form input::placeholder{color:rgba(255,255,255,.42)}
.cj-strip .pm-letter-form input:focus{outline:none;background:rgba(255,255,255,.09);
  border-color:rgba(80,227,223,.85);box-shadow:0 0 0 3px rgba(80,227,223,.18)}
.cj-strip .pm-letter-form .btn.primary{border:0;border-radius:12px;padding:13px 16px;font-weight:800;
  background:linear-gradient(90deg,#ee2873,#50e3df);color:#0b0714;
  box-shadow:0 10px 26px rgba(238,40,115,.28);
  transition:transform .2s ease,box-shadow .25s ease,filter .2s ease}
.cj-strip .pm-letter-form .btn.primary:hover{transform:translateY(-1px);filter:brightness(1.06);
  box-shadow:0 14px 32px rgba(80,227,223,.3)}
.cj-strip .pm-news-list li.pm-news-has-thumb a{flex-direction:row;align-items:center;gap:11px;
  padding:9px 11px}
.cj-strip .pm-news-thumb{flex:0 0 auto;display:block;width:74px;height:56px;border-radius:9px;
  overflow:hidden;background:rgba(255,255,255,.06)}
.cj-strip .pm-news-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cj-strip .pm-news-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
@media(max-width:620px){.cj-strip .pm-news-thumb{width:62px;height:48px}}
/* ── ivos_cr1247 (nur die سینماجهت-Portalseite) ───────────────────────────
   Feld und Knopf der Newsletter-Kachel in EINER Zeile; die Grundregeln
   `.pm-letter-form{flex-direction:column}` (0,1,0) und
   `.pm-letter-form .btn{width:100%}` (0,2,0) werden deshalb auf 0,2,0 bzw.
   0,4,0 geschlagen -- eine flachere Regel haette nichts bewirkt.
   Der Rahmen des Knopfs «همهٔ خبرها» kommt aus `.pm-more-btn{border:2px …}`;
   entfernt wird er auf derselben Tiefe wie die bestehende cr1228-Regel. */
.pm-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cj-strip .pm-letter-form{flex-direction:row;align-items:stretch;flex-wrap:wrap;gap:10px}
.cj-strip .pm-letter-form input{flex:1 1 150px;min-width:0}
.cj-strip .pm-letter-form .btn.primary{flex:0 0 auto;width:auto;padding-inline:22px}
.cj-strip .pm-news .pm-news-all-top{border:0;padding-inline:12px}
@media(max-width:620px){
  .cj-strip .pm-letter-form{flex-direction:column}
  .cj-strip .pm-letter-form .btn.primary{width:100%}
}/* ivos_cr1247b: in der schmalen Spalte reicht der Platz nicht fuer den
   Platzhalter «name@example.com» in voller Groesse -- er wurde abgeschnitten. */
.cj-strip .pm-letter-form input{font-size:.9rem;padding-inline:11px}

/* =====================================================================
   ivos_cr1259_1264_css — 2026-09-09
   #1260 header menu all white, only the open page pink
   #1259 nicer sub-menu panel
   #1261 brandmark next to the wordmark in the one-line jahat header
   All of it gated to cinemajahat; jera / oud / farhonar keep their look.
   ===================================================================== */

/* --- #1260 -------------------------------------------------------- */
/* beats the alternating rule, which is (0,3,2) on body[class*="theme-"] */
body.theme-cinemajahat .desktop-nav>a:nth-child(odd),
body.theme-cinemajahat .desktop-nav>a:nth-child(even),
body.theme-cinemajahat .desktop-nav>.dropdown:nth-child(odd)>button,
body.theme-cinemajahat .desktop-nav>.dropdown:nth-child(even)>button{color:#fff}

body.theme-cinemajahat .desktop-nav>a:hover,
body.theme-cinemajahat .desktop-nav>.dropdown>button:hover{color:#ee2873}

/* the open page keeps the pink — (0,4,2), so order can never flip it back */
body.theme-cinemajahat .desktop-nav>a.is-active:nth-child(odd),
body.theme-cinemajahat .desktop-nav>a.is-active:nth-child(even),
body.theme-cinemajahat .desktop-nav>.dropdown.is-active:nth-child(odd)>button,
body.theme-cinemajahat .desktop-nav>.dropdown.is-active:nth-child(even)>button{
  color:#ee2873;font-weight:800;text-shadow:0 0 14px rgba(238,40,115,.45);
}

/* --- #1259 -------------------------------------------------------- */
body.theme-cinemajahat .dropdown-menu{
  width:236px;padding:9px;
  background:linear-gradient(158deg,rgba(24,12,32,.97),rgba(8,5,14,.99));
  border:1px solid color-mix(in srgb,#ee2873 42%,transparent);
  border-radius:18px 5px 18px 5px;
  box-shadow:0 24px 52px rgba(0,0,0,.62),0 0 30px rgba(238,40,115,.14),
             inset 0 1px 0 rgba(255,255,255,.07);
  backdrop-filter:blur(10px);
}
body.theme-cinemajahat .dropdown-menu a:nth-child(odd),
body.theme-cinemajahat .dropdown-menu a:nth-child(even){
  color:#fff;font-weight:700;padding:10px 14px;margin-block:2px;border-radius:11px;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
body.theme-cinemajahat .dropdown-menu a:hover{
  background:linear-gradient(270deg,rgba(238,40,115,.92),rgba(238,40,115,.42));
  color:#fff;transform:translateX(-3px);
}
body.theme-cinemajahat .dropdown-menu small{color:rgba(255,255,255,.62)}

/* --- #1261 -------------------------------------------------------- */
.site-header.jahat-oneline .nav-mark{
  display:block;flex:0 0 auto;width:auto;
  height:clamp(36px,4.6vw,56px);object-fit:contain;
}
@media(max-width:900px){
  .site-header.jahat-oneline .nav-mark{height:clamp(26px,6.4vw,38px)}
}
@media(prefers-reduced-motion:reduce){
  body.theme-cinemajahat .dropdown-menu a{transition:none}
  body.theme-cinemajahat .dropdown-menu a:hover{transform:none}
}


/* ══ ivos_cr1270 — die sechs Einstiegs-Kacheln bekommen die Bildsprache des
   Feature-Feldes: das Bild deckt die ganze Kachel, der Text liegt darauf, und
   darueber derselbe cj-e-veil wie beim grossen Feld. Vorher war das Bild eine
   34%-Spalte neben einer Textspalte. Nur .cj-e-tile ist betroffen -- das
   Feature-Feld (.cj-e-hero) und die drei anderen Marken (.cj-e-lead) sind
   unangetastet. ══ */
.cj-e-tile .cj-e-thumb{
  position:absolute;inset:0;z-index:0;
  flex:0 0 auto;inline-size:100%;max-inline-size:none;block-size:100%}
.cj-e-tile .cj-e-thumb img{opacity:1}
/* Der Schirm-Blend-Schleier der Bildspalte hellte in Vollflaeche den Text auf. */
.cj-e-tile .cj-e-thumb:after{background:linear-gradient(200deg,rgba(80,227,223,.10),transparent 55%)}
.cj-e-tile .cj-e-body{inline-size:100%;flex:1 1 auto}
/* «مشاهدهٔ مطلب» war ein toter <span>; als echter Link braucht er eine Trefferflaeche. */
a.cj-e-link{display:inline-flex;align-items:center;align-self:flex-start;min-block-size:32px}
a.cj-e-link:hover{color:#fff;text-shadow:0 0 12px rgba(80,227,223,.7)}

/* ═════════════════════════════════════════════════════════════════════════════
   ivos_cr1280 — فَرهُنر als eigenstaendiges Kultur-/Kunst-Medium.
   Der Kunde: «نه یک نسخه مشابه از CinemaJahat». Geaendert wird ausschliesslich die
   Bildsprache -- Struktur, Inhalte und Module bleiben unangetastet, so wie im
   Auftrag verlangt. Alles ist auf body.theme-farhonar begrenzt.
   Leitlinien aus dem Auftrag: Purple + Black kontrolliert, Editorial-Anmutung,
   grosse Bilder, klare Hierarchie, «بدون شلوغی و افکت‌های غیرضروری».
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1) Ruhe statt Neon ──────────────────────────────────────────────────────
   Die Neon-Perspektivflaeche und der pinke Leuchtrand sind die Handschrift von
   سینماجهت. Auf فَرهُنر treten sie zurueck: Haarlinie in Brandviolett, ein
   ruhiger Schatten, keine Leuchtkanten. */
body.theme-farhonar .cj-e-scene{display:none}
body.theme-farhonar .cj-e-card{
  border:1px solid rgba(224,111,198,.20);
  box-shadow:0 18px 44px rgba(0,0,0,.55);
  background:linear-gradient(150deg,rgba(23,9,19,.96),rgba(6,3,7,.96))}
body.theme-farhonar .cj-e-card:hover,
body.theme-farhonar .cj-e-card:focus-within{
  border-color:rgba(224,111,198,.52);
  box-shadow:0 0 0 1px rgba(224,111,198,.16),0 22px 52px rgba(0,0,0,.62);
  transform:translateY(-2px)}

/* ── 2) Der Aufmacher traegt die Identitaet ──────────────────────────────────
   «تصویر بزرگ و باکیفیت · تیتر برجسته · Overlay ظریف». Also mehr Hoehe, ein
   weicherer Verlauf von unten und ein deutlich groesserer Titel. */
body.theme-farhonar .cj-e-lead{border-color:rgba(224,111,198,.26)}
body.theme-farhonar .cj-e-lead-frame{min-block-size:clamp(340px,40vw,560px)}
body.theme-farhonar .cj-e-lead .cj-e-veil{
  background:linear-gradient(to top,rgba(5,3,7,.96) 6%,rgba(11,5,13,.74) 42%,rgba(22,7,20,.16) 78%)}
body.theme-farhonar .cj-e-lead-t{
  font-size:clamp(1.75rem,3.3vw,3.25rem);line-height:1.22;
  text-shadow:0 2px 26px rgba(0,0,0,.95)}
body.theme-farhonar .cj-e-lead-x{color:rgba(255,255,255,.80);max-inline-size:58ch}

/* ── 3) Rubrik-Marke: Editorial statt Leuchtschrift ──────────────────────── */
body.theme-farhonar .cj-e-eyebrow{
  color:#e7cbe0;text-shadow:none;letter-spacing:.07em;font-weight:700}
body.theme-farhonar .cj-e-eyebrow:before{
  inline-size:18px;block-size:2px;border-radius:0;
  background:#e06fc6;box-shadow:none}

/* ── 4) Knopf: ruhig, ohne Neon-Schein ───────────────────────────────────── */
body.theme-farhonar .cj-e-cta{
  border-color:rgba(224,111,198,.72);background:rgba(224,111,198,.10);
  box-shadow:none;border-radius:2px;letter-spacing:.02em}
body.theme-farhonar .cj-e-cta:hover{background:#e06fc6;color:#1a0616;box-shadow:none}
body.theme-farhonar .cj-e-card a.cj-e-cta:hover{color:#1a0616}

/* ── 5) Rubrik-Ueberschriften ────────────────────────────────────────────────
   Sie standen in 5,2rem Leucht-Pink und waren das Lauteste auf der Seite. Ein
   Kulturmedium fuehrt ueber Hierarchie, nicht ueber Lautstaerke: kleinerer Grad,
   warmes Off-White, eine Haarlinie in Violett als Rubrikenmarke.
   Die Spezifitaet spiegelt bewusst die Grundregel (odd/even), sonst gewinnt jene. */
body.theme-farhonar main>section:nth-of-type(odd) .portal-section-head h2,
body.theme-farhonar main>section:nth-of-type(even) .portal-section-head h2,
body.theme-farhonar main>section:nth-of-type(odd)>.shell .portal-section-head h2,
body.theme-farhonar main>section:nth-of-type(even)>.shell .portal-section-head h2{
  font-family:Vazirmatn,Tahoma,sans-serif;
  font-size:clamp(1.5rem,2.5vw,2.35rem);font-weight:800;line-height:1.35;
  color:#f6ecf3;text-shadow:none;letter-spacing:-.01em}
body.theme-farhonar main>section:nth-of-type(odd) .portal-section-head>span,
body.theme-farhonar main>section:nth-of-type(even) .portal-section-head>span{
  color:#e06fc6;font-weight:700;letter-spacing:.08em;font-size:.72rem}
body.theme-farhonar .portal-section-head>span:before{
  inline-size:22px;block-size:2px;background:#e06fc6}
body.theme-farhonar .portal-section-head{
  margin-block-end:26px;padding-block-end:14px;
  border-block-end:1px solid rgba(224,111,198,.18)}

/* ── 6) «مطالب بیشتر»: dunkle Editorial-Karten statt weisser Platten ─────────
   Auf der fast schwarzen Seite wirkten drei reinweisse Kacheln wie Fremdkoerper.
   Ausserdem verlangt der Auftrag ausdruecklich Abwechslung im Kartentyp
   («از تکرار بیش از حد یک نوع Card جلوگیری کن»): die erste Karte wird deshalb
   eine BREITE Karte mit seitlichem Bild, die beiden anderen bleiben Rasterkarten. */
body.theme-farhonar .portal-more-grid{grid-template-columns:repeat(2,1fr);gap:20px}
body.theme-farhonar .portal-more-grid article{
  background:linear-gradient(150deg,rgba(23,9,19,.96),rgba(7,3,8,.96));
  border:1px solid rgba(224,111,198,.16);
  border-block-end:2px solid rgba(224,111,198,.55);
  border-radius:3px;overflow:hidden;
  transition:border-color .25s ease,transform .25s ease}
body.theme-farhonar .portal-more-grid article:hover{
  border-color:rgba(224,111,198,.45);transform:translateY(-2px)}
body.theme-farhonar .portal-more-grid article div{padding:18px 20px 22px}
body.theme-farhonar .portal-more-grid article span{
  color:#e06fc6;letter-spacing:.07em;font-weight:700}
body.theme-farhonar .portal-more-grid article h3{color:#f6ecf3;font-weight:700}
body.theme-farhonar .portal-more-grid article h3 a{color:inherit}
body.theme-farhonar .portal-more-grid article h3 a:hover{color:#e06fc6}
/* die breite Aufmacher-Karte */
body.theme-farhonar .portal-more-grid article:first-child{
  grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr;align-items:stretch}
body.theme-farhonar .portal-more-grid article:first-child img{
  /* Ohne feste Proportion diktiert die natuerliche Bildhoehe die ganze Zeile --
     die Karte wurde 731 px hoch und die Textspalte war fast leer. */
  inline-size:100%;block-size:auto;aspect-ratio:16/9;object-fit:cover;min-block-size:0}
body.theme-farhonar .portal-more-grid article:first-child div{
  display:flex;flex-direction:column;justify-content:center;padding:26px 28px}
body.theme-farhonar .portal-more-grid article:first-child h3{
  font-size:clamp(1.15rem,1.7vw,1.6rem);line-height:1.5}

/* ── 7) «بیشتر»-Knopf in derselben ruhigen Sprache ───────────────────────── */
body.theme-farhonar .pm-more-btn{
  border-radius:2px;letter-spacing:.02em;color:#f0dcea}
body.theme-farhonar .pm-more-btn:hover,
body.theme-farhonar .pm-more-btn:focus-visible{background:rgba(224,111,198,.14)}

/* ── 8) Mobil: die breite Karte stapelt, sonst entsteht eine 2px-Spalte ──── */
@media(max-width:760px){
  body.theme-farhonar .portal-more-grid{grid-template-columns:1fr}
  body.theme-farhonar .portal-more-grid article:first-child{
    grid-column:1/-1;display:block}
  body.theme-farhonar .portal-more-grid article:first-child img{
    aspect-ratio:16/10;min-block-size:0}
  body.theme-farhonar .portal-more-grid article:first-child div{padding:18px 20px 22px}
  body.theme-farhonar .cj-e-lead-frame{min-block-size:clamp(260px,64vw,360px)}
}
/* ═══════════════════════════ /ivos_cr1280 ═══════════════════════════════════ */
/* ═══════════════════════════ ivos_cr1525 + ivos_cr1528 ══════════════════════
   Der Leitartikel wird zum randlosen Vollbreit-Banner.
   cr1525 hatte das bewusst nur auf /cinemajera gescoped; cr1528 (Kundenbild:
   genau dieses Banner, rot umrandet) verlangt dieselbe Behandlung auf
   /cinemaoud und /farhonar — und auf dem Desktop deutlich hoeher
   («از نظر عمودی اندازهٔ بزرگ‌تری داشته باشد … برای نسخهٔ کامپیوتر کشیده‌تر»).
   Proportion daher 4/1 -> 3/1 (1920px: 480px -> 640px hoch).
   /cinemajahat hat KEIN Lead-Banner (Mosaik-Einstieg aus cr1209/cr1211) und
   bleibt deshalb unberuehrt — siehe staff_note zur CR.
   `inline-size:100%` ist Pflicht: mit `aspect-ratio` UND einer definiten
   Mindesthoehe leitet der Browser sonst die BREITE aus der Hoehe ab und das
   Banner ragt seitlich aus dem Bild (unsichtbar wegen `overflow-x:clip`).
   Jetzt gibt die Breite die Hoehe vor, nicht umgekehrt. */
body.theme-cinemajera .cj-entry-lead > .shell,
body.theme-cinemaoud  .cj-entry-lead > .shell,
body.theme-farhonar   .cj-entry-lead > .shell{inline-size:100%;margin-inline:0;max-inline-size:none}
body.theme-cinemajera .cj-entry-lead .cj-e-lead,
body.theme-cinemaoud  .cj-entry-lead .cj-e-lead,
body.theme-farhonar   .cj-entry-lead .cj-e-lead{padding:0;border:0;border-radius:0;background:none}
body.theme-cinemajera .cj-entry-lead .cj-e-lead-frame,
body.theme-cinemaoud  .cj-entry-lead .cj-e-lead-frame,
body.theme-farhonar   .cj-entry-lead .cj-e-lead-frame{
  inline-size:100%;border-radius:0;aspect-ratio:3/1;min-block-size:clamp(280px,26vw,470px)}
/* Text nicht an die Bildschirmkante kleben lassen. Rechts (= inline-start in RTL)
   klebt der feste Seitenaufkleber `.portal-sticker` (43 px breit, position:fixed);
   ohne diese Reserve verschwindet der erste Buchstabe der Ueberschrift darunter. */
body.theme-cinemajera .cj-entry-lead .cj-e-lead .cj-e-body,
body.theme-cinemaoud  .cj-entry-lead .cj-e-lead .cj-e-body,
body.theme-farhonar   .cj-entry-lead .cj-e-lead .cj-e-body{
  inline-size:min(1500px,100% - 48px);margin-inline:auto;
  padding-inline:0;padding-inline-start:clamp(28px,3.4vw,58px)}
@media(max-width:768px){
  body.theme-cinemajera .cj-entry-lead .cj-e-lead-frame,
  body.theme-cinemaoud  .cj-entry-lead .cj-e-lead-frame,
  body.theme-farhonar   .cj-entry-lead .cj-e-lead-frame{aspect-ratio:auto;min-block-size:340px}
  body.theme-cinemajera .cj-entry-lead .cj-e-lead .cj-e-body,
  body.theme-cinemaoud  .cj-entry-lead .cj-e-lead .cj-e-body,
  body.theme-farhonar   .cj-entry-lead .cj-e-lead .cj-e-body{inline-size:min(100% - 32px,1500px)}
}
/* ═══════════════════════ ivos_cr1529 ════════════════════════════════════════
   /cinemajahat: «پوستر فیلم‌ها» nimmt die ganze Zeile (10 von 10 Spuren);
   «پرفروش‌ترین فیلم‌ها» steht nicht mehr links daneben, sondern darunter.
   Nur .pm-grid-cj — die drei anderen Marken behalten 7+3. */
.pm-grid-cj .pm-posters{grid-column:span 10;grid-row:auto}
.pm-grid-cj .pm-best{grid-column:span 10}
/* ═══════════════════════ /ivos_cr1525 + /ivos_cr1528 + /ivos_cr1529 ═════════ */
/* ═══════════════════════ ivos_cr1530 — Kopfzeile mit 11 Eintraegen ══════════
   Nur body.theme-cinemajahat: die drei Schwestermarken haben 3-6 Eintraege und
   sollen ihre weiten Abstaende behalten. Spezifitaet (0,2,1) schlaegt
   `.portal-page .desktop-nav` (0,2,0) unabhaengig von der Ladereihenfolge. */
@media(max-width:1440px){
  body.theme-cinemajahat .desktop-nav{gap:12px;font-size:.8rem}
}
/* Unterhalb 1280px passen 11 Eintraege nicht mehr in eine Zeile: Hamburger.
   Gemessen ohne diese Regel: 901px -> .nav-actions bei [-229,-129]. */
@media(max-width:1279px){
  body.theme-cinemajahat .desktop-nav{display:none}
  body.theme-cinemajahat .menu-toggle{display:grid}
}
/* ═══════════════════════ /ivos_cr1530 ══════════════════════════════════════ */
/* ═══════════════════════ ivos_cr1542 — /cinemajera Lead-Banner ══════════════
   1) Der dunkle Streifen ZWISCHEN Kopfzeile und Banner ist das obere
      `padding-block` von `.cj-entry` (bei 1440px = 40px). Der Kunde hat genau
      diesen Streifen eingekreist -> oben auf 0, unten bleibt wie gehabt.
   2) Banner etwas hoeher: Verhaeltnis 3/1 -> 2.7/1 (bei 1440px 480 -> 533px,
      bei 1920px 640 -> 711px, also rund +11%). `inline-size:100%` steht schon
      in der Regel von cr1528 und MUSS bleiben: mit `aspect-ratio` UND einer
      definiten Mindesthoehe leitet der Browser sonst die BREITE aus der Hoehe ab.
   Bewusst NUR `body.theme-cinemajera` — der Kunde hat ausdruecklich «سینماجرا»
   genannt. cinemaoud und farhonar bleiben unveraendert (Rueckfrage im staff_note). */
body.theme-cinemajera .cj-entry.cj-entry-lead{padding-block-start:0}
body.theme-cinemajera .cj-entry-lead .cj-e-lead-frame{
  aspect-ratio:2.7/1;min-block-size:clamp(310px,29vw,520px)}
@media(max-width:768px){
  /* Mobil gilt `aspect-ratio:auto` + feste Mindesthoehe (340px) — dort denselben
     Zuwachs von rund 11% nachziehen, sonst wirkt nur der Desktop hoeher. */
  body.theme-cinemajera .cj-entry-lead .cj-e-lead-frame{aspect-ratio:auto;min-block-size:378px}
}
/* ═══════════════════════ /ivos_cr1542 ══════════════════════════════════════ */

/* ═══════════════════════ ivos_cr1552 — Lead-Banner cinemaoud + farhonar ══════
   Folgeauftrag zu cr1542: «این کار رو برای بخش سینما فرهنر و سینما عود هم انجام
   بده و padding رو از بین ببر». Der Kunde nennt ausdruecklich NUR das padding —
   die Hoehenaenderung (2.7/1) aus cr1542 wird deshalb BEWUSST NICHT mitgezogen,
   beide Marken behalten ihr Verhaeltnis 3/1.
   Gleiche Ursache wie dort: der dunkle Streifen zwischen Kopfzeile und Banner ist
   das obere `padding-block` von `.cj-entry` (bei 1440px = 40px). Unten bleibt. */
body.theme-cinemaoud .cj-entry.cj-entry-lead,
body.theme-farhonar  .cj-entry.cj-entry-lead{padding-block-start:0}
/* ═══════════════════════ /ivos_cr1552 ══════════════════════════════════════ */

/* ═══════════════════════ ivos_cr1557 — Poster-Wand 6 statt 4 ════════════════
   «به جای 4 محصول در پوستر فیلم‌ها، 6 محصول نمایش بده».
   Die Kachel rendert ohnehin bis zu 8 Filme ($fmPostersHead), begrenzt war nur
   das RASTER auf 4 Spuren -- ab der 5. Karte brach eine zweite Reihe um.
   Ab 1200px stehen jetzt 6 nebeneinander; darunter bleiben die bisherigen
   Stufen (900px: 3, 620px: 2), weil 6 schmale Poster dort unlesbar waeren.
   Hinweis fuer die Abnahme: sichtbar wird das nur bei einer Marke mit >=5
   veroeffentlichten Filmen (heute: cinemajera mit 6). cinemajahat, cinemaoud
   und farhonar haben je 4 -- dort aendert sich erst etwas, wenn der Kunde im
   Panel weitere Filme veroeffentlicht. */
@media(min-width:1201px){
  /* `auto-fit` statt `repeat(6,...)`: leere Spuren fallen zusammen. Mit den heutigen
     VIER Filmen fuellen die Poster daher weiterhin die ganze Breite (je ~325px) --
     ein starres 6er-Raster haette sie sofort auf 212px geschrumpft und links zwei
     leere Spuren gelassen, also die Kachel VERSCHLECHTERT statt verbessert.
     Sobald der Kunde den 5. und 6. Film veroeffentlicht, stehen alle sechs in
     EINER Reihe (bei 1440px je 212px breit, 318px hoch). */
  /* ivos_cr1567 ersetzt das auto-fit aus cr1557: der Kunde will ausdruecklich, dass die
     Postergroesse GLEICH BLEIBT, auch wenn ein Bereich nur vier Filme hat ("ابعاد ...
     تغییر نکنه"). auto-fit liess die vier Poster die ganze Breite fuellen (je ~325px) --
     genau das soll nicht mehr passieren. Feste sechs Spuren: eine fuer die Ueberschrift,
     fuenf fuer Filme; fehlende Filme lassen ihre Spur leer, statt die anderen zu dehnen. */
  .pm-poster-wall{grid-template-columns:repeat(6,minmax(0,1fr))}
}
/* ═══════════════════════ /ivos_cr1557 ══════════════════════════════════════ */

/* ═══════════════════════ ivos_cr1567 — Titel in der Wand ═══════════════════
   «سمت راست‌ترین بخش هر باکس نوشته مربوط به اون باشه و سمت چپش باید ماکسیمم ۵ تا
   فیلم نمایش بده» -- die Ueberschrift belegt die erste Rasterzelle (RTL = rechts),
   links davon stehen bis zu fuenf Poster. Unterhalb von 1201px ist das Raster nur
   3 bzw. 2 Spuren breit; dort waere eine Titelzelle so breit wie ein Poster und der
   Text wuerde zerfallen -- deshalb spannt der Titel dort wieder ueber die ganze Reihe. */
.pm-poster-wall--titled .pm-wall-title{align-self:center;grid-column:1/-1;margin-block-end:2px}
@media(min-width:1201px){
  .pm-poster-wall--titled .pm-wall-title{grid-column:auto;margin-block-end:0;
    align-self:center;font-size:clamp(1rem,1.35vw,1.28rem)}
  /* Der Trennstrich unter der Ueberschrift sass bisher unter einer breiten Zeile;
     in einer schmalen Zelle wirkt er sonst wie ein abgeschnittener Rest. */
  .pm-poster-wall--titled .pm-wall-title:after{margin-inline-start:0}
}
/* ═══════════════════════ /ivos_cr1567 ══════════════════════════════════════ */

/* ═══════════ ivos_cr1604 + ivos_cr1606 — Posterwand als Schieber ═══════════
   cr1604 «قابلیت اسلایدر» + die Anzahl unter dem Titel (zweites Kundenbild).
   cr1606: auf dem Handy stehen ZWEI Poster im Sichtfenster, nicht fuenf.
   Die Pfeile liegen ausserhalb der scrollenden Schiene; Bedienelemente in einem
   overflow-x:auto-Kasten wandern sonst mit dem Inhalt aus dem Bild. */
.pm-wall-slider{--pw-gap:clamp(8px,1vw,15px);display:grid;gap:var(--pw-gap);
  grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "rail" "dots";min-width:0}
.pm-wall-head{grid-area:head;display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.pm-wall-head .pm-wall-title{margin:0;flex:0 1 auto;min-width:0}
.pm-wall-count{flex:0 0 auto;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:800;
  color:var(--brand-b,currentColor);
  border:1px solid color-mix(in srgb,var(--brand-b,currentColor) 55%,transparent);
  background:color-mix(in srgb,var(--brand-b,currentColor) 12%,transparent)}
.pm-wall-head .pm-cnav-group{margin-inline-start:auto}
/* ivos_cr1631 — Kundenwunsch: die Pfeile sitzen nicht mehr gestapelt in der
   blauen Kopfspalte, sondern flankieren den Schieber rechts & links (zweites
   Kundenbild). Die Gruppe loest sich auf, ihre beiden Knoepfe liegen ueber den
   aeusseren Raendern der Poster-Schiene und sind mittig zur Schiene zentriert.
   prev = Richtung «zurueck» = in RTL rechts; next = links. */
.pm-wall-slider>.pm-cnav-group{display:contents}
.pm-wall-slider>.pm-cnav-group>.pm-cnav{grid-area:rail;align-self:center;z-index:2;margin-inline:2px;
  background:color-mix(in srgb,var(--page-bg,#fff) 88%,transparent)}
.pm-wall-slider>.pm-cnav-group>.pm-cnav[data-pmc="prev"]{justify-self:start}
.pm-wall-slider>.pm-cnav-group>.pm-cnav[data-pmc="next"]{justify-self:end}
.pm-wall-rail{grid-area:rail;display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 4*var(--pw-gap))/5);gap:var(--pw-gap);
  overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;
  padding-block-end:6px;min-width:0}
.pm-wall-rail>.pm-poster{scroll-snap-align:start}
.pm-wall-rail:focus-visible{outline:2px solid var(--brand-b,currentColor);outline-offset:3px}
.pm-wall-dots{grid-area:dots;display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
.pm-wall-dot{width:30px;height:30px;padding:0;display:grid;place-items:center;cursor:pointer;
  background:none;border:0;color:inherit;-webkit-appearance:none;appearance:none}
.pm-wall-dot:before{content:"";display:block;width:10px;height:10px;border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--page-text,#111) 55%,transparent);background:transparent;
  transition:background .25s,border-color .25s,transform .25s}
.pm-wall-dot.is-on:before{background:var(--brand-b,currentColor);border-color:var(--brand-b,currentColor);transform:scale(1.3)}
@media(min-width:1201px){
  /* wie in cr1567: der Titel steht in RTL rechts NEBEN den Postern, nicht darueber. */
  .pm-wall-slider{grid-template-columns:minmax(120px,.8fr) minmax(0,5fr);
    grid-template-areas:"head rail" "head dots"}
  .pm-wall-head{flex-direction:column;align-items:flex-start;justify-content:center;gap:8px}
  .pm-wall-head .pm-cnav-group{margin-inline-start:0}
  .pm-wall-head .pm-wall-title{font-size:clamp(1rem,1.35vw,1.28rem)}
  .pm-wall-head .pm-wall-title:after{margin-inline-start:0}
  /* Kundenwunsch: auf dem Desktop den sichtbaren Rollbalken unter der
     Poster-Schiene ausblenden. Das Karussell bleibt per Pfeilen/Punkten/Wischen
     bedienbar — nur die Leiste verschwindet. */
  .pm-wall-rail{scrollbar-width:none}
  .pm-wall-rail::-webkit-scrollbar{display:none}
}
@media(max-width:1200px){.pm-wall-rail{grid-auto-columns:calc((100% - 2*var(--pw-gap))/3)}}
@media(max-width:620px){.pm-wall-rail{grid-auto-columns:calc((100% - var(--pw-gap))/2)}}
@media (prefers-reduced-motion:reduce){.pm-wall-rail{scroll-behavior:auto}}
/* ═══════════ /ivos_cr1604 + ivos_cr1606 ═══════════════════════════════════ */

/* ═══════════ ivos — Posterwand im Stil des zweiten Kundenbildes ═══════════
   Kundenwunsch: «بخش پوستر فیلم‌ها و بخش‌های کپی‌شده‌ی زیر آن از نظر ظاهر و
   استایل شبیه‌تر به تصویر دوم شود.» -- die Posterwand UND ihre Kopien darunter
   sollen aussehen wie das zweite Kundenbild: die Titelzelle wird zur farbigen
   Seitentafel in der Markenfarbe (teal/brand-a), die Karten verlieren den
   grellen Rahmen und bekommen den dunklen, „kinoartigen“ Look mit dem Titel
   UEBER dem Bild (Verlauf) statt als Zeile darunter.
   Reine Optik, KEIN neues Markup: alles greift an den vorhandenen Klassen und
   ist auf .pm-wall-slider/.pm-wall-rail begrenzt -- die Posterwand auf der
   «بیشتر»-Seite (.pm-poster-wall, .pm-os-*) bleibt unberuehrt. Es werden nur
   farb-/form-bezogene Eigenschaften gesetzt, keine Grid-/Flow-Angaben, die
   weiter oben in @media stehen (sonst schluege diese EOF-Regel die Handy-Regeln,
   FE-MEDIA-EOF). */
.pm-wall-slider .pm-wall-head{
  padding:clamp(14px,1.4vw,20px);border-radius:18px;
  background:linear-gradient(155deg,
    color-mix(in srgb,var(--brand-a,#50e3df) 92%,#fff),
    color-mix(in srgb,var(--brand-a,#50e3df) 68%,#000));
  box-shadow:0 10px 26px rgba(0,0,0,.28)}
.pm-wall-slider .pm-wall-head .pm-wall-title{color:var(--brand-ink,#06201f)}
.pm-wall-slider .pm-wall-head .pm-wall-title:after{background:var(--brand-ink,#06201f);opacity:.6}
.pm-wall-slider .pm-wall-count{
  color:var(--brand-ink,#06201f);
  border-color:color-mix(in srgb,var(--brand-ink,#000) 45%,transparent);
  background:color-mix(in srgb,#fff 55%,transparent)}
/* Karten: randlos, dunkel gerundet, Titel als Verlauf ueber dem Bild. */
.pm-wall-rail .pm-poster{position:relative;gap:0;border-radius:16px;overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.32)}
.pm-wall-rail .pm-poster>img,.pm-wall-rail .pm-poster .pm-poster-plate{border:0;border-radius:16px}
.pm-wall-rail .pm-poster figcaption{position:absolute;inset-inline:0;inset-block-end:0;z-index:1;
  padding:34px 13px 12px;gap:2px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.42) 52%,transparent)}
.pm-wall-rail .pm-poster figcaption b{color:#fff}
.pm-wall-rail .pm-poster figcaption span{color:rgba(255,255,255,.82);opacity:1}
/* ═══════════ /ivos Posterwand zweites Kundenbild ═══════════ */

/* ═══════════ ivos — بخش گزارش nach dem ZWEITEN Kundenbild ═══════════════════
   Kundenwunsch: «بخش گزارش در صفحه سینما جهت را مطابق تصویر دوم بازطراحی کن».
   Nur die Kachel گزارش‌ها (.pm-reports) wird neu gestaltet; die sieben Kopien
   darunter (گفتگو/یادداشت/…) bleiben unberuehrt. Vorlage: dunkle Marine-Tafel
   rechts (Icon-Badge, Titel, Beschreibung, Zaehler-Pille, mittig), eine
   Kopfleiste mit den Pfeilen (links) und «مشاهده بیشتر» (rechts) ueber einer
   Trennlinie, dunkle gerundete Karten mit «سینماجهت»-Chip oben.
   Layout-Grid steht im @media(min-width:1201px) am Dateiende -- NICHT hier als
   nackte EOF-Regel -- damit die Handy-Spalten nicht ueberschrieben werden
   (FE-MEDIA-EOF). */
.pm-reports{
  /* ivos — Kundenwunsch: Farbschema der neuen Design-Vorlage (Anfrage-PNG/Palette). */
  --rp-ink:#FFFFFF;            /* Haupttext              */
  --rp-dim:#B8B6C2;            /* Sekundaertext          */
  --rp-accent:#FF007A;         /* Neon-Pink (Akzent)     */
  --rp-line:#23424C;           /* Rahmen der Boxen       */
  background:linear-gradient(110deg,#003D45 0%,#101827 48%,#39071E 100%);
  border-color:var(--rp-line);
  color:var(--rp-ink)}
/* Kundenwunsch 2026-10-26: die Kaesten auf سینماجهت wieder einfarbig wie in der
   Vorlage (پیوست دو) -- der breite Tuerkis-zu-Pflaume-Verlauf entfaellt vorerst.
   Nur diese Marke; «ویژه‌ها» behaelt seine eigene Farbflaeche. */
body.theme-cinemajahat .pm-reports:not(.cj-special-wall){background:#101827}
/* Basis (Handy zuerst): die Tafel sitzt oben, darunter Leiste, Schiene, Punkte.
   Auf dem Desktop ordnet das @media unten in zwei Spalten um. */
.pm-reports-slider{grid-template-areas:"bar" "head" "rail" "dots"}

/* Kopfleiste: Pfeile links, «مشاهده بیشتر» rechts, darunter eine Trennlinie. */
.pm-reports-bar{grid-area:bar;display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;padding-block-end:14px;
  border-block-end:1px solid var(--rp-line)}
.pm-reports-slider .pm-reports-all{order:0;align-self:center;margin-block-start:0;
  color:var(--rp-accent);border-radius:999px;
  border:1.5px solid color-mix(in srgb,var(--rp-accent) 55%,transparent);
  background:color-mix(in srgb,var(--rp-accent) 8%,transparent)}
.pm-reports-slider .pm-reports-all:after{content:"‹"}
.pm-reports-slider .pm-reports-all:hover,
.pm-reports-slider .pm-reports-all:focus-visible{background:color-mix(in srgb,var(--rp-accent) 18%,transparent)}
.pm-reports-slider .pm-reports-all:focus-visible{outline-color:var(--rp-accent)}
/* ivos — Kundenwunsch: im Kasten «ویژه‌ها» ist nur die Schrift (und der Pfeil)
   des Knopfs «مشاهده بیشتر» weiss; Hintergrund und pinker Rahmen bleiben. */
.cj-works-panel[id^="cj-special-panel-"] .pm-more-btn{color:#fff}
.pm-reports-nav{flex:0 0 auto;gap:8px}
.pm-reports-nav .pm-cnav{border-color:color-mix(in srgb,var(--rp-accent) 40%,transparent);
  background:color-mix(in srgb,#101827 78%,transparent);color:var(--rp-ink)}
.pm-reports-nav .pm-cnav:hover:not(:disabled),
.pm-reports-nav .pm-cnav:focus-visible{background:color-mix(in srgb,var(--rp-accent) 24%,transparent)}
.pm-reports-nav .pm-cnav:focus-visible{outline-color:var(--rp-accent)}

/* Info-Tafel (ehem. pm-wall-head): dunkle Marine-Karte, Inhalt mittig. */
.pm-reports-slider .pm-reports-panel{
  flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;
  padding:clamp(20px,2.2vw,30px);border-radius:16px;box-shadow:none;
  background:linear-gradient(160deg,#101827 0%,#0B1E2B 100%);
  border:1px solid var(--rp-line)}
.pm-reports-ic{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  color:var(--rp-accent);
  background:color-mix(in srgb,var(--rp-accent) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--rp-accent) 35%,transparent)}
.pm-reports-slider .pm-reports-panel .pm-wall-title{color:var(--rp-ink);align-self:center;
  font-size:clamp(1.15rem,1.7vw,1.5rem)}
.pm-reports-slider .pm-reports-panel .pm-wall-title:after{display:none}
.pm-reports-desc{margin:0;max-width:30ch;font-size:.84rem;line-height:1.95;color:var(--rp-dim)}
.pm-reports-slider .pm-reports-panel .pm-wall-count{
  color:#fff;border-color:color-mix(in srgb,var(--rp-accent) 55%,transparent);
  background:color-mix(in srgb,var(--rp-accent) 30%,transparent)}

/* Karten: «سینماجهت»-Chip oben (in RTL rechts), sonst wie die dunkle Posterkarte. */
.pm-reports-chip{position:absolute;z-index:2;inset-block-start:10px;inset-inline-start:10px;
  padding:3px 11px;border-radius:999px;font-size:.7rem;font-weight:800;line-height:1.6;color:#fff;
  background:color-mix(in srgb,var(--rp-accent) 88%,#000);
  box-shadow:0 2px 8px rgba(0,0,0,.4)}

/* Punkte im Kundenbild-Stil: aktiver Punkt wird zum farbigen Balken. */
.pm-reports-slider .pm-wall-dot:before{border-color:color-mix(in srgb,var(--rp-dim) 60%,transparent)}
.pm-reports-slider .pm-wall-dot.is-on:before{background:var(--rp-accent);border-color:var(--rp-accent);
  width:22px;border-radius:5px;transform:none}

@media(min-width:1201px){
  /* Zwei Spalten: in RTL rechts die Info-Tafel (head, ueber beide Reihen),
     links die Schiene und die Punkte; die Kopfleiste spannt oben ueber beide. */
  .pm-reports-slider{
    grid-template-columns:clamp(220px,24%,300px) minmax(0,1fr);
    grid-template-areas:"bar bar" "head rail" "head dots"}
}
/* ═══════════ /ivos بخش گزارش zweites Kundenbild ═══════════ */

/* ivos — سینمافرهنر (farhonar): die aus سینماجهت kopierten «بخش گزارش»-Walls
   (neun Themen) stehen wie dort ueber die volle Breite des Rasters, nicht in
   der 7-Spalten-Standardkachel. Scope nur .pm-reports -> die bestehende
   پوستر-Wand und die anderen Marken bleiben unveraendert. span 10 gilt in
   jeder Breite (auf dem Handy ohnehin die Vorgabe), darum keine @media noetig. */
body.theme-farhonar .pm-grid .pm-reports{grid-column:span 10;grid-row:auto}

/* ═══════════ ivos — Tab-Liste ueber «دسته‌ها» nach dem zweiten Kundenbild ═══
   Kundenwunsch: «بخش دسته‌ها در صفحه سینماجهت» bekommt oben eine Tab-Liste —
   genau wie im zweiten Kundenbild: fuenf Pillen in einer Reihe (فیلم aktiv,
   dann فیلم کوتاه / سریال / مستند / انیمیشن), hell auf der dunklen Marine-
   Kachel, Scroll auf dem Handy. Scope nur .cj-cat-tabs -> sonst nichts. */
.cj-cat-tabs{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;
  padding-block-end:12px;margin-block-end:14px;
  border-block-end:1px solid var(--rp-line,rgba(111,147,200,.24))}
.cj-cat-tabs a{flex:0 0 auto;min-height:40px;display:inline-flex;align-items:center;
  padding:7px 20px;border-radius:999px;font-size:.82rem;font-weight:800;white-space:nowrap;
  color:var(--rp-dim,#9db2d4);
  border:1.5px solid color-mix(in srgb,var(--rp-accent,#4f8ae0) 40%,transparent);
  background:transparent}
.cj-cat-tabs a:hover,.cj-cat-tabs a:focus-visible{
  background:color-mix(in srgb,var(--rp-accent,#4f8ae0) 18%,transparent);color:var(--rp-ink,#eaf1ff)}
.cj-cat-tabs a:focus-visible{outline:2px solid var(--rp-accent,#4f8ae0);outline-offset:2px}
.cj-cat-tabs a.is-active{color:#fff;
  background:color-mix(in srgb,var(--rp-accent,#4f8ae0) 88%,#000);
  border-color:var(--rp-accent,#4f8ae0);
  box-shadow:0 2px 8px rgba(0,0,0,.4)}
@media (prefers-reduced-motion:reduce){.cj-cat-tabs a{transition:none}}
/* ivos — «آثار نمایشی»-Tab-Liste: dieselbe Optik wie .cj-cat-tabs, aber echte
   Umschalt-Knoepfe — ein Klick tauscht das Panel IM SELBEN Kasten statt zu
   navigieren. Darum Buttons (role=tab) statt Links; gleiches Pillen-Design. */
.cj-works-tabs button{flex:0 0 auto;min-height:40px;display:inline-flex;align-items:center;
  padding:7px 20px;border-radius:999px;font-size:.82rem;font-weight:800;font-family:inherit;white-space:nowrap;cursor:pointer;
  color:var(--rp-dim,#9db2d4);
  border:1.5px solid color-mix(in srgb,var(--rp-accent,#4f8ae0) 40%,transparent);
  background:transparent}
.cj-works-tabs button:hover,.cj-works-tabs button:focus-visible{
  background:color-mix(in srgb,var(--rp-accent,#4f8ae0) 18%,transparent);color:var(--rp-ink,#eaf1ff)}
.cj-works-tabs button:focus-visible{outline:2px solid var(--rp-accent,#4f8ae0);outline-offset:2px}
.cj-works-tabs button.is-active{color:#fff;
  background:color-mix(in srgb,var(--rp-accent,#4f8ae0) 88%,#000);
  border-color:var(--rp-accent,#4f8ae0);
  box-shadow:0 2px 8px rgba(0,0,0,.4)}
.cj-works-panel[hidden]{display:none!important}
/* ivos — Kundenwunsch: «جشنواره‌ها»-Kasten per Dropdown statt Zungen umschalten.
   Gleiche Farbwelt wie .cj-works-tabs (Pillen), nur als <select>. */
.cj-fest-dd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.cj-fest-dd-lab{font-size:.82rem;font-weight:800;color:var(--rp-dim,#9db2d4)}
.cj-fest-select{flex:0 1 auto;max-width:100%;min-height:40px;
  padding:7px 18px 7px 40px;border-radius:999px;font-size:.82rem;font-weight:800;font-family:inherit;cursor:pointer;
  color:var(--rp-ink,#eaf1ff);
  border:1.5px solid color-mix(in srgb,var(--rp-accent,#4f8ae0) 40%,transparent);
  background-color:color-mix(in srgb,var(--rp-accent,#4f8ae0) 10%,#0b1326);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239db2d4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 14px center;background-size:16px;
  -webkit-appearance:none;appearance:none}
.cj-fest-select:hover,.cj-fest-select:focus-visible{border-color:var(--rp-accent,#4f8ae0);color:#fff}
.cj-fest-select:focus-visible{outline:2px solid var(--rp-accent,#4f8ae0);outline-offset:2px}
.cj-fest-select option{color:#0b1326;background:#fff}
/* ivos — Kundenwunsch «عکس و محتوای مربوطه … مستقیم در همان باکس نمایش داده بشه»:
   jede im Admin gepflegte Kategorie bekommt im selben Kasten eine Karte mit
   Cover-Bild und Inhalt. Bild max-width:100% gegen FE-Overflow; ab ≤768px steht
   das Bild ueber dem Text, nicht daneben gequetscht. */
.cj-cat-cards{display:flex;flex-direction:column;gap:16px;margin-block-end:16px}
.cj-cat-card{display:flex;gap:16px;align-items:flex-start;
  padding:14px;border-radius:14px 4px;
  background:color-mix(in srgb,var(--rp-accent,#4f8ae0) 8%,transparent);
  border:1px solid var(--rp-line,rgba(111,147,200,.24))}
.cj-cat-card-img{flex:0 0 150px;width:150px;max-width:100%;height:auto;
  border-radius:10px 3px;object-fit:cover;display:block}
.cj-cat-card-body{flex:1 1 auto;min-width:0}
.cj-cat-card-title{margin:0 0 6px;font-size:1rem;font-weight:800;color:var(--rp-ink,#eaf1ff)}
.cj-cat-card-text{font-size:.9rem;line-height:1.9;color:var(--rp-dim,#c3d2ee);
  overflow-wrap:anywhere}
.cj-cat-card-text :first-child{margin-block-start:0}
.cj-cat-card-text :last-child{margin-block-end:0}
.cj-cat-card-text img{max-width:100%;height:auto}
.cj-cat-card-text a{color:var(--rp-accent,#4f8ae0)}
@media (max-width:768px){
  .cj-cat-card{flex-direction:column}
  .cj-cat-card-img{flex-basis:auto;width:100%}
}
/* ═══════════ /ivos Tab-Liste دسته‌ها ═══════════ */

/* ═══════════ ivos — «دسته‌ها»-Kasten ═══════════════════════════════════════
   ivos — Kundenwunsch «این باکس های صفحه سینماجهت رو برگردون به همون حالت
   قبلیشون (پیوست دو) فقط باکس ویژه هارو تغییر نده»: der «دسته‌ها»-Kasten
   traegt keine eigene Pink-/Glow-Karte mehr, sondern folgt wieder byte-gleich
   der gemeinsamen Optik der uebrigen گزارش-Kaesten (Verlauf, Rahmen, Tafel).
   Der Knopf «مشاهده» bleibt erhalten. */
/* «مشاهده بیشتر» des «ویژه‌ها»-Kastens sitzt weiterhin oben links (in RTL die
   Gegenrichtung der Startkante) -- dieser Kasten bleibt unveraendert. */
.cj-special-wall .pm-reports-bar{flex-direction:row-reverse}
.cj-cats-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  inline-size:100%;box-sizing:border-box;min-height:38px;padding:6px 16px;margin-block-start:2px;
  border-radius:999px;border:1px solid var(--rp-accent);
  background:var(--rp-accent);color:#fff;text-decoration:none;
  font-size:.86rem;font-weight:800;line-height:1.4;
  box-shadow:0 4px 14px color-mix(in srgb,var(--rp-accent) 30%,transparent);
  transition:background .2s ease}
.cj-cats-go span{font-size:1.05em;line-height:1;font-weight:900}
.cj-cats-go:hover,.cj-cats-go:focus-visible{
  background:color-mix(in srgb,var(--rp-accent) 82%,#000);color:#fff}
.cj-cats-go:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.cj-cats-go{transition:none}}
/* ═══════════ /ivos «دسته‌ها»-Karte ═══════════ */

/* ═══════════ ivos_oud_slider — Schieber im سینماعود-Einstieg ═══════════
   Kundenwunsch: NUR der Einstieg auf /cinemaoud ist ein Schieber ueber die
   Inhalte aus «نقد و تحلیل». Die Mechanik (.pm-os-stage/.pm-os-slide/.pm-os-dot)
   aus cr1186 greift ueber dieselben Klassen — hier nur das Geruest: die Folien
   fuellen die Lead-Kachel (grid-Area 1/1 wie sonst), die Punkte sitzen auf dem
   Bild. Scope nur body.theme-cinemaoud — die anderen drei Marken und die
   Kachel «روی پردهٔ امروز» bleiben unberuehrt.
   Nur Layout-/Sichtbarkeitsangaben an den vorhandenen Klassen; Farben kommen
   aus den Marken-Variablen (keine festen Hex-Werte). */
body.theme-cinemaoud .cj-e-lead[data-pm-os]{display:block;padding:0;border:0;border-radius:0;background:none}
body.theme-cinemaoud .cj-e-lead[data-pm-os] .pm-os-stage{grid-area:auto}
body.theme-cinemaoud .cj-e-lead[data-pm-os] .pm-os-slide{grid-area:1/1}
body.theme-cinemaoud .cj-e-lead[data-pm-os] .cj-e-lead-frame{inline-size:100%}
body.theme-cinemaoud .cj-e-lead[data-pm-os] .cj-e-body{padding-block-end:46px}
body.theme-cinemaoud .cj-e-lead[data-pm-os] .pm-os-dots{position:absolute;z-index:3;
  inset-block-end:10px;inset-inline:0;pointer-events:none}
body.theme-cinemaoud .cj-e-lead[data-pm-os] .pm-os-dot{pointer-events:auto}
body.theme-cinemaoud .cj-e-lead[data-pm-os] .pm-os-dot:before{
  border-color:rgba(255,255,255,.75);background:transparent}
body.theme-cinemaoud .cj-e-lead[data-pm-os] .pm-os-dot.is-on:before{
  background:var(--brand-a,#ee2873);border-color:var(--brand-a,#ee2873)}
body.theme-cinemaoud .cj-e-lead[data-pm-os] .pm-os-dot:focus-visible{
  outline-color:var(--brand-a,#ee2873)}
@media (prefers-reduced-motion:reduce){
  body.theme-cinemaoud .cj-e-lead[data-pm-os] .pm-os-slide{transition:none}}
/* ═══════════ /ivos_oud_slider ═══════════ */
/* ═══════════ roter Kasten im Kundenbild: die Poster-Karte ist ein Link ═════
   Der Anker umhuellt die GANZE Karte (direktes Kind der Schiene): er erbt deren
   Raster-/Snap-Verhalten und zeigt Zeiger, Hover (abdunkeln + unterstrichen)
   und Tastaturfokus. Nur auf der سینماجهت-Seite gesetzt. */
.pm-wall-rail>.pm-poster-wrap{scroll-snap-align:start;min-width:0;display:block;
  border-radius:16px;color:inherit;text-decoration:none;cursor:pointer}
.pm-poster-wrap>.pm-poster{margin:0}
.pm-poster-wrap:hover .pm-poster>img,.pm-poster-wrap:hover .pm-poster-plate{filter:brightness(.8)}
.pm-poster-wrap:hover figcaption b{text-decoration:underline;text-underline-offset:3px}
.pm-poster-wrap:focus-visible{outline:2px solid var(--rp-accent,#4f8ae0);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.pm-poster-wrap:hover .pm-poster>img,.pm-poster-wrap:hover .pm-poster-plate{filter:brightness(.9)}}
/* ═══════════ /Poster-Karte als Link ═══════════ */

/* ═══════════ ivos — سینماعود Spotlight-Streifen (oud-spot) ════════════════
   Das Markup steht in portal.php (nur /cinemaoud): dunkler Neon-Rahmen mit
   Quer-Karten (Cover + Kategorie-Chip + Titel/Datum als Verlauf), seitlichen
   Rundpfeilen und Punkte-Pille. Die Mechanik (pm-carousel / pm-cnav /
   pm-wall-dots) kommt unveraendert aus site.js -- hier steht nur die fehlende
   Optik und das Raster. Eigenstaendige Klassen, darum am Dateiende mit eigenen
   @media (mobil-zuerst): es gibt nichts zu ueberschreiben (FE-MEDIA-EOF). */
.oud-spot{--os-gap:clamp(8px,1vw,15px);margin-block:clamp(22px,3vw,40px)}
.oud-spot-frame{position:relative;display:grid;gap:14px;
  grid-template-columns:minmax(0,1fr);grid-template-areas:"rail" "dots";min-width:0;
  padding:clamp(14px,2vw,26px);border-radius:20px;
  background:
    radial-gradient(120% 140% at 85% 0%,color-mix(in srgb,var(--brand-a,#ee2873) 22%,transparent),transparent 60%),
    linear-gradient(160deg,#141019 0%,#0a070d 100%);
  border:1px solid color-mix(in srgb,var(--brand-a,#ee2873) 45%,transparent);
  box-shadow:0 16px 38px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.03)}
/* Schiene: Quer-Karten statt der 100%-Spalte, die .pm-carousel vorgibt. */
.oud-spot-rail{grid-area:rail;gap:var(--os-gap);
  grid-auto-columns:calc((100% - var(--os-gap))/1.15)}
@media(min-width:620px){.oud-spot-rail{grid-auto-columns:calc((100% - var(--os-gap))/2)}}
@media(min-width:980px){.oud-spot-rail{grid-auto-columns:calc((100% - 2*var(--os-gap))/3)}}
/* Karte: randlos-dunkel, Titel als Verlauf ueber dem Cover (wie .pm-wall-rail). */
.oud-spot-card{scroll-snap-align:start;min-width:0;display:block;
  color:inherit;text-decoration:none;border-radius:16px}
.oud-spot-media{position:relative;display:block;overflow:hidden;border-radius:16px;aspect-ratio:16/10;
  border:1px solid color-mix(in srgb,var(--brand-a,#ee2873) 38%,transparent);
  background:color-mix(in srgb,#fff 6%,transparent);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.oud-spot-media>img{width:100%;height:100%;object-fit:cover;display:block}
.oud-spot-media .pm-poster-plate{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:16px}
.oud-spot-chip{position:absolute;inset-block-start:10px;inset-inline-end:10px;z-index:2;
  padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:800;color:#fff;
  background:color-mix(in srgb,var(--brand-a,#ee2873) 85%,#000);box-shadow:0 2px 8px rgba(0,0,0,.35)}
.oud-spot-cap{position:absolute;inset-inline:0;inset-block-end:0;z-index:1;
  display:flex;flex-direction:column;gap:3px;padding:32px 13px 12px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.45) 55%,transparent)}
.oud-spot-cap b{font-size:.95rem;line-height:1.6;font-weight:700;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.oud-spot-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.74rem;color:rgba(255,255,255,.82)}
.oud-spot-card:hover .oud-spot-media>img,.oud-spot-card:hover .pm-poster-plate{filter:brightness(.82)}
.oud-spot-card:hover .oud-spot-cap b{text-decoration:underline;text-underline-offset:3px}
.oud-spot-card:focus-visible{outline:2px solid var(--brand-a,#ee2873);outline-offset:3px}
/* Rundpfeile ueber den Raendern der Schiene, mittig (RTL: prev rechts, next links). */
.oud-spot-frame>.pm-cnav{grid-area:rail;align-self:center;z-index:3;margin-inline:4px;
  border-radius:50%;color:#fff;
  border-color:color-mix(in srgb,var(--brand-a,#ee2873) 55%,transparent);
  background:color-mix(in srgb,#0a070d 78%,transparent)}
.oud-spot-frame>.pm-cnav[data-pmc="prev"]{justify-self:start}
.oud-spot-frame>.pm-cnav[data-pmc="next"]{justify-self:end}
.oud-spot-frame>.pm-cnav:hover:not(:disabled),
.oud-spot-frame>.pm-cnav:focus-visible{background:color-mix(in srgb,var(--brand-a,#ee2873) 32%,transparent)}
@media (prefers-reduced-motion:reduce){.oud-spot-card:hover .oud-spot-media>img,.oud-spot-card:hover .pm-poster-plate{filter:brightness(.9)}}
/* ═══════════ /ivos oud-spot ═══════════ */

/* ═══════════ ivos cr: «فیلم» genre page (/genre/film) — dark card UI per customer attachment ═══════════
   Scoped to body.genre-film only, so the other archive pages that share list.php stay byte-for-byte. */
body.genre-film .film-toolbar{display:flex;gap:12px;align-items:stretch;margin-block-end:32px}
body.genre-film .film-search{flex:1;display:flex;align-items:center;gap:10px;margin:0;max-width:none;background:#0f2124;border:1px solid rgba(80,227,223,.25);border-radius:16px 6px 16px 6px;padding:4px 16px}
body.genre-film .film-search input{flex:1;min-height:44px;border:none;background:transparent;color:#f2f4f5;border-radius:0;padding:0}
body.genre-film .film-search input::placeholder{color:#8aa0a0}
body.genre-film .film-search input:focus{outline:none}
body.genre-film .film-search button{min-width:34px;display:grid;place-items:center;border:none;background:transparent;color:var(--nav-1);cursor:pointer}
body.genre-film .film-sort{display:flex;align-items:center;gap:8px;margin:0;background:#0f2124;border:1px solid rgba(80,227,223,.25);border-radius:16px 6px 16px 6px;padding:0 14px;color:#f2f4f5;font-weight:700;font-size:.85rem}
body.genre-film .film-sort label{margin:0;white-space:nowrap}
body.genre-film .film-sort select{min-height:50px;border:none;background:transparent;color:#f2f4f5;font:inherit;padding:0 4px;cursor:pointer}
body.genre-film .film-sort select:focus{outline:none}
body.genre-film .film-sort option{color:#1a1420}

body.genre-film .archive-grid .news-card:nth-child(3n+2){transform:none}
body.genre-film .archive-grid .news-card:hover{transform:translateY(-6px)}
body.genre-film .news-card{background:#0f2124;color:#f2f4f5;border:1px solid rgba(255,255,255,.08);border-block-start:7px solid var(--nav-2)}
body.genre-film .news-card .media{background:#0b1416}
body.genre-film .news-card h2 a{color:#f4f6f6}
body.genre-film .news-card p{color:#aeb9b9}
body.genre-film .news-card .cat{color:var(--nav-2)}
body.genre-film .news-card .meta{color:#aeb9b9}
body.genre-film .news-card .meta a{background:var(--nav-2);border-color:var(--nav-2);color:#fff}
body.genre-film .news-card .meta a:hover{background:color-mix(in srgb,var(--nav-2) 82%,#fff)}

@media(max-width:768px){
  body.genre-film .film-toolbar{flex-direction:column}
  body.genre-film .film-sort{justify-content:space-between}
  body.genre-film .film-sort select{flex:1}
}

/* ═══════════ ivos cr: Archiv-Listen (/reports, /notes, /dossiers, …) ═══════════
   Der Kunde: «نحوه نمایش آیتم هایش شبیه به پیوست یک بخش فیلم ها باشه» —
   Listeneinträge sollen aussehen wie die Karten auf /genre/film (dunkles
   Textfeld, pinke Kategorie, gefüllter pinker Rundpfeil). Es werden nur die
   Karten gestylt; Überschriften, Suche und Sortierung bleiben unverändert. */
body[class*="theme-"] .film-list .news-card{background:#0f2124;color:#f2f4f5;border:1px solid rgba(255,255,255,.08);border-block-start:7px solid var(--nav-2)}
body[class*="theme-"] .film-list .news-card .media{background:#0b1416}
body[class*="theme-"] .film-list .news-card h2 a{color:#f4f6f6}
body[class*="theme-"] .film-list .news-card p{color:#aeb9b9}
body[class*="theme-"] .film-list .news-card .cat{color:var(--nav-2)}
body[class*="theme-"] .film-list .news-card .meta{color:#aeb9b9}
body[class*="theme-"] .film-list .news-card .meta a{background:var(--nav-2);border-color:var(--nav-2);color:#fff}
body[class*="theme-"] .film-list .news-card .meta a:hover{background:color-mix(in srgb,var(--nav-2) 82%,#fff)}
body[class*="theme-"] .film-list .news-card:nth-child(3n+2){transform:none}
body[class*="theme-"] .film-list .news-card:hover{transform:translateY(-6px)}

/* ═══════════ ivos — Film-Detailseite nach dem zweiten Kundenbild ═══════════
   Breadcrumb + Titel + Kurztext + Metadaten neben dem breiten Filmbild, darunter
   die Zusammenfassung, ein Kartenkasten mit Zungen und die drei verwandten
   Beitraege. Nur body.film-detail, alle anderen Seiten bleiben unveraendert. */
body.film-detail .fd-page{padding-block:clamp(24px,4vw,48px) clamp(64px,8vw,110px)}
body.film-detail .fd-shell{width:min(1180px,calc(100% - 40px))}
body.film-detail .fd-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:clamp(24px,4vw,54px);align-items:center}
body.film-detail .fd-hero-copy{min-width:0}
body.film-detail .fd-hero .breadcrumbs{max-width:none;margin:0 0 16px;justify-content:flex-start;font-size:.78rem}
body.film-detail .fd-type{display:inline-flex;align-items:center;padding:3px 15px;border-radius:999px;border:1px solid color-mix(in srgb,var(--nav-1) 66%,transparent);color:var(--nav-1);font-size:.78rem;font-weight:800;line-height:1.9}
body.film-detail .fd-hero h1{margin:14px 0 16px;color:var(--nav-1);font-size:clamp(2.35rem,5vw,4.35rem);line-height:1.22;text-shadow:var(--title-shadow)}
body.film-detail .fd-synopsis{max-width:52ch;margin:0;color:color-mix(in srgb,var(--page-text) 76%,transparent);font-size:clamp(.95rem,1.2vw,1.05rem);line-height:2.05}
body.film-detail .fd-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 22px;margin:26px 0 0;padding:18px 20px;border-radius:20px 7px;border:1px solid color-mix(in srgb,var(--page-text) 15%,transparent);background:linear-gradient(145deg,color-mix(in srgb,var(--page-text) 8%,transparent),color-mix(in srgb,var(--page-text) 3%,transparent))}
body.film-detail .fd-meta>div{min-width:0}
body.film-detail .fd-meta dt{display:flex;align-items:center;gap:7px;margin:0 0 5px;color:color-mix(in srgb,var(--page-text) 88%,transparent);font-size:.9rem;font-weight:800}
body.film-detail .fd-meta dt svg{width:17px;height:17px;flex:0 0 17px;color:color-mix(in srgb,var(--nav-1) 88%,var(--page-text))}
body.film-detail .fd-meta dd{margin:0;color:var(--page-text);font-size:1.08rem;font-weight:800;line-height:1.8;overflow-wrap:anywhere}
body.film-detail .fd-status{display:inline-flex;align-items:center;gap:7px}
body.film-detail .fd-status:before{content:"";width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.16)}
body.film-detail .fd-hero-media{position:relative;margin:0;overflow:hidden;aspect-ratio:16/10;border-radius:30px;border:1px solid color-mix(in srgb,var(--page-text) 16%,transparent);background:#0a1113;box-shadow:0 24px 58px rgba(0,0,0,.45)}
body.film-detail .fd-hero-media img{width:100%;height:100%;object-fit:cover}
body.film-detail .fd-hero-media:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.34),transparent 48%);pointer-events:none}

body.film-detail .fd-summary{position:relative;overflow:hidden;margin-block-start:clamp(30px,5vw,58px);padding:clamp(26px,4vw,48px);border-radius:28px 8px;border:1px solid color-mix(in srgb,var(--nav-1) 24%,transparent);background:radial-gradient(120% 150% at 12% 50%,color-mix(in srgb,var(--nav-1) 14%,transparent),transparent 54%),linear-gradient(140deg,#0d1d20,#0d0e10 68%)}
body.film-detail .fd-summary:after{content:"";position:absolute;inset-block:24px;inset-inline-start:0;width:3px;border-radius:3px;background:linear-gradient(to bottom,var(--nav-2),transparent)}
body.film-detail .fd-reel{position:absolute;inset-inline-end:2%;inset-block-start:50%;width:min(270px,32%);height:auto;transform:translateY(-50%);color:var(--nav-1);opacity:.09;pointer-events:none}
body.film-detail .fd-summary-body{position:relative;z-index:1;max-width:86ch}
body.film-detail .fd-summary h2{margin:0 0 22px;font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.5;color:var(--page-text)}
body.film-detail .fd-eyebrow{display:inline-flex;align-items:center;gap:10px}
body.film-detail .fd-eyebrow:before{content:"";width:28px;height:3px;border-radius:3px;background:var(--nav-2)}
body.film-detail .fd-quote{margin:0 0 18px;color:var(--page-text);font-size:clamp(1.2rem,2.2vw,1.85rem);font-weight:800;line-height:1.85}
body.film-detail .fd-summary-text{margin:0;color:color-mix(in srgb,var(--page-text) 74%,transparent);font-size:clamp(.94rem,1.15vw,1.02rem);line-height:2.15}

body.film-detail .fd-details{margin-block-start:clamp(22px,3.5vw,38px);padding:clamp(18px,3vw,30px);border-radius:26px 8px;border:1px solid color-mix(in srgb,var(--page-text) 14%,transparent);background:color-mix(in srgb,var(--page-text) 4.5%,transparent)}
body.film-detail .fd-tabs{display:flex;gap:clamp(16px,2.8vw,38px);overflow-x:auto;margin-block-end:clamp(20px,3vw,32px);border-block-end:1px solid color-mix(in srgb,var(--page-text) 13%,transparent);scrollbar-width:none}
body.film-detail .fd-tabs::-webkit-scrollbar{display:none}
body.film-detail .fd-tabs button{position:relative;flex:0 0 auto;padding:0 0 14px;border:0;background:none;color:color-mix(in srgb,var(--page-text) 56%,transparent);font:inherit;font-size:.95rem;font-weight:800;cursor:pointer;white-space:nowrap;transition:color .2s}
body.film-detail .fd-tabs button:after{content:"";position:absolute;inset-inline:0;inset-block-end:-1px;height:2px;border-radius:2px;background:transparent}
body.film-detail .fd-tabs button:hover,body.film-detail .fd-tabs button:focus-visible{color:var(--page-text)}
body.film-detail .fd-tabs button.is-active{color:var(--nav-1)}
body.film-detail .fd-tabs button.is-active:after{background:var(--nav-1)}
body.film-detail .fd-panel[hidden]{display:none!important}
body.film-detail .fd-panel-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:clamp(22px,4vw,48px);align-items:center}
body.film-detail .fd-panel-copy{min-width:0}
body.film-detail .fd-panel-copy h2{margin:0 0 14px;color:var(--page-text);font-size:clamp(1.45rem,2.4vw,2rem)}
body.film-detail .fd-panel-copy p{margin:0 0 18px;color:color-mix(in srgb,var(--page-text) 76%,transparent);font-size:.98rem;line-height:2.15}
body.film-detail .fd-panel-media{margin:0;overflow:hidden;aspect-ratio:16/11;border-radius:20px 7px;background:#0a1113}
body.film-detail .fd-panel-media img{width:100%;height:100%;object-fit:cover}
body.film-detail .fd-specs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}
body.film-detail .fd-specs>div{padding:13px 16px;border-radius:14px 5px;border:1px solid color-mix(in srgb,var(--page-text) 12%,transparent);background:color-mix(in srgb,var(--page-text) 4%,transparent)}
body.film-detail .fd-specs dt{color:color-mix(in srgb,var(--page-text) 54%,transparent);font-size:.73rem;font-weight:700}
body.film-detail .fd-specs dd{margin:4px 0 0;color:var(--page-text);font-size:.92rem;font-weight:700;overflow-wrap:anywhere}
body.film-detail .fd-spec-link{margin:18px 0 0}
body.film-detail .fd-crew{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:0;padding:0;list-style:none}
body.film-detail .fd-crew li{display:flex;flex-direction:column;gap:5px;padding:18px;border-radius:16px 6px;border:1px solid color-mix(in srgb,var(--nav-1) 26%,transparent);background:color-mix(in srgb,var(--nav-1) 8%,transparent)}
body.film-detail .fd-crew span{color:color-mix(in srgb,var(--page-text) 56%,transparent);font-size:.74rem;font-weight:700}
body.film-detail .fd-crew strong{color:var(--page-text);font-size:1.05rem}
body.film-detail .fd-crew-img{width:72px;height:72px;object-fit:cover;border-radius:50%;align-self:center;margin-block-end:4px}
body.film-detail .fd-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
body.film-detail .fd-gallery figure{margin:0;overflow:hidden;aspect-ratio:16/10;border-radius:18px 6px;background:#0a1113}
body.film-detail .fd-gallery img{width:100%;height:100%;object-fit:cover}
body.film-detail .fd-link-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
body.film-detail .fd-link-list a{display:flex;flex-direction:column;gap:4px;padding:14px 18px;border-radius:14px 5px;border:1px solid color-mix(in srgb,var(--page-text) 11%,transparent);background:color-mix(in srgb,var(--page-text) 3.5%,transparent);transition:background .2s,border-color .2s}
body.film-detail .fd-link-list a:hover{background:color-mix(in srgb,var(--nav-1) 10%,transparent);border-color:color-mix(in srgb,var(--nav-1) 40%,transparent)}
body.film-detail .fd-link-cat{color:var(--nav-2);font-size:.72rem;font-weight:800}
body.film-detail .fd-link-list strong{color:var(--page-text);font-size:1rem;line-height:1.75}
body.film-detail .fd-link-list small{color:color-mix(in srgb,var(--page-text) 62%,transparent);font-size:.82rem;line-height:1.8}
body.film-detail .fd-empty{padding:clamp(24px,4vw,44px);text-align:center;border-radius:18px 6px;border:1px dashed color-mix(in srgb,var(--page-text) 22%,transparent)}
body.film-detail .fd-empty>span{color:var(--nav-2);font-size:.76rem;font-weight:800}
body.film-detail .fd-empty h3{margin:6px 0 16px;color:var(--page-text);font-size:1.1rem;line-height:1.8}

body.film-detail .fd-related{margin-block-start:clamp(36px,6vw,70px)}
body.film-detail .fd-related-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-block-end:22px}
body.film-detail .fd-related-head h2{margin:0;color:var(--page-text);font-size:clamp(1.55rem,3vw,2.25rem)}
body.film-detail .fd-all{display:inline-flex;align-items:center;gap:8px;padding:8px 17px;border-radius:999px;border:1px solid color-mix(in srgb,var(--nav-1) 46%,transparent);background:color-mix(in srgb,var(--nav-1) 8%,transparent);color:var(--nav-1);font-size:.88rem;font-weight:800;transition:background .2s}
body.film-detail .fd-all:hover,body.film-detail .fd-all:focus-visible{background:color-mix(in srgb,var(--nav-1) 18%,transparent)}
body.film-detail .fd-all svg{width:18px;height:18px;transform:rotate(180deg)}
body.film-detail .fd-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,24px);align-items:stretch}
body.film-detail .fd-related .news-card{border:1px solid rgba(255,255,255,.08);border-block-start:7px solid var(--nav-2);border-radius:20px 7px;background:#0f2124;color:#f2f4f5;transform:none;box-shadow:0 16px 34px rgba(0,0,0,.28)}
body.film-detail .fd-related .news-card:hover{transform:translateY(-5px)}
body.film-detail .fd-related .news-card .media{aspect-ratio:16/10;background:#0b1416}
body.film-detail .fd-related .news-card .card-body{padding:18px 20px 20px;background:#0f2124}
body.film-detail .fd-related .news-card .cat{color:var(--nav-2)}
body.film-detail .fd-related .news-card h3{margin:6px 0 8px;font-size:1.05rem;line-height:1.7}
body.film-detail .fd-related .news-card h3 a{color:#f4f6f6}
body.film-detail .fd-related .news-card p{color:#aeb9b9;font-size:.86rem;line-height:1.85}
body.film-detail .fd-related .news-card .meta{color:#aeb9b9;margin-block-start:14px}
body.film-detail .fd-related .news-card .meta a{background:var(--nav-2);border-color:var(--nav-2);color:#fff;box-shadow:0 5px 14px rgba(0,0,0,.18)}
body.film-detail .fd-related .news-card .meta a:hover{background:color-mix(in srgb,var(--nav-2) 82%,#fff);border-color:color-mix(in srgb,var(--nav-2) 82%,#fff);color:#fff}

@media(max-width:900px){
  body.film-detail .fd-hero{grid-template-columns:1fr}
  body.film-detail .fd-hero-media{grid-row:2}
  body.film-detail .fd-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.film-detail .fd-panel-grid{grid-template-columns:1fr}
  body.film-detail .fd-summary-body{max-width:none}
  body.film-detail .fd-reel{width:44%;opacity:.055}
  body.film-detail .fd-related-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  body.film-detail .fd-shell{width:min(100% - 32px,1180px)}
  body.film-detail .fd-hero-media{aspect-ratio:4/3;border-radius:22px}
  body.film-detail .fd-meta{padding:16px;gap:14px 16px}
  body.film-detail .fd-summary{padding:22px 20px;border-radius:20px 7px}
  body.film-detail .fd-details{padding:16px;border-radius:20px 7px}
  body.film-detail .fd-specs{grid-template-columns:1fr}
  body.film-detail .fd-gallery{grid-template-columns:1fr}
  body.film-detail .fd-related-head{align-items:flex-start}
}

/* =====================================================================
   Kundenwunsch 2026-10-25 — «هنگام هاور روی هر آیتم یک انیمیشن زیبا»
   Eine ruhige, einheitliche Hover-Sprache fuer alle Karten/Items der
   Portalseiten: die Karte reagiert, das Bild atmet, Chip/Titel ziehen
   minimal nach. Bewusst NUR opacity/transform/filter/box-shadow --
   kein Layout-Shift, keine Farbe aendert ihre Bedeutung.
   Poster in der Schiene werden NICHT angehoben: .pm-wall-rail ist ein
   Scroll-Container (overflow) und wuerde die Oberkante abschneiden.
   Dort uebernehmen Zoom, Ring und Lichtstreifen die Bewegung.
   Alles nur fuer echte Zeigegeraete; reduced-motion schaltet es ab.
   ===================================================================== */
@media (hover:hover) and (pointer:fine){

  /* ---------- Poster-Karten (.pm-poster-wrap) ---------- */
  .pm-poster-wrap{transition:transform .4s cubic-bezier(.22,.61,.36,1)}
  .pm-poster-wrap .pm-poster{transition:box-shadow .4s ease}
  .pm-poster-wrap .pm-poster>img,
  .pm-poster-wrap .pm-poster .pm-poster-plate{
    transition:transform .6s cubic-bezier(.22,.61,.36,1),filter .4s ease}
  .pm-poster-wrap:is(:hover,:focus-visible) .pm-poster>img,
  .pm-poster-wrap:is(:hover,:focus-visible) .pm-poster .pm-poster-plate,
  .pm-poster-wall>.pm-poster-wrap:is(:hover,:focus-visible) .pm-poster>img,
  .pm-poster-wall>.pm-poster-wrap:is(:hover,:focus-visible) .pm-poster .pm-poster-plate{
    filter:brightness(1.07) saturate(1.06)}
  .pm-poster-wrap:is(:hover,:focus-visible) .pm-poster{
    box-shadow:0 20px 40px rgba(0,0,0,.5),
      0 0 24px color-mix(in srgb,var(--rp-accent,var(--brand-a,#4f8ae0)) 32%,transparent)}
  /* Im Raster (nicht in der Scroll-Schiene) darf die Karte anheben. */
  .pm-poster-wall>.pm-poster-wrap:is(:hover,:focus-visible){transform:translateY(-5px)}

  /* In der Schiene: Bild-Zoom (von der Figur beschnitten), Ring + Lichtstreifen. */
  .pm-wall-rail .pm-poster-wrap:is(:hover,:focus-visible) .pm-poster>img,
  .pm-wall-rail .pm-poster-wrap:is(:hover,:focus-visible) .pm-poster .pm-poster-plate,
  .pm-wall-rail .pm-poster:is(:hover,:focus-visible)>img,
  .pm-wall-rail .pm-poster:is(:hover,:focus-visible) .pm-poster-plate{transform:scale(1.055)}
  .pm-wall-rail .pm-poster::before{
    content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:16px;
    opacity:0;transition:opacity .35s ease;
    box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rp-accent,var(--brand-a,#4f8ae0)) 70%,#fff 30%),
      inset 0 0 30px color-mix(in srgb,var(--rp-accent,var(--brand-a,#4f8ae0)) 26%,transparent)}
  .pm-wall-rail .pm-poster::after{
    content:"";position:absolute;inset-block:-20%;inset-inline:-60%;z-index:0;pointer-events:none;
    opacity:0;transform:translateX(-70%);
    background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);
    transition:transform .85s cubic-bezier(.22,.61,.36,1),opacity .25s ease}
  .pm-poster-wrap:is(:hover,:focus-visible) .pm-poster::before,
  .pm-wall-rail .pm-poster:is(:hover,:focus-visible)::before{opacity:1}
  .pm-poster-wrap:is(:hover,:focus-visible) .pm-poster::after,
  .pm-wall-rail .pm-poster:is(:hover,:focus-visible)::after{opacity:1;transform:translateX(70%)}
  /* Chip hebt sich mit an. */
  .pm-poster-wrap .pm-reports-chip{transition:transform .35s ease,box-shadow .35s ease,filter .35s ease}
  .pm-poster-wrap:is(:hover,:focus-visible) .pm-reports-chip{
    transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 6px 16px rgba(0,0,0,.5)}
  /* Titel: Unterstrich faehrt statt zu springen. */
  .pm-poster-wrap figcaption b,
  .pm-poster-wall>.pm-poster-wrap figcaption b{
    text-decoration:none;background-image:linear-gradient(currentColor,currentColor);
    background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
    transition:background-size .4s ease;
    -webkit-box-decoration-break:clone;box-decoration-break:clone}
  .pm-poster-wrap:is(:hover,:focus-visible) figcaption b,
  .pm-poster-wall>.pm-poster-wrap:is(:hover,:focus-visible) figcaption b,
  .pm-wall-rail .pm-poster:is(:hover,:focus-visible) figcaption b{
    text-decoration:none;background-size:100% 1px}

  /* ---------- Nachrichten-Liste ---------- */
  .pm-news-list a{transition:background .25s ease,transform .3s ease,box-shadow .3s ease}
  .pm-news-list a:is(:hover,:focus-visible){
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(0,0,0,.3),inset 0 0 0 1px color-mix(in srgb,var(--rp-accent,var(--brand-a,#4f8ae0)) 42%,transparent)}
  .pm-news-thumb img{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
  .pm-news-list a:is(:hover,:focus-visible) .pm-news-thumb img{transform:scale(1.08)}
  .pm-news-list a:is(:hover,:focus-visible) .pm-news-cat{color:var(--rp-accent,var(--brand-a,currentColor))}

  /* ---------- Einstiegs-Karten (.cj-e-card) ---------- */
  .cj-e-hero-img,.cj-e-thumb img{transition:transform .7s cubic-bezier(.22,.61,.36,1),filter .4s ease}
  .cj-e-card:is(:hover,:focus-within) .cj-e-hero-img,
  .cj-e-card:is(:hover,:focus-within) .cj-e-thumb img{transform:scale(1.05);filter:brightness(1.05)}

  /* ---------- Kategorie-Karten ---------- */
  .cj-cat-card{transition:transform .32s ease,box-shadow .32s ease,border-color .32s ease}
  .cj-cat-card:is(:hover,:focus-within){
    transform:translateY(-3px);border-color:color-mix(in srgb,var(--rp-accent,#4f8ae0) 45%,transparent);
    box-shadow:0 12px 26px rgba(0,0,0,.34)}
  .cj-cat-card-img{transition:filter .35s ease}
  .cj-cat-card:hover .cj-cat-card-img{filter:brightness(1.08)}

  /* ---------- سینماعود Spotlight-Karten ---------- */
  .oud-spot-card{transition:transform .38s cubic-bezier(.22,.61,.36,1)}
  .oud-spot-card:hover{transform:translateY(-4px)}
  .oud-spot-media>img,.oud-spot-media .pm-poster-plate{
    transition:transform .65s cubic-bezier(.22,.61,.36,1),filter .4s ease}
  .oud-spot-card:is(:hover,:focus-visible) .oud-spot-media>img,
  .oud-spot-card:is(:hover,:focus-visible) .oud-spot-media .pm-poster-plate{
    transform:scale(1.05);filter:brightness(1.05) saturate(1.05)}
  .oud-spot-chip{transition:transform .35s ease,box-shadow .35s ease}
  .oud-spot-card:is(:hover,:focus-visible) .oud-spot-chip{
    transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.5)}

  /* ---------- «روی پرده»-Poster ---------- */
  .pm-os-poster{transition:filter .35s ease,box-shadow .35s ease,transform .45s cubic-bezier(.22,.61,.36,1)}
  .pm-os-link:is(:hover,:focus-visible) .pm-os-poster{
    filter:brightness(1.07);transform:translateY(-4px);
    box-shadow:0 20px 40px rgba(0,0,0,.5),0 0 24px color-mix(in srgb,var(--brand-b,currentColor) 30%,transparent)}

  /* ---------- Streifen «داستان‌ها» ---------- */
  .pm-story-media img{transition:transform .6s cubic-bezier(.22,.61,.36,1),filter .4s ease}
  .pm-story:is(:hover,:focus-within) .pm-story-media img{transform:scale(1.06);filter:brightness(1.06)}
  .pm-story:is(:hover,:focus-within) h4 a{text-decoration:underline;text-underline-offset:3px}

  /* ---------- Listen-Items ---------- */
  .pm-rank li{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
  .pm-rank li:is(:hover,:focus-within){
    transform:translateX(-4px);
    border-color:color-mix(in srgb,var(--brand-b,currentColor) 55%,transparent);
    box-shadow:0 8px 18px rgba(0,0,0,.35)}
  .pm-list li{transition:transform .28s ease,color .28s ease}
  .pm-list li:is(:hover,:focus-within){transform:translateX(-3px);color:var(--brand-b,currentColor)}

  /* ---------- Soziale Icons ---------- */
  .pm-social-ic{transition:transform .28s ease,color .28s ease,background .28s ease}
  .pm-social-ic:is(:hover,:focus-visible){transform:translateY(-3px) scale(1.06)}
}

@media (prefers-reduced-motion:reduce){
  .pm-poster-wrap,.pm-poster-wrap .pm-poster,.pm-poster-wrap .pm-poster>img,
  .pm-poster-wrap .pm-poster .pm-poster-plate,.pm-poster-wrap .pm-reports-chip,
  .pm-poster-wrap figcaption b,.pm-news-list a,.pm-news-thumb img,
  .cj-e-hero-img,.cj-e-thumb img,.cj-cat-card,.cj-cat-card-img,
  .oud-spot-card,.oud-spot-media>img,.oud-spot-media .pm-poster-plate,.oud-spot-chip,
  .pm-os-poster,.pm-story-media img,.pm-rank li,.pm-list li,.pm-social-ic,
  .pm-wall-rail .pm-poster::before,.pm-wall-rail .pm-poster::after{transition:none}
  .pm-poster-wrap:is(:hover,:focus-visible),
  .pm-poster-wall>.pm-poster-wrap:is(:hover,:focus-visible),
  .pm-poster-wrap:is(:hover,:focus-visible) .pm-poster>img,
  .pm-poster-wrap:is(:hover,:focus-visible) .pm-poster .pm-poster-plate,
  .pm-poster-wrap:is(:hover,:focus-visible) .pm-reports-chip,
  .pm-news-list a:is(:hover,:focus-visible),
  .pm-news-list a:is(:hover,:focus-visible) .pm-news-thumb img,
  .cj-e-card:is(:hover,:focus-within) .cj-e-hero-img,
  .cj-e-card:is(:hover,:focus-within) .cj-e-thumb img,
  .cj-cat-card:is(:hover,:focus-within),.oud-spot-card:hover,
  .oud-spot-card:is(:hover,:focus-visible) .oud-spot-media>img,
  .oud-spot-card:is(:hover,:focus-visible) .oud-spot-media .pm-poster-plate,
  .oud-spot-card:is(:hover,:focus-visible) .oud-spot-chip,
  .pm-os-link:is(:hover,:focus-visible) .pm-os-poster,
  .pm-story:is(:hover,:focus-within) .pm-story-media img,
  .pm-rank li:is(:hover,:focus-within),.pm-list li:is(:hover,:focus-within),
  .pm-social-ic:is(:hover,:focus-visible){transform:none}
  .pm-wall-rail .pm-poster::after{display:none}
}

/* ===== ivos_cr20261025 — «برترین‌های سینماجهت» wie die پوستر فیلم‌ها-Karten =====
   Kundenwunsch: «انیمیشنش شبیه بشه به انیمیشن آیتم های داخل پوستر فیلم ها. قیافه
   هر ایتم هم شبیه تر بشه به آیتم های پوستر فیلم ها.» Also: die drei Karten der
   markierten blauen Box tragen jetzt dieselbe Form wie die Poster in .pm-wall-rail
   — randloses 2:3-Bild, blauer «سینماجهت»-Chip oben (Markup: .pm-os-chip), Titel
   und Regie als Verlauf UEBER dem Bild — und beim Ueberfahren dieselbe Bewegung:
   Bild-Zoom, Innenring, Lichtstreifen, Chip hebt sich, Titel unterstreicht.
   Nur die Dreier-Reihe in .cj-strip (nur سینماجهت); das Karussell der anderen
   Marken und die «روی پرده»-Buehne bleiben unberuehrt. */
body.theme-cinemajahat .cj-strip-grid .pm-os-grid{--rp-accent:#4f8ae0}
body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-link{
  position:relative;display:block;overflow:hidden;border-radius:16px;
  background:linear-gradient(160deg,#182b4d 0%,#101d35 100%);
  box-shadow:0 8px 22px rgba(0,0,0,.32);
  transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s ease}
body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-poster{
  width:100%;max-width:100%;height:auto;max-height:none;aspect-ratio:2/3;
  margin:0;border:0;border-radius:0;box-shadow:none}
body.theme-cinemajahat .cj-strip-grid .pm-os-grid img.pm-os-poster{
  display:block;object-fit:cover}
/* Titel/Regie als Verlauf ueber dem Bild, wie .pm-wall-rail .pm-poster figcaption */
body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-cap{
  position:absolute;inset-inline:0;inset-block-end:0;z-index:1;max-width:none;
  align-items:flex-start;text-align:start;gap:2px;color:#fff;
  padding:38px 12px 12px;
  background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.42) 52%,transparent)}
body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-cap b{
  color:#fff;font-size:.9rem;font-weight:800;line-height:1.65;
  text-decoration:none;background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0 1px;
  transition:background-size .4s ease;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-cap span{
  color:rgba(255,255,255,.82);opacity:1;font-size:.76rem}
body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-cap em{
  color:#9dc0f2;opacity:1;font-size:.72rem;font-weight:800}
body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-chip{
  transition:transform .35s ease,box-shadow .35s ease,filter .35s ease}

@media (hover:hover) and (pointer:fine){
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-link>.pm-os-poster{
    transition:transform .6s cubic-bezier(.22,.61,.36,1),filter .4s ease}
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-link:is(:hover,:focus-visible){
    box-shadow:0 20px 40px rgba(0,0,0,.5),
      0 0 24px color-mix(in srgb,var(--rp-accent,#4f8ae0) 32%,transparent)}
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-link:is(:hover,:focus-visible) .pm-os-poster{
    transform:scale(1.055);filter:brightness(1.07) saturate(1.06)}
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-link::before{
    content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:16px;
    opacity:0;transition:opacity .35s ease;
    box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--rp-accent,#4f8ae0) 70%,#fff 30%),
      inset 0 0 30px color-mix(in srgb,var(--rp-accent,#4f8ae0) 26%,transparent)}
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-link::after{
    content:"";position:absolute;inset-block:-20%;inset-inline:-60%;z-index:0;pointer-events:none;
    opacity:0;transform:translateX(-70%);
    background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);
    transition:transform .85s cubic-bezier(.22,.61,.36,1),opacity .25s ease}
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-link:is(:hover,:focus-visible)::before{opacity:1}
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-link:is(:hover,:focus-visible)::after{
    opacity:1;transform:translateX(70%)}
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-link:is(:hover,:focus-visible) .pm-os-chip{
    transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 6px 16px rgba(0,0,0,.5)}
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-link:is(:hover,:focus-visible) .pm-os-cap b{
    background-size:100% 1px}
}

@media(max-width:620px){
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-chip{
    inset-block-start:7px;inset-inline-start:7px;padding:2px 8px;font-size:.66rem}
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-cap{padding:30px 9px 9px}
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-cap b{font-size:.8rem}
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-cap span{font-size:.7rem}
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-cap em{font-size:.66rem}
}

/* ivos — توضیح کوتاه روی باکس‌های کوچک (tiles 1-7): حداکثر ۲ خط */
.cj-e-tile-x{margin:0;color:rgba(255,255,255,.78);font-size:clamp(.68rem,.8vw,.8rem);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

@media (prefers-reduced-motion:reduce){
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-link,
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-link>.pm-os-poster,
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-chip,
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-cap b,
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-link::before,
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-link::after{transition:none}
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-link:is(:hover,:focus-visible) .pm-os-poster,
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-link:is(:hover,:focus-visible) .pm-os-chip{
    transform:none}
  body.theme-cinemajahat .cj-strip-grid .pm-os-grid .pm-os-link:is(:hover,:focus-visible)::after{display:none}
}

/* ═══════════ ivos_cr20261026 — Lese-Layout nach «پیوست ۱» ═══════════
   Kundenwunsch: «بخش گزارش ها، مقاله و هر چیزی که نوشته طور هست غیر فیلم …
   ui رو شبیه به پیوست 1 کنی.» Also fuer alle Text-Detailseiten (Beitrag,
   گزارش سینماجهت, رویداد, اثر نمایشی, جشنواره): zweispaltiger Hero (Text
   rechts, Bild links), darunter eine weisse, leicht ueberlappende Karte mit
   Inhaltsverzeichnis + Teilen (links) und Fliesstext (rechts). Filme bleiben
   unberuehrt. Farben kommen aus der Marken-Palette: Pink = --nav-2,
   Tuerkis = --nav-1. */
body.reading-page .rd-page{padding-block:clamp(22px,3.5vw,44px) clamp(64px,8vw,110px)}
body.reading-page .rd-shell{width:min(1180px,calc(100% - 48px))}
body.reading-page .rd-hero{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(24px,4vw,54px);align-items:center;padding-block-end:clamp(56px,7vw,92px)}
body.reading-page .rd-hero-copy{min-width:0}
body.reading-page .rd-hero>.rd-hero-copy:only-child{grid-column:1/-1;max-width:820px}
body.reading-page .rd-hero .breadcrumbs{max-width:none;margin:0 0 20px;justify-content:flex-start;font-size:.78rem}
body.reading-page .rd-kicker{display:inline-flex;align-items:center;gap:10px;margin:0;color:var(--nav-2);font-size:.82rem;font-weight:800}
body.reading-page .rd-kicker:before{content:"";width:30px;height:3px;border-radius:3px;background:var(--nav-2)}
body.reading-page .rd-hero h1{margin:12px 0 14px;color:var(--page-text);font-size:clamp(2.2rem,5vw,4rem);line-height:1.22;font-weight:900;text-shadow:var(--title-shadow)}
body.reading-page .rd-sub{margin:0 0 14px;color:var(--nav-1);font-size:clamp(1.02rem,1.8vw,1.35rem);font-weight:700;line-height:1.85;overflow-wrap:break-word}
body.reading-page .rd-intro{margin:0;max-width:56ch;color:color-mix(in srgb,var(--page-text) 82%,transparent);font-size:clamp(.95rem,1.15vw,1.05rem);line-height:2.05;overflow-wrap:break-word}
body.reading-page .rd-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-block-start:24px;color:color-mix(in srgb,var(--page-text) 70%,transparent);font-size:.82rem;font-weight:600}
body.reading-page .rd-meta>span{display:inline-flex;align-items:center;gap:7px}
body.reading-page .rd-meta svg{width:16px;height:16px;color:var(--nav-1);flex:0 0 auto}
body.reading-page .rd-meta .rd-bar{width:1px;height:16px;background:color-mix(in srgb,var(--page-text) 28%,transparent)}
body.reading-page .rd-hero-media{margin:0;overflow:hidden;aspect-ratio:16/11;border-radius:30px;border:1px solid color-mix(in srgb,var(--page-text) 16%,transparent);background:#0a1113;box-shadow:0 24px 58px rgba(0,0,0,.45)}
body.reading-page .rd-hero-media img{width:100%;height:100%;object-fit:cover}

/* die weisse Karte schiebt sich leicht ueber den dunklen Hero */
body.reading-page .rd-panel{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,258px);gap:clamp(26px,4vw,54px);margin-block-start:clamp(-46px,-4vw,-22px);padding:clamp(24px,4vw,52px);border-radius:30px;background:var(--surface,#fff);color:var(--surface-ink,#1a1420);box-shadow:0 30px 70px rgba(0,0,0,.38)}
body.reading-page .rd-body{min-width:0}
body.reading-page .rd-prose{max-width:none;margin:0;font-size:1.06rem;line-height:2.2;color:#2a2330}
body.reading-page .rd-prose>*:first-child{margin-block-start:0}
body.reading-page .rd-prose p{margin:0 0 1.25em}
body.reading-page .rd-prose h2,
body.reading-page .rd-prose h3{margin:1.7em 0 .75em;color:#141018;line-height:1.6;font-weight:900}
body.reading-page .rd-prose h2{display:flex;align-items:center;gap:12px;font-size:clamp(1.35rem,2.2vw,1.8rem)}
body.reading-page .rd-prose h2:before{content:"";flex:0 0 auto;width:30px;height:3px;border-radius:3px;background:var(--nav-2)}
body.reading-page .rd-prose h3{font-size:clamp(1.15rem,1.7vw,1.4rem)}
body.reading-page .rd-prose a{color:#c1125c;text-decoration:underline;text-underline-offset:4px}
body.reading-page .rd-prose ul,
body.reading-page .rd-prose ol{padding-inline-start:1.5em;margin:0 0 1.3em}
body.reading-page .rd-prose li{margin-block-end:.45em}
body.reading-page .rd-prose img{width:auto;max-width:100%;height:auto;margin-block:26px;border-radius:18px}
body.reading-page .rd-prose figure{margin:26px 0}
body.reading-page .rd-prose figcaption{margin-block-start:8px;font-size:.82rem;color:#6b6472}
body.reading-page .rd-prose blockquote{margin:26px 0;padding:4px 18px;border-inline-start:3px solid var(--nav-2);color:#4c4554;font-weight:600}
body.reading-page .rd-prose [id]{scroll-margin-top:110px}
body.reading-page #rd-start{scroll-margin-top:110px}

/* Inhaltsverzeichnis + Teilen */
body.reading-page .rd-aside{align-self:start;position:sticky;top:96px;min-width:0}
body.reading-page .rd-aside-title{display:flex;align-items:center;gap:9px;margin:0 0 14px;font-size:1rem;color:#141018;font-weight:900}
body.reading-page .rd-aside-title svg{width:20px;height:20px;color:var(--nav-2);flex:0 0 auto}
body.reading-page .rd-toc{list-style:none;margin:0;padding:0;display:grid;gap:2px}
body.reading-page .rd-toc:empty{display:none}
body.reading-page .rd-toc a{display:flex;align-items:center;gap:9px;padding:7px 0;color:#5f5866;font-size:.9rem;line-height:1.7;transition:color .2s}
body.reading-page .rd-toc a:before{content:"";flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:transparent}
body.reading-page .rd-toc li.is-sub a{padding-inline-start:15px;font-size:.84rem}
body.reading-page .rd-toc li.is-active>a{color:#141018;font-weight:800}
body.reading-page .rd-toc li.is-active>a:before{background:var(--nav-2)}
body.reading-page .rd-toc a:hover{color:var(--nav-2)}
body.reading-page .rd-share{margin-block-start:22px;padding-block-start:20px;border-block-start:1px solid rgba(20,16,24,.12)}
body.reading-page .rd-share-label{margin:0 0 12px;color:#141018;font-size:.86rem;font-weight:800}
body.reading-page .rd-share-list{display:flex;flex-wrap:wrap;gap:10px}
body.reading-page .rd-share-list a,
body.reading-page .rd-share-list button{width:40px;height:40px;padding:0;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(20,16,24,.18);background:#fff;color:#141018;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
body.reading-page .rd-share-list a:hover,
body.reading-page .rd-share-list a:focus-visible,
body.reading-page .rd-share-list button:hover,
body.reading-page .rd-share-list button:focus-visible{background:var(--nav-2);border-color:var(--nav-2);color:#fff}
body.reading-page .rd-share-list svg{width:18px;height:18px}
body.reading-page .rd-copy-note{min-height:1.2em;margin:10px 0 0;color:#6b6472;font-size:.76rem}
body.reading-page .rd-copy-note:empty{margin:0;min-height:0}

@media(max-width:980px){
  body.reading-page .rd-hero{grid-template-columns:1fr;padding-block-end:clamp(40px,7vw,64px)}
  body.reading-page .rd-hero-media{grid-row:2}
  body.reading-page .rd-panel{grid-template-columns:1fr;margin-block-start:0;padding:clamp(22px,5vw,36px);border-radius:24px}
  body.reading-page .rd-aside{position:static;order:-1;padding-block-end:18px;margin-block-end:6px;border-block-end:1px solid rgba(20,16,24,.12)}
  body.reading-page .rd-share{margin-block-start:16px;padding-block-start:16px}
}
@media(max-width:560px){
  body.reading-page .rd-shell{width:min(100% - 32px,1180px)}
  body.reading-page .rd-hero-media{aspect-ratio:4/3;border-radius:22px}
  body.reading-page .rd-panel{padding:20px;border-radius:20px}
  body.reading-page .rd-prose{font-size:1rem}
  body.reading-page .rd-meta{font-size:.78rem}
}

/* ═══════════ ivos — «گفتگو» und «یادداشت» ══════════════════════════════════
   ivos — Kundenwunsch «این باکس های صفحه سینماجهت رو برگردون به همون حالت
   قبلیشون (پیوست دو) فقط باکس ویژه هارو تغییر نده»: die beiden Kaesten
   «گفتگو» und «یادداشت» tragen keine eigene Magenta-/Tuerkis-Palette mehr,
   sondern folgen wieder der gemeinsamen Optik der uebrigen گزارش-Kaesten
   (dunkler Verlauf, dunkle Tafel mit hellem Rahmen). Die Klassen
   .cj-talk-wall/.cj-note-wall bleiben am Markup, haben hier aber keine
   eigenen Regeln mehr. ════════════════════════════════════════════════════ */
/* ivos — Kundenwunsch «یه رنگ به این باکس هم بده شبیه به یادداشت ولی رنگش متفاوت
   باشه با باکس یادداشت ولی میخوام هماهنگ باشه با بکگراند»: derselbe leuchtende
   Aufbau wie der «یادداشت»-Kasten, aber in Indigo/Violett — der Mischton aus dem
   Tuerkis links und dem Magenta rechts des Seitenhintergrunds. Scope nur
   .cj-special-wall (سینماجهت / cj-special); Aufbau, Raster und Groessen bleiben
   unveraendert, nur die Farben. */
.cj-special-wall.pm-tile{
  --rp-ink:#FFFFFF;
  --rp-dim:#D0D4DE;
  --rp-accent:#50e3df;
  --rp-line:rgba(80,227,223,.4);
  /* ivos — Kundenwunsch «این بوردر این باکس رو بردار»: der leuchtende
     Cyan-Rahmen samt Glow entfaellt; Flaeche, Rundung und Layout bleiben. */
  border:0;
  border-radius:30px;
  background:#1a1b22;
  box-shadow:0 18px 48px -20px rgba(0,0,0,.6);
}
.cj-special-wall .pm-reports-panel{
  padding:clamp(16px,1.6vw,24px);gap:10px;
  border:0;border-radius:28px;
  background:#0e0f15;
}
.cj-special-wall .pm-reports-ic{
  width:52px;height:52px;
  color:#fff;
  background:#181a25;
  border:2px solid color-mix(in srgb,var(--rp-accent) 85%,#fff 15%);
  box-shadow:0 0 18px rgba(80,227,223,.32);
}
.cj-special-wall .pm-reports-slider .pm-reports-panel .pm-wall-count{
  color:#fff;
  border-color:color-mix(in srgb,var(--rp-accent) 80%,#fff 20%);
  background:linear-gradient(180deg,#3AD6D2 0%,#1B9B97 100%);
}
.cj-special-wall .pm-reports-all,
.cj-special-wall .pm-reports-all:hover,
.cj-special-wall .pm-reports-all:focus-visible{
  color:#fff;
  border-color:color-mix(in srgb,var(--rp-accent) 90%,#fff 10%);
  background:linear-gradient(180deg,#3AD6D2 0%,#1B9B97 100%);
}
.cj-special-wall .pm-reports-nav .pm-cnav{
  background:color-mix(in srgb,#0a0b12 80%,transparent);
  border-color:color-mix(in srgb,var(--rp-accent) 55%,transparent);
}
/* ivos — Kundenwunsch «این باکس گفتگو رو رنگ اون بخش قرمزشو شبیه به پیوست دو کن.
   فقط همین باکس تغییر کنه»: ausschliesslich der «گفتگو»-Kasten auf سینماجهت
   (cj-talks) bekommt den blauen Akzent aus dem zweiten Kundenbild — «مشاهده
   بیشتر», der «سینماجهت»-Chip, das runde Icon und die «۱ گفتگو»-Pille haengen
   alle an --rp-accent. Alle anderen Boxen (یادداشت، ویژه‌ها، گزارش‌ها …) bleiben
   unveraendert rosa. */
body.theme-cinemajahat .pm-tile.cj-talk-wall.pm-reports{
  --rp-accent:#3B82F6;
}
/* ivos — Kundenwunsch «این باکس آثار نمایشی دقیقا همرنگ بخش گفتگو بشه»:
   der «آثار نمایشی»-Kasten bekommt denselben blauen Akzent wie «گفتگو». */
body.theme-cinemajahat .pm-tile.cj-works-wall.pm-reports{
  --rp-accent:#3B82F6;
}
/* ivos — Kundenwunsch: باکس «جشنواره‌ها» همرنگ «آثار نمایشی» بشه */
body.theme-cinemajahat .pm-tile.cj-festivals-wall.pm-reports{
  --rp-accent:#3B82F6;
}

/* تیتر (headline) زیر عنوان قاب/باکس، بالای توضیح کوتاه */
.cj-e-hero-h{margin:0;color:rgba(255,255,255,.9);font-size:clamp(.95rem,1.3vw,1.2rem);line-height:1.5;font-weight:600}
.cj-e-tile-h{margin:0;color:rgba(255,255,255,.88);font-size:clamp(.72rem,.88vw,.86rem);line-height:1.5;font-weight:700;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ===== Kundenwunsch 2026-10-31 — Rangfolge im Einstieg =====
   Der تیتر (headline) ist die wichtigste Zeile: deutlich groesser und farblich
   abgesetzt. Die Bezeichnung des Kastens (قاب ویژه، یادداشت سردبیر …) tritt
   zurueck, sobald ein تیتر vorhanden ist; die Klasse .has-headline setzt
   portal.php nur dann. Karten ohne headline behalten ihre bisherige Groesse. */
.cj-e-hero-h{color:#50e3df;font-size:clamp(1.3rem,2vw,2.1rem);line-height:1.35;font-weight:800;
  text-shadow:0 0 20px rgba(80,227,223,.35),0 2px 14px rgba(0,0,0,.85)}
.cj-e-hero.has-headline .cj-e-hero-t{font-family:Vazirmatn,Tahoma,sans-serif;
  font-size:clamp(.84rem,1.05vw,1rem);font-weight:800;line-height:1.6;letter-spacing:.02em;
  color:rgba(255,255,255,.72);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.cj-e-tile-h{color:#50e3df;font-size:clamp(.88rem,1.02vw,1.02rem);line-height:1.45;font-weight:800;
  text-shadow:0 1px 10px rgba(0,0,0,.6)}
.cj-e-tile.has-headline .cj-e-tile-t{font-size:clamp(.66rem,.76vw,.74rem);font-weight:700;
  line-height:1.55;color:rgba(255,255,255,.66)}

/* ivos — excerpt (rd-sub) on cinemajera reading pages: --nav-1 is #14242A (dark)
   but the hero background is #0B1117, making the text invisible. Use page-text instead. */
body.theme-cinemajera.reading-page .rd-sub{color:var(--page-text)}

/* ===== Kundenwunsch 2026-10-31 — «توضیح کوتاه» beim Ueberfahren =====
   Auf jeder Posterkarte der Schienen erscheint beim Ueberfahren (und bei
   Tastaturfokus) der im Admin gepflegte Kurztext als dunkle Glasflaeche ueber
   dem Poster. Ohne Kurztext wird das Element gar nicht ausgegeben (portal.php),
   die Karte bleibt dann unveraendert. Farbe folgt dem Akzent des jeweiligen
   Kastens (--rp-accent), sonst Magenta der Vorlage. */
.pm-poster>.pm-short-x{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  justify-content:flex-end;gap:7px;padding:13px 12px;
  border-radius:inherit;color:#fff;
  background:linear-gradient(to top,rgba(4,8,15,.97) 0%,rgba(4,8,15,.92) 46%,
    rgba(4,8,15,.6) 76%,rgba(4,8,15,0) 100%);
  opacity:0;visibility:hidden;transform:translateY(10px);pointer-events:none;
  transition:opacity .3s ease,transform .3s ease,visibility .3s ease}
.pm-poster-wrap:is(:hover,:focus-visible)>.pm-poster>.pm-short-x,
.pm-poster-wrap:is(:hover,:focus-visible) .pm-poster>.pm-short-x{
  opacity:1;visibility:visible;transform:none}
.pm-poster>.pm-reports-chip{z-index:3}
.pm-short-x-label{align-self:flex-start;display:inline-flex;align-items:center;
  padding:1px 9px;border-radius:999px;font-size:.62rem;font-weight:800;line-height:1.8;
  color:#fff;background:color-mix(in srgb,var(--rp-accent,#FF007A) 88%,#000);
  box-shadow:0 2px 9px rgba(0,0,0,.5)}
.pm-short-x-txt{font-size:.73rem;line-height:1.9;font-weight:500;color:#EDEEF3;
  text-align:right;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
@media (prefers-reduced-motion:reduce){
  .pm-poster>.pm-short-x{transition:none;transform:none}
}

/* ===== Kundenwunsch 2026-10-31 — Titel in den kleinen Kacheln (باکس ۱ bis ۷) =====
   «تیتر ها داخل این باکس های کوچکتر باید تا نصف باکس بیان بعدش برن خط بعد»:
   Titel und تیتر der sieben kleinen Kacheln (sechs im Mosaik + «مصاحبه روز» im
   Streifen) laufen nur noch bis etwa zur Haelfte der Kachel und brechen danach um.
   Die Prozentangabe bezieht sich auf den Innenbereich von .cj-e-body (Kachelbreite
   minus Innenabstand), 55% entsprechen deshalb ungefaehr der halben Kachelbreite.
   Damit der umgebrochene تیتر nicht nach zwei Zeilen abgeschnitten wird, bekommt
   er hier vier Zeilen Platz. Nur .cj-e-tile ist betroffen -- das grosse قاب ویژه
   (.cj-e-hero) und die drei anderen Marken (.cj-e-lead) bleiben unveraendert. */
.cj-e-tile .cj-e-tile-t,
.cj-e-tile .cj-e-tile-h{max-inline-size:55%}
.cj-e-tile .cj-e-tile-h{-webkit-line-clamp:4}

/* ===== Kundenwunsch 2026-10-31 — Farbtausch in den kleinen Kacheln (باکس ۱ تا ۷) =====
   In den kleinen Kacheln wird die Bezeichnung des Kastens (عنوان) gruen wie bisher
   der تیتر; der تیتر selbst wird weiss. Das grosse «قاب ویژه» (.cj-e-hero) behaelt
   seine bisherigen Farben unveraendert. */
body.theme-cinemajahat .cj-e-tile .cj-e-tile-t,
body.theme-cinemajahat .cj-e-tile.has-headline .cj-e-tile-t{
  color:#50e3df;text-shadow:0 1px 10px rgba(0,0,0,.55)}
body.theme-cinemajahat .cj-e-tile .cj-e-tile-h{
  color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6)}

/* ===== زیرتیتر — زیر تیتر و بالای متن خلاصه =====
   Der im Admin neue «زیرتیتر» steht direkt unter dem تیتر (bzw. unter dem
   Kastennamen, wenn kein تیتر gesetzt ist) und ueber dem Kurztext. Er ist
   etwas kleiner und ruhiger als der تیتر, aber kraeftiger als der Kurztext. */
.cj-e-hero-s{margin:0;color:rgba(255,255,255,.94);
  font-size:clamp(.92rem,1.15vw,1.08rem);line-height:1.75;font-weight:600;
  text-shadow:0 1px 10px rgba(0,0,0,.7)}
.cj-e-tile-s{margin:0;color:rgba(255,255,255,.9);
  font-size:clamp(.7rem,.82vw,.82rem);line-height:1.65;font-weight:600;
  text-shadow:0 1px 8px rgba(0,0,0,.6);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ═══════════════════════ ivos — سینماجرا hero slider ═══════════════════════ */
.cj-jera-hero{display:block;position:relative}
.cj-jera-frame{position:relative;overflow:hidden}
.cj-jera-stage{display:grid}
.cj-jera-slide{grid-area:1/1;opacity:0;visibility:hidden;
  transition:opacity .55s ease,visibility .55s ease}
.cj-jera-slide.is-on{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.cj-jera-slide{transition:none}}

body.theme-cinemajera .cj-jera-hero .cj-e-lead-frame{
  border-radius:0;align-items:center;justify-content:flex-start}
body.theme-cinemajera .cj-jera-hero .cj-e-veil{
  background:linear-gradient(to left,rgba(5,4,10,.92) 0%,rgba(5,4,10,.52) 52%,rgba(5,4,10,.1) 90%)}
body.theme-cinemajera .cj-jera-hero .cj-e-body{
  inline-size:min(420px,44%);padding:clamp(18px,2.5vw,36px);gap:12px}

.cj-jera-arr{
  position:absolute;top:50%;transform:translateY(-50%);z-index:4;
  width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(0,0,0,.52);color:#ccc;display:grid;place-items:center;
  transition:background .2s,color .2s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cj-jera-arr:hover{background:rgba(0,0,0,.82);color:#fff}
.cj-jera-arr:focus-visible{outline:2px solid var(--brand-a,#48BEB8);outline-offset:2px}
.cj-jera-arr-prev{inset-inline-end:14px}
.cj-jera-arr-next{inset-inline-start:14px}

.cj-jera-dots{
  position:absolute;z-index:4;
  bottom:clamp(16px,2.5vw,28px);inset-inline-start:clamp(18px,3vw,52px);
  display:flex;gap:7px;align-items:center}
.cj-jera-dot{
  width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.55);
  background:transparent;padding:0;cursor:pointer;
  transition:background .3s,border-color .3s,transform .3s}
.cj-jera-dot.is-on{
  background:var(--brand-b,#B83E6C);border-color:var(--brand-b,#B83E6C);transform:scale(1.25)}
.cj-jera-dot:hover:not(.is-on){border-color:rgba(255,255,255,.9)}
.cj-jera-dot:focus-visible{outline:2px solid var(--brand-b,#B83E6C);outline-offset:2px;border-radius:50%}
@media(prefers-reduced-motion:reduce){.cj-jera-dot{transition:none}}

.cj-jera-strip{
  direction:ltr;display:flex;align-items:center;overflow:hidden;position:relative;
  background:linear-gradient(90deg,#5a0a1e 0%,#2d0a14 28%,#1a0208 50%,#2d0a14 72%,#5a0a1e 100%);
  padding-block:10px}
.cj-jera-strip::before,.cj-jera-strip::after{
  content:"";position:absolute;top:0;bottom:0;width:50px;z-index:0;
  background:repeating-linear-gradient(to bottom,
    rgba(255,255,255,0) 0,rgba(255,255,255,0) 4px,
    rgba(255,255,255,.18) 4px,rgba(255,255,255,.18) 10px,
    rgba(255,255,255,0) 10px,rgba(255,255,255,0) 20px)}
.cj-jera-strip::before{left:0}
.cj-jera-strip::after{right:0}
.cj-jera-sp{
  flex-shrink:0;width:38px;height:38px;border:0;background:transparent;
  color:rgba(255,255,255,.75);cursor:pointer;display:grid;place-items:center;
  position:relative;z-index:2}
.cj-jera-sp:hover{color:#fff}
.cj-jera-sp:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}
.cj-jera-thumbs{
  flex:1;display:flex;gap:10px;overflow-x:auto;
  scrollbar-width:none;padding-inline:4px;justify-content:center;
  position:relative;z-index:1}
.cj-jera-thumbs::-webkit-scrollbar{display:none}
.cj-jera-thumb{
  flex-shrink:0;width:clamp(130px,15vw,195px);aspect-ratio:16/9;
  border-radius:8px;overflow:hidden;border:2px solid transparent;
  background:rgba(255,255,255,.08);cursor:pointer;padding:0;
  transition:border-color .3s,box-shadow .3s}
.cj-jera-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cj-jera-thumb .cj-e-plate{display:block;width:100%;height:100%}
.cj-jera-thumb.is-on{
  border-color:var(--brand-b,#B83E6C);
  box-shadow:0 0 16px 3px rgba(184,62,108,.6)}
.cj-jera-thumb:hover:not(.is-on){border-color:rgba(255,255,255,.35)}
.cj-jera-thumb:focus-visible{outline:2px solid var(--brand-b,#B83E6C);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.cj-jera-thumb{transition:none}}

@media(max-width:768px){
  .cj-jera-arr{width:36px;height:36px}
  .cj-jera-arr-prev{inset-inline-end:8px}
  .cj-jera-arr-next{inset-inline-start:8px}
  .cj-jera-dots{bottom:10px;inset-inline-start:12px;gap:5px}
  .cj-jera-dot{width:10px;height:10px}
  .cj-jera-thumb{width:clamp(100px,28vw,145px)}
  body.theme-cinemajera .cj-jera-hero .cj-e-body{
    inline-size:calc(100% - 32px);padding:clamp(14px,3vw,22px)}
}

/* ===== Kundenwunsch 2026-11-04 — vier Kästen oben auf /cinemajera =====
   Die vier Bereiche (خبر کوتاه / یادداشت کوتاه / گزارش کوتاه / گفت‌وگوی کوتاه)
   stehen jetzt als eigener Block direkt unter dem Hero und über «قاب‌های
   سینماجرا». Der obere Abstand hält sie vom Hero frei; darunter übernimmt
   das Mosaik wie bisher seinen eigenen Abstand zur Überschrift. */
body.theme-cinemajera .cj-jera-walls{
  margin-block-start:clamp(14px,2.4vw,32px);
  padding-block-end:0}
body.theme-cinemajera .cj-jera-walls-grid{
  grid-template-columns:minmax(0,1fr)}
body.theme-cinemajera .cj-jera-walls .cj-jera-wall{
  grid-column:1/-1;grid-row:auto}

/* cr — text block: shift away from right edge so titles are not clipped */
@media(min-width:769px){
  body.theme-cinemajera .cj-jera-hero .cj-e-body{margin-inline-start:clamp(20px,5vw,80px)}
}

/* ===== Kundenwunsch 2026-11-04 — Admin-Option «تم فیروزه‌ای سینماجرا» =====
   Die Option im Admin unter «سینما جرا» speichert cinemajera_teal_theme=1;
   header.php haengt dann die Klasse jera-teal an <body>. Nur die Seiten dieser
   Marke bekommen die Farbwelt des zweiten Kundenbildes: tuerkiser Grund mit
   dunkleren Bogenflaechen, marineblaue Karten, weisse Schrift und tuerkise
   Akzente. Ohne die Option bleibt alles genau wie bisher. */
body.theme-cinemajera.jera-teal{
  --page-bg:#168B86;
  --page-text:#FFFFFF;
  --halo-1:rgba(7,78,84,.55);
  --halo-2:rgba(5,64,72,.42);
  --halo-3:rgba(6,70,78,.50);
  --nav-1:#0E2433;
  --nav-2:#FFFFFF;
  --brand-a:#FFFFFF;
  --brand-b:#0E2433;
  --brand-ink:#FFFFFF;
  --brand-paper:#EAFBF9;
  --title-shadow:none;
  background-color:#168B86;
  background-image:
    radial-gradient(ellipse 78% 108% at 100% 0%,#0A555C 0%,rgba(10,85,92,0) 62%),
    radial-gradient(ellipse 82% 96% at 0% 100%,#084C53 0%,rgba(8,76,83,0) 64%),
    radial-gradient(ellipse 64% 52% at 50% 0%,rgba(255,255,255,.10),rgba(255,255,255,0) 70%);
  background-attachment:fixed;
  color:#fff;
}

/* --- die vier «خبر کوتاه»-Waende: Band bleibt tuerkis, Karten marineblau --- */
body.theme-cinemajera.jera-teal .pm-reports{
  --rp-ink:#FFFFFF;
  --rp-dim:#D6F2F0;
  --rp-accent:#6FE7DE;
  --rp-line:rgba(255,255,255,.38);
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  color:#fff;
}
body.theme-cinemajera.jera-teal .pm-reports-slider .pm-reports-panel{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}
body.theme-cinemajera.jera-teal .pm-reports-ic{
  color:#FFFFFF;
  background:rgba(255,255,255,.10);
  border:1.5px solid rgba(255,255,255,.80);
}
body.theme-cinemajera.jera-teal .pm-reports-slider .pm-reports-panel .pm-wall-title{
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.28);
}
body.theme-cinemajera.jera-teal .pm-reports-desc{color:#fff;opacity:.94;text-shadow:0 1px 6px rgba(0,0,0,.30)}
body.theme-cinemajera.jera-teal .pm-reports-slider .pm-reports-panel .pm-wall-count{
  color:#fff;
  border-color:rgba(255,255,255,.65);
  background:rgba(255,255,255,.14);
}
body.theme-cinemajera.jera-teal .pm-reports-bar{border-block-end-color:rgba(255,255,255,.38)}
body.theme-cinemajera.jera-teal .pm-reports-slider .pm-reports-all{
  color:#fff;
  border-color:rgba(255,255,255,.65);
  background:rgba(255,255,255,.10);
}
body.theme-cinemajera.jera-teal .pm-reports-slider .pm-reports-all:hover,
body.theme-cinemajera.jera-teal .pm-reports-slider .pm-reports-all:focus-visible{
  background:rgba(255,255,255,.22);
}
body.theme-cinemajera.jera-teal .pm-reports-nav .pm-cnav{
  color:#fff;
  border-color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.16);
}
body.theme-cinemajera.jera-teal .pm-reports-nav .pm-cnav:hover:not(:disabled),
body.theme-cinemajera.jera-teal .pm-reports-nav .pm-cnav:focus-visible{
  background:rgba(255,255,255,.30);
}
body.theme-cinemajera.jera-teal .pm-wall-rail .pm-poster{background:#0E2433}
body.theme-cinemajera.jera-teal .pm-reports-chip{background:#6FE7DE;color:#0E2433}
body.theme-cinemajera.jera-teal .pm-reports-slider .pm-wall-dot:before{
  border-color:rgba(255,255,255,.70);
}
body.theme-cinemajera.jera-teal .pm-reports-slider .pm-wall-dot.is-on:before{
  background:#fff;
  border-color:#fff;
}

/* --- Titelspalte der Poster-/پرفروش‌ترین-Waende (nicht die گزارش-Waende) --- */
body.theme-cinemajera.jera-teal .pm-wall-slider .pm-wall-head:not(.pm-reports-panel){
  background:#0E2433;
  box-shadow:0 10px 26px rgba(0,0,0,.28);
}
body.theme-cinemajera.jera-teal .pm-wall-slider .pm-wall-head:not(.pm-reports-panel) .pm-wall-title{
  color:#fff;
}
body.theme-cinemajera.jera-teal .pm-wall-slider .pm-wall-head:not(.pm-reports-panel) .pm-wall-title:after{
  background:#6FE7DE;
  opacity:1;
}
body.theme-cinemajera.jera-teal .pm-wall-slider .pm-wall-head:not(.pm-reports-panel) .pm-wall-count{
  color:#fff;
  border-color:rgba(255,255,255,.50);
  background:rgba(255,255,255,.12);
}

/* --- uebrige Kacheln der Marke (در حال اکران / اخبار / خبرنامه) --- */
body.theme-cinemajera.jera-teal .pm-tile:not(.pm-reports){
  background:#0E2433;
  border-color:rgba(255,255,255,.18);
  color:#fff;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}
body.theme-cinemajera.jera-teal .pm-tile:not(.pm-reports) .pm-tile-title{color:#fff}
body.theme-cinemajera.jera-teal .pm-tile:not(.pm-reports) .pm-tile-title:after{background:#6FE7DE}

/* --- Hero-Streifen und Bedienelemente der Marke --- */
body.theme-cinemajera.jera-teal .cj-jera-strip{
  background:linear-gradient(90deg,#0A4C55 0%,#072F3B 28%,#051F2B 50%,#072F3B 72%,#0A4C55 100%);
}
body.theme-cinemajera.jera-teal .cj-jera-thumb.is-on{
  border-color:#6FE7DE;
  box-shadow:0 0 16px 3px rgba(111,231,222,.55);
}
body.theme-cinemajera.jera-teal .cj-jera-dot.is-on{background:#6FE7DE;border-color:#6FE7DE}
body.theme-cinemajera.jera-teal .cj-jera-dot:focus-visible,
body.theme-cinemajera.jera-teal .cj-jera-thumb:focus-visible{outline-color:#6FE7DE}
body.theme-cinemajera.jera-teal .cj-jera-arr:focus-visible{outline-color:#6FE7DE}
body.theme-cinemajera.jera-teal .cj-e-eyebrow:before{
  background:#6FE7DE;
  box-shadow:0 0 8px rgba(111,231,222,.9);
}