#tagging{margin-top:20px;border-top:1px dashed #444}
.disabled-link {cursor: not-allowed;text-decoration: none;}
.disabled-link i {font-size:3px;}
.alert {
  padding: 20px;
  background-color: #f44336; /* Red for danger/errors */
  position: fixed;
    bottom: 20%;
    right: 20px;
    width: 300px;
    z-index: 1000;
}

/* Style the close button */
.closebtn {
  margin-left: 15px;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

/* Change color on hover */
.closebtn:hover {
  color: black;
}

@keyframes dismiss {
  0% {
    opacity: 1;
  }
  90%, 100% {
    opacity: 0;
    font-size: 0.1px;
    transform: scale(0);
  }
}

@keyframes hide {
  100% {
    height: 0px;
    width: 0px;
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    border: 0px;
  }
}


@font-face {
  font-family: Quicksand;
  src: url('/aset/huruf/Quicksand-Regular.otf');
  font-display: swap;
}
*{box-sizing:border-box}
body,html{font-family:Quicksand;color:#d6d6d6;background:#0f0f0f;margin:0;padding:0;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-rendering: optimizeLegibility;}
a,button,img{-webkit-transition:all .4s ease 0s;-moz-transition:all .4s ease 0s;-ms-transition:all .4s ease 0s;-o-transition:all .4s ease 0s;transition:all .4s ease 0s}
.arrow{position:fixed;bottom:10%;right:8%;z-index:2}
.arrow a{text-align:center;background:#f37c20;display:block;border-radius:3px;opacity:.5}
.arrow a:hover{opacity:1}
.arrow a span{color:#f2f2f2;font-size:1em;padding:1em;cursor:pointer}
nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;height:70px;padding:0 7vw;height:70px;background:rgba(15,15,15,.9);box-shadow:0 1px 5px rgb(0 0 0 / 40%);border-bottom:1px solid #000;margin-bottom:4em;}
.logo img{width:auto;height:2em;margin:0 auto}
nav .nav-items{display:flex;flex:1;padding:0 0 0 40px}
nav .nav-items li{list-style:none;padding:0 15px}
nav .nav-items li:hover{background:#111}
nav .nav-items li a{font-size:18px;font-weight:500;text-decoration:none}
nav form{display:flex;height:40px;padding:2px;min-width:18%!important;border-radius:2px;border:1px solid rgba(155,155,155,.2)}
nav form .search-data{width:100%;height:100%;padding:0 10px;border:none;font-family:Quicksand,sans-serif;color:#d6d6d6;background:0 0}
nav form button{padding:0 15px;font-size:2.5vh;background:#f37c20;border:none;border-radius:2px;cursor:pointer}
nav form button:hover{background:#e63600}
nav .cancel-icon,nav .menu-icon,nav .search-icon{width:40px;text-align:center;margin:0 50px;font-size:18px;cursor:pointer;display:none}
nav .cancel-icon,nav .menu-icon span,nav .search-icon{display:none}
nav .logo.space{color:red;padding:0 5px 0 0}
#kontener{width:90%;margin:0 auto;overflow:hidden}
#kontener:after{content:" ";display:block;clear:both}
.breadcrumb{margin:6vh auto 3vh;padding:10px 0}
.masonry{-webkit-column-count:5;-moz-column-count:5;column-count:5;-webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;margin:1vh auto 3vh;padding:0}
/* Pos Populer */
.judulpop, .judulterbaru {
	border-left:5px solid #f37c20;
	padding:0 15px;
}
.judulpop {margin:1.5em auto;}
.judulterbaru {margin:3em auto -1.6rem;}
#bannerteras {
	height: 25rem;
  overflow: hidden;
  position: relative;
  border-radius:10px;
  background: linear-gradient(164deg, #f4c28e 0%, #f37c20 100%);
  width:100%;
}
.mantap {
	height: 100%;
  position: relative;
  width: 100%;
}
.linkpop {
  display: none;
  height: 100%;
  position: absolute;
  width: 100%;
  overflow:hidden;
}

.linkpop:first-child {
  display: block;
}
.mantap img {
	image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  clip-path: inset(0% 0% 0% 0% round 0% 45% 0 0%);
  width: 68%;
  margin:-5em 0 0 -5em;
}
.bentuk {
	position:relative;
}
.curved1 {
	width: 100px;
	height: 100px;
	margin-top:-.26em;
}
.curved2 {
	width: 590px;
	height: 100px;
	margin-top: -0.6em;
}
.curved1, .curved2 {
	overflow: hidden;
	position: absolute;
	padding: 2rem 20%;
	z-index:1;
}
.curved1:before {
	width: 50%;
	box-shadow: -50px -50px 0 0 #f37c20;
}
.curved2:before {
	width: 100%;
	box-shadow: -50px -20px 0 0 #f37c2075;
}
.curved1:before, .curved2:before {
	content: "";
	display: block;
	position: absolute;
	height:200%;
	border-radius: 50%;
	top: 0;
	left: 0;
	margin: -1em 0 0 -.2em;
}
.curved3 {
	width: 65%;
	height: 1000px;
	position: absolute;
	clip-path: inset(0% 0% 0% 0% round 0% 65% 0% 0%);
	background: rgba(0, 0, 0, 0.2);
	margin: -4.5em 0 0 2em;
	transform: rotate(8deg);
}
.bulet {
	position: absolute;
	right: 0;
	width: 50%;
	display: inline-block;
	height: 100%;
}
.bulet1 {
	right: -140px;
	position: absolute;
	width: 300px;
	height: 300px;
	top: -140px;
}
.bulet2 {
	width: 100px;
	height: 100px;
	top: -407px;
	margin: 10rem 0 0 6rem;
}
.bulet3 {
	right: -229px;
	width: 150px;
	height: 150px;
	top: -120px;
	margin: 4rem 0 0 15rem;
}
.bulet1, .bulet2, .bulet3 {
	background: rgba(0, 0, 0, 0.1);
	border-radius: 50%;
}
.metaposter {
	position: absolute;
	top:0;
	width: 50%;
	right:2rem;
	margin:5% auto;
	color:#f7f7f7;
}
.metaposter h2 {
	font-weight: bold;
  text-shadow: 2px 2px 2px #000;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 2.1em;
  text-align: left;
  margin-bottom:-20px;
  line-height:2;
}
.metaposter p {
	background: #0f0f0f75;
	padding: 10px;
	border-radius: 10px;
	position: absolute;
}
.mainkan {
	margin: 6em 2.5em;
	padding: 15px;
	border-radius: 10px;
	font-weight: bold;
	position: absolute;
	right: 0;
	font-size: 1.4em;
	background: #edde5d;
	background: -webkit-linear-gradient(149deg, #edde5d 0%, #f09819 100%);
	background: linear-gradient(149deg, #edde5d 0%, #f09819 100%);
	text-shadow: 1px 1px 1px #d6d6d6;
  color: #242424;
  box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.75);
-webkit-box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 3px 2px 5px 0px rgba(0,0,0,0.75);
}
.slide_buttons {
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
}

a.slide_btn {
  color: #474544;
  font-size: 2em;
  margin: 0 0.175em;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.slide_btn.active, .slide_btn:hover {
  color: #f37c20;
  cursor: pointer;

}

.directional_nav {
  position: relative;
  top: -230px;
}

.previous_btn {

  left: 2%;
  margin: auto;
  position: absolute;

}

.next_btn {

  margin: auto;
  position: absolute;
  right: 2%;

}

.previous_btn, .next_btn {
	cursor: pointer;
	opacity: 1;
	-webkit-transition: opacity 0.4s ease-in-out;
	-moz-transition: opacity 0.4s ease-in-out;
	-ms-transition: opacity 0.4s ease-in-out;
	-o-transition: opacity 0.4s ease-in-out;
	transition: opacity 0.4s ease-in-out;
	border-radius: 50%;
	background: #1d1d1de5;
	color: #fff;
	padding: .5em .6em;
	font-size: 2em;
}

.previous_btn:hover, .next_btn:hover {
  opacity: 0.6;
}
/* Pos Populer */

#x999 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(6,6,10,.96);
  z-index: 2147483647;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
#x999-x {
  position: fixed;
  top: 14px;
  right: 16px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: 1.1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s;
}
#x999-x:hover {
  background: rgba(243,124,32,.5);
  border-color: #f37c20;
}
#x999-img {
  width: 280px;
  max-width: 85vw;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,.7);
  display: block;
}
.ads-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.ad-unit {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Phone: stack vertically */
@media (max-width: 768px) {
    .ads-wrapper {
        flex-direction: column;
    }
}

#lihatsemua{margin: 2em auto 1.5em;display: flex;justify-content: center;}
#lihatsemua a{font-weight:bold;border: 1px solid #d6d6d6;padding: 10px;border-radius: 5px;}
#bungkusan{width:76%;float:right;padding:0 15px}
#sidebar{width:24%;float:left;border-right:1px solid #222}
#sidebar a{color:#f37c20}
#sidebar a:hover{color:#d6d6d6}

#iklansidebar{border-top:1px dashed #444;padding:20px 0;line-height:2.5em;}

.buttonClass {border: 1px solid #f37c20;font-weight:bold;border-radius:5px;padding:7px;}
.buttonClass:hover {background: rgba(192, 118, 60, 1)}

.cover{width:100%;padding:0 15px 15px 0;border-bottom:1px solid #222;margin-top:-15px;object-fit:cover}
.isi{display:inline-block;padding:1em;width:100%;-webkit-transition:1s ease all;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;height:280px;margin-top:6vh}
.isi img{width:100%;height:280px;object-fit:cover;border-radius:5px}
.isi img:hover{padding:1vh;border:1px solid #f37c20}
.isi h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:-.7em}
.featured-video{position:relative}
.dilihat{right: 10px;position: absolute;text-align: right;top: 10px;background: #f37c20;border-radius: 5px;padding: 5px;color: #1d1d1d;font-style: italic}

h1,h2,h3,h4,h5,h6{font-weight:700}
.h1,h1{font-size:1.7em}
.h2,h2{font-size:1.4em}
.h3,h3{font-size:1.2em}
.h4,h4{font-size:16px}
.h5,h5{font-size:14px}
.h6,h6{font-size:12px}
h1.title{border-bottom:1px solid #333;padding-bottom:2px}
h1.one{font-size:1.2em;text-align:center}
a{text-decoration:none;color:#d6d6d6}
a:hover{color:#f37c20}
img{display:block;height:auto;max-width:100%}
img:hover{opacity:.8}
table{width:100%;margin:1em 0;white-space:pre-wrap;word-wrap:break-word;text-align:left}
td,th{padding:5px 10px}
#statis table{border-bottom:1px solid #222}
#statis th{border:1px solid #222}
#statis td{border-inline:1px solid #222}

.video-canvas{
	height:360px;
	position:relative;
	-webkit-touch-callout: none !important;
	-webkit-user-select: none !important;
	-khtml-user-select: none !important;
	-moz-user-select: none !important;
	-ms-user-select: none !important;
	user-select: none !important;
}

/* Abyss */
.title {
  font-weight: bold;
	text-shadow: 2px 2px 2px #000;
}
.sub-title {
  font-size: 0.8em;
}
.icon-active {
  filter: sepia(100%) hue-rotate(150deg) saturate(400%);
}
#video-dis{overflow:hidden;position:absolute;width:100%;height:100%}
#display-frame{width:100%;height:100%}
#playlist{height:inherit;overflow-y:auto;float:right;width:260px}
.daftar{position:absolute;background:#f37c20;margin:10px 0 0 200px;width:42px;text-align:center;padding:1.5px;font-size:2em;font-weight:800;z-index:3;border:1px solid #d6d6d6;-moz-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-o-transition:all .2s ease-in;transition:all .2s ease-in;cursor:pointer;overflow:hidden;}
input[type=checkbox]{display:none}
input[type=checkbox]:checked~.video-li{margin:0}
input[type=checkbox]:checked~label{margin-left:5px}
.video-li{overflow:hidden;position:relative;z-index:4;float:right;width:200px;color:#ededed;list-style-type:none;background:#333;margin-right:-200px;-moz-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-o-transition:all .2s ease-in;transition:all .2s ease-in}
.video-li img{display:block;width:100%;min-height:54px}
#vli-info {
  padding: 5px 10px;
}

#upper-info {
  border-bottom:1px dashed #ededed;
}

#li-titles div {
  padding-bottom: 5px;
}

#lower-info {
  display: flex;
  padding-top: var(--b-pad);
}
#lower-info div {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

#vli-videos {
  overflow: auto;
	margin-top:10px;
}

.video-con {
  display: flex;
  cursor: pointer;
  margin-bottom:5px;
  border:2px solid #0f0f0f;
}
.video-con:hover,
.active-con {
  background: var(--active);
  border:2px solid #f37c20;
}
.index {
  font-size: 1.5em;
  position: absolute;
  margin: 20px 5px;
}
.thumb img {
  width: 100%;height: 100%;
}
.v-titles {
  position: absolute;
  text-align: right;
  right: 5px;
}
.v-titles div:nth-child(2) {
  margin-top: var(--s-pad);
}

/* Abyss */

.downbutt{display:none;}

.downbutt2{margin-bottom:-35px;z-index:999;position:absolute;bottom:0;right:0;max-width:100%;}
.downbutt2 a{border:1px solid #d6d6d6;border-radius: 5px;padding:5px 20px;}
.downbutt2 a:hover{border:1px solid #f37c20}
.downbutt2 p{display:inline}

.movie-info{margin-top:50px}

#tombolbagi{margin:.4em 0 -.2em;display:inline-flex;padding:.4em 0}
ul.share-buttons{display:contents}
ul.share-buttons li{display:inline;padding:.7em .2em}
ul.share-buttons li a{padding:6px;border:1px solid #222;border-radius:5px;width:60px;text-align:center}

.tags{display:block;padding:10px 0 10px;margin:0.6em auto 1em;border-top:1px dashed #444;border-bottom:1px dashed #444;}
.tags a{display:inline-block;border: 1px solid #1d1d1d;border-radius: 5px;padding: 5px;margin: 4px 2px;}

/* Pos Terkait */
#pos-terkait {
  position: relative;
  margin:1em auto 2em;
  border-top:1px dashed #444;
  border-bottom:1px dashed #444;
}
.header-terkait {
    margin-bottom:-15px;
}
.daftar-terkait {
  display: flex;
  gap: 8px;
  padding: 15px;
  list-style: none;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;

  /* Hide scrollbar in IE and Edge */
  -ms-overflow-style: none;
}

/* Hide scrollbar in webkit */
.list::-webkit-scrollbar {
  display: none;
}

.item-terkait {
  flex-shrink: 0;
  width: 150px;
  height: 200px;
  scroll-snap-align: center;
}

.ini-juga {
    position:relative;
    width:100%;
    height:100%;
}
.ini-juga img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 5px;
}
.ini-juga h3 {
  font-weight: bold;
  text-shadow: 2px 2px 2px #000;
  position: relative;
  margin: 9px auto;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-size: 1em;
  text-align: left;
}
.dilihat-terkait {
    position: absolute;
  text-align: right;
  top: 5px;
  background: #f37c20;
  border-radius: 5px;
  padding: 5px;
  color: #1d1d1d;
  font-style: italic;
  right: 5px;
}
.info-terkait {
  position: relative;
  width: 100%;
  height: 20%;
  padding: 0 5px;
  margin: -40px 0 auto;
  background: #f37c2065;
  overflow: hidden;
  border-radius: 0px 0px 5px 5px;
}
.button-terkait {
  position: absolute;
  top: 10em;
  width: 3rem;
  height: 3rem;
  border-radius: 3px;
  background: #1d1d1de5;
  color: #d6d6d6;
  border: none;
  cursor:pointer;
}

.button--previous {
  left: 1.5rem;
}

.button--next {
  right: 1.5rem;
}
/* Pos Terkait */

.pagination{display:inline-block;margin:2.3vh auto;border-radius:4px}
.pagination>li{display:inline}
.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;text-decoration:none;border:1px solid rgba(155,155,155,.2)}
.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}
.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}
.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{background:#333}
.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{z-index:2;cursor:default;background-color:#f37c20;color:#222;font-weight:700}
.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{cursor:not-allowed}
.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px}
.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{border-top-left-radius:6px;border-bottom-left-radius:6px}
.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}
.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px}
.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-top-left-radius:3px;border-bottom-left-radius:3px}
.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>span{border-top-right-radius:3px;border-bottom-right-radius:3px}

/* View counter */
.view-count{display:inline-flex;align-items:center;gap:4px;color:#1d1d1d;font-size:.9em;background:#f37c20;padding:0 10px;border-radius:5px}
.view-count .fa-eye{font-size:.85em}

.footer{height:75px;width:100%;border-top:1px solid #000;box-shadow:0 -1px 5px rgb(0 0 0 / 40%)}
#kaki{margin:15px auto;left:6.2vw;border-left:5px solid #f37c20;position:absolute;padding:0 15px;}
ul.sosmed-buttons{display:contents}
ul.sosmed-buttons li{display:inline;padding:2px;}
ul.sosmed-buttons li a{width:25px;font-size:.8em;padding:5px;border:1px solid #1d1d1d;border-radius:50%;text-align:center;}
.copyleft{margin: 5px auto;font-size:0.8em}

.chatbro_header .chatbro_minimize_button{margin-top:-18px !important;}

@media print{
body {display:none;}
}
@media (max-width:1245px){
nav{padding:0 50px}
}
@media only screen and (min-width:1201px){
.masonry{-moz-column-count:5;-webkit-column-count:5;column-count:5}
}
@media only screen and (min-width:769px) and (max-width:1200px){
.masonry{-moz-column-count:3;-webkit-column-count:3;column-count:3}
}
@media (max-width:1140px){
nav{padding:0}
nav .logo{flex:2;text-align:center}
nav .nav-items{position:absolute;z-index:99;top:70px;width:100%;left:-100%;height:100%;padding:10px 50px 0 50px;text-align:center;background:#111;display:inline-block;transition:left .3s ease}
nav .nav-items.active{left:0}
nav .nav-items li{line-height:40px;margin:30px 0}
nav .nav-items li a{font-size:20px}
nav form{position:absolute;top:80px;right:50px;opacity:0;pointer-events:none;transition:top .3s ease,opacity .1s ease}
nav form.active{top:95px;opacity:1;pointer-events:auto}
nav form:before{position:absolute;content:"";top:-13px;right:0;width:0;height:0;z-index:-1;border:10px solid transparent;border-bottom-color:#1e232b;margin:-20px 0 0}
nav form:after{position:absolute;content:"";height:60px;padding:2px;background:#1e232b;border-radius:2px;min-width:calc(100% + 20px);z-index:-2;left:50%;top:50%;transform:translate(-50%,-50%)}
nav .menu-icon{display:block}
nav .menu-icon span,nav .search-icon{display:block}
nav .menu-icon span.hide,nav .search-icon.hide{display:none}
nav .cancel-icon.show{display:block}
#bungkusan,#sidebar{width:100%;margin-bottom:15px}
#sidebar{border-right:none;border-bottom:1px dashed #444}
.cover{padding:0 0 15px 0}
#bungkusan{padding:0 0 3vh}
.content{-moz-column-count:2;-webkit-column-count:2;column-count:2}
#tombolbagi{margin:.2em 0}
}
@media (max-width:980px){
nav .cancel-icon,nav .menu-icon,nav .search-icon{margin:0 20px}
nav form{right:30px}
}
@media only screen and (max-width:820px){
}
@media only screen and (min-width:321px) and (max-width:768px){
.masonry{-moz-column-count:2;-webkit-column-count:2;column-count:2}
}
@media (max-width:750px){
#bannerteras{height:18rem;}
.metaposter h2{font-size:1.3em;}
.mainkan{margin:8em 2.5em 0;font-size:.9em;}
.directional_nav{top:-180px;}
.mantap img{width: 78%;margin-top:-4em;}
.video-canvas{height:22em;}
}
@media (min-width:600px){
}
@media (min-width:521px){
/*.video-li img{min-height:85px}*/
}
@media (max-width:520px){
ul.sosmed-buttons li{display:inline;padding:0;}.downbutt p,.downbutt2 p{display:none}
.mantap img{width:100%;margin:0;}
.metaposter{width:70%;margin-right:-3rem;}
.metaposter p{font-size:12px;}
.mainkan{font-size:12px;left:-40px;bottom:-210px;margin:0;width:180px;}
.video-canvas{height:12em;}
}
@media (max-width:350px){
nav .cancel-icon,nav .menu-icon,nav .search-icon{margin:0 10px;font-size:16px}
}
@media only screen and (max-width:320px){
.masonry{-moz-column-count:1;-webkit-column-count:1;column-count:1}
}

/* ════ Vidlix Mobile Player (key2.js) ════ */
.vdx-wrap{position:relative;width:100%;user-select:none;-webkit-user-select:none;font-family:inherit}
.vdx-wrap *{box-sizing:border-box}
.vdx-stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#000;-webkit-tap-highlight-color:transparent;touch-action:none}
.vdx-stage video{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.vdx-poster{position:absolute;inset:0;background-size:cover;background-position:center;z-index:1;transition:opacity .5s}
.vdx-poster.gone{opacity:0;pointer-events:none}
.vdx-bigplay{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.28);transition:opacity .35s}
.vdx-bigplay.gone{opacity:0;pointer-events:none}
.vdx-bp-ring{width:76px;height:76px;border-radius:50%;border:3px solid #f37c20;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;transition:transform .18s,background .18s}
.vdx-bp-ring:active{transform:scale(.92);background:rgba(243,124,32,.25)}
.vdx-top{position:absolute;top:0;left:0;right:0;z-index:5;padding:10px 12px 28px;background:linear-gradient(to bottom,rgba(0,0,0,.75),transparent);display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .28s;pointer-events:none}
.vdx-top.show{opacity:1;pointer-events:auto}
.vdx-ep-title{flex:1;font-size:.82rem;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vdx-ico-btn{background:none;border:none;cursor:pointer;color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .18s;padding:0;-webkit-tap-highlight-color:transparent;flex-shrink:0}
.vdx-ico-btn:hover,.vdx-ico-btn:active{background:rgba(255,255,255,.2)}
.vdx-ico-btn svg{display:block;pointer-events:none}
.vdx-seekbar{position:absolute;bottom:15%;left:10%;right:10%;z-index:6;opacity:0;pointer-events:none;transition:opacity .28s}
.vdx-seekbar.show{opacity:1;pointer-events:auto}
.vdx-timerow{display:flex;justify-content:center;margin-bottom:7px}
.vdx-timecode{font-size:.7rem;color:rgba(255,255,255,.85);letter-spacing:.04em;font-family:monospace;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.vdx-bar-track{position:relative;height:5px;background:rgba(255,255,255,.2);border-radius:3px;cursor:pointer;transition:height .15s}
.vdx-bar-track:active{height:8px}
.vdx-bar-buf{position:absolute;inset:0;background:rgba(255,255,255,.25);border-radius:3px;width:0%;pointer-events:none}
.vdx-bar-fill{position:absolute;left:0;top:0;bottom:0;background:#f37c20;border-radius:3px;width:0%;pointer-events:none;transition:width .08s linear}
.vdx-bar-fill::after{content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:#fff;opacity:0;transition:opacity .15s}
.vdx-bar-track:active .vdx-bar-fill::after{opacity:1}
.vdx-hint{position:absolute;bottom:22%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.65);color:#fff;padding:7px 18px;border-radius:20px;font-size:.78rem;pointer-events:none;opacity:0;transition:opacity .25s;z-index:9;white-space:nowrap;text-align:center;max-width:84%}
.vdx-hint.on{opacity:1}
.vdx-swipe-hints{position:absolute;bottom:20%;left:0;right:0;z-index:7;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:7px;transition:opacity .6s;opacity:0}
.vdx-swipe-hints.on{opacity:1}
.vdx-sh{background:rgba(0,0,0,.62);color:rgba(255,255,255,.82);padding:5px 14px;border-radius:16px;font-size:.72rem}
.vdx-pl{position:absolute;bottom:0;left:0;right:0;z-index:10;background:rgba(6,6,10,.94);padding:10px 0 14px;transition:transform .3s cubic-bezier(.4,0,.2,1);transform:translateY(101%)}
.vdx-pl.open{transform:translateY(0)}
.vdx-pl-head{display:flex;align-items:center;justify-content:space-between;padding:0 14px 8px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:8px}
.vdx-pl-label{font-size:.68rem;color:rgba(255,255,255,.4);letter-spacing:.12em;text-transform:uppercase}
.vdx-pl-close{background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;padding:4px;display:flex;-webkit-tap-highlight-color:transparent}
.vdx-pl-close:hover,.vdx-pl-close:active{color:#f37c20}
.vdx-pl-row{display:flex;gap:10px;overflow-x:auto;padding:0 14px 4px;scrollbar-width:none;-ms-overflow-style:none;scroll-snap-type:x mandatory}
.vdx-pl-row::-webkit-scrollbar{display:none}
.vdx-ep-card{flex-shrink:0;width:116px;cursor:pointer;scroll-snap-align:start;border-radius:6px;overflow:hidden;border:2px solid transparent;transition:border-color .2s;-webkit-tap-highlight-color:transparent}
.vdx-ep-card.now{border-color:#f37c20}
.vdx-ep-thumb{width:100%;height:66px;object-fit:cover;background:#1a1a1a;display:block}
.vdx-ep-name{font-size:.68rem;color:#aaa;padding:5px 6px 6px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#0f0f12}
.vdx-ep-card.now .vdx-ep-name{color:#f37c20}
.vdx-spin{position:absolute;inset:0;z-index:6;display:none;align-items:center;justify-content:center;pointer-events:none}
.vdx-spin.on{display:flex}
.vdx-spin-ring{width:34px;height:34px;border:2px solid rgba(255,255,255,.1);border-top-color:#f37c20;border-radius:50%;animation:vdx-rot .75s linear infinite}
@keyframes vdx-rot{to{transform:rotate(360deg)}}
.vdx-ad{position:absolute;inset:0;z-index:20;background:#000;display:none;flex-direction:column}
.vdx-ad.on{display:flex}
.vdx-ad video{width:100%;height:100%;object-fit:contain;flex:1;cursor:pointer}
.vdx-ad-hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:linear-gradient(to bottom,rgba(0,0,0,.6),transparent);pointer-events:none}
.vdx-ad-tag{font-size:.68rem;color:rgba(255,255,255,.6);background:rgba(0,0,0,.45);padding:3px 9px;border-radius:3px}
.vdx-ad-skip{pointer-events:auto;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.7);padding:5px 13px;border-radius:3px;cursor:pointer;font-size:.72rem;transition:border-color .2s,color .2s;-webkit-tap-highlight-color:transparent}
.vdx-ad-skip.rdy{border-color:#f37c20;color:#f37c20}
.vdx-dl{padding:7px 0 2px;text-align:right}
.vdx-dl a{display:inline-block;border:1px solid #555;border-radius:5px;padding:5px 16px;text-decoration:none;transition:border-color .2s,color .2s}
.vdx-dl a:hover{border-color:#f37c20;color:#f37c20}

/* ── Tap icon feedback (key2.js mobile player) ── */
.vdx-tap-icon{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:9;pointer-events:none;
  opacity:0;
  transition:opacity .15s ease;
  background:rgba(0,0,0,.38);
  border-radius:50%;
  width:72px;height:72px;
  display:flex;align-items:center;justify-content:center;
}
.vdx-tap-icon.on{opacity:1;}

/* Comment system */
.comment { margin-bottom: 15px; padding: 10px; border: 1px solid #eee; border-radius: 4px; }
.comment.reply { margin-left: 1.5em; }
.comment.reply .comment.reply { margin-left: 0; } /* prevent double indent */
.avatar { width: 40px; height: 40px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 10px; }
.comment-header { display: flex; align-items: center; }
.comment-meta { color: #999; font-size: 0.9em; }
.comment-text { margin-top: 5px; }
.comment-text img.emoji { display:inline; border: none; } /* emoji images */
.replies { margin-top: 10px; }
.reply-btn, .show-more-replies { background: none; border: none; color: #007bff; cursor: pointer; padding: 0; font-size: 0.9em; margin-top: 5px; }
.reply-form { margin-top: 10px; margin-left: 1.5em; display: none; }
.reply-form textarea { width: 100%; max-width: 400px; }
.emoji-picker { display: none; grid-template-columns: repeat(8, 1fr); gap: 5px; max-width: 300px; background: #fff; border: 1px solid #ccc; padding: 10px; margin-top: 5px; position: absolute; z-index: 1000; }
.emoji-picker img { cursor: pointer; width: 24px; height: 24px; object-fit: contain; }
#emoji-toggle { position: absolute; right: 5px; bottom: 5px; }
.textarea-wrapper { position: relative; }
.hidden { display: none; }