/* ==========================================================================
   Homepage – baseline layout
   Breakpoint baseline: 360 / 768 / 1280 / 1920 (mobile-first, min-width).
   Ukuran lebar halaman dan kartu berasal dari token di sini.
   Jangan menulis angka lebar/margin tetap di blade; ubah token saja.
   ========================================================================== */

:root {
    --page-bg: #282828;
    --section-gap: 24px;
    --card-gap: 8px;

    /* lebar kartu per bentuk; tinggi dihitung dari aspect-ratio */
    --card-landscape-w: 160px;
    --card-portrait-w: 112px;
    --card-large-w: 260px;
    --card-219-w: 300px;
    --card-rank-w: 48px;
    --card-toprank-w: 64px;
    --card-news-w: 240px;
    --grid-row-h-base: 72px;
    --grid-col-w: 260px;
    --grid-gap: 16px; /* sama dengan spaceBetween grid Swiper di script.blade */
    --thematic-banner-w: 100%;
    --thematic-overlap: calc(var(--card-landscape-w) * 9 / 16 * 0.5);
    --card-hover-wide-w: 220px;
    --lineup-offset-start: 80px; /* jarak awal kartu pertama; dibaca juga oleh lineup-script (slidesOffsetBefore) */
    --lineup-gap: 5px; /* sama dengan spaceBetween Swiper di script.blade */
    --super-mini-per-view: 2.3;
    --card-square-w: 140px;
    --card-square-mini-w: 100px;
}

@media (min-width: 768px) {
    :root {
        --section-gap: 32px;
        --card-gap: 10px;
        --card-landscape-w: 200px;
        --card-portrait-w: 136px;
        --card-large-w: 300px;
        --card-219-w: 380px;
        --card-rank-w: 56px;
        --card-toprank-w: 80px;
        --card-hover-wide-w: 220px;
        --grid-row-h-base: 90px;
        --grid-col-w: 340px;
        --card-news-w: 280px;
        --super-mini-per-view: 3.3;
        --card-square-w: 180px;
        --card-square-mini-w: 130px;
    }
}

@media (min-width: 1280px) {
    :root {
        --section-gap: 40px;
        --card-landscape-w: 247px;
        --card-portrait-w: 168px;
        --card-large-w: 368px;
        --card-219-w: 484px;
        --card-rank-w: 72px;
        --card-toprank-w: 106px;
        --card-hover-wide-w: 260px;
        --grid-row-h-base: 108px;
        --grid-col-w: 412px;
        --card-news-w: 320px;
        --super-mini-per-view: 5;
        --card-square-w: 247px;
        --card-square-mini-w: 168px;
    }
}

@media (min-width: 1920px) {
    :root {
        --section-gap: 48px;
        --card-landscape-w: 300px;
        --card-portrait-w: 200px;
        --card-large-w: 440px;
        --card-219-w: 580px;
        --card-rank-w: 80px;
        --card-toprank-w: 120px;
        --card-hover-wide-w: 300px;
        --grid-row-h-base: 120px;
        --grid-col-w: 480px;
        --card-news-w: 380px;
        --super-mini-per-view: 6;
        --card-square-w: 300px;
        --card-square-mini-w: 200px;
    }
}

/* ==========================================================================
   Aturan lama yang masih dipakai (diwarisi dari widget-hp-grouping/styles.blade.php)
   Dipakai oleh: kartu hover (partials/hover-card), badge label/sewa, nomor peringkat
   (trending), dan story lineup. Aturan lain di file lama sudah tidak punya pemakai.
   Catatan: .swiper-slide { margin-right: 10px } bersifat global (juga memengaruhi swiper
   lain di halaman yang tidak mengatur spaceBetween); jangan dihapus tanpa memeriksa story/category.
   ========================================================================== */

.swiper-wrapper {
    transform: translate3d(0px, 0px, 0px);
    align-items: center;
}

.swiper-slide {
    margin-right: 10px;
}

.portrait-hov-wrapper {
    width:260px;
    background-color: #171717;
    border-radius: 8px;
    height: 252px !important;
    z-index:999;
    transition: ease-in transform .2s;
}

.trending-thumbnail-hov {
    height: 142px  !important;
    width: 260px !important;
    border-radius: 8px;
}

.pointer {
    cursor: pointer;
}

.medium-text-outline {
    font-size: 57px;
    line-height: 70px;
    font-family: Arial;
    font-weight: bold;
    color: block;
    -webkit-text-stroke: 2px #8F8F8F;
    -webkit-text-fill-color: #171717;
}

.zoom-thumbnail-wrapper {
    height: 135px  !important;
    width: 260px !important;
    background-color: #171717;
    border-radius: 8px 8px  0 0!important;
}

