/**
 * Slider media — pasangan assets/js/feed-slider.js.
 * Hanya berlaku untuk card .feed-item--slider (post yang punya Gallery card).
 */
.feed-slider {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    background: transparent; /* feature image terlihat selama gambar slide dimuat */
}
/* [WordPress] Saat slide pertama/terakhir ditarik melewati ujung: celahnya polos, bukan cover */
.feed-slider.is-edge-pull {
    background: #000;
}
.feed-slider__track {
    display: flex;
    height: 100%;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.feed-slider__slide {
    position: relative;
    flex: 0 0 100%;
    height: 100%;
    overflow: hidden;
}
.feed-slider__slide img,
.feed-slider__slide video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}

/* Dot: tengah bawah, sejajar horizontal dengan tombol mute.
   Mute: bottom var(--feed-mute-bottom), tinggi 32px → garis tengah = +16px.
   Dot 7px → bottom = mute-bottom + (32 - 7) / 2. */
.feed-slider__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--feed-mute-bottom, 24px) + 12.5px);
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 6px;
    pointer-events: none;
}
.feed-slider__dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    box-shadow: none;
    outline: none;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.2s ease;
}
.feed-slider__dot.is-active {
    background: #fff;
}

/* Tombol mute hanya tampil saat slide aktif berupa video */
.feed-slider__mute[hidden] {
    display: none;
}


/* =========================================================
   [WordPress] Foto 3:4 (mis. 1080×1440): tampil UTUH, tidak dipotong dan tidak
   diperbesar, di tengah dengan pita HITAM atas-bawah (pita minimal 44px).
   + Teks nama situs ("Teesful") menetap di atas pojok kiri foto.
   Video (1080×1920) tetap memenuhi layar; saat slide video tampil, teks hilang.
   Class dari reel-card.php (gambar awal) & feed-slider.js (slide yang sedang tampil).
   ========================================================= */
.feed-item {
    container-type: size;           /* ukuran kartu dipakai untuk menghitung letak teks (cqw/cqh) */

    /* Pita hitam di ATAS foto. 9% tinggi kartu = sama dengan proporsi Instagram
       (foto mulai 9,3% dari atas layar), dan ikut menyesuaikan tinggi layar HP.
       Angka lebih kecil = foto lebih naik. Minimal ±36px (ruang teks nama situs). */
    --reel-top-band: 9cqh;
}

/* Gambar awal (sebelum slider siap) & slide foto 3:4 */
.feed-item__media--framed,
.feed-slider__slide--framed {
    background: #000;               /* pita hitam; juga menutup gambar awal di belakang slider */
}
.feed-item__media--framed > img,
.feed-slider__slide--framed img {
    /* Foto menempel ke atas (gaya Instagram): pita atas hanya setinggi teks nama situs,
       sisa ruang jatuh ke bawah (tempat tombol beli & titik slide).
       Tinggi kotak = tinggi foto itu sendiri (lebar × 4/3), dibatasi sisa tinggi kartu. */
    top: var(--reel-top-band, 44px);
    bottom: auto;
    height: min(calc(100% - var(--reel-top-band, 44px) - 44px), calc(100cqw * 4 / 3));
    object-fit: contain;            /* utuh: tidak dipotong dan tidak diperbesar */
}

/* Teks nama situs: disembunyikan. Digantikan angka slide di posisi yang sama (kiri atas foto). */
.feed-item__brand {
    display: none;
}

/* ---------- Angka slide ("2/5") di kiri atas foto, di posisi teks nama situs ----------
   Di tengah pita hitam atas, sejajar dengan ikon keranjang. Posisi kirinya sama dengan
   posisi teks "Teesful" yang dihilangkan. Tanpa latar, tanpa bayangan. */
.feed-slider__count {
    position: absolute;
    z-index: 5;
    top: calc(var(--reel-top-band, 44px) / 2 - 12px);   /* tengah pita (tinggi 24px) */
    left: calc((100cqw - min(100cqw, (100cqh - var(--reel-top-band, 44px) - 44px) * 0.75)) / 2 + 14px);
    right: auto;
    padding: 3px 0;                     /* tanpa latar: padding samping tidak diperlukan */
    background: none;                   /* tanpa latar */
    color: #fff;
    font-family: "Inter", var(--utility);
    font-size: 13px;                    /* 1px lebih besar (sebelumnya 12px) */
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 18px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.feed-slider__count.is-visible {
    opacity: 1;
}
/* Slide video / foto yang memenuhi layar: tanpa latar dan tanpa bayangan (angka di atas pita hitam
   sendiri tidak perlu, dan di atas foto / video yang terang biarkan apa adanya) */
@media (prefers-reduced-motion: reduce) {
    .feed-slider__count {
        transition: none;
    }
}

/* Ikon keranjang (lingkaran merah) di halaman reel: tepat di tengah pita hitam atas, sejajar dengan
   teks nama situs & angka slide. Pita = 9% tinggi kartu (= tinggi layar) → tengahnya 4,5% tinggi layar.
   Area sentuh ikon 40px dengan lingkaran 22px di tengahnya → atas = tengah pita − 20px. */
.post-template .tf-cart {
    top: calc(4.5vh - 20px);
    top: calc(4.5dvh - 20px);
}

/* [WordPress] Slide video tanpa poster: latar gelap sendiri (cover kartu di balik slider tidak ikut terlihat),
   video memudar masuk saat frame pertamanya siap (class is-ready dari feed-slider.js), dan indikator memuat
   muncul hanya bila video masih belum siap 0,4 dtk setelah slide-nya tampil. Video berat tetap tampil halus. */
.feed-slider__slide--video {
    background: #000;
}
.feed-slider__slide--video.has-poster {
    background: transparent;   /* video pertama memakai cover sebagai poster: tetap seperti dulu */
}
.feed-slider__slide--video video {
    opacity: 0;
    transition: opacity 0.25s ease;
}
.feed-slider__slide--video video.is-ready,
.feed-slider__slide--video.has-poster video {
    opacity: 1;
}
.feed-slider__slide--video.is-waiting::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 2.5px solid rgba(255, 255, 255, 0.25);
    border-top-color: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: tf-video-spin 0.8s linear infinite, tf-video-show 0s linear 0.4s forwards;
}
@keyframes tf-video-spin { to { transform: rotate(360deg); } }
@keyframes tf-video-show { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .feed-slider__slide--video video { transition: none; }
}