.lk-vod-catalog,
.lk-vod-watch {
  --vod-paper: #f5efe3;
  --vod-surface: #fffaf0;
  --vod-ink: #2d211c;
  --vod-muted: #75665c;
  --vod-line: rgba(79, 50, 38, 0.17);
  --vod-red: #913a2f;
  --vod-red-dark: #64281f;
  --vod-black: #120e0c;

  width: min(
    calc(100% - 28px),
    1380px
  );
  margin: 0 auto 76px;
  padding-top: 28px;
  color: var(--vod-ink);
}

.lk-vod-catalog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: 26px 6px 28px;
  border-bottom: 1px solid var(--vod-line);
}

.lk-vod-eyebrow {
  display: block;
  margin-bottom: 9px;
  color: var(--vod-red);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lk-vod-catalog-head h1,
.lk-vod-library h2,
.lk-vod-more h2 {
  margin: 0;
  color: var(--vod-ink);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
  font-weight: 500;
}

.lk-vod-catalog-head h1 {
  font-size: clamp(35px, 5vw, 62px);
  letter-spacing: -0.045em;
  line-height: 1;
}

.lk-vod-catalog-head p {
  max-width: 680px;
  margin: 14px 0 0;
  color: var(--vod-muted);
  font-size: 16px;
  line-height: 1.65;
}

.lk-vod-catalog-count {
  flex: 0 0 auto;
  text-align: right;
}

.lk-vod-catalog-count strong {
  display: block;
  color: var(--vod-red);
  font-family: Georgia, serif;
  font-size: 42px;
  font-weight: 500;
}

.lk-vod-catalog-count span {
  color: var(--vod-muted);
  font-size: 12px;
}

.lk-vod-filters {
  display: grid;
  grid-template-columns:
    minmax(240px, 1.4fr)
    minmax(180px, 0.8fr)
    minmax(190px, 0.9fr)
    auto
    auto;
  align-items: end;
  gap: 11px;
  margin: 18px 0 22px;
  padding: 17px;
  background: var(--vod-surface);
  border: 1px solid var(--vod-line);
  border-radius: 17px;
  box-shadow:
    0 12px 35px rgba(74, 48, 38, 0.07);
}

.lk-vod-filters label {

  margin-bottom: 6px;

  font-size: 11px;
  font-weight: 800;

  text-transform: uppercase;
}

.lk-vod-filters input,
.lk-vod-filters select {
  width: 100%;

  box-sizing: border-box;
  padding: 10px 12px;

  background: #f8f2e7;


  font: inherit;
}

.lk-vod-filters button,
.lk-vod-filters > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.lk-vod-filters button {


  border: 1px solid var(--vod-red-dark);
  cursor: pointer;
}

.lk-vod-filters > a {


  border: 1px solid var(--vod-line);
}

.lk-vod-featured {
  display: grid;
  grid-template-columns:
    minmax(0, 0.86fr)
    minmax(440px, 1.3fr);
  align-items: stretch;
  overflow: hidden;
  min-height: 330px;
  background:
    radial-gradient(
      circle at 12% 15%,
      rgba(171, 72, 55, 0.2),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #241713,
      #110d0b
    );
  border-radius: 24px;
  box-shadow:
    0 24px 65px rgba(35, 22, 17, 0.24);
}

.lk-vod-featured-copy {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: clamp(30px, 5vw, 58px);
  color: #fffaf0;
}

.lk-vod-featured-copy > span {
  color: #dda696;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.lk-vod-featured-copy h2 {
  max-width: 620px;
  margin: 13px 0 0;
  color: #fffaf0;
  font-family: Georgia, serif;
  font-size: clamp(30px, 4.5vw, 58px);
  font-weight: 500;
  line-height: 1;
}

.lk-vod-featured-copy > p {
  max-width: 620px;
  margin: 18px 0 0;
  color: rgba(255, 250, 240, 0.72);
  line-height: 1.65;
}

.lk-vod-featured-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  color: rgba(255, 250, 240, 0.75);
  font-size: 12px;
}

.lk-vod-featured-meta span {
  padding-left: 9px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}

.lk-vod-featured-copy > a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 25px;
  padding: 12px 18px;
  color: var(--vod-black);
  background: #fffaf0;
  border-radius: 999px;
  font-weight: 900;
  text-decoration: none;
}

.lk-vod-featured-media {

  display: block;


  background: #000;
}

.lk-vod-featured-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      #110d0b 0%,
      transparent 27%,
      transparent 100%
    );
  pointer-events: none;
}

.lk-vod-featured-media video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 330px;
  object-fit: cover;
}

.lk-vod-featured-media > span {
  position: absolute;
  z-index: 3;
  right: 36px;
  bottom: 30px;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  color: #fff;
  background: rgba(145, 58, 47, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
}

.lk-vod-library {
  margin-top: 42px;
}

.lk-vod-library > header,
.lk-vod-more > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.lk-vod-library h2,
.lk-vod-more h2 {
  font-size: clamp(28px, 3.5vw, 43px);
}

.lk-vod-library > header > p {
  max-width: 570px;
  margin: 0;
  color: var(--vod-muted);
  font-size: 13px;
  line-height: 1.55;
  text-align: right;
}

.lk-vod-grid {



}

.lk-vod-card {
  position: relative;
  min-width: 0;


  border: 1px solid var(--vod-line);
  border-radius: 15px;

  transform-origin: center;
  transition:
    transform 190ms ease,
    box-shadow 190ms ease,
    border-color 190ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .lk-vod-card:hover,
  .lk-vod-card:focus-within {
    z-index: 4;
    border-color: rgba(145, 58, 47, 0.46);
    box-shadow:
      0 24px 54px rgba(35, 22, 17, 0.2);
    transform: translateY(-7px) scale(1.035);
  }
}

.lk-vod-card-media {
  position: relative;
  display: block;

  aspect-ratio: 16 / 9;
  background: #0e0a08;
}

.lk-vod-card-media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform 250ms ease;
}

.lk-vod-card.is-previewing
.lk-vod-card-media video {
  transform: scale(1.035);
}

