/* ==========================================================================
   KAVANA — /reels (feed vertikal ala Reels/TikTok)
   ========================================================================== */

.page-reels { background: #050505; color: #fff; overflow: hidden; }
.page-reels::after { display: none; }

/* header di atas video */
.page-reels .site-header { background: linear-gradient(to bottom, rgb(5 5 5 / 0.55), transparent); border: 0; }
.page-reels .site-header.is-scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; }
.page-reels .top-nav a:not(.btn) { color: rgb(255 255 255 / 0.7); }
.page-reels .top-nav a:not(.btn):hover,
.page-reels .top-nav a[aria-current="page"] { color: #fff; }

/* ---------- Feed ---------- */
.feed {
  position: fixed;
  inset: 0;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  outline: none;
}
.feed::-webkit-scrollbar { display: none; }

.feed-item {
  position: relative;
  height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  isolation: isolate;
}

.feed-bg {
  position: absolute;
  inset: -10%;
  z-index: -1;
  display: none;
}
.feed-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(50px) saturate(1.4); opacity: 0.45; }

.feed-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}
.feed-stage > img,
.feed-stage > video,
.feed-stage > iframe,
.feed-stage > .ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
.feed-stage > video { z-index: 1; }
.feed-stage > iframe { z-index: 3; background: #000; }

/* lapisan sentuh: putar/jeda (video sendiri) atau mulai embed */
.feed-tap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.feed-tap-icon {
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 250ms, transform 350ms var(--ease-out);
}
.feed-tap-icon svg { width: 30px; height: 30px; }
.feed-item.is-paused .feed-tap-icon,
.feed-item.is-embed:not(.is-embed-live) .feed-tap-icon { opacity: 1; transform: none; }
.feed-item.is-embed:not(.is-embed-live) .feed-tap-icon { background: var(--ivory); color: var(--on-ivory); }
.feed-item.is-embed:not(.is-embed-live) .feed-tap-icon svg { margin-left: 4px; }

.feed-item.is-loading .feed-stage::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  z-index: 2;
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border: 2px solid rgb(255 255 255 / 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  pointer-events: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.feed-empty {
  position: absolute;
  inset: auto 0 38%;
  z-index: 2;
  margin: 0;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 300;
  color: rgb(255 255 255 / 0.9);
  pointer-events: none;
}

/* ---------- Info & rail ---------- */
.feed-shade {
  position: absolute;
  inset: 55% 0 0;
  z-index: 2;
  background: linear-gradient(to top, rgb(0 0 0 / 0.7), transparent);
  pointer-events: none;
}
.feed-info {
  position: absolute;
  left: 16px;
  right: 84px;
  bottom: calc(var(--pill-space) + 22px);
  z-index: 4;
  display: grid;
  gap: 0.35rem;
  pointer-events: none;
}
.feed-cat {
  justify-self: start;
  padding: 0.25em 0.7em;
  border-radius: 8px 0 8px 0;
  background: rgb(255 255 255 / 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.feed-title { margin: 0; color: #fff; font-size: 1.1rem; font-weight: 400; line-height: 1.25; }
.feed-client { margin: 0; font-size: 0.8rem; opacity: 0.75; }
.feed-desc-wrap { margin-top: 0.25rem; pointer-events: auto; }
.feed-desc {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgb(255 255 255 / 0.82);
  cursor: pointer;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.feed-more {
  padding: 0.15rem 0;
  border: 0;
  background: none;
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
/* dibuka: teks penuh, area bisa digulir kalau panjang, bayangan lebih pekat agar terbaca */
.feed-item.is-desc-open .feed-desc {
  display: block;
  max-height: 38vh;
  overflow-y: auto;
  -webkit-line-clamp: unset;
  line-clamp: none;
}
.feed-item.is-desc-open .feed-shade {
  inset: 25% 0 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.85) 40%, transparent);
}


.feed-rail {
  position: absolute;
  right: 12px;
  bottom: calc(var(--pill-space) + 18px);
  z-index: 4;
  display: grid;
  gap: 14px;
  justify-items: center;
}
.rail-btn {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rail-icon {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px 0 14px 0;
  background: rgb(255 255 255 / 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color var(--dur-fast), border-radius var(--dur) var(--ease-out), transform 150ms;
}
.rail-icon svg { width: 22px; height: 22px; }
.rail-btn:hover .rail-icon { background: rgb(255 255 255 / 0.28); border-radius: 0 14px 0 14px; }
.rail-btn:active .rail-icon { transform: scale(0.88); }
.rail-btn--order .rail-icon { background: var(--ivory); color: var(--on-ivory); }

.feed-progress {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  z-index: 4;
  height: 3px;
  background: rgb(255 255 255 / 0.2);
  pointer-events: none;
}
.feed-progress > i {
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}

/* ---------- Navigasi naik/turun (desktop) ---------- */
.feed-nav { display: none; }
.feed-nav-btn {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 14px 0 14px 0;
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background-color var(--dur-fast), border-radius var(--dur) var(--ease-out), opacity var(--dur-fast);
}
.feed-nav-btn:hover { background: rgb(255 255 255 / 0.22); border-radius: 0 14px 0 14px; }
.feed-nav-btn:disabled { opacity: 0.3; cursor: default; }
.feed-nav-btn svg { width: 22px; height: 22px; }

/* ---------- Hint & toast ---------- */
.feed-hint,
.feed-toast {
  position: fixed;
  left: 50%;
  z-index: 60;
  margin: 0;
  padding: 0.55em 1.1em;
  border-radius: 999px;
  background: var(--ivory);
  color: var(--on-ivory);
  font-size: var(--text-sm);
  font-weight: 400;
  pointer-events: none;
  transform: translateX(-50%);
}
.feed-hint { top: 42%; animation: hint 1.6s var(--ease-in-out) infinite; }
@keyframes hint { 50% { transform: translate(-50%, -14px); } }
.feed-toast { top: calc(var(--header-h) + 52px); opacity: 0; transition: opacity var(--dur); }
.feed-toast.is-on { opacity: 1; }

/* ---------- Desktop: frame 9:16 di tengah ---------- */
@media (min-width: 821px) {
  .feed-bg { display: block; }
  .feed-stage {
    width: auto;
    height: calc(100dvh - 32px);
    aspect-ratio: 9 / 16;
    border-radius: 22px 0 22px 0;
    box-shadow: 0 40px 120px -30px rgb(0 0 0 / 0.9), 0 0 0 1px rgb(255 255 255 / 0.08);
  }
  .feed-info { bottom: 22px; right: 22px; }
  .feed-rail {
    right: auto;
    left: calc(50% + (100dvh - 32px) * 9 / 32 + 18px);
    bottom: 24px;
  }
  .feed-nav {
    position: fixed;
    right: clamp(16px, 3vw, 40px);
    top: 50%;
    z-index: 40;
    display: grid;
    gap: 10px;
    transform: translateY(-50%);
  }
}