.card-sewa {
    width: 69px;
    height: 24px;
    top: 8px;
    left: 8px;
    position: absolute;
    background-color: #e7a921;
    z-index: 9;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 5px 3px;
}

.badge-new-program {
    height: 24px;
    padding: 2px 5px 3px;
    background-color: #0079ff;
    border-radius: 4px;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.badge-time-left {
    background-color: #e7a921;
    border-radius: 4px;
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 5px;
}

.text-time-left {
    color: #fff;
    font-size: 12px;
    font-weight: 200;
}

.text-badge {
    font-weight: 600;
    font-size: 14px !important;
    font-family: Open Sans;
    font-style: normal;
    color: #ffffff;
}

.zoom-trading-section-bottom {
    font-family: Arial;
    height: 105px;
    padding: 10px;
    width: 100%;
    background-color: #171717;
    border-radius: 0 0 8px 8px;
}

.zoom-trading-section-info {
    color: #fff;
    height: 55px;
}

.zoom-trading-section-info-episode {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.text-program-title {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600 !important;
    font-size: 14px;
    color: #FFFFFF;
    width: 220px !important;
    text-align: left !important;
    text-overflow: ellipsis !important;
    white-space: nowrap;
    overflow: hidden;
}

.zoom-tranding-section-action {
    display: flex;
    justify-content: space-between;
    height: 50px;
}

.play-button-wrapper {
    height: 35px;
    width: 35px;
    border-radius: 100%;
    background-color: #0079ff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.section-btn-left {
    display: flex;
    width: calc(50%);
    height: 50px;
}

.section-btn-right {
    display: flex;
    width: calc(50%);
    justify-content: space-between;
    margin-right: 8px;
    height: 50px;
    margin-top: 5px;
}

.like-icn {
    height: 23px !important;
    width: 23px !important;
    transform: scale(0.8) !important;
}

.text-elipsis {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.text-elipsis1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.story-title-text-portrait-short {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    line-height: 19px;
    text-align: center;
    letter-spacing: 0.35px;
    color: #FFFFFF;
}

.story-border-gradient-portrait-short {
    box-sizing: border-box;
    padding: 2px;
    border-radius: 100%;
    background: linear-gradient(134.72deg, #00FFFD 0%, #FF5BD8 101.5%);
    transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1), box-shadow 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

.swiper-button-next::after {

}

.swiper-button-prev::after {
    display: none;
}

/* --------------------------------------------------------------------------
   Pembungkus halaman: satu-satunya penentu lebar halaman.
   100dvw menghitung scrollbar vertikal di desktop, jadi overflow-x di-clip
   di sini (bukan di body) agar tidak muncul scroll horizontal.
   -------------------------------------------------------------------------- */
.hp-page {
    box-sizing: border-box;
    width: 100dvw;
    max-width: 100%;
    min-height: 100dvh;
    overflow-x: clip;
    background-color: var(--page-bg);
}

.hp-page *,
.hp-page *::before,
.hp-page *::after {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Lineup (shell bersama)
   -------------------------------------------------------------------------- */
.hp-lineup {
    position: relative;
    margin: 0 0 var(--section-gap);
}

/* :where() = spesifisitas rendah, supaya lebar slide per-lineup (.hp-slide--grid, dst.) bisa menimpa */
:where(.hp-lineup) .swiper-slide {
    width: auto;
    margin-right: 0;
}

/* tombol navigasi hanya untuk pointer desktop */
@media (max-width: 767.98px) {
    .hp-lineup .swiper-button-next,
    .hp-lineup .swiper-button-prev {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Kartu: landscape
   -------------------------------------------------------------------------- */
.hp-card-landscape {
    width: var(--card-landscape-w);
    aspect-ratio: 16 / 9;
    border-radius: 4px;
    overflow: hidden;
}

.hp-card-landscape img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* slide: lebar mengikuti isi kartu, bukan wrapper lama */
.hp-slide {
    position: relative;
    flex-shrink: 0;
    width: auto;
}

.hp-card-landscape--top {
    border-radius: 4px 4px 0 0;
    position: relative;
}

.hp-card-title {
    width: var(--card-landscape-w);
    margin: 8px 0 0;
    font-size: 14px;
    color: #fff;
}

/* --------------------------------------------------------------------------
   Kartu: landscape + teks (landscape_mini_wt)
   -------------------------------------------------------------------------- */
.hp-card-wt {
    width: var(--card-landscape-w);
}

.hp-card-wt .title_wt {
    padding: 8px 0 0;
}

/* --------------------------------------------------------------------------
   Kartu: portrait (2:3)
   -------------------------------------------------------------------------- */
.hp-card-portrait {
    position: relative;
    width: var(--card-portrait-w);
    aspect-ratio: 2 / 3;
    border-radius: 4px;
    overflow: hidden;
}

.hp-card-portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
}

/* --------------------------------------------------------------------------
   Kartu: trending (nomor + portrait)
   -------------------------------------------------------------------------- */
.hp-card-trending {
    display: flex;
    align-items: stretch;
    border-radius: 8px;
    background-color: #171717;
}

.hp-card-trending__rank {
    display: flex;
    justify-content: center;
    flex: 0 0 var(--card-rank-w);
    padding-top: 12px;
}

/* --------------------------------------------------------------------------
   Kartu: landscape besar (16:9) dan 21:9
   -------------------------------------------------------------------------- */
.hp-card-large,
.hp-card-219 {
    border-radius: 8px;
    overflow: hidden;
    background-color: #171717;
}

.hp-card-large {
    width: var(--card-large-w);
    aspect-ratio: 16 / 9;
}

.hp-card-219 {
    width: var(--card-219-w);
    aspect-ratio: 21 / 9;
}

.hp-card-large img,
.hp-card-219 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Kartu live / countdown (landscape_mini_live, landscape_mini_ws, landscape_large_ws)
   -------------------------------------------------------------------------- */
.hp-live-card {
    position: relative;
    width: var(--card-landscape-w);
}

.hp-live-card--large {
    width: var(--card-large-w);
}

.hp-live-card .title_ws h4 {
    margin-top: 8px;
}

.hp-live-card__date {
    margin: 0;
    font-size: 12px;
    color: gray;
}

.hp-live-card__time {
    color: red;
    font-size: 12px;
}

.hp-live-card .countdown h7 {
    font-size: 12px;
    color: red;
}

/* countdown / playing now: mengalir di bawah tanggal di bawah judul (bukan absolute).
   !important diperlukan karena aturan .countdown lama di _home.scss bersarang
   dengan id; hapus setelah SCSS lama dibersihkan. */
.hp-live-card .countdown {
    position: static !important;
    display: inline-block;
    margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Kartu: square (1:1)
   -------------------------------------------------------------------------- */
.hp-card-square {
    width: var(--card-square-w);
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
}

.hp-card-square--mini {
    width: var(--card-square-mini-w);
}

.hp-card-square img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Kartu: portrait + judul (portrait_wt)
   -------------------------------------------------------------------------- */
.hp-card-portrait-wt .hp-card-title {
    width: var(--card-portrait-w);
}

/* --------------------------------------------------------------------------
   Kartu: piringan (portrait_disc)
   -------------------------------------------------------------------------- */
.hp-card-disc {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: var(--card-portrait-w);
    padding: 12px;
    border-radius: 16px;
    background-color: #171717;
    cursor: pointer;
}

.hp-card-disc__vinyl {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #0d5b88;
}

.hp-card-disc__thumb {
    width: 91%;
    height: 91%;
    border-radius: 50%;
    object-fit: cover;
}

.hp-card-disc__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22.5%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: rgba(4, 155, 249, 0.47);
    transform: translate(-50%, -50%);
}

.hp-card-disc__dot {
    width: 67%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: #049bf9;
}

.hp-card-disc__name {
    display: -webkit-box;
    width: 100%;
    margin-top: 8px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 19px;
    text-align: center;
    color: #e3e3e3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* --------------------------------------------------------------------------
   Kartu: top program (angka peringkat besar)
   -------------------------------------------------------------------------- */
.hp-card-toprank {
    flex: 0 0 var(--card-toprank-w);
    display: flex;
    background-color: #282828;
    overflow: visible;
}

.hp-card-toprank__num {
    margin-top: 1rem;
    font-family: Oswald, sans-serif;
    font-weight: 100;
    font-size: calc(var(--card-portrait-w) * 1.5);
    line-height: calc(var(--card-portrait-w) * 1.5);
    color: black;
    -webkit-text-stroke: 2px #fff;
    -webkit-text-fill-color: #282828;
    transform: scale(0.6, 1);
    transform-origin: left center;
}

.hp-card-toprank__num--wide {
    transform: scale(0.5, 1);
}

/* --------------------------------------------------------------------------
   Kartu: landscape super mini (n kartu per tampilan)
   -------------------------------------------------------------------------- */
.hp-slide--super-mini {
    width: calc((100% - (var(--super-mini-per-view) - 1) * var(--lineup-gap)) / var(--super-mini-per-view));
}

.hp-card-super-mini {
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: 4px;
    overflow: hidden;
}

.hp-card-super-mini img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Kartu: kompetisi (hot) – landscape, landscape besar, portrait
   -------------------------------------------------------------------------- */
.hp-card-hot {
    position: relative;
    width: var(--card-landscape-w);
    border-radius: 8px;
    overflow: hidden;
}

.hp-card-hot--large {
    width: var(--card-large-w);
}

.hp-card-hot--portrait {
    width: var(--card-portrait-w);
    background-color: #000;
}

.hp-card-hot__media {
    position: relative;
    aspect-ratio: 16 / 9;
}

.hp-card-hot--portrait .hp-card-hot__media {
    aspect-ratio: 3 / 4;
}

.hp-card-hot__media img:not(.hp-card-hot__logo) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

.hp-card-hot__join {
    display: block;
    width: 100%;
    border-radius: 0 0 8px 8px;
}

.hp-card-hot__logo {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: auto;
}

.hp-card-hot__info {
    padding: 8px;
}

.hp-card-hot__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 19px;
}

.hp-card-hot__sub {
    font-size: 12px;
    line-height: 16px;
    color: #8f8f8f;
}

.hp-card-hot__views,
.hp-card-short__views {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
}

.hp-card-hot__views img,
.hp-card-short__views img {
    width: 13px;
    height: 8px;
}

/* --------------------------------------------------------------------------
   Kartu: short video (judul di atas gradient)
   -------------------------------------------------------------------------- */
.hp-card-portrait > a {
    display: block;
    width: 100%;
    height: 100%;
}

.hp-card-short__title {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 8px 16px;
    background: linear-gradient(to top, rgb(0, 0, 0), transparent);
}

.hp-card-short__title h4 {
    font-size: 14px;
    font-weight: 600;
    line-height: 19px;
}

/* --------------------------------------------------------------------------
   Hover (zoom) card
   zoomIn() (script.blade) mengganti style kartu hover jadi position:absolute
   dan menambah class .sht. Tanpa top/left, kartu hover jatuh di BAWAH kartu
   biasa (double content). Di sini kartu hover dipaku ke pojok kiri atas slide
   dengan lebar yang sama dengan kartu (tanpa zoom; hanya bentuk/isi yang berganti
   menjadi thumbnail + judul + tombol), dan kartu biasa disembunyikan selama hover aktif.
   -------------------------------------------------------------------------- */
.hp-slide > .portrait-hov-wrapper {
    top: 0;
    left: 0;
    width: 100%;
    height: auto !important;
    overflow: hidden;
}

.hp-slide > .portrait-hov-wrapper .zoom-thumbnail-wrapper {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
}

.hp-slide > .portrait-hov-wrapper .trending-thumbnail-hov {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

/* lineup portrait (portrait, trending, top_program): kartu terlalu sempit untuk thumbnail + judul + baris
   tombol, jadi kartu hover memakai lebar sendiri (--card-hover-wide-w) dan boleh melebihi lebar kartu. */
.hp-slide--hover-wide > .portrait-hov-wrapper {
    width: max(var(--card-hover-wide-w), 100%);
}

/* kartu biasa disembunyikan (ruangnya tetap) saat kartu hover tampil */
.hp-slide:has(> .portrait-hov-wrapper.sht) > :not(.portrait-hov-wrapper) {
    visibility: hidden;
}

/* --------------------------------------------------------------------------
   Tag (hashtag)
   -------------------------------------------------------------------------- */
.hp-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 12px 16px;
    margin-right: 11px; /* + spaceBetween Swiper (5px) = 16px */
    border-radius: 8px;
    background: #0079ff;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 1.25px;
    color: #fff;
    white-space: nowrap;
}

.hp-tag:hover {
    color: #fff;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Kartu: berita landscape
   -------------------------------------------------------------------------- */
.hp-card-news {
    display: block;
    width: var(--card-news-w);
    border-radius: 8px;
    overflow: hidden;
    background-color: #000;
}

.hp-card-news__cover {
    aspect-ratio: 16 / 9;
}

.hp-card-news__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp-card-news__body {
    padding: 8px 16px;
}

.hp-card-news__meta {
    color: #8f8f8f;
}

/* --------------------------------------------------------------------------
   Kartu: short (landscape + judul) dan short hot (poster tengah di latar hitam)
   -------------------------------------------------------------------------- */
.hp-card-title-block {
    width: var(--card-landscape-w);
}

.hp-card-title-block h4 {
    margin-top: 8px;
}

.hp-card-short-hot {
    position: relative;
    background-color: #000;
}

.hp-card-short-hot > a {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.hp-card-short-hot__img {
    height: 100%;
    width: auto;
    aspect-ratio: 106 / 139;
    object-fit: cover;
}

.hp-card-short-hot__short {
    position: absolute;
    right: 3%;
    bottom: 6px;
    width: auto;
    max-height: 24px;
}

.hp-card-short-hot__hot {
    position: absolute;
    top: 6px;
    right: 30%;
    width: 32px;
    height: auto;
}

/* --------------------------------------------------------------------------
   Grid (square_list_news, square_list, square_list_audio)
   Swiper grid butuh tinggi kontainer pasti: rows x tinggi baris + (rows-1) x gap.
   Rows harus sama dengan grid.rows di script.blade (square_list = 2, lainnya = 4).
   -------------------------------------------------------------------------- */
.hp-lineup--grid {
    --grid-rows: 4;
    --grid-row-h: var(--grid-row-h-base);
    height: calc(var(--grid-rows) * var(--grid-row-h) + (var(--grid-rows) - 1) * var(--grid-gap));
}

.hp-lineup--square-list {
    --grid-rows: 2;
    --grid-row-h: calc(var(--grid-row-h-base) * 0.85);
}

.hp-lineup--square-list-audio {
    --grid-row-h: calc(var(--grid-row-h-base) * 0.67);
}

.hp-lineup--square-list-audio .hp-slide--grid {
    width: calc(var(--grid-col-w) * 0.84);
}

.hp-slide--grid {
    width: var(--grid-col-w);
    height: var(--grid-row-h);
}

.hp-row-card {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 100%;
}

.hp-row-card__img {
    flex: 0 0 var(--grid-row-h);
    width: var(--grid-row-h);
    height: var(--grid-row-h);
    border-radius: 7px;
    object-fit: cover;
}

.hp-row-card__text {
    flex: 1 1 auto;
    min-width: 0;
}

.hp-row-card__meta {
    font-size: 12px;
    color: #8f8f8f;
}

.hp-row-card__play {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 30px;
    border-radius: 5px;
    background: linear-gradient(130.47deg, #37a8da 5.6%, #00628b 93.94%);
    font-size: 14px;
    color: #fff;
}

/* audio: kartu gelap membulat, teks dua baris, tombol play di kanan */
.hp-row-card--audio {
    padding: 8px 16px 8px 8px;
    border-radius: 16px;
    background: #171717;
}

.hp-row-card--audio .hp-row-card__text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: stretch;
}

.hp-row-card__audio-title {
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    color: #e3e3e3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hp-row-card__audio-desc {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 15px;
    color: #e3e3e3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hp-row-card__share {
    height: 18px;
    width: auto;
    align-self: flex-start;
}

.hp-row-card__audio-play {
    flex: 0 0 auto;
}

.hp-row-card__audio-play img {
    width: 35px;
    height: 35px;
}

/* --------------------------------------------------------------------------
   Thematic: banner + deretan kartu
   < 1280px : banner di atas, kartu menimpa separuh tinggi kartu di tepi bawah banner.
   >= 1280px: banner di kiri, kartu di kanan menimpa tepi kanan banner.
   Shell: resources/views/homepage/shells/thematic.blade.php
   -------------------------------------------------------------------------- */
.hp-thematic {
    display: flex;
    flex-direction: column;
    padding-left: 80px;
}

.hp-thematic__banner {
    position: relative;
    display: block;
    flex: none;
    width: var(--thematic-banner-w);
    aspect-ratio: 16 / 9;
    max-height: 360px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(90deg, #3a3a3a, #4a4a4a);
}

.hp-thematic__banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* memudar ke warna latar di sisi tempat kartu menimpa */
.hp-thematic__banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(40, 40, 40, 0) 40%, var(--page-bg) 100%);
    pointer-events: none;
}

.hp-thematic__track {
    position: relative;
    z-index: 2;
    flex: 0 0 70%;
    align-self: flex-end;
    min-width: 0;
    margin-top: calc(var(--thematic-overlap) * -1);
}

.hp-thematic__nav {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1000; /* di atas kartu hover (.portrait-hov-wrapper z-index:999) supaya panah tidak tertimpa */
    display: none;
    align-items: center;
    width: 64px;
    cursor: pointer;
}

.hp-thematic__nav--prev {
    left: 0;
    justify-content: flex-start;
    background: linear-gradient(90deg, var(--page-bg) 0%, rgba(40, 40, 40, 0) 100%);
}

.hp-thematic__nav--next {
    right: 0;
    justify-content: flex-end;
    padding-right: 16px; /* panah tidak menempel ke tepi layar (scrollbar/tepi yang terpotong tidak menutupinya) */
    background: linear-gradient(270deg, var(--page-bg) 0%, rgba(40, 40, 40, 0) 100%);
}

/* Keadaan tombol dari Swiper. CSS bawaan Swiper hanya mengenali ".swiper-button-prev/next.swiper-button-disabled",
   sedangkan tombol ini memakai kelas bersufiks id (swiper-button-prev{id}), jadi tanpa aturan ini tombol
   prev tetap tampil di posisi awal dan tombol next di ujung. */
.hp-thematic__nav {
    transition: opacity 0.2s ease;
}

.hp-thematic__nav.swiper-button-disabled {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.hp-thematic__nav.swiper-button-lock {
    display: none !important; /* semua kartu sudah muat: tidak ada yang digeser */
}

.hp-thematic__nav img {
    width: 32px;
    height: 32px;
}

@media (min-width: 768px) {
    .hp-thematic__nav {
        display: flex;
    }
}

@media (min-width: 1280px) {
    :root {
        --thematic-banner-w: 550px;
    }

    .hp-thematic {
        flex-direction: row;
        align-items: center;
    }

    .hp-thematic__banner {
        aspect-ratio: 16 / 9;
        max-height: none;
    }

    .hp-thematic__banner::after {
        background: linear-gradient(90deg, rgba(40, 40, 40, 0) 40%, var(--page-bg) 100%);
    }

    /* Track selebar 70% .hp-thematic (lebar penuh, tidak termasuk padding-left), menempel ke tepi kanan layar dan
       menimpa sisi kanan banner. Diposisikan absolut karena banner + track lebih lebar dari area flex. Dipusatkan
       secara vertikal tanpa transform (top/bottom 0 + margin auto + height fit-content). */
    .hp-thematic__track {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        height: fit-content;
        margin: auto 0;
    }
}

@media (min-width: 1920px) {
    :root {
        --thematic-banner-w: 660px;
    }
}

/* --------------------------------------------------------------------------
   Story lineup (portrait_short): slide dibangun di browser oleh script komponen
   -------------------------------------------------------------------------- */
.hp-story-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--card-portrait-w);
    aspect-ratio: 2 / 3;
    padding: 12px;
    border-radius: 8px;
    background-position: center;
    background-size: cover;
}

.hp-story-card .box19 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.hp-story-card__avatar {
    width: 57%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Kartu: continue watching
   -------------------------------------------------------------------------- */
.hp-card-continue {
    display: block;
    width: var(--card-landscape-w);
    border-radius: 8px;
    overflow: hidden;
    background-color: #000;
}

.hp-card-continue__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
}

.hp-card-continue__thumb > img:first-child {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hp-card-continue__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    transform: translate(-50%, -50%);
}

.hp-card-continue__bar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
}

.hp-card-continue__bar-fill {
    height: 100%;
    background: #0079ff;
}

.hp-card-continue__title {
    padding: 8px 16px;
}

/* --------------------------------------------------------------------------
   Judul lineup
   -------------------------------------------------------------------------- */
.hp-lineup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 80px;
}

.hp-lineup-head h3 {
    margin: 0;
    color: #fff;
}

.hp-lineup-head__more {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    text-decoration: none;
}

.hp-lineup-head__more h3 {
    font-size: 24px;
}

/* --------------------------------------------------------------------------
   Shimmer / skeleton
   Ukuran item = token kartu asli (landscape/portrait/dst.) supaya tinggi tidak melompat
   saat konten masuk. Bentuk per tipe: 'skeleton' di config/homepage_lineups.php.
   Markup: resources/views/homepage/shimmer.blade.php
   -------------------------------------------------------------------------- */
.hp-skel-bone {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    background-color: #3a3a3a;
}

/* sapuan kilau: setara before:animate-[shimmer_2s_infinite] + bg-gradient-to-r
   from-transparent via-rose-100/10 to-transparent (videoplus-webm Skeleton) */
.hp-skel-bone::before {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(to right, transparent, rgba(255, 228, 230, 0.1), transparent);
    animation: hp-shimmer-sweep 2s infinite;
}

@keyframes hp-shimmer-sweep {
    100% {
        transform: translateX(100%);
    }
}

.hp-skel__title {
    width: clamp(120px, 20vw, 320px);
    height: 21px;
    margin: 8px 80px;
}

.hp-skel {
    display: flex;
    gap: var(--lineup-gap);
    overflow: hidden;
}

.hp-skel__item {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 8px;
}

.hp-skel__media {
    width: 100%;
}

.hp-skel__text {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hp-skel__text span {
    display: block;
    height: 12px;
}

.hp-skel__text span:first-child {
    width: 80%;
}

.hp-skel__text span:last-child {
    width: 50%;
}

/* lebar item per bentuk */
.hp-skel--landscape .hp-skel__item,
.hp-skel--landscape_text .hp-skel__item {
    width: var(--card-landscape-w);
}

.hp-skel--landscape .hp-skel__media,
.hp-skel--landscape_text .hp-skel__media,
.hp-skel--large .hp-skel__media,
.hp-skel--large_text .hp-skel__media,
.hp-skel--news .hp-skel__media {
    aspect-ratio: 16 / 9;
}

.hp-skel--large .hp-skel__item,
.hp-skel--large_text .hp-skel__item {
    width: var(--card-large-w);
}

.hp-skel--wide .hp-skel__item {
    width: var(--card-219-w);
}

.hp-skel--wide .hp-skel__media {
    aspect-ratio: 21 / 9;
}

.hp-skel--news .hp-skel__item {
    width: var(--card-news-w);
}

.hp-skel--portrait .hp-skel__item,
.hp-skel--portrait_text .hp-skel__item {
    width: var(--card-portrait-w);
}

.hp-skel--portrait .hp-skel__media,
.hp-skel--portrait_text .hp-skel__media {
    aspect-ratio: 2 / 3;
}

.hp-skel--disc .hp-skel__item {
    width: var(--card-portrait-w);
}

.hp-skel--disc .hp-skel__media {
    aspect-ratio: 3 / 4;
    border-radius: 16px;
}

.hp-skel--square .hp-skel__item {
    width: var(--card-square-w);
}

.hp-skel--square_mini .hp-skel__item {
    width: var(--card-square-mini-w);
}

.hp-skel--square .hp-skel__media,
.hp-skel--square_mini .hp-skel__media {
    aspect-ratio: 1 / 1;
}

.hp-skel--super_mini .hp-skel__item {
    width: calc((100% - (var(--super-mini-per-view) - 1) * var(--lineup-gap)) / var(--super-mini-per-view));
}

.hp-skel--super_mini .hp-skel__media {
    aspect-ratio: 2 / 1;
}

/* trending / top program: kolom peringkat + poster portrait */
.hp-skel--trending .hp-skel__item,
.hp-skel--top_program .hp-skel__item {
    flex-direction: row;
    gap: 0;
    width: calc(var(--card-rank-w) + var(--card-portrait-w));
}

.hp-skel--top_program .hp-skel__item {
    width: calc(var(--card-toprank-w) + var(--card-portrait-w));
}

.hp-skel__rank {
    flex: 0 0 var(--card-rank-w);
    margin-right: 4px;
}

.hp-skel--top_program .hp-skel__rank {
    flex-basis: var(--card-toprank-w);
}

.hp-skel--trending .hp-skel__media,
.hp-skel--top_program .hp-skel__media {
    width: var(--card-portrait-w);
    height: calc(var(--card-portrait-w) * 1.5);
}

/* tag */
.hp-skel--tag .hp-skel__item {
    width: 96px;
    margin-right: 11px;
}

.hp-skel--tag .hp-skel__media {
    height: 40px;
}

/* grid: kolom mengalir ke bawah per baris, tinggi dari .hp-lineup--grid */
.hp-skel--grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--grid-rows), var(--grid-row-h));
    grid-auto-columns: var(--grid-col-w);
    gap: var(--grid-gap) 16px;
}

.hp-skel--grid .hp-skel__item {
    width: auto;
}

.hp-skel--grid .hp-skel__media {
    height: 100%;
}

/* thematic: banner placeholder + deretan kartu (layout dari .hp-thematic) */
.hp-thematic .hp-skel {
    gap: var(--lineup-gap);
}

/* track skeleton = track asli (body #now-trending .trending .swiper-container.hp-thematic__track):
   lebar 70%, kartu yang melewati tepi dipotong. Posisi absolut/tengah vertikal di >=1280px sudah dari .hp-thematic__track. */
.hp-thematic__track--skel {
    width: 70%;
    overflow-x: clip;
    overflow-y: visible;
}

/* --------------------------------------------------------------------------
   Pembungkus satu lineup & area geser
   .hp-section menggantikan "col-md-12 lineup-container" (Bootstrap col + left:80px/width:100vw lama) yang
   menggeser lineup 80px ke kanan sehingga sisi kiri tidak bisa digeser sampai ujung dan sisi kanan terpotong.
   Lineup sekarang selebar .hp-page dari tepi kiri sampai tepi kanan.
   -------------------------------------------------------------------------- */
.hp-section {
    position: relative;
    width: 100%;
}

/* Area geser: kartu yang tergeser keluar dipotong di tepi kontainer (overflow-x), kartu hover yang lebih
   tinggi dari slide tetap boleh keluar secara vertikal. Selector sengaja sespesifik aturan legacy
   "body #now-trending .trending .swiper-container { overflow: visible }" (satu-satunya yang masih perlu ditimpa). */
body #now-trending .trending .swiper-container.hp-lineup {
    overflow-x: clip;
    overflow-y: visible;
}

/* Tinggi: legacy "body #now-trending .trending .swiper-container { height: 100% }" mengalahkan tinggi yang
   ditentukan komponen (mis. rumus grid) sehingga tinggi lineup berantakan. Tinggi ditentukan isi (auto);
   hanya grid yang butuh tinggi pasti (rows x tinggi baris + gap) karena Swiper grid membungkus slide per baris.
   Selector sengaja sespesifik aturan legacy tersebut. */
body #now-trending .trending .swiper-container.hp-lineup,
body #now-trending .trending .swiper-container.hp-thematic__track {
    height: auto;
}