.lk-vod-card-play {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding-left: 3px;
  color: #fff;
  background: rgba(145, 58, 47, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.lk-vod-card.is-previewing
.lk-vod-card-play {
  opacity: 0;
  transform:
    translate(-50%, -50%)
    scale(0.82);
}

.lk-vod-card-preview-label {
  position: absolute;


  padding: 5px 8px;
  color: #fff;

  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0;
  text-transform: uppercase;
  transition: opacity 160ms ease;
}

.lk-vod-card.is-previewing
.lk-vod-card-preview-label {
  opacity: 1;
}

.lk-vod-card-body {
  padding: 15px;
}

.lk-vod-card-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 22px;
}

.lk-vod-card-topics span {
  color: var(--vod-red);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lk-vod-card h3 {
  margin: 8px 0 0;
  font-family: Georgia, serif;
  font-size: 19px;
  line-height: 1.18;
}

.lk-vod-card h3 a {
  color: var(--vod-ink);
  text-decoration: none;
}

.lk-vod-card-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
  color: var(--vod-muted);
  font-size: 11px;
}

.lk-vod-card-meta span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lk-vod-empty {
  grid-column: 1 / -1;
  padding: 56px 24px;
  text-align: center;
  background: var(--vod-surface);
  border: 1px solid var(--vod-line);
  border-radius: 18px;
}

.lk-vod-empty strong {
  color: var(--vod-ink);
  font-family: Georgia, serif;
  font-size: 28px;
}

.lk-vod-empty p {
  color: var(--vod-muted);
}

.lk-vod-empty a {
  color: var(--vod-red);
  font-weight: 800;
}

.lk-vod-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 30px;
}

.lk-vod-pagination a {
  padding: 9px 14px;
  color: var(--vod-ink);
  border: 1px solid var(--vod-line);
  border-radius: 999px;
  text-decoration: none;
}

.lk-vod-watch-breadcrumb {
  display: flex;
  gap: 9px;
  margin-bottom: 14px;
  color: var(--vod-muted);
  font-size: 12px;
}

.lk-vod-watch-breadcrumb a {
  color: var(--vod-red);
  font-weight: 800;
  text-decoration: none;
}

.lk-vod-player-shell {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 7px solid #211713;
  border-radius: 21px;

  outline: none;
}

.lk-vod-player-shell:focus-visible {
  outline: 3px solid var(--vod-red);
  outline-offset: 4px;
}

.lk-vod-player-shell video {
  display: block;



  background: #000;
}

.lk-vod-player-gradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.34),
      transparent 25%,
      transparent 62%,
      rgba(0, 0, 0, 0.86)
    );
  transition: opacity 160ms ease;
}

