/* Home's film slot (2.3.9): unframed, shaped by the media, with one thin moving header strip. */
.sponsor { position: relative; z-index: 2; box-sizing: border-box; inline-size: 100%; max-inline-size: 1280px; margin-inline: auto; padding: 28px 16px 8px; font: 400 16px/1.55 var(--h-font, "TC Vazirmatn", "TC Inter", system-ui, sans-serif); color: #FFFFFF; }
.sponsor[lang="en"], .sponsor[lang="ku"] { font-family: var(--h-font-latin, "TC Inter", system-ui, sans-serif); }
.sponsor[hidden], .sponsor [hidden] { display: none !important; }
.sponsor *, .sponsor *::before, .sponsor *::after { box-sizing: border-box; }
.sponsor :focus-visible { outline: 2px solid #3CD6FF; outline-offset: 3px; }
.sp { position: relative; min-inline-size: 0; }
.sp-media video { cursor: pointer; }
.sp-frame.has-rotation .sp-media { touch-action: pan-y pinch-zoom; }
.sp-frame.has-rotation .sp-media > img { cursor: grab; -webkit-user-drag: none; user-select: none; }
.sp-frame.is-swiping .ad-media { cursor: grabbing; }
.sp-scrim { position: absolute; inset: auto 0 0; block-size: 50%; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.66)); pointer-events: none; transition: opacity .45s; }
.sp-btn { inline-size: 44px; block-size: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #FFFFFF; display: grid; place-items: center; cursor: pointer; }
.sp-btn:hover { background: rgba(255,255,255,.28); }
.sp-btn svg { inline-size: 18px; block-size: 18px; }
.sp-time { font: 400 13px/1.4 var(--h-font-num, "TC Inter", "TC Vazirmatn", system-ui, sans-serif); font-variant-numeric: tabular-nums; color: #FFFFFF; direction: ltr; }
.sp-sound svg path:first-child { fill: currentColor; stroke: none; }
.sp-sound:not(.is-on) .ad-sound-waves, .sp-sound.is-on .ad-sound-off { display: none; }
.sp-sound::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.sp-sound.invite::after { animation: sp-invite 1.5s ease-out 2; }
@keyframes sp-invite { from { box-shadow: 0 0 0 0 rgba(255,255,255,.6); } to { box-shadow: 0 0 0 16px rgba(255,255,255,0); } }
.sp-media.is-playing .i-play, .sp-media:not(.is-playing) .i-pause, .sp-media:not(.is-playing) .sp-btn { display: none; }
.sp-progress { position: absolute; inset: auto 0 0; block-size: 4px; background: rgba(255,255,255,.16); }
.sp-progress i { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 0; background: #F26A10; border-start-end-radius: 2px; border-end-end-radius: 2px; }
.sp-big { position: absolute; inset: 0; margin: auto; inline-size: 80px; block-size: 80px; border-radius: 50%; border: 0; background: #FFFFFF; color: #0B0C0F; display: grid; place-items: center; cursor: pointer; box-shadow: 0 16px 48px -10px rgba(0,0,0,.75); }
.sp-big:hover { transform: scale(1.04); }
.sp-big svg { inline-size: 32px; block-size: 32px; margin-left: 5px; }
.sp-media.is-playing:not(:hover):not(:focus-within):not(.show-ui) .sp-bar { opacity: 0; transform: translateY(6px); }
.sp-media.is-playing:not(:hover):not(:focus-within):not(.show-ui) .sp-scrim { opacity: .3; }
.sp-dot { position: relative; display: grid; place-items: center; flex: none; inline-size: 28px; block-size: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sp-dot::before { content: ""; inline-size: 8px; block-size: 8px; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 1px 4px rgba(0,0,0,.18); transition: background .18s, box-shadow .18s; }
.sp-dot.is-active::before { inline-size: 10px; block-size: 10px; border-color: rgba(255,255,255,.78); background: rgba(255,255,255,.78); box-shadow: inset 0 1px 2px rgba(255,255,255,.8), 0 0 0 3px rgba(255,255,255,.06); }
.sp-dot.is-paused::before { background: rgba(255,255,255,.2); }
.sp-dot:hover::before { border-color: rgba(255,255,255,.8); background: rgba(255,255,255,.45); }
.sp-position { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sp-caption { inline-size: min(100%, calc(min(78vh, 720px) * var(--ad-ratio, .5625))); margin-inline: auto; padding-block-start: 12px; }
.sp-description { margin: 0 0 12px; font-size: 15px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.sp-destination { display: inline-flex; align-items: center; justify-content: center; min-block-size: 44px; padding: 8px 18px; border: 1px solid rgba(255,255,255,.32); border-radius: 8px; background: rgba(255,255,255,.08); color: #FFFFFF; font-size: 14px; font-weight: 600; text-decoration: none; }
.sp-destination:hover { background: rgba(255,255,255,.16); }
.sp-no-motion .sp-sound.invite::after { animation: none; }
.sp-no-motion .sp-big:hover { transform: none; }
/* 2.3.9: TWO thin strips over the media (each at most 44px): the headline piece along the BOTTOM edge, the rest along the TOP edge.
   The word "Ad" is not drawn (owner ruling H39-10, 2026-10-30): .ad-disclosure stays as a visually hidden text node and the frame carries
   the label as its accessible name. The destination icons sit bottom, physical left, 40px circles with 22px icons. The sound key and the
   hover play/time bar sit on the physical right, above the bottom strip. */
.sp-strip { position: absolute; z-index: 2; inset-inline: 0; display: flex; align-items: center; gap: 8px; block-size: 44px; max-block-size: 44px; padding-inline: 8px; }
.sp-top { inset-block-start: 0; background: linear-gradient(180deg, rgba(11,12,15,.72), rgba(11,12,15,0)); }
.sp-bottom { inset-block-end: 4px; background: linear-gradient(0deg, rgba(11,12,15,.72), rgba(11,12,15,0)); }
.sponsor[dir="rtl"] .sp-bottom { flex-direction: row-reverse; }
.sponsor .ad-disclosure { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; font-family: inherit; font-size: 12px; }
.sp-links { display: flex; flex: none; align-items: center; }
.sp-links-corner { position: absolute; z-index: 2; inset-block-end: 8px; inset-inline-start: 8px; }
.sponsor[dir="rtl"] .sp-links-corner { inset-inline-start: auto; inset-inline-end: 8px; }
.sponsor .ad-social-row { display: flex; gap: 6px; }
.sponsor .ad-social { display: grid; place-items: center; inline-size: 40px; block-size: 40px; min-inline-size: 40px; min-block-size: 40px; border-radius: 50%; color: #FFFFFF; background: rgba(11,12,15,.72); }
.sponsor .ad-social svg { inline-size: 22px; block-size: 22px; }
.sp-bar { position: absolute; inset-block-end: 12px; inset-inline-end: 68px; display: flex; align-items: center; gap: 12px; transition: opacity .45s, transform .45s; }
.sp-sound { position: absolute; inset-block-end: 12px; inset-inline-end: 12px; display: grid; place-items: center; inline-size: 44px; block-size: 44px; padding: 0; border-radius: 50%; border: 0; background: #FFFFFF; color: #0B0C0F; cursor: pointer; }
.has-bottom .sp-bar, .has-bottom .sp-sound { inset-block-end: 56px; }
/* the physical right in every language: in RTL the inline start is the right */
.sponsor[dir="rtl"] .sp-sound { inset-inline-end: auto; inset-inline-start: 12px; }
.sponsor[dir="rtl"] .sp-bar { inset-inline-end: auto; inset-inline-start: 68px; }
/* 2.3.9: no frame. The film sits straight on the page's own dark ground, takes the media's own shape (--ad-ratio is the media's
   width / height) up to the content width and min(78vh, 720px) tall, and only its own corners round (8px at most). */
.sp-frame { --sp-cap: min(78vh, 720px); position: relative; inline-size: min(100%, calc(var(--sp-cap) * var(--ad-ratio, .5625))); margin-inline: auto; aspect-ratio: var(--ad-ratio, .5625); border: 0; outline: 0; box-shadow: none; background: transparent; border-radius: 8px; overflow: hidden; }
.sp-media { position: absolute; inset: 0; background: transparent; }
.sp-media .ad-media { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; object-position: var(--fx, 50%) var(--fy, 50%); object-fit: contain; border-radius: 8px; }
.sp-media.fit-cover .ad-media { object-fit: cover; }
.sp-run-wrap { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; }
.sp-run-wrap.is-static { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.sp-run { display: flex; inline-size: max-content; --sp-from: 0px; --sp-to: calc(-1 * var(--sp-g, 0px)); animation: sp-run var(--sp-dur, 20s) linear infinite; will-change: transform; }
/* the copies sit after the first group in reading order, so the line moves toward the start: left in LTR, right in RTL */
.sponsor[dir="rtl"] .sp-run { --sp-from: 0px; --sp-to: var(--sp-g, 0px); }
.sp-run-wrap.is-static .sp-run { animation: none; transform: none; will-change: auto; }
.sp-strip:hover .sp-run, .sp-strip:focus-within .sp-run { animation-play-state: paused; }
@keyframes sp-run { from { transform: translateX(var(--sp-from)); } to { transform: translateX(var(--sp-to)); } }
.sp-group { display: flex; flex: none; align-items: center; }
.sp-pill { display: inline-flex; flex: none; align-items: center; min-block-size: 28px; margin-inline-end: 8px; padding: 2px 14px; border-radius: 999px; background: rgba(255,255,255,.92); color: #0B0C0F; font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; text-decoration: none; cursor: default; }
a.sp-pill { cursor: pointer; }
a.sp-pill:hover { background: #FFFFFF; }
.sp-sound[aria-pressed="true"] { background: #0B0C0F; color: #FFFFFF; }
.sp-sound svg { inline-size: 22px; block-size: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sp-rotation { position: absolute; z-index: 5; inset-inline: 0; inset-block-end: 0; display: flex; align-items: center; justify-content: flex-start; gap: 2px; inline-size: fit-content; max-inline-size: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; margin: 0 auto; padding: 0; border: 0; background: transparent; }
.sp-rotation::-webkit-scrollbar { display: none; }
.sp-rotation .sp-dot:focus-visible { outline-offset: -3px; }
.sp-frame.has-rotation .sp-bottom { inset-block-end: 48px; }
.sp-frame.has-rotation .sp-links-corner { inset-block-end: 52px; }
.sp-frame.has-rotation .sp-bar, .sp-frame.has-rotation .sp-sound { inset-block-end: 56px; }
.sp-frame.has-rotation .has-bottom .sp-bar, .sp-frame.has-rotation .has-bottom .sp-sound { inset-block-end: 100px; }
.sp-no-motion .sp-bar, .sp-no-motion .sp-scrim { transition: none; }
@media (max-width: 759.98px) {
  .sponsor { padding-block: 16px 0; }
  .sp-time { display: none; }
  .sp-big { inline-size: 64px; block-size: 64px; }
  .sp-big svg { inline-size: 26px; block-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-dot::before { transition: none; }
  .sp-bar, .sp-scrim { transition: none; }
  .sp-run { animation: none; }
}
/* hotfix 2.3.6-2: until the feed answers, #sponsor holds the film's own box (home.html's .sp-skel is made of the same
   classes: the same ratio, cap and radius). Quiet on purpose: no motion, no blur, no colour. Without html.kg-halo
   (no script ever ran) the pending slot stays out of the page. */
.sponsor.is-pending { display: none; }
html.kg-halo .sponsor.is-pending { display: block; }
.sp-skel { pointer-events: none; }
/* the admin editor's preview sits on the Home's own dark ground */
.sp-admin-ground { background: #0B0C0F; border-radius: 12px; }
/* 2.3.9 (the owner, 2026-10-30): the words run as ONE unbroken band, never separate pills with gaps between them. The band
   is the strip's run itself; each piece opens with a small dot, so the copies join without a seam. */
.sp-run-wrap { border-radius: 999px; background: rgba(255,255,255,.92); }
.sp-pill { margin-inline-end: 0; padding-inline: 0 16px; gap: 16px; border-radius: 0; background: transparent; }
.sp-pill::before { content: ""; flex: none; inline-size: 5px; block-size: 5px; border-radius: 50%; background: #F26A10; }
a.sp-pill:hover { background: transparent; text-decoration: underline; text-underline-offset: 3px; }