body #now-trending .trending .swiper-container.hp-lineup--grid {
    height: calc(var(--grid-rows) * var(--grid-row-h) + (var(--grid-rows) - 1) * var(--grid-gap));
}

/* Wrapper & slide: swiper.min.css memberi ".swiper-wrapper { height: 100% }" dan ".swiper-slide { height: 100% }".
   Terhadap induk bertinggi auto itu setara auto, tetapi begitu induk punya tinggi pasti (grid, track thematic
   desktop) wrapper/slide ikut dipaksa setinggi induk. Tinggi mengikuti isi; hanya wrapper grid yang mengisi
   kontainernya (slide grid bertinggi --grid-row-h, lihat .hp-slide--grid). */
.swiper-container.hp-lineup > .swiper-wrapper,
.hp-thematic__track > .swiper-wrapper {
    height: auto;
}

.swiper-container.hp-lineup--grid > .swiper-wrapper {
    height: 100%;
}

.hp-slide {
    height: auto;
}

/* Thematic desktop: track diposisikan absolut dan dipusatkan vertikal, tingginya mengikuti isi kartu. */
@media (min-width: 1280px) {
    body #now-trending .trending .swiper-container.hp-thematic__track {
        height: fit-content;
    }
}

/* Jarak awal: kartu pertama mulai --lineup-offset-start dari kiri, lalu bisa digeser sampai tepi kiri layar.
   Untuk Swiper jarak ini diberikan lewat slidesOffsetBefore (lineup-script.blade.php) — BUKAN padding pada
   .swiper-wrapper, karena padding tidak dihitung Swiper sehingga kartu terakhir terpotong sebesar padding itu.
   Skeleton (.hp-lineup.hp-skel) diberi jarak yang sama agar posisi tidak melompat saat konten masuk. */