.lk-vod-player-brand {
  position: absolute;
  top: 22px;
  left: 24px;
  display: flex;
  gap: 6px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.lk-vod-player-brand strong {
  color: #d67161;
}

.lk-vod-player-center {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: clamp(72px, 8vw, 104px);
  height: clamp(72px, 8vw, 104px);
  padding-left: 7px;
  color: #fff;
  background: rgba(145, 58, 47, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.38);
  font-size: 34px;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition:
    opacity 170ms ease,
    transform 170ms ease;
}

.lk-vod-player-shell.is-playing
.lk-vod-player-center {
  opacity: 0;
  pointer-events: none;
  transform:
    translate(-50%, -50%)
    scale(0.85);
}

.lk-vod-player-controls {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  padding:
    0
    clamp(15px, 2.5vw, 28px)
    clamp(14px, 2.5vw, 25px);
  transition: opacity 170ms ease;
}

.lk-vod-player-shell.is-controls-hidden
.lk-vod-player-controls,
.lk-vod-player-shell.is-controls-hidden
.lk-vod-player-brand {
  opacity: 0;
  pointer-events: none;
}

.lk-vod-player-controls > input {
  width: 100%;
  height: 4px;
  padding: 0;
  appearance: none;
  background:
    linear-gradient(
      90deg,
      #b34a3d,
      #b34a3d
    )
    0 / var(--vod-progress, 0%) 100%
    no-repeat,
    rgba(255, 255, 255, 0.34);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.lk-vod-player-controls > input::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  appearance: none;
  background: #fff;
  border: 3px solid #b34a3d;
  border-radius: 50%;
}

.lk-vod-player-controls > div,
.lk-vod-player-left {
  display: flex;
  align-items: center;
}

.lk-vod-player-controls > div {
  justify-content: space-between;
  gap: 15px;
  margin-top: 13px;
}

.lk-vod-player-left {
  gap: 8px;
}

.lk-vod-player-controls button {
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  padding: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  cursor: pointer;
}

.lk-vod-player-controls button:hover,
.lk-vod-player-controls button:focus-visible {

}

.lk-vod-player-time {
  display: flex;
  gap: 6px;
  margin-left: 5px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.lk-vod-player-time i {
  opacity: 0.5;
  font-style: normal;
}

.lk-vod-watch-head {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(240px, 0.34fr);
  gap: 26px;
  padding: 30px 4px 36px;
  border-bottom: 1px solid var(--vod-line);
}

.lk-vod-watch-copy h1 {
  max-width: 980px;
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
}

.lk-vod-watch-copy > p {
  max-width: 850px;
  color: var(--vod-muted);
  font-size: 17px;
  line-height: 1.7;
}

.lk-vod-watch-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.lk-vod-watch-topics a {
  padding: 7px 10px;
  color: var(--vod-red-dark);
  background: rgba(145, 58, 47, 0.08);
  border: 1px solid rgba(145, 58, 47, 0.17);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none;
}

.lk-vod-watch-author {
  padding: 20px;
  background: var(--vod-surface);
  border: 1px solid var(--vod-line);
  border-radius: 15px;
}

.lk-vod-watch-author span,
.lk-vod-watch-author time {
  display: block;
  color: var(--vod-muted);
  font-size: 11px;
}

.lk-vod-watch-author a {
  display: block;
  margin: 8px 0 14px;
  color: var(--vod-ink);
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
}

.lk-vod-more {
  margin-top: 38px;
}

.lk-vod-more > header > a {
  color: var(--vod-red);
  font-weight: 800;
  text-decoration: none;
}

.lk-vod-player-shell:fullscreen {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}

@media (max-width: 1050px) {
  .lk-vod-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .lk-vod-filters {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .lk-vod-featured {
    grid-template-columns: 1fr;
  }

  .lk-vod-featured-media,
  .lk-vod-featured-media video {
    min-height: 290px;
  }
}

@media (max-width: 760px) {
  .lk-vod-catalog-head,
  .lk-vod-library > header,
  .lk-vod-more > header {
    align-items: flex-start;
    flex-direction: column;
  }

  .lk-vod-catalog-count {
    text-align: left;
  }

  .lk-vod-library > header > p {
    text-align: left;
  }

  .lk-vod-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .lk-vod-watch-head {
    grid-template-columns: 1fr;
  }

  .lk-vod-player-shell {
    border-width: 4px;
    border-radius: 15px;
  }
}

@media (max-width: 520px) {
  .lk-vod-catalog,
  .lk-vod-watch {
    width: min(
      calc(100% - 16px),
      1380px
    );
    padding-top: 15px;
  }

  .lk-vod-filters {
    grid-template-columns: 1fr;
  }

  .lk-vod-filters button,
  .lk-vod-filters > a {
    width: 100%;
    box-sizing: border-box;
  }

  .lk-vod-featured {
    min-height: auto;
    border-radius: 17px;
  }

  .lk-vod-featured-copy {
    padding: 28px 22px;
  }

  .lk-vod-featured-media,
  .lk-vod-featured-media video {
    min-height: 220px;
  }

  .lk-vod-grid {
    grid-template-columns: 1fr;
  }

  .lk-vod-card {
    display: grid;
    grid-template-columns:
      minmax(135px, 0.9fr)
      minmax(0, 1.1fr);
  }

  .lk-vod-card-body {
    padding: 13px;
  }

  .lk-vod-card h3 {
    font-size: 17px;
  }

  .lk-vod-player-center {
    width: 62px;
    height: 62px;
    font-size: 24px;
  }

  .lk-vod-player-controls {
    padding:
      0
      11px
      10px;
  }

  .lk-vod-player-controls button {
    width: 35px;
    height: 35px;
  }

  .lk-vod-player-brand {
    display: none;
  }

  .lk-vod-watch-copy h1 {
    font-size: clamp(34px, 11vw, 48px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lk-vod-card,
  .lk-vod-card-media video,
  .lk-vod-card-play,
  .lk-vod-player-center,
  .lk-vod-player-controls {
    transition: none !important;
  }
}

/* VOD PREMIUM HOVER WATERMARK 3C3B4B5D6 */

.lk-vod-watermark {
  position: absolute;
  z-index: 6;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
  opacity: 0.2;
  filter:
    grayscale(1)
    brightness(2.15)
    contrast(0.9);
  mix-blend-mode: screen;
}

.lk-vod-watermark-card {
  right: 10px;
  bottom: 13px;
  width: clamp(46px, 5vw, 66px);
  opacity: 0.18;
}

.lk-vod-watermark-featured {
  right: 20px;
  bottom: 18px;
  width: clamp(74px, 8vw, 112px);
  opacity: 0.19;
}

.lk-vod-watermark-player {
  right: clamp(17px, 2.5vw, 30px);
  bottom: clamp(76px, 8vw, 102px);
  width: clamp(76px, 9vw, 128px);
  opacity: 0.18;
}

.lk-vod-card {
  overflow: visible;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  will-change: transform;
}

.lk-vod-card-media {
  overflow: hidden;
  border: 1px solid var(--vod-line);
  border-radius: 15px 15px 0 0;
  box-shadow:
    0 13px 34px rgba(51, 31, 24, 0.11);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.lk-vod-card-body {
  position: relative;
  z-index: 8;
  min-height: 118px;
  background: var(--vod-surface);
  border: 1px solid var(--vod-line);
  border-top: 0;
  border-radius: 0 0 15px 15px;
  box-shadow:
    0 13px 34px rgba(51, 31, 24, 0.08);
  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.lk-vod-card-preview-progress,
.lk-vod-featured-progress {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.lk-vod-card-preview-progress > i,
.lk-vod-featured-progress > i {
  display: block;
  width: 0;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      #d98472,
      #a53f32
    );
  box-shadow:
    0 0 12px rgba(220, 117, 96, 0.54);
}

.lk-vod-card.is-previewing
.lk-vod-card-preview-progress,
.lk-vod-featured-media.is-previewing
.lk-vod-featured-progress {
  opacity: 1;
}

.lk-vod-card.is-preview-pending
.lk-vod-card-play,
.lk-vod-featured-media.is-preview-pending
> span:last-child {
  animation:
    lk-vod-preview-pulse
    900ms ease-in-out
    infinite alternate;
}

.lk-vod-card.is-previewing
.lk-vod-card-media {
  border-color: rgba(210, 111, 91, 0.62);
  box-shadow:
    0 22px 58px rgba(25, 14, 11, 0.34);
}

.lk-vod-card.is-previewing
.lk-vod-card-body {
  color: #fff8ed;
  background:
    linear-gradient(
      150deg,
      #241613,
      #130e0c
    );
  border-color: rgba(166, 75, 60, 0.44);
  box-shadow:
    0 24px 58px rgba(25, 14, 11, 0.34);
}

.lk-vod-card.is-previewing h3 a {
  color: #fff8ed;
}

.lk-vod-card.is-previewing
.lk-vod-card-meta {
  color: rgba(255, 248, 237, 0.66);
}

.lk-vod-card.is-previewing
.lk-vod-card-topics span {
  color: #df9d8d;
}

.lk-vod-card.is-preview-pending
.lk-vod-card-media::after {
  content: "";
  position: absolute;
  z-index: 7;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      105deg,
      transparent 28%,
      rgba(255, 255, 255, 0.13) 48%,
      transparent 68%
    );
  transform: translateX(-120%);
  animation:
    lk-vod-preview-loading
    1.1s ease-in-out
    infinite;
}

.lk-vod-featured-media {
  transition:
    box-shadow 190ms ease,
    transform 190ms ease;
}

.lk-vod-featured-media video {
  transition:
    transform 500ms ease,
    filter 220ms ease;
}

.lk-vod-featured-media.is-previewing {
  z-index: 4;
  box-shadow:
    inset 0 0 0 1px rgba(223, 141, 122, 0.46);
}

.lk-vod-featured-media.is-previewing video {
  filter: saturate(1.06) contrast(1.04);
  transform: scale(1.035);
}

.lk-vod-featured-media > span:last-child {
  right: clamp(112px, 12vw, 158px);
}

.lk-vod-card-preview-label {
  top: 9px;
  right: 9px;
  bottom: auto;
  background: rgba(21, 13, 10, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(8px);
}

@media (hover: hover) and (pointer: fine) {
  .lk-vod-card:hover,
  .lk-vod-card:focus-within,
  .lk-vod-card.is-preview-pending,
  .lk-vod-card.is-previewing {
    z-index: 40;
    transform:
      translateY(-12px)
      scale(1.075);
  }

  .lk-vod-card:hover
  .lk-vod-card-body,
  .lk-vod-card:focus-within
  .lk-vod-card-body {
    box-shadow:
      0 25px 58px rgba(25, 14, 11, 0.24);
  }
}

@keyframes lk-vod-preview-loading {
  to {

  }
}

@keyframes lk-vod-preview-pulse {
  from {

  }

  to {

  }
}

@media (max-width: 760px) {
  .lk-vod-watermark-player {
    right: 13px;
    bottom: 62px;
    width: 68px;
  }

  .lk-vod-watermark-featured {
    width: 72px;
  }
}

@media (max-width: 520px) {
  .lk-vod-card {
    overflow: hidden;
    background: var(--vod-surface);
    border: 1px solid var(--vod-line);
  }

  .lk-vod-card-media {
    border: 0;
    border-radius: 14px 0 0 14px;
    box-shadow: none;
  }

  .lk-vod-card-body {
    min-height: 0;
    border: 0;
    border-radius: 0 14px 14px 0;
    box-shadow: none;
  }

  .lk-vod-watermark-card {
    right: 7px;
    bottom: 8px;
    width: 42px;
  }

  .lk-vod-featured-media
  > span:last-child {
    right: 98px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lk-vod-card,
  .lk-vod-card-media,
  .lk-vod-card-body,
  .lk-vod-featured-media,
  .lk-vod-featured-media video {
    transition: none !important;
  }

  .lk-vod-card.is-preview-pending
  .lk-vod-card-media::after,
  .lk-vod-card.is-preview-pending
  .lk-vod-card-play {
    animation: none !important;
  }
}

/* VOD SEEK UX 3C3B4B5D9 */

.lk-vod-player-controls > input[
  data-vod-progress
] {
  position: relative;
  z-index: 12;
  min-height: 20px;
  margin: -8px 0 5px;
  background-clip: content-box;
  cursor: pointer;
  touch-action: pan-x;
}

.lk-vod-player-controls > input[
  data-vod-progress
]:focus-visible {
  outline: 2px solid #fffaf0;
  outline-offset: 4px;
}

.lk-vod-player-controls > input[
  data-vod-progress
]::-webkit-slider-thumb {
  cursor: grab;
}

.lk-vod-player-controls > input[
  data-vod-progress
]:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.18);
}


/* ==========================================================
   LANGKAH KUDA VIDEO FILTER — PREMIUM ESPRESSO
   VIDEO-R3 / 2026-08
   ========================================================== */

.lk-vod-filters {
  position: relative;
  overflow: visible;

  border:
    1px solid rgba(91, 48, 34, .13);

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(173, 111, 62, .07),
      transparent 30%
    ),
    rgba(255, 251, 244, .94);

  box-shadow:
    0 15px 38px rgba(70, 38, 27, .075),
    inset 0 1px 0 rgba(255, 255, 255, .9);

  backdrop-filter: blur(9px);
}


.lk-vod-filters label {
  color: #74483a;

  letter-spacing: .09em;
}


.lk-vod-filters input,
.lk-vod-filters select {
  min-height: 52px;

  border:
    1px solid rgba(91, 48, 34, .17);

  border-radius: 13px;

  background-color: #fbf5ea;

  color: #3b2119;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75);

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    transform .2s ease;
}


.lk-vod-filters input:hover,
.lk-vod-filters select:hover {
  border-color:
    rgba(123, 58, 43, .38);

  background-color: #fff9ef;
}


.lk-vod-filters input:focus,
.lk-vod-filters select:focus {
  outline: none;

  border-color: #7b382c;

  background-color: #fffaf2;

  box-shadow:
    0 0 0 4px rgba(123, 56, 44, .10),
    0 8px 18px rgba(77, 39, 28, .07);
}


/*
 * Native select tetap dipertahankan demi keyboard,
 * accessibility, dan performa.
 */

.lk-vod-filters select {
  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  padding-right: 42px;

  background-image:
    linear-gradient(
      45deg,
      transparent 50%,
      #71382b 50%
    ),
    linear-gradient(
      135deg,
      #71382b 50%,
      transparent 50%
    );

  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);

  background-size:
    5px 5px,
    5px 5px;

  background-repeat: no-repeat;

  accent-color: #74372c;

  color-scheme: light;
}


.lk-vod-filters select option {
  background: #fff9ef;

  color: #3a2119;

  font-weight: 600;
}


.lk-vod-filters select option:checked {
  background:
    linear-gradient(
      0deg,
      #74372c,
      #74372c
    );

  color: #fff9ed;
}


.lk-vod-filters select option:hover {
  background: #efe0cd;

  color: #44241b;
}


.lk-vod-filters button {
  min-height: 52px;

  padding-inline: 24px;

  border-color: #6e3025;

  background:
    linear-gradient(
      135deg,
      #51251d 0%,
      #773629 58%,
      #843e30 100%
    );

  color: #fff9ef;

  box-shadow:
    0 10px 23px rgba(92, 42, 31, .17),
    inset 0 1px 0 rgba(255,255,255,.08);

  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease;
}


.lk-vod-filters button:hover {
  transform: translateY(-2px);

  filter: brightness(1.045);

  box-shadow:
    0 15px 29px rgba(92, 42, 31, .23);
}


.lk-vod-filters > a {
  min-height: 52px;

  border-color:
    rgba(112, 54, 41, .22);

  color: #71372b;

  background:
    rgba(255,255,255,.35);
}


/* Empty-state dibuat sedikit lebih editorial */

.lk-vod-empty {
  border:
    1px solid rgba(91, 48, 34, .10);

  background:
    radial-gradient(
      circle at 50% 0,
      rgba(172, 111, 62, .08),
      transparent 38%
    ),
    rgba(255, 251, 244, .82);

  box-shadow:
    0 15px 38px rgba(63, 33, 23, .055);
}


@media (prefers-color-scheme: dark) {

  .lk-vod-filters {
    border-color:
      rgba(226, 187, 124, .13);

    background:
      linear-gradient(
        145deg,
        rgba(39, 27, 22, .97),
        rgba(29, 21, 18, .97)
      );
  }

  .lk-vod-filters input,
  .lk-vod-filters select {
    border-color:
      rgba(229, 190, 127, .14);

    background-color: #2b201b;

    color: #f4e8d8;
  }

  .lk-vod-filters select option {
    background: #2b201b;

    color: #f4e8d8;
  }

  .lk-vod-filters label {
    color: #d6ad82;
  }
}
/* ==========================================================
   LANGKAH KUDA VIDEO PREMIUM INTERACTION R5
   ========================================================== */


/* ----------------------------------------------------------
   CUSTOM SELECT
   Native select tetap hidup sebagai form control.
   ---------------------------------------------------------- */

.lk-premium-select {
  position: relative;
  min-width: 0;
  width: 100%;
}


.lk-premium-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
}


.lk-premium-select-trigger {
  position: relative;

  width: 100%;
  min-height: 52px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding:
    0
    46px
    0
    17px !important;

  border:
    1px solid
    rgba(104, 50, 37, .22) !important;

  border-radius: 13px !important;

  background:
    linear-gradient(
      145deg,
      #fffaf1,
      #f8efe2
    ) !important;

  color: #3a2018 !important;

  font:
    inherit;

  font-weight: 700;

  text-align: left;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.92),
    0 7px 18px
      rgba(72, 38, 26, .055) !important;

  cursor: pointer;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease,
    background .18s ease;
}


.lk-premium-select-trigger:hover {
  border-color:
    rgba(128, 57, 42, .46) !important;

  background:
    #fffaf2 !important;

  box-shadow:
    0 11px 24px
      rgba(72, 38, 26, .09) !important;
}


.lk-premium-select.is-open
.lk-premium-select-trigger,
.lk-premium-select-trigger:focus-visible {
  outline: none;

  border-color:
    #78382c !important;

  box-shadow:
    0 0 0 4px
      rgba(120, 56, 44, .10),
    0 13px 28px
      rgba(68, 34, 25, .10) !important;
}


.lk-premium-select-arrow {
  position: absolute;
  right: 18px;
  top: 50%;

  width: 8px;
  height: 8px;

  border-right:
    2px solid #71372b;
  border-bottom:
    2px solid #71372b;

  transform:
    translateY(-65%)
    rotate(45deg);

  transition:
    transform .2s ease;
}


.lk-premium-select.is-open
.lk-premium-select-arrow {
  transform:
    translateY(-25%)
    rotate(225deg);
}


.lk-premium-select-menu {
  position: absolute;


  top: calc(100% + 8px);
  left: 0;

  width: 100%;

  padding: 7px;

  border:
    1px solid
    rgba(108, 52, 39, .16);

  border-radius: 16px;

  background:
    rgba(255, 250, 241, .985);

  box-shadow:
    0 22px 55px
      rgba(55, 28, 20, .17),
    0 5px 15px
      rgba(55, 28, 20, .08),
    inset 0 1px 0
      rgba(255,255,255,.95);

  backdrop-filter:
    blur(14px);

  animation:
    lkPremiumMenuIn
    .17s ease both;
}


.lk-premium-select-list {
  max-height: 330px;
  overflow-y: auto;

  padding-right: 3px;

  scrollbar-width: thin;
  scrollbar-color:
    #a66a51
    #efe2d4;
}


.lk-premium-select-list::-webkit-scrollbar {
  width: 8px;
}


.lk-premium-select-list::-webkit-scrollbar-track {
  background:
    #efe2d4;

  border-radius: 999px;
}


.lk-premium-select-list::-webkit-scrollbar-thumb {
  background:
    linear-gradient(
      #b17a61,
      #793f31
    );

  border-radius: 999px;
}


.lk-premium-select-option {
  width: 100%;
  min-height: 42px;

  display: flex;
  align-items: center;

  padding:
    9px
    12px !important;

  border: 0 !important;

  border-radius: 10px !important;

  background:
    transparent !important;

  color:
    #3c2119 !important;

  font:
    inherit;

  font-weight: 700;

  text-align: left;

  cursor: pointer;

  transition:
    background .14s ease,
    color .14s ease,
    transform .14s ease;
}


.lk-premium-select-option:hover,
.lk-premium-select-option.is-keyboard-active {
  background:
    linear-gradient(
      135deg,
      #f0ddc8,
      #ead2b9
    ) !important;

  color:
    #55291f !important;

  transform:
    translateX(2px);
}


.lk-premium-select-option.is-selected {
  background:
    linear-gradient(
      135deg,
      #57271f,
      #823b2e
    ) !important;

  color:
    #fff8ea !important;

  box-shadow:
    inset 3px 0 0
      #d9aa62,
    0 7px 16px
      rgba(86, 39, 29, .14);
}


@keyframes lkPremiumMenuIn {
  from {
    opacity: 0;
    transform:
      translateY(-5px)
      scale(.985);
  }

  to {
    opacity: 1;

  }
}


/* ----------------------------------------------------------
   PLAYER BUFFER + SEEK
   ---------------------------------------------------------- */

.lk-vod-player-controls
> input[data-vod-progress] {
  background:
    linear-gradient(
      90deg,
      #b55040,
      #d58a54
    )
    0 /
    var(--vod-progress, 0%)
    100%
    no-repeat,

    linear-gradient(
      90deg,
      rgba(255,255,255,.48),
      rgba(255,255,255,.48)
    )
    0 /
    var(--vod-buffered, 0%)
    100%
    no-repeat,

    rgba(255,255,255,.20)
    !important;

  transition:
    height .15s ease;
}


.lk-vod-player-controls
> input[data-vod-progress]:hover,
.lk-vod-player-controls
> input[data-vod-progress]:focus-visible {
  height: 6px;
  outline: none;
}


/* ----------------------------------------------------------
   SKIP BUTTON
   ---------------------------------------------------------- */

.lk-vod-skip-button {
  position: relative;

  font-size: 17px !important;
}


.lk-vod-skip-button span {
  line-height: 1;
}


.lk-vod-skip-button small {
  position: absolute;

  top: 50%;
  left: 50%;

  transform:
    translate(-50%, -47%);

  font-size: 8px;
  font-weight: 900;

  pointer-events: none;
}


/* ----------------------------------------------------------
   VOLUME
   ---------------------------------------------------------- */

.lk-vod-volume {
  --lk-volume: 100%;

  width: 82px;

  display: flex;
  align-items: center;

  transition:
    width .18s ease,
    opacity .18s ease;
}


.lk-vod-volume-slider {
  width: 100%;
  height: 4px;

  padding: 0;

  appearance: none;

  border: 0;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #d48255,
      #d48255
    )
    0 /
    var(--lk-volume)
    100%
    no-repeat,

    rgba(255,255,255,.30);

  cursor: pointer;
}


.lk-vod-volume-slider::-webkit-slider-thumb {
  width: 13px;
  height: 13px;

  appearance: none;

  border:
    2px solid
    rgba(255,255,255,.82);

  border-radius: 50%;

  background:
    #c66746;

  box-shadow:
    0 2px 8px
      rgba(0,0,0,.24);
}


.lk-vod-volume-slider::-moz-range-thumb {
  width: 11px;
  height: 11px;

  border:
    2px solid
    rgba(255,255,255,.82);

  border-radius: 50%;

  background:
    #c66746;
}


/* ----------------------------------------------------------
   BUFFERING INDICATOR
   ---------------------------------------------------------- */

.lk-vod-player-loader {
  position: absolute;
  z-index: 8;

  top: 50%;
  left: 50%;

  width: 58px;
  height: 58px;

  display: grid;
  place-items: center;

  opacity: 0;
  visibility: hidden;

  transform:
    translate(-50%, -50%);

  pointer-events: none;

  transition:
    opacity .16s ease,
    visibility .16s ease;
}


.lk-vod-player-loader span {
  width: 40px;
  height: 40px;

  border:
    3px solid
    rgba(255,255,255,.22);

  border-top-color:
    #d98a58;

  border-radius: 50%;

  animation:
    lkVodLoaderSpin
    .72s linear infinite;
}


.lk-vod-player-shell.is-buffering
.lk-vod-player-loader {
  opacity: 1;
  visibility: visible;
}


.lk-vod-player-shell.is-buffering
.lk-vod-player-center {
  opacity: 0;
}


@keyframes lkVodLoaderSpin {
  to {
    transform:
      rotate(360deg);
  }
}


/* ----------------------------------------------------------
   CINEMATIC POLISH
   ---------------------------------------------------------- */

.lk-vod-card-media::before,
.lk-vod-featured-media::before {
  content: "";

  position: absolute;
  z-index: 2;
  inset: 0;

  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,.03),
      transparent 48%,
      rgba(20,8,4,.24)
    );

  opacity: .5;

  pointer-events: none;

  transition:
    opacity .24s ease;
}


