:root{
  --bg:#090909;--card:#0b0b0b;--text:#eef1f7;
  --muted:rgba(238,241,247,.6);--accent:#8f69e9;--accent-2:#00ffff;
  --t-fast:140ms;--t-med:260ms;--t-long:480ms;
  --hdr:3.1rem
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  height:100%;
  height:100dvh;
  scroll-snap-type:y mandatory;
}
body{
  height:100%;
  height:100dvh;
  background:linear-gradient(180deg,#050506 0%,#0b0b0c 100%);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.top-bar{
  position:absolute;
  top:0;left:0;right:0;
  height:var(--hdr);
  z-index:60;
  display:flex;
  align-items:center;
  padding:0 .6rem;
  gap:.4rem;
  background:linear-gradient(180deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.48) 55%,transparent 100%);
  pointer-events:none
}
.top-bar>*{pointer-events:auto}

/* Tab scroll container */
.cat-tabs-scroll{
  flex:1;
  overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  display:flex;align-items:center;
}
.cat-tabs-scroll::-webkit-scrollbar{display:none}
.cat-tabs{
  display:flex;gap:.18rem;align-items:center;padding:0 .1rem;
}
.cat-tab{
  flex-shrink:0;
  font-family:inherit;font-size:.77rem;font-weight:600;
  color:rgba(255,255,255,.9);
  background:transparent;border:none;cursor:pointer;
  padding:.3rem .69rem;border-radius:3rem;
  transition:color .18s ease;
  position:relative;white-space:nowrap;
  letter-spacing:.01em;
  text-shadow:0 1px 5px rgba(0,0,0,.9);
}
.cat-tab::after{
  content:'';
  position:absolute;bottom:-4px;left:50%;
  transform:translateX(-50%) scaleX(0);
  width:calc(100% - .4rem);height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,#9069e9,#090909,#00f9ff);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 0 6px rgba(144,105,233,.69);
}
.cat-tab.active{color:#fff;font-weight:700}
.cat-tab.active::after{transform:translateX(-50%) scaleX(1)}

/* Top action buttons */
.top-actions{
  display:flex;align-items:center;gap:.21rem;flex-shrink:0;
}
.top-icon-btn{
  width:30px;height:30px;border-radius:50%;
  background:rgba(0,0,0,.51);
  border:1px solid rgba(144,105,233,.06);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:transform .15s,opacity .2s,background .15s;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 8px rgba(0,0,0,.6);
}
.top-icon-btn:active{transform:scale(.81)}
.top-icon-btn.muted{opacity:.51}
.top-icon-btn svg{width:15px;height:15px;display:block;pointer-events:none;flex-shrink:0}
.top-icon-btn img{width:15px;height:15px;display:block;filter:brightness(0) invert(1);pointer-events:none;flex-shrink:0}

/* ══════════════════════════════════════
   SEARCH OVERLAY
══════════════════════════════════════ */
.search-overlay{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  z-index:200;
  background:rgba(4,4,6,.97);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  display:flex;flex-direction:column;
  transform:translateY(-100%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.search-overlay.active{
  transform:translateY(0);
  pointer-events:auto;
}
.search-top-bar{
  display:flex;align-items:center;gap:.3rem;
  padding:.8rem .7rem .6rem;
  border-bottom:1px solid rgba(255,255,255,.07);
  padding-top:calc(.8rem + env(safe-area-inset-top,0px));
}
.search-field-wrap{
  flex:1;position:relative;display:flex;align-items:center;
}
.search-field-icon{
  position:absolute;left:.6rem;
  color:rgba(255,255,255,.39);pointer-events:none;display:flex;
}
.search-input-field{
  width:100%;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  border-radius:.65rem;
  padding:.48rem .7rem .48rem 2rem;
  color:#fff;font-family:inherit;font-size:.88rem;
  outline:none;
  transition:border-color .18s,background .18s;
}
.search-input-field::placeholder{color:rgba(255,255,255,.35)}
.search-input-field:focus{
  border-color:rgba(144,105,233,.55);
  background:rgba(144,105,233,.07);
}
.search-cancel-btn{
  font-family:inherit;font-size:.8rem;font-weight:600;
  color:var(--accent);background:transparent;border:none;
  cursor:pointer;padding:.38rem .1rem;white-space:nowrap;flex-shrink:0;
}
.search-results{
  flex:1;overflow-y:auto;padding:.4rem .5rem;
  scrollbar-width:none;
}
.search-results::-webkit-scrollbar{display:none}
.search-hint{
  font-size:.64rem;color:rgba(255,255,255,.22);
  padding:.4rem .3rem .2rem;letter-spacing:.05em;text-align:center;
}
.search-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:180px;gap:.55rem;
  color:rgba(255,255,255,.28);padding:2rem;
}
.search-empty-icon{font-size:2rem;opacity:.45}
.search-empty-text{font-size:.76rem;text-align:center;line-height:1.6}
.search-result-item{
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .35rem;border-radius:.55rem;cursor:pointer;
  transition:background .12s;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.search-result-item:last-child{border-bottom:none}
.search-result-item:active{background:rgba(255,255,255,.07)}
.search-result-thumb{
  width:44px;height:44px;border-radius:.45rem;
  background:rgba(255,255,255,.05);overflow:hidden;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;border:1px solid rgba(255,255,255,.07);
}
.search-result-info{flex:1;min-width:0}
.search-result-name{font-size:.83rem;font-weight:600;color:#f2f4f8}
.search-result-handle{
  font-size:.68rem;color:var(--accent);font-weight:500;margin-top:.1rem;
}
.search-result-caption{
  font-size:.67rem;color:rgba(255,255,255,.35);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.08rem;
}
.search-result-arrow{color:rgba(255,255,255,.2);flex-shrink:0}

/* ─── STAGE ─── */
.stage{
  position:relative;
  width:100%;max-width:460px;
  height:100vh;height:100dvh;
  margin:0 auto;overflow:hidden;background:#000;
  border-left:1px solid rgba(255,255,255,.03);
  border-right:1px solid rgba(255,255,255,.03);
  display:flex;flex-direction:column
}
.reels-wrap{
  flex:1;
  min-height:0;        /* penting: izinkan flex child menyusut */
  overflow-y:scroll;
  scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;
  scroll-padding:0;    /* snap tepat di tepi atas */
  outline:none;position:relative;scrollbar-width:none
}
.reels-wrap::-webkit-scrollbar{display:none}
.reel{
  /* Pakai --reel-h yang di-set JS, fallback ke dvh → vh */
  height:var(--reel-h, 100dvh);
  scroll-snap-align:start;scroll-snap-stop:always;
  display:flex;align-items:stretch;justify-content:center;
  position:relative;user-select:none;contain:layout style paint
}

/* ─── CARD ─── */
.card{position:relative;width:100%;height:100%;overflow:hidden;background:#000}
.card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.09),transparent 39%,transparent 55%,rgba(0,0,0,.78) 100%);
  pointer-events:none;z-index:4
}
.poster-layer{
  position:absolute;inset:0;width:100%;height:100%;
  background-size:cover;background-position:center;
  filter:blur(9px);transform:scale(1.04);
  transition:opacity var(--t-med) ease;z-index:1;
  pointer-events:none;will-change:opacity
}
.poster-layer.hidden{opacity:0;visibility:hidden}
.card video{
  position:absolute;inset:0;width:100%;height:100%;
  background:#000;border:0;object-fit:cover;
  opacity:0;transition:opacity .18s linear;will-change:opacity
}
.card video.loaded{opacity:1}
/* Video landscape: contain agar tidak terpotong, background hitam bersih */
.card video.landscape{
  object-fit:contain;
  width:100%;
  height:100%;
  background:#000;
}

/* ─── PLAY OVERLAY ─── */
.play-overlay{
  position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;
  z-index:6;transition:opacity var(--t-fast),visibility var(--t-fast)
}
.play-overlay.hidden{visibility:hidden;opacity:0;pointer-events:none}
.play-button-visual{display:flex;flex-direction:column;align-items:center;gap:.35rem}
.play-circle{
  width:4.5rem;height:4.5rem;border-radius:999px;
  background:rgba(0,0,0,.48);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 .3rem 1.25rem rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.14)
}
.play-circle svg{width:69%;height:69%;fill:#fff}
.play-label{font-weight:600;font-size:.69rem;color:#f9f9f9;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.play-btn{position:absolute;inset:0;border:0;background:transparent;cursor:pointer;z-index:9}

/* ─── UI COLUMN (side actions) ─── */
.ui-column{
  position:absolute;right:.65rem;bottom:5.5rem;
  display:flex;flex-direction:column;gap:.65rem;
  z-index:9;align-items:center
}
.ui-btn{
  width:auto;height:auto;min-width:2.65rem;min-height:2.65rem;
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:.56rem;background:transparent;color:#f9f9f9;
  border:none;cursor:pointer;padding:.28rem;
  transition:transform var(--t-fast);position:relative;
  text-decoration:none;text-shadow:0 .3rem 1.25rem rgba(0,0,0,.9)
}
.ui-btn:active{transform:scale(.84)}
.ui-btn svg{
  width:1.6rem;height:1.6rem;display:block;
  pointer-events:none;filter:drop-shadow(0 2px 8px rgba(0,0,0,.75))
}
.ui-btn .count{
  display:block;font-size:.7rem;margin-top:.22rem;
  color:#f9f9f9;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.9)
}
.avatar{
  width:2.6rem;height:2.6rem;border-radius:50%;
  overflow:hidden;background:rgba(255,255,255,.06);
  border:2px solid rgba(255,255,255,.28);box-shadow:0 2px 10px rgba(0,0,0,.6)
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ui-btn.like-btn svg{fill:none;stroke:#fff;stroke-width:1.8}
.ui-btn.liked svg{fill:url(#heartGrad);stroke:none;animation:likeBounce .5s cubic-bezier(.36,.07,.19,.97)}



/* ─── META (caption area) ─── */
.meta{
  position:absolute;left:.82rem;right:6.2rem;bottom:1.35rem;
  z-index:8;color:var(--text);display:flex;flex-direction:column;
  gap:.38rem;pointer-events:none
}
.author{display:flex;align-items:center;gap:.32rem;pointer-events:auto;flex-wrap:wrap}
.author .name{font-weight:700;font-size:.9rem;color:#f9f9f9;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.author .handle{
  font-size:.64rem;font-weight:600;
  color:rgba(190,165,255,.95);
  background:rgba(144,105,233,.14);
  border:1px solid rgba(144,105,233,.28);
  border-radius:2rem;padding:.06rem .42rem;
  text-shadow:none;
}
.caption{
  font-size:11.5px;color:rgba(238,241,247,.88);max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 4px rgba(0,0,0,.8);cursor:pointer;pointer-events:auto;
  line-height:1.55
}
.caption.expanded{white-space:normal;overflow:visible;text-overflow:unset}
.music{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;pointer-events:auto}
.marquee{
  font-size:11.5px;color:var(--muted);max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 4px rgba(0,0,0,.8)
}


/* ─── PAUSE FLASH ─── */
.pause-flash{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.8);
  z-index:15;pointer-events:none;opacity:0;
  transition:opacity .12s ease,transform .12s ease
}
.pause-flash.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.pause-flash svg{filter:drop-shadow(0 2px 16px rgba(0,0,0,.9))}

/* ─── PROGRESS BAR ─── */
.progress-wrap{
  position:absolute;left:0;right:0;bottom:0;height:3px;
  z-index:9;pointer-events:none;background:rgba(255,255,255,.07)
}
.progress-bar{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,#9069e9 0%,#9369db 18%,#da69d3 36%,#00f9ff 54%,#00b9ff 69%,#9069e9 88%,#da69d3 100%);
  background-size:300% auto;
  animation:rainbowShift 3s linear infinite;
  transition:width .08s linear;border-radius:0 2px 2px 0
}

/* ─── HEART ANIMATION ─── */
.heart-anim{
  position:absolute;pointer-events:none;opacity:0;
  transform:translate(-50%,-50%) scale(.9);
  transition:opacity .28s ease,transform .48s cubic-bezier(.2,.9,.3,1);
  z-index:20
}
.heart-anim.show{opacity:1;transform:translate(-50%,-120%) scale(1.05)}

/* ─── TOAST ─── */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:1.5rem;
  background:rgba(10,10,10,.9);padding:.55rem 1rem;border-radius:2rem;
  color:#fff;font-size:.75rem;z-index:10000;opacity:0;
  transition:opacity .18s ease;backdrop-filter:blur(16px);
  pointer-events:none;white-space:nowrap;
  border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 24px rgba(0,0,0,.5)
}
.toast.show{opacity:1}

/* ─── AUDIO TOGGLE ─── */
.audio-toggle{
  position:fixed;top:.96rem;left:.96rem;width:2.7rem;height:2.7rem;
  border-radius:50%;background:rgba(0,0,0,.65);
  border:1px solid rgba(255,255,255,.18);color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:999;backdrop-filter:blur(10px);
  transition:transform .2s,opacity .2s;
  box-shadow:0 2px 12px rgba(0,0,0,.5)
}
.audio-toggle:active{transform:scale(.88)}
.audio-toggle.muted{opacity:.55}
.audio-toggle img{width:22px;height:22px;filter:brightness(0) invert(1);display:block}

/* ─── SHARE MENU ─── */
.share-menu{
  position:fixed;z-index:10000;
  background:rgba(10,10,10,.97);color:#fff;
  border-radius:.875rem;padding:.5rem;
  display:flex;flex-direction:column;gap:.3rem;
  min-width:12rem;backdrop-filter:blur(24px);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 8px 40px rgba(0,0,0,.75);
  animation:menuFadeIn .15s ease
}
@keyframes menuFadeIn{from{opacity:0;transform:scale(.95) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}
.share-menu-title{
  padding:.4rem .75rem .2rem;font-size:.7rem;font-weight:600;
  color:rgba(255,255,255,.35);text-transform:uppercase;letter-spacing:.06em
}
.share-menu button{
  padding:.65rem .9rem;border-radius:.6rem;color:#fff;
  background:transparent;border:none;cursor:pointer;
  text-align:left;transition:background .14s ease;
  font-size:.875rem;display:flex;align-items:center;gap:.6rem;
  font-family:inherit;font-weight:500
}
.share-menu button:hover{background:rgba(255,255,255,.1)}
.share-menu button:active{background:rgba(255,255,255,.16)}
.share-menu .share-icon{
  width:1.6rem;height:1.6rem;border-radius:.4rem;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;flex-shrink:0
}
.share-icon.wa{background:rgba(37,211,102,.18);color:#25d366}
.share-icon.tg{background:rgba(41,182,246,.18);color:#29b6f6}
.share-icon.cp{background:rgba(255,255,255,.1);color:#fff}

/* ─── AD MODAL ─── */
#adModal{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  z-index:1001;background:rgba(0,0,0,.93);backdrop-filter:blur(12px);
  opacity:0;visibility:hidden;
  transition:opacity var(--t-med) ease,visibility var(--t-med) ease;padding:1rem
}
#adModal.is-open{opacity:1;visibility:visible}
.modal-wrap{
  width:min(93vw,520px);max-height:92vh;border-radius:1rem;
  background:rgba(8,8,8,.98);border:1px solid rgba(255,255,255,.1);
  box-shadow:0 2rem 6rem rgba(0,0,0,.8);color:#f2f4f8;
  display:flex;flex-direction:column;overflow:hidden
}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1rem .7rem}
.modal-title{font-size:1.05rem;font-weight:700;color:#f2f4f8;letter-spacing:.02em}
.modal-body{flex:1;display:flex;flex-direction:column;gap:.5rem;padding:0 1rem}
.modal-message{font-size:14px;font-weight:600;color:var(--muted)}
.modal-ad-wrap{
  background:rgba(255,255,255,.03);border-radius:.75rem;padding:.5rem;
  min-height:120px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.05)
}
.modal-actions{
  display:flex;gap:.625rem;justify-content:center;
  padding:.875rem 1rem;border-top:1px solid rgba(255,255,255,.06)
}
.modal-footer{
  text-align:center;font-size:.6rem;color:rgba(255,255,255,.45);
  padding:.5rem 1rem .75rem
}
.gradient-defs{position:absolute;width:0;height:0;overflow:hidden}
.link-accent{color:var(--accent);text-decoration:none}
.link-accent:hover{text-decoration:underline}
.btn{
  font-family:inherit;font-size:.875rem;font-weight:600;border:none;
  border-radius:.75rem;padding:.625rem 1.25rem;cursor:pointer;
  transition:transform var(--t-fast),opacity var(--t-fast),box-shadow var(--t-fast)
}
.btn-ghost{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7)}

.btn-success{
  background:linear-gradient(90deg,#9069e9 0%,#5e35b1 100%);
  color:#fff;box-shadow:0 4px 20px rgba(144,105,233,.3)
}
.btn-success:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(144,105,233,.45)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ─── LOADING SCREEN ─── */
.loading-screen{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#000;color:#fff;flex-direction:column;gap:.75rem;z-index:10
}
.loading-screen[hidden]{display:none}
.loading-title{
  font-size:1.1rem;font-weight:700;letter-spacing:.01em;
  background:linear-gradient(90deg,#9069e9 0%,#9369db 18%,#da69d3 36%,#00f9ff 54%,#00b9ff 69%,#9069e9 88%,#da69d3 100%);
  background-size:300% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:rainbowShift 3s linear infinite
}
.loading-sub{font-size:.85rem;color:rgba(255,255,255,.5)}
.loading-rainbow-bar{
  width:7rem;height:3px;border-radius:99px;
  background:linear-gradient(90deg,#9069e9 0%,#9369db 18%,#da69d3 36%,#00f9ff 54%,#00b9ff 69%,#9069e9 88%,#da69d3 100%);
  background-size:300% auto;
  animation:rainbowShift 2s linear infinite
}
@keyframes rainbowShift{0%{background-position:0% center}100%{background-position:300% center}}

/* ─── VIDEO SPINNER ─── */
.vid-spinner{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:7;pointer-events:none;display:flex;flex-direction:column;
  align-items:center;gap:.75rem;opacity:0;visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease
}
.vid-spinner.active{opacity:1;visibility:visible}
.vid-spinner-ring{position:relative;width:3.5rem;height:3.5rem}
.vid-spinner-ring::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.08);
  animation:pulseRing 1.6s ease-in-out infinite
}
.vid-spinner-ring::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:3px solid transparent;
  border-top-color:#9069e9;border-right-color:#da69d3;
  border-bottom-color:#00f9ff;border-left-color:#00b9ff;
  animation:spin .75s linear infinite,rainbowSpin 2s linear infinite;
  filter:drop-shadow(0 0 6px rgba(144,105,233,.8))
}
.vid-spinner-dot{
  width:.35rem;height:.35rem;border-radius:50%;
  background:linear-gradient(90deg,#9069e9,#00f9ff);
  animation:pulseRing .8s ease-in-out infinite alternate
}
@keyframes rainbowSpin{
  0%  {border-top-color:#9069e9;border-right-color:#da69d3;border-bottom-color:#00f9ff;border-left-color:#00b9ff}
  25% {border-top-color:#da69d3;border-right-color:#00f9ff;border-bottom-color:#00b9ff;border-left-color:#9069e9}
  50% {border-top-color:#00f9ff;border-right-color:#00b9ff;border-bottom-color:#9069e9;border-left-color:#da69d3}
  75% {border-top-color:#00b9ff;border-right-color:#9069e9;border-bottom-color:#da69d3;border-left-color:#00f9ff}
  100%{border-top-color:#9069e9;border-right-color:#da69d3;border-bottom-color:#00f9ff;border-left-color:#00b9ff}
}

/* ─── KEYFRAMES ─── */
@keyframes likeBounce{0%,100%{transform:scale(1)}40%{transform:scale(1.3)}70%{transform:scale(.9)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulseRing{0%,100%{opacity:.15}50%{opacity:.38}}

/* ─── RESPONSIVE ─── */
@media(max-width:480px){.stage{border:none;max-width:none}}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms;animation-iteration-count:1;
    transition-duration:.01ms;scroll-behavior:auto
  }
}

/* ════════════════════════════════
   NATIVE BANNER AD REEL STYLES
   Tampilan identik dengan video card
════════════════════════════════ */
.reel-ad .card{
  background:linear-gradient(160deg,#0c0418 0%,#08030f 50%,#060606 100%)
}
/* Override card::before gradient biar lebih natural */
.reel-ad .card::before{
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.15) 0%,
    transparent 30%,
    transparent 50%,
    rgba(0,0,0,.85) 100%
  )
}
/* Efek glow ungu halus di tengah kartu */
.native-ad-glow{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 75% 55% at 50% 42%, rgba(144,105,233,.13) 0%, transparent 68%),
    radial-gradient(ellipse 40% 30% at 70% 25%, rgba(0,255,255,.04) 0%, transparent 60%);
  animation:adGlowPulse 4s ease-in-out infinite
}
@keyframes adGlowPulse{
  0%,100%{opacity:.7}
  50%{opacity:1}
}
/* Badge "Sponsor" di sudut kiri atas */
.native-ad-label{ display: none;
  position:absolute;top:.81rem;left:.81rem;z-index:10;
  background:rgba(144,105,233,.18);
  border:1px solid rgba(144,105,233,.35);
  color:rgba(200,175,255,.9);
  font-size:.58rem;font-weight:700;
  padding:.2rem .6rem;border-radius:.3rem;
  text-transform:uppercase;letter-spacing:.1em;
  backdrop-filter:blur(8px);
  box-shadow:0 1px 8px rgba(144,105,233,.2)
}
/* Wrapper body iklan, posisi center vertikal */
.native-ad-body{
  position:absolute;
  /* Top lebih tinggi supaya tidak ketutup meta di bawah */
  top:3.5rem;bottom:7.5rem;
  left:0;right:0;
  z-index:3;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:0 .75rem
}
/* Container iklan sebenarnya — lebar penuh, height adaptive */
.native-ad-container{
  width:100%;max-width:420px;
  background:rgba(255,255,255,.025);
  border-radius:.875rem;overflow:hidden;
  border:1px solid rgba(255,255,255,.065);
  min-height:250px;
  display:flex;align-items:center;justify-content:center;
  /* Shadow ungu lembut supaya blend dengan tema */
  box-shadow:
    0 4px 32px rgba(0,0,0,.6),
    0 0 0 1px rgba(144,105,233,.08)
}
/* Inner wrapper untuk native banner agar responsive */
.native-ad-container > div[id^="container-"]{
  width:100% !important;
  min-height:250px;
  display:flex;align-items:center;justify-content:center
}
/* Placeholder loading sebelum iklan ter-inject */
.native-ad-placeholder{
  display:flex;flex-direction:column;
  align-items:center;gap:.7rem;
  color:rgba(255,255,255,.18);font-size:.72rem;letter-spacing:.03em
}
/* Dekorasi lingkaran kecil sudut kanan atas (biar keliatan natural) */
.native-ad-deco{
  position:absolute;top:0;right:0;
  width:160px;height:160px;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 100% 0%, rgba(144,105,233,.06) 0%, transparent 70%)
}
/* CTA hint di bawah container iklan */
.native-ad-cta{
  margin-top:.6rem;
  font-size:.69rem;color:rgba(255,255,255,.9);
  text-align:center;letter-spacing:.03em
}
/* Pastikan gambar dari ad network responsive */
.native-ad-container img{
  max-width:100% !important;
  height:auto !important
}
/* Pastikan iframe dari ad network tidak collapse */
.native-ad-container iframe{
  max-width:100% !important;
  min-height:269px;
  width:100% !important
}

/* ─── EMBED IFRAME (untuk URL player pihak ketiga) ─── */
.embed-frame{
  position:absolute;inset:0;width:100%;height:100%;
  border:0;background:#000;
  opacity:0;transition:opacity .22s linear;
  z-index:3;pointer-events:none
}
.embed-frame.active{
  opacity:1;pointer-events:auto
}
/* Badge "Embed" kecil di sudut kanan atas */
.embed-badge{display: none;
  position:absolute;top:.75rem;right:.75rem;z-index:12;
  background:rgba(0,0,0,.65);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.7);font-size:.55rem;font-weight:700;
  padding:.2rem .55rem;border-radius:.28rem;
  text-transform:uppercase;letter-spacing:.09em;
  pointer-events:none
}

/* ─── FALLBACK BANNER (tampil saat iklan gagal load) ─── */
.native-ad-fallback{
  width:100%;display:block;
  border-radius:.875rem;overflow:hidden;
  cursor:pointer;text-decoration:none;
  position:relative;
  border:1px solid rgba(144,105,233,.25);
  box-shadow:0 4px 32px rgba(0,0,0,.6),0 0 0 1px rgba(144,105,233,.1)
}
.native-ad-fallback img{
  width:100%;height:auto;display:block;
  border-radius:.875rem
}
.native-ad-fallback-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.75) 100%);
  border-radius:.875rem
}
.native-ad-fallback-cta{
  position:absolute;bottom:1.1rem;left:50%;
  transform:translateX(-50%);
  background:linear-gradient(369deg,#9069e9 0%,#090909 100%);
  color:#00f9ff;padding:.51rem 1.2rem;
  border-radius:2rem;font-weight:700;
  font-size:.9rem;white-space:nowrap;
  box-shadow:0 3px 15px rgba(144,105,233,.39);
  animation:pulseCta 3s ease-in-out infinite;
  letter-spacing:.03em
}
.native-ad-fallback-badge{
  position:absolute;top:.6rem;right:.6rem;
  background:rgba(144,105,233,.39);
  border:1px solid rgba(144,105,233,.39);
  color:rgba(210,190,255,.9);
  font-size:.55rem;font-weight:700;
  padding:.18rem .55rem;border-radius:.28rem;
  text-transform:uppercase;letter-spacing:.1em;
  backdrop-filter:blur(8px)
}
@keyframes pulseCta{
  0%,100%{box-shadow:0 3px 15px rgba(144,105,233,.69);transform:translateX(-50%) scale(1)}
  50%{box-shadow:0 3px 33px rgba(218,105,211,.9);transform:translateX(-50%) scale(1.02)}
}
/* Fallback untuk modal ad */
.modal-ad-fallback{
  width:100%;border-radius:.75rem;overflow:hidden;
  cursor:pointer;text-decoration:none;display:block;
  position:relative;border:1px solid rgba(144,105,233,.3)
}
.modal-ad-fallback img{
  width:100%;height:auto;display:block;border-radius:.75rem
}
.modal-ad-fallback-cta{
  position:absolute;bottom:.8rem;left:50%;
  transform:translateX(-50%);
  background:linear-gradient(90deg,#9069e9 0%,#da69d3 100%);
  color:#fff;padding:.45rem 1.2rem;border-radius:3rem;
  font-weight:700;font-size:.75rem;white-space:nowrap;
  box-shadow:0 4px 16px rgba(144,105,233,.5);
  animation:pulseCta 2s ease-in-out infinite;
  letter-spacing:.03em
}
/* ════════════════════════════════
   CINEMA / CLEAN SCREEN MODE
════════════════════════════════ */
.stage.cinema-mode .top-bar{
  opacity:0;pointer-events:none;
  transform:translateY(-110%);
  transition:opacity .35s ease,transform .35s cubic-bezier(.4,0,.2,1)
}
.stage.cinema-mode .ui-column{
  opacity:0;pointer-events:none;
  transform:translateX(110%);
  transition:opacity .3s ease,transform .3s ease
}
.stage.cinema-mode .meta{
  opacity:0;pointer-events:none;
  transform:translateY(14px);
  transition:opacity .3s ease,transform .3s ease
}
.stage.cinema-mode .progress-wrap{
  opacity:0;
  transition:opacity .3s ease
}
/* Lightbulb aktif saat cinema mode: nyala kuning keemasan */
.ui-btn.bookmark-icon.cinema-active svg{
  stroke:#ffd84d;
  filter:drop-shadow(0 0 7px rgba(255,210,50,.85));
}
/* Exit hint pill — muncul di bawah tengah */
.cinema-exit-hint{
  position:absolute;
  bottom:1.6rem;left:50%;
  transform:translateX(-50%) translateY(0);
  z-index:80;
  display:flex;align-items:center;gap:.42rem;
  background:rgba(0,0,0,.62);
  border:1px solid rgba(255,255,255,.14);
  border-radius:2rem;
  color:rgba(255,255,255,.72);
  font-family:inherit;font-size:.72rem;font-weight:600;
  padding:.42rem .9rem;cursor:pointer;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 4px 20px rgba(0,0,0,.5);
  letter-spacing:.02em;white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .35s ease .15s,transform .35s ease .15s
}
.cinema-exit-hint[hidden]{display:none}
.stage.cinema-mode .cinema-exit-hint{
  opacity:1;pointer-events:auto;
}
.cinema-exit-hint:active{transform:translateX(-50%) scale(.93)}