.hp-lineup.hp-skel {
    padding-left: var(--lineup-offset-start);
}

/* Tombol navigasi menempel ke tepi kontainer (legacy: next right:80px, prev left:-80px sehingga
   keluar dari area clip). Selector sespesifik aturan legacy "body #now-trending .trending .swiper-button-*". */
body #now-trending .trending .hp-lineup > .swiper-button-next {
    right: 0;
}

body #now-trending .trending .hp-lineup > .swiper-button-prev {
    left: 0;
}

/* Tempat hasil AJAX lineup (id {id}-{slug}-ctn). Menggantikan kelas legacy ".row-trend"
   (display:flex; flex-wrap:wrap; margin-right:-15px; overflow-y:hidden) yang menarik pembungkus 15px keluar
   dari tepi kanan layar sehingga kartu/tombol terakhir terpotong dan memotong kartu hover secara vertikal.
   Block biasa selebar .hp-section, tanpa margin negatif. */
.hp-lineup-slot {
    width: 100%;
    max-width: 100%;
}

.hp-lineup {
    min-width: 0;
    max-width: 100%;
}

/* Thematic: root (.hp-thematic) hanya mengatur layout; area geser adalah .hp-thematic__track.
   Track memotong kartu yang tergeser keluar dan lebarnya 70% dari .hp-thematic, menempel ke kanan layar;
   menimpa width:100% legacy ("body #now-trending .trending .swiper-container { width:100%; overflow:visible }"). */