.lk-vod-card.is-previewing
.lk-vod-card-media::before,
.lk-vod-featured.is-previewing
.lk-vod-featured-media::before {
  opacity: .16;
}


.lk-vod-player-shell {
  box-shadow:
    0 31px 76px
      rgba(35,22,17,.27),
    0 7px 22px
      rgba(79,37,26,.11),
    inset 0 0 0 1px
      rgba(214,163,91,.12);
}


.lk-vod-player-controls button {
  backdrop-filter:
    blur(6px);
}


.lk-vod-player-controls button:hover,
.lk-vod-player-controls button:focus-visible {
  background:
    linear-gradient(
      135deg,
      #78382c,
      #a14c38
    ) !important;

  border-color:
    rgba(230,185,118,.6);

  box-shadow:
    0 8px 20px
      rgba(0,0,0,.22);
}


/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 760px) {
  .lk-vod-volume {
    width: 62px;
  }
}


@media (max-width: 520px) {
  .lk-vod-volume {
    display: none;
  }

  .lk-vod-skip-button {
    display: none !important;
  }

  .lk-premium-select-menu {
    max-height:
      min(55vh, 360px);
  }

  .lk-premium-select-list {
    max-height:
      min(48vh, 300px);
  }
}


@media (prefers-reduced-motion: reduce) {
  .lk-premium-select-menu,
  .lk-vod-player-loader span {
    animation: none !important;
  }

  .lk-premium-select-option,
  .lk-premium-select-trigger {
    transition: none !important;
  }
}


/* ----------------------------------------------------------
   DARK MODE
   ---------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  .lk-premium-select-trigger {
    border-color:
      rgba(220,176,112,.17)
      !important;

    background:
      linear-gradient(
        145deg,
        #2e211c,
        #241a16
      ) !important;

    color:
      #f3e6d5 !important;
  }


  .lk-premium-select-menu {
    border-color:
      rgba(220,176,112,.14);

    background:
      rgba(37,27,23,.985);
  }


  .lk-premium-select-option {
    color:
      #efe3d4 !important;
  }


  .lk-premium-select-option:hover,
  .lk-premium-select-option.is-keyboard-active {
    background:
      #3b2a23 !important;

    color:
      #f7e7d3 !important;
  }


  .lk-premium-select-option.is-selected {
    background:
      linear-gradient(
        135deg,
        #673126,
        #874130
      ) !important;

    color:
      #fff5e6 !important;
  }
}



/* ==========================================================
   LANGKAH KUDA VIDEO R6
   COMPACT CINEMATIC / NETFLIX-LIKE PROPORTION
   ========================================================== */


/*
 * Daftar video tidak lagi memakai kartu featured jumbo
 * sebagai tampilan utama ketika katalog sudah memiliki video.
 */

.lk-vod-catalog {
  display: block;
}