body #now-trending .trending .swiper-container.hp-thematic__track {
    width: 70%;
    overflow-x: clip;
    overflow-y: visible;
}

/* kartu hover dibuka ke kiri bila tidak muat di sisi kanan (diatur hpPlaceHover di lineup-script) */
.hp-slide.hp-hover-left > .portrait-hov-wrapper {
    left: auto;
    right: 0;
}

/* --------------------------------------------------------------------------
   Placeholder gambar kartu: selama <img> belum selesai dimuat, kontainer
   menampilkan gambar default (landscape / portrait). Setelah gambar dimuat,
   <img> (object-fit: cover) otomatis menutupinya.
   -------------------------------------------------------------------------- */
:root {
    --placeholder-landscape: url("../image/bg-images/placeholder_landscape.png");
    --placeholder-portrait: url("../image/bg-images/placeholder_potrait.png");
    --card-placeholder-bg: #171717;
}

/* landscape (dan bentuk lain: square, 21:9, 2:1, disc, banner) */
.hp-card-landscape,
.hp-card-square,
.hp-card-large,
.hp-card-219,
.hp-card-super-mini,
.hp-card-hot__media,
.hp-card-disc__vinyl,
.hp-thematic__banner {
    background-color: var(--card-placeholder-bg);
    background-image: var(--placeholder-landscape);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* portrait (dideklarasikan setelah landscape agar menang pada .hp-card-hot--portrait) */
.hp-card-portrait,
.hp-card-hot--portrait .hp-card-hot__media {
    background-color: var(--card-placeholder-bg);
    background-image: var(--placeholder-portrait);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* banner thematic saat shimmer (skeleton): tanpa gambar default, hanya latar abu + kilau */
.hp-thematic__banner.hp-skel-bone {
    background-image: none;
    background-color: #3a3a3a;
}