.lk-vod-grid {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  gap:
    26px
    22px;

  align-items: start;

  width: 100%;
}


/*
 * Batasi lebar setiap kartu agar terasa seperti katalog video,
 * bukan hero/banner besar.
 */

.lk-vod-card {
  width: 100%;
  max-width: none;

  margin: 0;

  border-radius: 14px;

  transform-origin:
    center center;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}


/*
 * Frame video landscape 16:9.
 */

.lk-vod-card-media {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 9;

  min-height: 0 !important;
  max-height: none !important;

  overflow: hidden;

  border-radius:
    14px 14px 0 0;
}


.lk-vod-card-media video,
.lk-vod-card-media img,
.lk-vod-card-media picture {
  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;
}


/*
 * Card tidak membesar terlalu agresif saat hover.
 */

.lk-vod-card:hover,
.lk-vod-card:focus-within {
  transform:
    translateY(-5px)
    scale(1.025);

  z-index: 8;

  box-shadow:
    0 20px 42px
      rgba(52, 26, 18, .17),
    0 5px 14px
      rgba(52, 26, 18, .08);
}


/*
 * Informasi di bawah video dibuat padat.
 */

.lk-vod-card-body,
.lk-vod-card-content {
  padding:
    14px 14px 16px;
}


.lk-vod-card-title,
.lk-vod-card h2,
.lk-vod-card h3 {
  margin:
    0 0 7px;

  font-size:
    clamp(
      1.02rem,
      1.4vw,
      1.22rem
    );

  line-height: 1.18;
}


.lk-vod-card-description,
.lk-vod-card-summary {
  display:
    -webkit-box;

  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;

  overflow: hidden;

  margin-top: 8px;

  font-size: .92rem;
  line-height: 1.48;
}


/*
 * Featured / latest video tidak lagi memenuhi hampir seluruh viewport.
 */

.lk-vod-featured {
  display: grid;

  grid-template-columns:
    minmax(260px, 380px)
    minmax(0, 1fr);

  width: min(
    100%,
    960px
  );

  margin:
    0 auto 34px;

  min-height: 0 !important;

  border-radius: 18px;

  overflow: hidden;
}


.lk-vod-featured-media {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 9;

  min-height: 0 !important;
  height: auto !important;

  overflow: hidden;
}


.lk-vod-featured-media video,
.lk-vod-featured-media img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


.lk-vod-featured-content,
.lk-vod-featured-copy {
  padding:
    26px 28px;

  display: flex;
  flex-direction: column;
  justify-content: center;
}


.lk-vod-featured h1,
.lk-vod-featured h2 {
  font-size:
    clamp(
      1.65rem,
      2.7vw,
      2.8rem
    );

  line-height: 1.02;
}


/*
 * Player detail juga dibatasi agar tidak terlalu besar
 * ketika halaman pertama kali dibuka.
 *
 * Fullscreen tetap diatur browser saat double-click/F.
 */

.lk-vod-player-shell {
  width:
    min(
      100%,
      980px
    );

  margin-inline: auto;

  aspect-ratio: 16 / 9;

  max-height:
    min(
      72vh,
      620px
    );
}


.lk-vod-player-shell video {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


/*
 * Saat benar-benar fullscreen, baru gunakan seluruh layar.
 */

.lk-vod-player-shell:fullscreen,
.lk-vod-player-shell:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;

  aspect-ratio: auto;
}


.lk-vod-player-shell:fullscreen video,
.lk-vod-player-shell:-webkit-full-screen video {
  width: 100vw;
  height: 100vh;

  object-fit: contain;
}


/*
 * Watermark tetap proporsional pada frame lebih kecil.
 */

.lk-vod-card .lk-vod-watermark,
.lk-vod-featured .lk-vod-watermark {
  width:
    clamp(
      50px,
      16%,
      82px
    );

  right: 10px;
  bottom: 10px;
}


.lk-vod-player-shell .lk-vod-watermark {
  width:
    clamp(
      62px,
      10%,
      105px
    );

  right: 15px;
  bottom: 56px;
}


/*
 * Tablet
 */

@media (max-width: 980px) {

  .lk-vod-featured {
    grid-template-columns: 1fr;

    max-width: 680px;
  }


  .lk-vod-featured-media {
    aspect-ratio: 16 / 9;
  }


  .lk-vod-grid {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }


  .lk-vod-card {
    max-width: none;
  }
}


/*
 * Mobile
 */

@media (max-width: 620px) {

  .lk-vod-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 20px;
  }


  .lk-vod-card {
    width: 100%;
    max-width: 100%;
  }


  .lk-vod-featured {
    width: 100%;
  }


  .lk-vod-featured-content,
  .lk-vod-featured-copy {
    padding:
      20px 18px;
  }


  .lk-vod-player-shell {
    width: 100%;

    max-height: none;
  }
}


/*
 * HP kecil.
 */
@media (max-width: 520px) {
}


/*
 * Hover scale dimatikan untuk touch device.
 */

@media (hover: none) {

  .lk-vod-card:hover {
    transform: none;

    box-shadow:
      inherit;
  }
}



/* ==========================================================
   LANGKAH KUDA VIDEO R6.1
   FIX FILTER / FEATURED OVERLAP
   ========================================================== */


/*
 * Filter harus selalu berada di normal document flow.
 * Jangan lagi absolute / floating di atas featured card.
 */

body .lk-vod-filters {
  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  inset: auto !important;

  float: none !important;

  transform: none !important;

  z-index: 20;

  box-sizing: border-box;

  width: min(100%, 1180px);
  max-width: 1180px;

  margin:
    0 auto 34px !important;

  padding:
    18px 20px !important;

  display: grid !important;

  grid-template-columns:
    minmax(220px, 1.35fr)
    minmax(180px, .85fr)
    minmax(180px, .85fr)
    auto;

  gap:
    14px 16px;

  align-items: end;

  clear: both;
}


/*
 * Kalau filter berada di parent grid,
 * paksa mengambil seluruh lebar.
 */

.lk-vod-filters {
  grid-column:
    1 / -1 !important;

  align-self:
    stretch !important;
}


/*
 * Setiap field harus punya ruang sendiri.
 */

.lk-vod-filters > *,
.lk-vod-filters label,
.lk-vod-filters .lk-premium-select {
  min-width: 0;
  max-width: 100%;
}


.lk-vod-filters label {
  display: flex;
  flex-direction: column;

  gap: 8px;
}


/*
 * Input/search/select harus 100% di kolomnya.
 */

.lk-vod-filters input,
.lk-vod-filters select,
.lk-vod-filters .lk-premium-select,
.lk-vod-filters .lk-premium-select-trigger {
  width: 100% !important;
  max-width: 100% !important;

  box-sizing: border-box;
}


/*
 * Tombol jangan menekan field lain.
 */

.lk-vod-filters button[type="submit"] {
  width: auto !important;

  min-width: 170px;

  white-space: nowrap;

  align-self: end;
}


/*
 * Dropdown custom boleh tampil di atas konten,
 * tetapi wrapper filter tetap berada di flow.
 */

.lk-premium-select {
  position: relative;
  z-index: 30;
}


.lk-premium-select.is-open {
  z-index: 60;
}


.lk-premium-select-menu {
  z-index: 70;
}


/*
 * Featured card mendapat ruang sendiri
 * setelah filter.
 */

body .lk-vod-featured {
  position: relative !important;

  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;

  inset: auto !important;

  float: none !important;

  transform: none;

  clear: both;

  width: min(100%, 960px);

  margin:
    0 auto 38px !important;

  z-index: 1;
}


/*
 * Jika featured berada di grid hero lama,
 * jangan izinkan menempati area filter.
 */

.lk-vod-featured {
  grid-column:
    1 / -1 !important;
}


/*
 * Hero intro juga jangan bertabrakan.
 */

.lk-vod-hero,
.lk-vod-intro,
.lk-vod-header {
  position: relative;

  z-index: 1;
}


/*
 * Beri pemisah visual ringan antara
 * filter dan katalog/featured.
 */

.lk-vod-filters::after {
  content: "";

  position: absolute;

  left: 20px;
  right: 20px;
  bottom: -18px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(107, 54, 40, .18),
      transparent
    );

  pointer-events: none;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 980px) {

  body .lk-vod-filters {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      16px;

    width:
      min(100%, 760px);
  }


  .lk-vod-filters button[type="submit"] {
    width: 100% !important;

    min-width: 0;
  }


  body .lk-vod-featured {
    width:
      min(100%, 680px);
  }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 620px) {

  body .lk-vod-filters {
    grid-template-columns:
      1fr;

    width: 100%;

    padding:
      16px !important;

    margin-bottom:
      28px !important;

    border-radius:
      15px;
  }


  .lk-vod-filters button[type="submit"] {
    width: 100% !important;

    min-height: 50px;
  }


  body .lk-vod-featured {
    width: 100%;

    margin-bottom:
      28px !important;
  }
}



/* P18-V1P SECURE PREMIUM VIDEO */
.lk-vod-premium-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 5px 10px;
  color: #fffaf0;
  background: linear-gradient(135deg, #913a2f, #64281f);
  border: 1px solid rgba(255, 250, 240, 0.2);
  border-radius: 999px;
  font-family: "Space Mono", monospace;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
}

.lk-vod-premium-badge-card {
  margin-bottom: 8px;
  color: #64281f;
  background: rgba(231, 189, 114, 0.22);
  border-color: rgba(145, 58, 47, 0.16);
}

.lk-vod-premium-lock {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-content: center;
  gap: 10px;
  padding: clamp(24px, 5vw, 54px);
  text-align: center;
  color: #fffaf0;
  background:
    radial-gradient(circle at 50% 18%, rgba(183, 53, 47, 0.34), transparent 34%),
    linear-gradient(180deg, rgba(18, 14, 12, 0.82), rgba(18, 14, 12, 0.97));
  backdrop-filter: blur(10px);
}

.lk-vod-premium-lock[hidden] { display: none; }

.lk-vod-premium-lock-kicker {
  color: #e7bd72;
  font-family: "Space Mono", monospace;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.lk-vod-premium-lock strong {
  font-family: "Newsreader", Georgia, serif;
  font-size: clamp(1.7rem, 4vw, 3rem);
  line-height: 1;
}

.lk-vod-premium-lock p {
  max-width: 40ch;
  margin: 0 auto;
  color: rgba(255, 250, 240, 0.78);
  line-height: 1.55;
}

.lk-vod-premium-lock-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

.lk-vod-premium-lock-actions a,
.lk-vod-premium-lock-actions button {
  min-height: 42px;
  max-width: 100%;
  padding: 10px 16px;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.lk-vod-premium-lock-actions a {
  color: #241713;
  background: #e7bd72;
  text-decoration: none;
}

.lk-vod-premium-lock-actions button {
  color: #fffaf0;
  background: rgba(255, 250, 240, 0.08);
  border: 1px solid rgba(255, 250, 240, 0.22);
}

/* ============================================================
   P18-V2B ICONIC CINEMATIC MODIFIERS
   Langkah Kuda: editorial ivory + espresso cinema + burgundy/gold.
   ============================================================ */

.lk-vod-catalog--iconic,
.lk-vod-watch--iconic {
  --lk-vod-espresso: #241713;
  --lk-vod-espresso-soft: #493028;
  --lk-vod-burgundy: #913a2f;
  --lk-vod-burgundy-bright: #b7352f;
  --lk-vod-gold: #e7bd72;
  --lk-vod-ivory: #fffaf0;
  --lk-vod-paper: #f5efe3;
  --lk-vod-ink: #2d211c;
  --lk-vod-muted-ink: #75665c;
}

.lk-vod-catalog--iconic {
  position: relative;
  isolation: isolate;
}

.lk-vod-catalog--iconic::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -48px;
  right: -10vw;
  left: -10vw;
  height: 340px;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 82% 18%,
      rgba(183, 53, 47, 0.1),
      transparent 34%
    ),
    radial-gradient(
      circle at 12% 0%,
      rgba(231, 189, 114, 0.11),
      transparent 30%
    );
}

.lk-vod-filters--iconic {
  border-color: rgba(73, 48, 40, 0.12);
  border-radius: 20px;
  box-shadow:
    0 16px 34px rgba(45, 33, 28, 0.07),
    inset 0 1px 0 rgba(255, 250, 240, 0.7);
}

.lk-vod-featured--iconic {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--lk-vod-ivory);
  background:
    radial-gradient(
      circle at 78% 16%,
      rgba(183, 53, 47, 0.33),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #120e0c 0%,
      var(--lk-vod-espresso) 52%,
      #64281f 100%
    );
  border-color: rgba(231, 189, 114, 0.28);
  box-shadow:
    0 30px 68px rgba(36, 23, 19, 0.22),
    inset 0 1px 0 rgba(255, 250, 240, 0.06);
}

.lk-vod-featured--iconic::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--lk-vod-gold) 25%,
      var(--lk-vod-burgundy-bright) 70%,
      transparent
    );
}

.lk-vod-featured--iconic
.lk-vod-featured-copy {
  position: relative;
  z-index: 2;
}

.lk-vod-featured--iconic
.lk-vod-featured-copy > p,
.lk-vod-featured--iconic
.lk-vod-featured-meta {
  color: rgba(255, 250, 240, 0.76);
}

.lk-vod-featured--iconic
.lk-vod-featured-copy > a {
  min-height: 44px;
  border-radius: 999px;
  box-shadow: 0 12px 26px rgba(18, 14, 12, 0.2);
}

.lk-vod-featured--iconic
.lk-vod-featured-media {
  background: #120e0c;
}

.lk-vod-card--iconic {
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(255, 250, 240, 0.98),
      rgba(245, 239, 227, 0.94)
    );
  border-color: rgba(73, 48, 40, 0.13);
  box-shadow: 0 12px 28px rgba(45, 33, 28, 0.07);
  transform-origin: center;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.lk-vod-card--iconic
.lk-vod-card-media {
  background: #120e0c;
}

.lk-vod-card--iconic
.lk-vod-card-media::before {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      transparent 52%,
      rgba(18, 14, 12, 0.28)
    );
}

.lk-vod-card--iconic
.lk-vod-card-body {
  background: transparent;
}

.lk-vod-card--iconic
.lk-vod-card-topics span {
  color: var(--lk-vod-burgundy);
  background: rgba(183, 53, 47, 0.07);
  border-color: rgba(183, 53, 47, 0.12);
}

.lk-vod-card--iconic
.lk-vod-card-meta {
  color: var(--lk-vod-muted-ink);
}

.lk-vod-watch--iconic {
  position: relative;
}

.lk-vod-player-shell--iconic {
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(145, 58, 47, 0.2),
      transparent 34%
    ),
    #120e0c;
  border-color: rgba(231, 189, 114, 0.3);
  box-shadow:
    0 30px 76px rgba(18, 14, 12, 0.28),
    0 0 0 1px rgba(255, 250, 240, 0.04);
}

.lk-vod-player-shell--iconic
.lk-vod-player-controls {
  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(18, 14, 12, 0.9)
    );
}

.lk-vod-player-shell--iconic
.lk-vod-player-controls button {
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
}

.lk-vod-player-shell--iconic
.lk-vod-player-center {
  border-color: rgba(231, 189, 114, 0.5);
  box-shadow:
    0 16px 36px rgba(18, 14, 12, 0.28),
    inset 0 0 0 1px rgba(255, 250, 240, 0.09);
}

@media (hover: hover) and (pointer: fine) {
  .lk-vod-card--iconic:hover,
  .lk-vod-card--iconic:focus-within {
    border-color: rgba(145, 58, 47, 0.26);
    box-shadow: 0 20px 42px rgba(45, 33, 28, 0.13);
    transform: translateY(-4px);
  }
}

@media (max-width: 760px) {
  .lk-vod-featured--iconic {
    border-radius: 20px;
  }

  .lk-vod-player-shell--iconic {
    border-radius: 16px;
  }
}

@media (max-width: 520px) {
  .lk-vod-catalog--iconic,
  .lk-vod-watch--iconic {
    width: min(
      calc(100% - 16px),
      1380px
    );
  }

  .lk-vod-featured--iconic {
    border-radius: 17px;
  }

  .lk-vod-player-shell--iconic {
    border-radius: 12px;
  }

  .lk-vod-player-shell--iconic
  .lk-vod-player-controls button {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lk-vod-card--iconic,
  .lk-vod-featured--iconic,
  .lk-vod-player-shell--iconic {
    transition: none;
  }
}