:root {
  --primary-color: #fff;
  --secondary-color: #f7f8fc;
  --third-color: #282828;
  --font-color: #4d5568;
  --font2-color: #fff;
  --font3-color: #2e3035ed;
  --bg-color: #0A0A0A;
  --header-color: #333;
  --header2-color: #976c10;
  --red-color: #ca0000;
  --hover-color: #ff00c3;
  --footer-color: #2C005F;
  --orange-color: #B35000;
  --green-color: #2e8540;
  --green-color2: #2e8540;
  --menu-color: linear-gradient(180deg, #ff821c 0%, #ba5a00 100%);
  --plyr-color-main: #435791e0;
  --disqus: #fff;
  --link-color: #0056b3;
  --link-hover-color: #004490;
  --border-color: var(--third-color);
  --shadow-color: rgba(0, 0, 0, 0.08);
  --delayed-color: var(--orange-color);
  --scrollbar-thumb-color: #c1c1c1;
  --scrollbar-track-color: var(--hover-color);
  --primary-color-rgb-light: rgb(255, 255, 255);
  --secondary-color-rgb-light: 247, 248, 252;
  --card-bg-image: linear-gradient(to left, rgba(var(--secondary-color-rgb-light),0.1), transparent);
  --card-mask-gradient-light: linear-gradient(to left, black 25%, transparent 75%);
  --card-mask-gradient-light-hover: linear-gradient(to left, black 55%, transparent 95%);
}

.icon {
  margin-right: 6px;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.as-layout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
  margin: 15px 0;
  padding: 10px;
  background-color: var(--primary-color);
  border-radius: 8px;
}

.as-layout-column-left,
.as-layout-column-right {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Sedikit kurangi gap antar box di kolom */
}

.as-info-box {
  background-color: var(--primary-color);
  padding: 15px 20px;
  border-radius: 8px;
  border: 1px solid var(--secondary-color);
  position: relative;
  overflow: hidden;
}

.as-info-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.03;
  filter: grayscale(90%) blur(1px);
  z-index: 0;
  pointer-events: none;
}

.as-important-notes::before {
  background-image: var(--info-box-bg-image-notes);
  background-repeat: repeat;
}

.as-delay-announcements::before {
  background-image: var(--info-box-bg-image-delay);
  background-repeat: repeat;
}

[data-theme="dark"] .as-info-box::before {
  opacity: 0.05;
}

.as-info-box h2,
.as-info-box ul {
  position: relative;
  z-index: 1;
}

.as-info-box h2 {
  font-size: 1.1rem; /* Ukuran judul box */
  font-weight: 600; /* Tegaskan judul box */
  color: var(--font3-color);
  margin-bottom: 12px; /* Jarak lebih ke list */
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--secondary-color);
  padding-bottom: 8px; /* Padding bawah judul */
}

.as-info-box ul {
  max-height: 170px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--header-color) var(--secondary-color);
  padding-left: 5px; /* Sedikit padding kiri untuk list */
}

.as-info-box ul::-webkit-scrollbar {
  width: 6px;
}

.as-info-box ul::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
  border-radius: 3px;
}

.as-info-box ul::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border-radius: 3px;
}

.as-info-box ul li {
  font-size: 0.8rem; /* Ukuran font dasar list */
  font-weight: 400; /* Berat font normal untuk list */
  margin-bottom: 8px;
  line-height: 1.5;
  padding-right: 10px;
}

.as-important-notes ul {
  max-height: none;
  overflow-y: visible;
}

.as-delay-announcements ul li {
  margin-bottom: 12px; /* Jarak lebih antar item pengumuman */
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--shadow-color);
  line-height: 1.4;
  font-size: 0.8rem; /* Samakan base size dengan list notes */
}

.as-delay-announcements ul li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.as-delay-announcements ul li .delay-title {
  display: block;
  font-weight: 700; /* Judul series paling tebal */
  color: var(--font3-color);
  margin-bottom: 4px;
  font-size: 0.95em; /* Relatif thd 0.9rem = ~0.855rem */
}

.as-delay-announcements ul li .delay-info-text {
  display: block;
  padding-left: 10px;
  font-size: 0.85em; /* Relatif thd 0.9rem = ~0.765rem (lebih kecil) */
  font-weight: 400; /* Berat normal */
  color: var(--font-color);
}

.as-delay-announcements ul li .delay-info-text .icon {
  margin-right: 5px;
  opacity: 0.8;
}

.as-delay-announcements ul li.no-delay-info {
  border-bottom: none;
  font-style: italic;
  color: var(--third-color);
  opacity: 0.8;
  font-size: 0.9rem; /* Samakan dengan list notes */
  font-weight: 400;
}
[data-theme="dark"] .as-delay-announcements ul li.no-delay-info {
   color: var(--third-color);
}

.as-season-progress-box {
  background-color: var(--secondary-color);
  padding: 15px 20px;
  border-radius: 8px;
  border: 1px solid var(--bg-color);
}

.as-season-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 0.9rem; /* Kecilkan sedikit info season */
}

.as-season-name {
  font-weight: 500; /* Kurangi tebal nama season */
  color: var(--font3-color);
}

.as-season-percentage {
  font-weight: 600; /* Tegaskan persentase */
  color: var(--green-color);
  font-size: 0.95em; /* Sedikit lebih besar dari nama season */
}

.as-progress-bar-container {
  width: 100%;
  height: 10px;
  background-color: var(--bg-color);
  border-radius: 5px;
  overflow: hidden;
}

.as-progress-bar-fill {
  height: 100%;
  background-color: var(--header-color);
  border-radius: 5px;
  transition: width 0.5s ease-out;
}

.as-tabs-container {
  padding: 15px;
  background-color: var(--primary-color);
  border-radius: 8px;
  margin-top: 15px; /* Tambah margin atas */
}

.as-schedule-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 15px;
  border-bottom: 2px solid var(--bg-color);
}

.as-tab-link {
  padding: 10px 18px;
  cursor: pointer;
  border: none;
  background-color: transparent;
  color: var(--font-color);
  font-weight: 500;
  border-radius: 6px 6px 0 0;
  transition: background-color 0.2s ease, color 0.2s ease;
  position: relative;
  bottom: -2px;
  border-bottom: 2px solid transparent;
}

.as-tab-link:hover {
  color: var(--third-color);
  background-color: var(--secondary-color);
}

.as-tab-link.active {
  color: var(--header2-color);
  border-bottom-color: var(--third-color);
  font-weight: 600; /* Tegaskan tab aktif */
}

.as-tab-content {
  display: none;
}

.as-tab-content.active {
  display: block;
}

.as-empty-schedule {
  text-align: center;
  padding: 30px;
  color: var(--third-color);
  font-style: italic;
}

.as-anime-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 15px;
}

.as-anime-card {
  display: flex;
  background-color: var(--primary-color);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--bg-color);
  box-shadow: 0 2px 5px var(--shadow-color);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  color: var(--font-color);
  text-decoration: none;
  position: relative;
}

.as-anime-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px var(--shadow-color);
}

.as-anime-card[data-status="delayed"] {
  opacity: 0.9;
}

.as-anime-card[data-status="delayed"]:hover {
  opacity: 1;
}

.as-card-thumbnail {
  flex-shrink: 0;
  width: 100px;
  position: relative;
  background-color: var(--third-color);
}

.as-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.as-thumbnail-overlay-minimal {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.3), transparent 50%);
  pointer-events: none;
  opacity: 0.5;
}

.as-card-content {
  padding: 12px 15px 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.as-card-content::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: var(--card-bg-image);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  opacity: 0.15;
  filter: grayscale(80%) blur(2px);
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, filter 0.4s ease, mask-image 0.4s ease, -webkit-mask-image 0.4s ease;
  mask-image: var(--card-mask-gradient-light);
  -webkit-mask-image: var(--card-mask-gradient-light);
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
   mask-position: center;
   -webkit-mask-position: center;
}

[data-theme="dark"] .as-card-content::after {
  opacity: 0.2;
  filter: grayscale(85%) blur(3px);
  mask-image: var(--card-mask-gradient-dark);
  -webkit-mask-image: var(--card-mask-gradient-dark);
}

.as-anime-card:hover .as-card-content::after {
  opacity: 0.35;
  filter: grayscale(20%) blur(0px);
  mask-image: var(--card-mask-gradient-light-hover);
  -webkit-mask-image: var(--card-mask-gradient-light-hover);
}

[data-theme="dark"] .as-anime-card:hover .as-card-content::after {
  opacity: 0.45;
  filter: grayscale(30%) blur(1px);
  mask-image: var(--card-mask-gradient-dark-hover);
  -webkit-mask-image: var(--card-mask-gradient-dark-hover);
}

.as-anime-title,
.as-quick-info,
.as-release-info,
.as-delay-details {
  position: relative;
  z-index: 1;
}

.as-anime-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--font3-color);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  min-height: 2.6em;
}

.as-anime-card:hover .as-anime-title {
  color: var(--third-color); /* Kembali pakai link color saat hover */
}

.as-quick-info {
  display: flex;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--font-color);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

[data-theme="dark"] .as-quick-info {
  color: #a0a8b7;
}

.as-quick-info span {
  display: flex;
  align-items: center;
}

.as-quick-info .icon {
  font-size: 0.9em;
}

.as-release-info {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--font-color);
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex; 
  align-items: center;
  vertical-align: bottom;
  background-color: rgba(0, 0, 0, 0.04);
  padding: 5px 15px;
  border-radius: 4px;
  border-radius: 5px 15px;
  border-radius: 8px;
}

/* Penyesuaian untuk Dark Mode */
[data-theme="dark"] .as-release-info {
  color: #a0a8b7;
  background-color: rgba(255, 255, 255, 0.06);
}

.as-release-info.as-delay-info {
  color: var(--delayed-color);
  font-weight: 600;
}

.as-delay-details {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--orange-color);
  margin-top: 5px;
}

@media (max-width: 768px) {
  .as-layout-grid {
    grid-template-columns: 1fr;
  }
  .as-anime-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
  .as-card-content {
    padding: 10px 12px 12px;
  }
  .as-release-info {
    font-size: 0.8rem;
  }
}

/* Archive */
/* Penyesuaian Grid jika perlu untuk halaman arsip */
.archive .as-anime-grid {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Gunakan layout kolom dari versi final */
  gap: 7px; /* Gunakan gap dari versi final */
  padding: 15px 0; /* Gunakan padding dari versi final */
}

/* Penyesuaian Kartu di Halaman Arsip */
.archive .as-anime-card {
  /* Style kartu spesifik arsip bisa ditambahkan jika ada perbedaan dari default */
  /* Misalnya, jika ingin shadow berbeda: */
  /* box-shadow: 0 3px 8px rgba(0,0,0,0.1); */
}

.archive .as-anime-card:hover {
  /* Style hover kartu spesifik arsip */
  transform: translateY(-5px); /* Efek hover dari versi final */
  box-shadow: 0 8px 15px var(--shadow-color); /* Shadow hover dari versi final */
}

/* Penyesuaian Thumbnail di Halaman Arsip */
.archive .as-card-thumbnail {
  width: 130px; /* Ukuran thumbnail dari versi final */
}

/* Penyesuaian Konten Kartu di Halaman Arsip */
.archive .as-card-content {
  padding: 12px 15px 15px; /* Padding dari versi final */
  /* Efek background diambil dari style asli, tidak perlu diubah kecuali diinginkan */
}

/* Penyesuaian Judul di Halaman Arsip */
.archive .as-anime-title {
  font-size: 1.05rem; /* Ukuran font dari versi final */
  line-height: 1.35; /* Line height dari versi final */
  min-height: 2.7em; /* Min height dari versi final */
  margin-bottom: 8px; /* Margin dari versi final */
}

.archive .as-anime-card:hover .as-anime-title {
  color: var(--third-color); /* Warna hover judul dari versi final */
}
[data-theme="dark"] .archive .as-anime-card:hover .as-anime-title {
  color: var(--third-color); /* Warna hover dark mode dari versi final */
}


/* Penyesuaian Quick Info di Halaman Arsip */
.archive .as-quick-info {
  gap: 15px; /* Gap dari versi final */
  font-size: 0.8rem; /* Ukuran font dari versi final */
  margin-bottom: 10px; /* Margin dari versi final */
}

/* Sembunyikan elemen episode asli */
.archive .as-quick-info .as-episodes {
  display: none;
}

/* Style untuk elemen season baru (tambahkan di HTML) */
.archive .as-quick-info .as-season {
  /* Style khusus jika perlu, jika tidak akan ikut style span default */
  display: flex;
  align-items: center;
}
.archive .as-quick-info .as-season .icon {
   font-size: 0.9em; /* Ukuran ikon seperti di versi final */
   margin-right: 6px;
}


/* Sembunyikan info rilis asli di Halaman Arsip */
.archive .as-release-info {
  display: none;
}
.archive .as-delay-details {
  display: none;
}

/* Style untuk Sinopsis baru (tambahkan <p class="as-synopsis"> di HTML) */
.archive .as-synopsis {
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--font-color);
  margin-bottom: 12px;
  overflow: hidden;
  max-height: 4.6em; /* 4 baris, pakai scrollbar */
  overflow-y: auto;
  padding-right: 8px;
  position: relative;
  z-index: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}

.archive .as-synopsis::-webkit-scrollbar {
  width: 5px;
}

.archive .as-synopsis::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
  border-radius: 3px;
  margin: 2px 0;
}

.archive .as-synopsis::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-color);
  border-radius: 3px;
}

/* Style untuk container Genre baru (tambahkan <div class="as-genres"> di HTML) */
.archive .as-genres {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  overflow: hidden;
  max-height: 1.3rem;
  position: relative;
  z-index: 1;
}

.archive .as-genre-tag {
  display: inline-block;
  background-color: var(--secondary-color);
  color: var(--font-color);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.3;
  border: 1px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.archive .as-anime-card:hover .as-genre-tag {
  background-color: var(--third-color); /* Hover dari versi final */
  color: var(--font2-color);
}

[data-theme="dark"] .archive .as-genre-tag {
   background-color: var(--third-color); /* Dark mode dari versi final */
   border-color: var(--primary-color);
   color: var(--font-color);
}
[data-theme="dark"] .archive .as-anime-card:hover .as-genre-tag {
  background-color: var(--third-color); /* Dark mode hover dari versi final */
  color: var(--primary-color);
}

/* Penyesuaian Media Query untuk Halaman Arsip */
@media (max-width: 768px) {
  .archive .as-anime-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
  }
  .archive .as-card-thumbnail {
     width: 90px;
  }
  .archive .as-card-content {
    padding: 10px 12px 12px;
  }
   .archive .as-anime-title {
     font-size: 1rem;
     min-height: 2.6em;
   }
  .archive .as-quick-info {
    font-size: 0.75rem;
    gap: 10px;
    margin-bottom: 8px;
  }
  .archive .as-synopsis {
    font-size: 0.78rem;
    max-height: 4.5em; /* Sesuaikan tinggi scrollbar mobile */
    margin-bottom: 10px;
  }
   .archive .as-genre-tag {
     font-size: 0.7rem;
     padding: 2px 6px;
   }
}

@media (max-width: 480px) {
  .archive .as-anime-grid {
    grid-template-columns: 1fr;
  }
   .archive .as-card-thumbnail {
     width: 80px;
   }
}

/* Related Series Page */
.related .as-anime-grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  padding: 10px;
}

.related .as-anime-card {
  border-radius: 5px;
  box-shadow: 0 1px 3px var(--shadow-color);
  display: flex;
}

.related .as-anime-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 8px var(--shadow-color);
}

.related .as-card-thumbnail {
  width: 90px;
  flex-shrink: 0;
}

.related .as-card-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.related .as-card-content {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}

.related .as-anime-title {
  font-size: 0.9rem;
  line-height: 1.3;
  margin-bottom: 5px;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.related .as-quick-info {
  font-size: 0.7rem;
  gap: 8px;
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
}

.related .as-quick-info .icon {
  font-size: 0.85em;
  margin-right: 4px;
}

.related .as-quick-info .as-episodes { display: none; }

.related .as-synopsis {
  font-size: 0.75rem;
  line-height: 1.35;
  margin-bottom: 8px;
  -webkit-line-clamp: 2;
  max-height: 2.7em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  padding-right: 0;
  overflow-y: hidden;
}
.related .as-synopsis::-webkit-scrollbar { display: none; }
.related .as-synopsis { scrollbar-width: none; }

.related .as-genres {
  margin-top: auto;
  gap: 4px;
  max-height: 1.2rem;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
}

.related .as-genre-tag {
  font-size: 0.65rem;
  padding: 1px 5px;
  line-height: 1.2;
  border-radius: 3px;
  border: none;
  background-color: rgba(0,0,0,0.05);
  white-space: nowrap;
  flex-shrink: 0;
}
[data-theme="dark"] .related .as-genre-tag {
  background-color: rgba(255,255,255,0.08);
}
.related .as-anime-card:hover .as-genre-tag {
   background-color: rgba(0,0,0,0.05);
   color: var(--font-color);
}
[data-theme="dark"] .related .as-anime-card:hover .as-genre-tag {
   background-color: rgba(255,255,255,0.08);
   color: var(--font-color);
}


@media (max-width: 992px) {
  .related .as-anime-grid {
     grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
     gap: 10px;
  }
  .related .as-card-thumbnail {
     width: 80px;
  }
  .related .as-card-content {
     padding: 7px 9px 9px;
  }
  .related .as-anime-title {
     font-size: 0.88rem;
  }
  .related .as-quick-info {
     font-size: 0.68rem;
  }
   .related .as-synopsis {
      font-size: 0.72rem;
   }
   .related .as-genre-tag {
      font-size: 0.62rem;
   }
   .related .as-genres {
       max-height: 1.1rem;
   }
}

@media (max-width: 768px) {
  .related .as-anime-grid {
     grid-template-columns: repeat(2, 1fr);
     gap: 8px;
  }
  .related .as-card-thumbnail {
     width: 75px;
  }
  .related .as-card-content {
     padding: 6px 8px 8px;
  }
  .related .as-anime-title {
     font-size: 0.85rem;
     line-height: 1.25;
  }
  .related .as-quick-info {
     font-size: 0.65rem;
     gap: 6px;
  }
   .related .as-synopsis {
      -webkit-line-clamp: 1;
      max-height: 1.4em;
      font-size: 0.7rem;
      margin-bottom: 6px;
   }
   .related .as-genre-tag {
      font-size: 0.6rem;
      padding: 1px 4px;
   }
    .related .as-genres {
       max-height: 1rem;
   }
}

@media (max-width: 500px) {
  .related .as-anime-grid {
     grid-template-columns: 1fr;
     gap: 10px;
  }
  .related .as-card-thumbnail {
     width: 85px;
  }
  .related .as-card-content {
     padding: 8px 10px 10px;
  }
   .related .as-anime-title {
     font-size: 0.9rem;
     -webkit-line-clamp: 2;
   }
  .related .as-quick-info {
     font-size: 0.7rem;
     gap: 8px;
  }
   .related .as-synopsis {
      -webkit-line-clamp: 2;
      max-height: 2.7em;
      font-size: 0.75rem;
      margin-bottom: 8px;
   }
   .related .as-genre-tag {
      font-size: 0.65rem;
      padding: 1px 5px;
   }
    .related .as-genres {
       max-height: 1.2rem;
       flex-wrap: wrap;
       white-space: normal;
   }
}

/*  series page */
.rt {
  width: 90%;
}

.synopsis-prose h2 {
  margin-bottom: 20px;
}

.anime-card {
  background-color: var(--primary-color);
  border-radius: 8px;
  box-shadow: 0 4px 12px var(--shadow-color);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 25px;
  padding: 20px;
  margin: 20px auto;
  overflow: hidden;
  color: var(--font-color);
}

.anime-card__sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.anime-card__sidebar img{
    height:auto;
}

.anime-card__poster {
  width: 100%;
  max-width: 180px;
  height: auto;
  border-radius: 6px;
  display: block;
  box-shadow: 0 2px 6px var(--shadow-color);
}

.anime-card__score {
  background-color: var(--secondary-color);
  border: 1px solid var(--bg-color);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.95em;
  text-align: center;
  width: 90%;
}

.anime-card__score .icon {
  color: var(--star-color);
  font-size: 1.2em;
  margin-right: 5px;
  vertical-align: middle;
}

.anime-card__score .value {
  font-weight: 700;
  font-size: 1.4em;
  color: var(--score-value-color);
  margin-right: 6px;
  vertical-align: middle;
}

.anime-card__score .type {
  color: var(--score-type-color);
  font-size: 0.9em;
  vertical-align: middle;
  background-color: var(--score-type-bg);
  padding: 2px 5px;
  border-radius: 3px;
}

.anime-card__main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.anime-card__tabs.simple-tabs {
  margin-top: 0;
}

.simple-tabs .tab-nav {
  display: flex;
  border-bottom: 2px solid var(--bg-color);
  margin-bottom: 20px;
}

.simple-tabs .tab-link {
  padding: 10px 15px;
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--tab-simple-link-color);
  font-weight: bold;
  font-size: 0.95em;
  transition: color 0.2s ease, border-color 0.2s ease;
  margin-bottom: -2px;
  position: relative;
  flex-grow: 0;
  margin-right: 15px;
  text-align: center;
  white-space: nowrap;
}

.simple-tabs .tab-link:last-child {
  margin-right: 0;
}

.simple-tabs .tab-link:hover {
  color: var(--tab-simple-link-hover-color);
  border-bottom-color: var(--border-color);
}

.simple-tabs .tab-link.active {
  border-bottom-color: var(--header2-color);
  background-color: transparent;
}

.simple-tabs .tab-content-wrapper {
  padding: 0;
}

.tab-content {
  line-height: 1.7;
  color: var(--font-color);
}

.tab-content.active {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tab-content#tab-details .details-list,
.synopsis-prose {
  list-style: none;
  padding: 20px;
  margin: 0 0 20px 0;
  border: 1px solid var(--bg-color);
  border-radius: 6px;
}

.tab-content#tab-details .details-list li {
  margin-bottom: 8px;
}

.tab-content#tab-details .detail-label {
  font-weight: bold;
  color: var(--font-color);
  min-width: 90px;
  display: inline-block;
  margin-right: 8px;
}

.tab-content#tab-details .detail-separator {
  height: 1px;
  background-color: var(--bg-color);
  margin: 10px 0;
  list-style: none;
}

.tab-content#tab-details .details-list a {
  color: var(--third-color);
  text-decoration: none;
}

.tab-content#tab-details .details-list a:hover {
  color: var(--third-hover-color);
  text-decoration: underline;
}

.anime-card__genres.in-tab {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px dashed var(--border-color);
}

.anime-card__genres.in-tab .genre-title {
  font-size: 1em;
  font-weight: bold;
  color: var(--font3-color);
  margin: 0 0 10px 0;
}

.anime-card__genres .genre-tag {
  display: inline-block;
  color: var(--font-color);
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 0.9em;
  text-decoration: none;
  margin-right: 6px;
  margin-bottom: 6px;
  border: 1px solid var(--tag-border);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  background-color: var(--secondary-color);
}

.anime-card__genres .genre-tag:hover {
  background-color: var(--tag-hover-bg);
  color: var(--tag-hover-text);
  border-color: var(--tag-hover-bg);
}

.tab-content#tab-synopsis .synopsis-prose p {
  margin: 0 0 1em 0;
}

.tab-content#tab-synopsis .synopsis-prose p:last-child {
  margin-bottom: 0;
}

.anime-card__quick-info.v4 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 15px;
  border: 1px solid var(--bg-color);
  border-radius: 6px;
  color: var(--font-color);
}

.anime-card__quick-info.v4 .info-item {
  line-height: 1.5;
}

.anime-card__quick-info.v4 .status-airing {
  font-weight: bold;
  color: var(--orange-color);
  display: inline-flex;
  align-items: center;
}

.anime-card__quick-info.v4 .icon-status-airing {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--orange-color);
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 5px var(--orange-color);
}

.anime-card__quick-info.v4 .status-finish {
  font-weight: bold;
  color: var(--green-color);
  display: inline-flex;
  align-items: center;
}

.anime-card__quick-info.v4 .icon-status-finish {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--green-color);
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 5px var(--green-color);
}

.anime-card__quick-info.v4 .status-drop {
  font-weight: bold;
  color: var(--red-color);
  display: inline-flex;
  align-items: center;
}

.anime-card__quick-info.v4 .icon-status-drop {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--red-color);
  border-radius: 50%;
  margin-right: 6px;
  box-shadow: 0 0 5px var(--red-color);
}

.anime-card__quick-info.v4 .info-separator {
  color: var(--third-color);
  opacity: 0.6;
}

.anime-card__quick-info.v4 .info-item.season a {
  color: var(--third-color);
  text-decoration: none;
}

.anime-card__quick-info.v4 .info-item.season a:hover {
  color: var(--third-hover-color);
  text-decoration: underline;
}

.anime-card__meta.v7 {
  color: var(--meta-color);
  padding-top: 15px;
  border-top: 1px dashed var(--meta-border-color);
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.meta-episodes.nav-style {
  display: flex;
  gap: 10px;
  width: 100%;
}

.meta-episode-item {
  flex-basis: calc(50% - 5px);
  border: 1px solid var(--bg-color);
  border-radius: 5px;
  padding: 10px 12px;
  background-color: var(--secondary-color);
  text-align: center;
  transition: background-color 0.2s ease;
}

.meta-episode-item:hover {
  background-color: var(--bg-color);
}

.meta-episode-item .ep-label {
  display: block;
  font-size: 0.8em;
  color: var(--meta-color);
  margin-bottom: 4px;
  text-transform: uppercase;
}

.meta-episode-item .ep-link {
  text-decoration: none;
  font-weight: bold;
  font-size: 0.95em;
  display: block;
}

.meta-episode-item .ep-link:hover {
  color: var(--font-color);
}

.meta-episode-item .ep-number {
  color: var(--font3-color);
  font-weight: bold;
  font-size: 0.95em;
  display: block;
}

.meta-update-info {
  text-align: right;
  width: 100%;
}

.meta-update-info .author {
  font-weight: bold;
  color: var(--meta-author-color);
}

@media (max-width: 768px) {
  .anime-card {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 15px;
    overflow: hidden;
  }
  .anime-card__sidebar {
    flex-direction: row;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .anime-card__poster {
    width: 100px;
    flex-shrink: 0;
  }
  .anime-card__score {
    width: auto;
    flex-grow: 1;
    min-width: 130px;
    padding: 6px 10px;
    font-size: 0.9em;
  }
  .sidebar-button {
    width: auto;
    flex-grow: 1;
    padding: 8px 12px;
    font-size: 0.85em;
  }

  .anime-card__main {
    gap: 15px;
  }

  .anime-card__quick-info.v4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 15px;
    margin-top: 15px;
    border: 1px solid var(--bg-color);
    border-radius: 6px;
  }
  .anime-card__quick-info.v4 .info-separator {
    display: none;
  }
  .anime-card__quick-info.v4 .info-item {
    line-height: 1.4;
    text-align: center;
    font-size: 0.85em;
    padding: 5px 0;
  }
  .anime-card__quick-info.v4 .status-airing {
    grid-column: span 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .simple-tabs .tab-nav {
    overflow-x: auto;
    padding-bottom: 5px;
    margin-bottom: 15px;
  }
  .simple-tabs .tab-link {
    padding: 8px 12px;
    font-size: 0.9em;
    flex-shrink: 0;
  }
  .simple-tabs .tab-content-wrapper {
    padding: 0;
  }
  .tab-content {
    font-size: 0.9em;
  }

  .anime-card__meta.v7 {
    gap: 10px;
    margin-top: 15px;
    padding-top: 10px;
  }
  .meta-episodes.nav-style {
    gap: 8px;
  }
  .meta-episode-item {
    padding: 8px 10px;
  }
  .meta-episode-item .ep-label {
    font-size: 0.75em;
  }
  .meta-episode-item .ep-link,
  .meta-episode-item .ep-number {
    font-size: 0.9em;
  }
  .meta-update-info {
    text-align: center;
    font-size: 0.85em;
  }
}

@media (max-width: 480px) {
  .anime-card__sidebar {
    flex-direction: column;
    align-items: center;
  }
  .anime-card__poster {
    width: 150px;
  }
  .anime-card__score,
  .sidebar-button {
    width: 90%;
  }

  .anime-card__quick-info.v4 {
    gap: 8px;
    padding: 12px;
  }
  .anime-card__quick-info.v4 .info-item {
    font-size: 0.85em;
  }

  .simple-tabs .tab-link {
    font-size: 0.85em;
    padding: 8px 10px;
  }

  .meta-episodes.nav-style {
    flex-direction: column;
    gap: 8px;
  }
  .meta-episode-item {
    flex-basis: auto;
  }
}

.anime-card__episode-list-section {
  grid-column: 1 / -1;
  margin: 25px 0;
  padding: 20px;
  background-color: var(--primary-color);
  border-radius: 6px;
}

.episode-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 15px;
  border-bottom: 1px solid var(--bg-color);
  padding-bottom: 5px;
}

.episode-list-header .section-title {
  margin: 0;
  font-size: 1.2em;
  color: var(--font-color);
  font-weight: bold;
}

.episode-search-input {
  padding: 8px 12px;
  border: 1px solid var(--secondary-color);
  border-radius: 5px;
  font-size: 0.9em;
  background-color: var(--primary-color);
  color: var(--font-color);
  min-width: 200px;
}

.episode-search-input:focus {
  outline: none;
  border-color: var(--plyr-color-main);
  box-shadow: 0 0 0 2px rgba(var(--plyr-color-main), 0.2);
}

[data-theme="dark"] .episode-search-input:focus {
  box-shadow: 0 0 0 2px rgba(var(--third-color), 0.3);
}

.episode-list-items {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.episode-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  border: 1px solid var(--bg-color);
  border-radius: 5px;
  background-color: var(--secondary-color);
  color: var(--font-color);
  text-decoration: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  line-height: 1.4;
}

.episode-item:hover {
  background-color: var(--meta-ep-hover-bg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  color: var(--font3-color);
}

[data-theme="dark"] .episode-item:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.episode-item .ep-title {
  flex-grow: 1;
  margin-right: 10px;
  font-weight: 500;
}

.episode-item .ep-date {
  font-size: 0.8em;
  color: var(--meta-color);
  white-space: nowrap;
  flex-shrink: 0;
}

.episode-list-items .no-episodes-message {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  color: var(--meta-color);
  background-color: var(--secondary-color);
  border: 1px dashed var(--border-color);
  border-radius: 6px;
  min-height: 100px;
}

.no-episodes-message .icon {
  margin-bottom: 15px;
  opacity: 0.6;
  color: var(--font-color);
}

.episode-search-input:disabled {
  background-color: var(--tag-bg);
  cursor: not-allowed;
  opacity: 0.7;
}

[data-theme="dark"] .episode-list-items .no-episodes-message {
  background-color: var(--third-color);
  border-color: var(--secondary-color);
}

[data-theme="dark"] .episode-search-input:disabled {
  background-color: var(--third-color);
  opacity: 0.5;
}

@media (max-width: 900px) {
  .episode-list-items {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .anime-card__episode-list-section {
    margin-top: 20px;
    padding-top: 15px;
  }
  .episode-list-header {
    margin-bottom: 15px;
  }
}

@media (max-width: 600px) {
  .episode-list-items {
    gap: 8px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .episode-list-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .episode-search-input {
    width: 100%;
    min-width: 0;
  }
  .episode-item {
    padding: 12px;
  }
}

/* --- Ongoing --- */
.gacha-container {
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  margin-top: 20px;
}

.gacha-page-title {
  text-align: center;
  color: #e6c07a;
  font-size: 2.6em;
  margin-bottom: 40px;
  text-shadow: 0 0 15px rgba(230, 192, 122, 0.5);
  font-weight: 700;
  letter-spacing: 1px;
}

.gacha-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 10px;
  justify-content: center;
}

.gacha-card {
  position: relative;
  aspect-ratio: 4 / 6.5;
  border-radius: 10px;
  overflow: visible;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-frame {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #1e2433;
  z-index: 2;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.card-glow {
  position: absolute;
  inset: -10px;
  border-radius: 15px;
  opacity: 0;
  transition: opacity 0.3s ease-out;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, var(--glow-color, rgba(100, 100, 150, 0.4)) 0%, transparent 70%);
}

.card-shine {
  position: absolute;
  top: 0;
  left: -150%;
  width: 80%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-25deg);
  z-index: 3;
  pointer-events: none;
  animation: shine-animation 6s infinite ease-in-out;
  opacity: 0;
}

@keyframes shine-animation {
  0% {
    left: -150%;
    opacity: 0;
  }
  30% {
    opacity: 0.5;
  }
  70% {
    opacity: 0.5;
  }
  100% {
    left: 150%;
    opacity: 0;
  }
}

.image-area {
  flex-grow: 1;
  background: #2a3145;
  overflow: hidden;
  position: relative;
}

.image-area img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  transition: transform 0.4s ease;
}

.info-panel {
  padding: 10px 12px 8px 12px;
  background: linear-gradient(0deg, rgba(20, 25, 40, 0.98) 0%, rgba(30, 36, 54, 0.9) 100%);
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.info-panel .title {
  font-size: 0.9em;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 4px 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-panel .title a {
  color: #ffffff;
}

.info-panel .episodes {
  font-size: 0.75em;
  color: #a0b0e0;
  margin-bottom: 6px;
}

.info-panel .episodes .current-ep {
  font-weight: 700;
  color: #87ceeb;
}

.info-panel .episodes .total-ep {
  color: #9ab0d0;
}

.rating-stars {
  font-size: 0.9em;
  line-height: 1;
}

.rating-stars i {
  margin: 0 1px;
}

.hot-tag {
  position: absolute;
  top: -6px;
  left: 8px;
  background: #ff4d4d;
  color: white;
  font-size: 0.7em;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 5px;
  z-index: 10;
  box-shadow: 0 3px 6px rgba(255, 77, 77, 0.5);
  transform: rotate(-4deg);
  display: none;
}

.hot-tag {
  display: inline-block;
}

.gacha-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.gacha-card:hover .card-glow {
  opacity: 0.7;
}

.gacha-card:hover .card-shine {
  opacity: 0.8;
  animation-duration: 3.5s;
}

.gacha-card:hover .image-area img {
  transform: scale(1.05);
}

.gacha-card.rarity-3 {
  --glow-color: rgba(120, 140, 190, 0.5);
}

.gacha-card.rarity-3 .card-frame {
  border-color: #77829d;
  background: linear-gradient(145deg, #4a5266, #2a3145);
}

.gacha-card.rarity-3 .rating-stars i.fas {
  color: #a8b8d8;
}

.gacha-card.rarity-3 .rating-stars i.far {
  color: #607090;
}

.gacha-card.rarity-3 .card-shine {
  opacity: 0.2;
}

.gacha-card.rarity-4 {
  --glow-color: rgba(160, 100, 255, 0.6);
}

.gacha-card.rarity-4 .card-frame {
  border: 2px solid #4a348c;
  background: linear-gradient(145deg, #6a40a0, #382060);
}

.gacha-card.rarity-4 .rating-stars i.fas {
  color: #c8a8ff;
}

.gacha-card.rarity-4 .rating-stars i.far {
  color: #7050a0;
}

.gacha-card.rarity-4 .card-shine {
  opacity: 0.4;
  animation-delay: 0.3s;
}

.gacha-card.rarity-5 {
  --glow-color: rgba(255, 190, 80, 0.7);
}

.gacha-card.rarity-5 .card-frame {
  border: 1px solid #ffe081;
  background: linear-gradient(145deg, #a07020, #604010);
  box-shadow: inset 0 0 10px rgba(255, 210, 100, 0.1);
}

.gacha-card.rarity-5 .rating-stars i.fas {
  color: #ffe080;
  text-shadow: 0 0 4px rgba(255, 200, 100, 0.4);
}

.gacha-card.rarity-5 .rating-stars i.far {
  color: #a08030;
}

.gacha-card.rarity-5 .card-shine {
  opacity: 0.6;
  background: linear-gradient( to right, rgba(255, 230, 180, 0) 0%, rgba(255, 230, 180, 0.2) 50%, rgba(255, 230, 180, 0) 100%);
  animation-delay: 0.1s;
  animation-duration: 4.5s;
}

.gacha-card.rarity-5::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  border: 2px solid transparent;
  background: linear-gradient(60deg, #ffe580, #ffb700, #ff8c00) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: 1;
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.gacha-card.rarity-5:hover::after {
  opacity: 1;
}

@media (max-width: 767px) {
  .gacha-container {
    padding: 0;
  }
  .gacha-grid {
    padding: 0 10px;
    gap: 25px 10px;
  }
  .gacha-page-title {
    padding: 0 10px;
    font-size: 2em;
    margin-bottom: 30px;
  }
}

@media (max-width: 379px) {
  .gacha-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 380px) and (max-width: 575px) {
  .gacha-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .gacha-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .info-panel .title {
    font-size: 0.8em;
  }
  .info-panel .episodes {
    font-size: 0.7em;
  }
  .rating-stars {
    font-size: 0.8em;
  }
  .hot-tag {
    font-size: 0.6em;
    padding: 2px 5px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .gacha-grid {
    grid-template-columns: repeat(5, 1fr);
  }
  .gacha-container {
    padding: 0 15px;
  }
  .gacha-grid {
    padding: 0;
  }
}

@media (min-width: 992px) {
  .gacha-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .gacha-container {
    padding: 0 20px;
  }
  .gacha-grid {
    padding: 0;
  }
}

.genre-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  background-color: var(--primary-color);
  padding: 15px;
}

.genre-grid-card {
  background-color: var(--secondary-color);
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  align-items: stretch;
  padding: 12px;
  transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
  position: relative;
  z-index: 0;
  background-image: var(--card-bg-image);
  background-size: cover;
  background-position: center center;
}

.genre-grid-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgba(30, 30, 30, 0.85);
  z-index: 1;
  transition: background-color 0.4s ease;
  pointer-events: none;
}

.genre-grid-card:hover {
  background-color: var(--primary-color);
  transform: translateY(-3px);
  border-color: #555;
}

.genre-grid-card:hover::before {
  background-color: rgba(30, 30, 30, 0.60);
}

.card-thumbnail,
.card-info-area {
  position: relative;
  z-index: 2;
}

.card-thumbnail {
  width: 70px;
  flex-shrink: 0;
  margin-right: 15px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #333;
}

.card-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.genre-grid-card:hover .card-thumbnail img {
  transform: scale(1.08);
}

.card-info-area {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  position: relative;
  z-index: 2;
}

.indicator-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background-color: #4caf50;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(76, 175, 80, 0.7);
  flex-shrink: 0;
}

.title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: var(--font2-color);
}

.genre-details {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  row-gap: 5px;
  font-size: 0.8em;
  color: #d0d0d0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 2px 5px;
  border-radius: 4px;
}

.detail-item .icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}

/* --- Styling untuk Opsi Sortir Genre --- */
.genre-sort-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 15px;
  margin-bottom: 30px;
  background-color: var(--secondary-color, #1e1e1e);
  border-radius: 8px;
  border: 1px solid var(--bg-color, #333);
}

/* Styling untuk label "Urutkan:" */
.genre-sort-options span {
  color: var(--font-color);
  font-size: 0.95em;
  font-weight: 500;
  margin-right: 8px;
}

/* Styling dasar untuk link/tombol sortir */
.sort-link {
  display: inline-block;
  padding: 8px 15px;
  background-color: var(--primary-color, #2a2a2e);
  color: var(--font-color, #e0e0e0);
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.9em;
  font-weight: 500;
  border: 1px solid var(--bg-color, #333);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  cursor: pointer;
  text-align: center;
}

/* Efek saat kursor diarahkan ke tombol (hover) */
.sort-link:hover {
  background-color: var(--third-color);
  border-color: #555;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/* Styling khusus untuk tombol yang sedang aktif */
.sort-link.active {
  background-color: var(--header2-color);
  color: #ffffff;
  border-color: var(--bg-color);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(var(--primary-color), 0.6);
  transform: translateY(0);
}

/* Media query duplikat pertama dihapus, hanya yang kedua (lebih lengkap) dipertahankan */
@media (min-width: 500px) {
  /* Di layar yang lebih lebar, buat label sejajar dengan tombol */
 .genre-sort-options span {
     flex-basis: auto;
     margin-bottom: 0;
     margin-right: 8px;
     text-align: left;
  }
  .sort-link {
    flex-grow: 0;
    min-width: auto;
  }
}

/* Ads Situs Top Up */
.ts-ad-link-wrapper.ts-style-game {
  display: block;
  max-width: 728px;
  margin: 20px auto;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(40, 60, 90, 0.3);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ts-ad-link-wrapper.ts-style-game:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(40, 60, 90, 0.4);
}

/* Kontainer Banner Internal */
.ts-ad-banner {
  position: relative;
  height: 100px;
  font-family: 'Montserrat', sans-serif;
  color: var(--font2-color);
}

/* Gambar Background */
.ts-ad-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /*! object-position: center top; */
  z-index: 1;
  transition: transform 0.4s ease;
}

.ts-ad-link-wrapper.ts-style-game:hover .ts-ad-bg {
  transform: scale(1.03);
}

/* Overlay Gelap Halus */
.ts-ad-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(10, 20, 40, 0.75) 0%, rgba(10, 20, 40, 0.5) 50%, rgba(10, 20, 40, 0.2) 100%);
  z-index: 2;
  transition: background 0.3s ease;
}

/* Konten (Logo + Teks) */
.ts-ad-content {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 15px;
}

/* Logo Tensai Store */
.ts-ad-logo {
  height: 60px;
  width: auto;
  max-width: 100px;
  object-fit: contain;
  margin-right: 15px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: filter 0.3s ease;
}

.ts-ad-link-wrapper.ts-style-game:hover .ts-ad-logo {
   filter: brightness(1.1);
}

/* Area Info Teks */
.ts-ad-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Headline */
.ts-ad-headline {
  font-size: 1.2em;
  font-weight: 700;
  margin: 0 0 3px 0;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  line-height: 1.2;
}

/* Teks Promo */
.ts-ad-promo {
  font-size: 0.95em;
  margin: 0 0 5px 0;
  opacity: 0.95;
  display: flex;
  align-items: center;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

.ts-ad-promo i {
  margin-right: 7px;
  color: #ffd700;
  font-size: 0.9em;
}

/* Teks Indikator CTA */
.ts-ad-cta-text {
  font-size: 0.9em;
  font-weight: 600;
  color: #b3e5fc;
  display: flex;
  align-items: center;
  transition: color 0.3s ease;
}

.ts-ad-cta-text i {
  margin-right: 5px;
  font-size: 0.9em;
}

.ts-ad-link-wrapper.ts-style-game:hover .ts-ad-cta-text {
  color: #ffffff;
}

/* Contact Us */
.main-content .notedes {
    padding: 25px;
    background-color: var(--primary-color);
    border: 1px solid var(--bg-color);
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.main-content .notedes h2 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5em;
}

.main-content .notedes p {
    line-height: 1.6;
    margin-bottom: 10px;
}

.main-content .notedes p.tagpst1 {
    margin-top: 20px;
    font-size: 1.2em;
    font-weight: bold;
}

.greentext {
    color: #28a745;
}

.redtext {
    color: #dc3545;
}

.email-container {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #f0f8ff;
    padding: 8px 12px;
    border-radius: 5px;
    border: 1px solid var(--shadow-color);
}

.email-container .dashicons-email {
    font-size: 1.2em;
    line-height: 1.3;
}
#copy-email-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
}

#copy-email-button:hover {
    background-color: #0056b3;
}

#decrypted-email {
    margin-right: 10px;
    font-family: 'Montserrat', sans-serif;
}

/* --- CSS FINAL UNTUK FITUR RIWAYAT & CHART --- */
.floating-watched-indicator {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 21;
    background-color: rgba(30, 30, 30, 0.85);
    color: #fff;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    opacity: 1;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    transform: scale(1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.fade-out {
    opacity: 0;
    transform: scale(0.5);
}
.close-indicator {
    background: none;
    border: none;
    color: var(--delayed-color);
    font-size: 18px;
    line-height: 1;
    margin-left: 8px;
    cursor: pointer;
    padding: 0;
    opacity: 0.8;
}
.close-indicator:hover {
    opacity: 1;
}
[data-episode-url].is-watched {
    opacity: 0.8;
}
.is-watched .ep-title,
.is-watched .ep-link {
    color: #777 !important;
}
.is-watched .watched-status::after {
    content: '✔️';
    color: #4caf50;
    margin-left: 8px;
    font-weight: bold;
    font-size: 14px;
}
.riwayat-container-2col {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 25px;
}
.riwayat-kolom {
    background: var(--secondary-color);
    padding: 20px;
    border-radius: 8px;
    margin: 20px 0;
}
.riwayat-kolom h2,
.riwayat-kolom h3 {
    margin-top: 0;
    margin-bottom: 20px;
}
.history-item {
    display: flex;
    background: var(--primary-color);
    padding: 12px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    margin-bottom: 15px;
    gap: 15px;
}
.history-poster {
    width: 50px;
    height: 70px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.history-details {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
a.history-series-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--font3-color);
    text-decoration: none;
    white-space: normal;
    word-break: break-word;
    overflow: visible;
}
a.history-series-title:hover {
    color: #2196F3;
}
.history-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}
a.history-episode-title {
    font-size: 14px;
    color: var(--font-color);
    text-decoration: none;
}
a.history-episode-title:hover {
    text-decoration: underline;
}
.history-date {
    font-size: 12px;
    color: #888;
    flex-shrink: 0;
    margin-left: 10px;
    text-align: right;
}
#genre-affinity-container h3 {
    margin-bottom: 20px;
}
ul.genre-chart-list {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}
ul.genre-chart-list li {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    gap: 10px;
    background: var(--primary-color);
    padding: 15px;
}
.genre-label {
    flex: 1;
    min-width: 60px;
    font-weight: 500;
    white-space: normal;
    word-break: break-word;
}
.genre-bar-container {
    flex: 2;
    min-width: 80px;
    background-color: #f0f0f0;
    border-radius: 4px;
    height: 22px;
}
.genre-bar {
    height: 100%;
    background: var(--third-color);
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.genre-percent {
    font-weight: bold;
    font-size: 13px;
    color: #555;
    min-width: 45px;
    text-align: right;
    flex-shrink: 0;
}
.load-more-button {
    display: block;
    width: auto;
    min-width: 150px;
    text-align: center;
    padding: 10px 20px;
    border: 1px solid #ddd;
    background-color: #f8f8f8;
    color: #333;
    border-radius: 20px;
    cursor: pointer;
    margin: 20px auto 0;
    font-weight: bold;
    transition: background-color 0.2s, box-shadow 0.2s;
}
.load-more-button:hover {
    background-color: #e9e9e9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
nav.history-pagination,
nav.genre-pagination {
    margin-top: 25px;
    display: flex;
    align-items: center;
}

nav.history-pagination ul,
nav.genre-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 5px;
}

nav.history-pagination li a,
nav.genre-pagination li a {
    display: block;
    padding: 8px 14px;
    text-decoration: none;
    color: var(--font3-color);
    background-color: var(--primary-color);
    border-radius: 5px;
    transition: background-color 0.2s, color 0.2s;
    font-weight: bold;
    border: 1px solid var(--shadow-color);
}

nav.history-pagination li a:hover,
nav.genre-pagination li a:hover {
    background-color: var(--primary-color);
}

nav.history-pagination li.active a,
nav.genre-pagination li.active a {
    background-color: var(--header2-color);
    color: white;
    border-color: var(--shadow-color);
}

nav.history-pagination li.disabled a,
nav.genre-pagination li.disabled a {
    cursor: not-allowed;
}

nav.history-pagination {
    justify-content: center;
}
nav.history-pagination ul {
    justify-content: center;
    flex-wrap: wrap;
}

nav.genre-pagination {
    justify-content: space-between;
}
nav.genre-pagination ul {
    width: 100%;
    justify-content: space-between;
}
nav.genre-pagination li a {
    font-size: 20px;
}
.site-main { margin-top: 20px; }

@media (max-width: 820px) {
    .riwayat-container-2col {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    .history-meta {
        flex-wrap: wrap;
        gap: 5px;
    }
    .history-date {
        width: 100%;
        text-align: left;
        margin-left: 0;
    }
    ul.genre-chart-list li {
        flex-wrap: wrap;
    }
    .genre-label {
        flex-basis: 100%;
    }
    .genre-bar-container {
        flex-grow: 1;
    }
    .genre-percent {
        flex-shrink: 0;
    }
}

.cta-title-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cta-icon {
  width: 24px;
  height: 24px;
  fill: #495057;
  flex-shrink: 0;
}

.cta-title {
  font-size: 1.1em;
  font-weight: 600;
  color: #212529;
  margin: 0;
}

.cta-buttons-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.community-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 0.9em;
  font-weight: 500;
  color: #343a40;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}

.community-button .icon {
  width: 16px;
  height: 16px;
}

.community-button:hover {
  background-color: #f1f3f5;
  border-color: #adb5bd;
}

.community-button.telegram-btn:hover {
  border-color: #24A1DE; color: #24A1DE;
}
.community-button.discord-btn:hover {
  border-color: #5865F2; color: #5865F2;
}

@media (max-width: 680px) {
  .community-cta-banner {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* End Custom */

#arealinker, div[class*='animeinfoku5-'], div[class*='animeinfoab-'], div[class*='animeinfoxy-'], div[class*='animeinfozy-'], div[class*='animeinfomu-'] {
  background:var(--primary-color);
  margin-bottom:15px;
  padding:15px;
  border-top: 1px solid var(--secondary-color);
 }
 #arealinker .listlink a:hover,
 #header .logo,
 #main-menu .random:hover,
 #sidebar_right .latestepisodes a:hover,
 #sidebar_right ul li a:hover,
 .kotakanime-top,
 .kotakanime-top:hover,
 .listinfo ul li:hover,
 .mirror li a:hover,
 .nav_apb a:hover,
 .nvs a:hover,
 .result ul li .genre a,
 .result ul li a,
 .rgnav ul li a:hover,
 .wp-pagenavi a:hover,
 a {
  text-decoration:none
 }
 #arealinker .featuredimgs {
  margin:15px 0;
  min-height: 175px;
 }
 #arealinker .featuredimgs,
 #arealinker .name {
  text-align:-moz-center;
  text-align:-webkit-center
 }
 #arealinker .listlink {
  background:var(--secondary-color);
  box-shadow:0 1px 1px rgba(0,0,0,.1);
  font-weight:700;
  line-height:17px;
  margin:3px 10px!important;
  overflow:hidden;
  padding:10px;
  text-overflow:ellipsis
 }
 #arealinker .listlink a {
  border-right:2px solid var(--header-color);
  font-size:1em;
  margin:10px;
  padding:0 10px
 }
 #arealinker .listlink a:hover {
 }
 #arealinker .listlink p {
  display:inline-block;
  margin:2px 0
 }
 #arealinker .listlink span {
  background:var(--third-color);
  color:#fff;
  float:left;
  font-size:13px;
  line-height:19px;
  margin-right:15px;
  padding:0 5px
 }
 #arealinker .name {
  background:
  var(--third-color);
  color:#fff;
  font-size:13px;
  font-weight:700;
  padding:10px
 ;
  margin-bottom: 5px;
 }
 #arealinker .name h2,
 #arealinker .name h3 {
  display:inline;
  font-size:13px
 }
 #a-z {
  overflow:hidden;
  width:100%
 }
 #dcl_btn_container button {
  background:var(--third-color);
  border-radius:4px;
  color:#fff;
  cursor:pointer;
  display:block;
  line-height:28px;
  margin:10px auto 0;
  padding:15px;
  position:relative;
  width:100%;
  border:0
 }
 #footer {
  position: relative;
  overflow:hidden
 }
 #footer .inner {
  background:var(--header-color);
  margin:0 auto;
  overflow:hidden;
  padding:20px 0;
  width:100%
 }
 #footer .inner .copyright {
  float:left
 }
 #footer .inner .other {
  float:right
 }
 #footer .inner,
 #footer .inner a {
  color:var(--font2-color)
 }
 #main-menu {
  background:var(--primary-color);
  border-bottom:5px solid var(--secondary-color);
  margin-bottom:3px;
  padding:0
 }
 #main-menu .random:hover {
  background:#4e6cc9;
  color:#999
 }
 #my-video {
  height:360px!important;
  width:100%!important
 }
 #onscroll:hover,
 ul.latestepisodes:hover {
  overflow-y:scroll!important;
  scrollbar-width:thin
 }
 #onscroll,
 #onscroll1 {
  list-style:none;
  margin:0
 }
 #onscroll::-webkit-scrollbar {
  background-color:#f8faff;
  width:7px
 }
 #onscroll::-webkit-scrollbar-thumb {
  background-color:#595b5d
 }
 #onscroll::-webkit-scrollbar-track {
  background-color:#ddd
 }
 #onscroll1::-webkit-scrollbar,
 #onscroll::-webkit-scrollbar {
  background-color:#f8faff;
  width:7px
 }
 #onscroll1::-webkit-scrollbar-thumb,
 #onscroll::-webkit-scrollbar-thumb {
  background-color:#595b5d
 }
 #onscroll1::-webkit-scrollbar-track,
 #onscroll::-webkit-scrollbar-track {
  background-color:#ddd
 }
 .cssnone{
     display: none !important;
 }
 .playerload {
  width:80px;
  height:80px;
  border-radius:150px;
  border:15px solid var(--third-color);
  border-top-color:var(--secondary-color);
  box-sizing:border-box;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-38px;
  margin-left:-38px;
  animation:playerload 1.2s linear infinite;
  -webkit-animation:playerload 1.2s linear infinite
 }
 @keyframes playerload {
  0% {
   transform:rotate(0)
  }
  100% {
   transform:rotate(360deg)
  }
 }
 @-webkit-keyframes playerload {
  0% {
   -webkit-transform:rotate(0)
  }
  100% {
   -webkit-transform:rotate(360deg)
  }
 }
 #pembed {
  width:100%;
  height:0;
  padding-bottom:56.60%;
 }
 #pembed,
 .contentpost iframe {
  position:relative;
 }
 #player, .player {
   overflow-x:hidden;
   overflow-y:hidden;
 }
 video#player, video#player_ikln{z-index: 2;position: relative;width:100%;height:100%}
 video#player_ikln{z-index: 3 !important;}
 #commentform textarea.form-control, input {
   border: 1px solid var(--secondary-color);
   color: var(--font-color);
   font-family: 'Montserrat', sans-serif;
   padding: 10px;
   background: var(--primary-color);
 }
 #commentform textarea.form-control {
   height: 200px;
   width: 100%;
 }
 #respond a {
  color:#777
 }
 #shadow {
  background:rgba(0,0,0,.93);
  bottom:0;
  height:100%;
  left:0;
  position:fixed;
  top:0;
  transition:all .5s ease;
  width:100%;
  z-index:100
 }
 #shadow,
 .wp-pagenavi .extend {
  display:none
 }
 #sidebar_right {
  float:right;
  width:320px
 }
 #sidebar_right .fanspage {
  height:205px;
  margin-bottom:10px;
  overflow:hidden
 }
 #sidebar_right .latestepisodes li .video {
  border-radius:3px;
  font-size:12px;
  font-weight:700;
  text-align:center;
  text-transform:uppercase
 }
 .skoraniser {
  background:var(--third-color);
  border-radius:3px;
  color:#fff;
  float:right;
  font-size:12px;
  font-weight:700;
  line-height:1.5;
  padding:3px 10px;
  text-align:center;
  text-transform:uppercase
 }
 #sidebar_right .latestepisodes li {
  color:var(--font-color);
  line-height:27px;
  overflow:hidden;
  padding:0 5px
 }
 #sidebar_right .latestepisodes li {
  margin-right:5px
 }
 #sidebar_right .latestepisodes li .lefts {
  float:left;
  overflow:hidden;
  width:70%
 }
 #sidebar_right .latestepisodes li .lefts,
 #sidebar_right ul li .right .latest,
 #sidebar_right ul li .right .title,
 .latestepisodes li .ongoingkiri,
 .rekomen,
 .row {
  text-overflow:ellipsis;
  white-space:nowrap
 }
 #sidebar_right .latestepisodes li .video {
  background: var(--box-color);
  color: var(--font2-color);
  float:right;
  line-height:normal;
  margin:4px 0;
  padding:3px 10px;
  width:70px
 }
 #sidebar_right .latestepisodes li h3.lefts {
  font-size:13px;
  font-weight:400
 }
 #sidebar_right .latestepisodes li span {
  float:right
 }
 #sidebar_right .latestepisodes li:hover {
  background-color:var(--third-color);
  color:#fff
 }
 #sidebar_right .latestepisodes li:hover .lefts {
  color:#ff00d4
 }
 #sidebar_right .latestepisodes li:hover .video {
  background:#fff;
  color:rgba(13,44,134,.7)
 }
 #sidebar_right .latestepisodes li:hover span {
  color:#fff
 }
 #sidebar_right .side {
 margin:10px 0;
 background: var(--primary-color);
 }
 #sidebar_right h3.sidebar-title {
  background:var(--third-color);
  color:var(--font2-color);
  line-height:35px;
  margin-bottom:0;
  padding:0 10px;
 }
 #sidebar_right h3 span {
  color:#ecf0ff;
  float:right;
  position:relative;
  top:8px
 }
 #sidebar_right ul {
  overflow:hidden
 }
 #sidebar_right ul li {
  background:var(--secondary-color);
  box-shadow:0 1px 1px rgba(0,0,0,.1);
  margin-bottom:6px;
  overflow:hidden;
  padding:6px
 }
 #sidebar_right ul li .bor .limit {
  height:39px;
  overflow:hidden
 }
 #sidebar_right ul li .right {
  font-size:13px;
  height:41px;
  line-height:18px;
  margin-left:35px;
  padding:1px 5px
 }
 #sidebar_right ul li .right .latest {
  display:block;
  font-size:13px;
  overflow:hidden
 }
 #sidebar_right ul li .right .title {
  display:block;
  font-weight:700;
  overflow:hidden
 }
 #sidebar_right ul li .right h2.title {
  font-size:13px
 }
 #sidebar_right ul li a.popseries {
  color:rgba(13,44,134,.7)
 }
 #sidebar_right ul li a:hover {
 background: var(--third-color);
 box-shadow: none;
 }
 #sidebar_right ul li:hover {
  background-color:var(--third-color)
 }
 #sidebar_right ul.latestepisodes {
  background:var(--primary-color);
  font-size:13px;
  margin-bottom:10px;
  padding:10px;
  position:relative
 }
 #sidebar_right ul.latestepisodes,
 .listinfo #onscroll,
 .listinfo #onscroll1 {
  height:190px;
  overflow:hidden
 }
 * {
  box-sizing: inherit;
}
 body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}
[hidden],
template {
	display: none;
}

a {
	text-decoration: none;
	outline: 0;
}

a:active,
a:hover,
a:focus,
a:visited {
	outline: 0;
	-webkit-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	transition: all 200ms linear;
}

*:focus,
*:active,
*:visited,
*:hover {
	outline: 0;
}
 #wrap {
  margin:15px auto 0;
  overflow:hidden;
  position:relative;
  width:1038px
 }
 .ad,
 .row-group {
  position:relative
 }
 .box_ikln{
  position: relative;
  display: inline-block;
 }
 .ads {
  max-height:250px;
  max-width:600px;
  padding-top:45px
 }
 .ads300{
     margin: 10px 0;
     background: var(--primary-color);
     height: 250px;
     position: relative;
     border-radius: 5px;
     text-align: -webkit-center;
     text-align: -moz-center;
 }
 .ads300px{
   float: right;
   width: 300px;
 }
 .adspostkeeper{
 margin: 15px 0;
 }
 .adspost468,
 .adspost728 {
  text-align:-moz-center;
  text-align:-webkit-center
 }
 .iklan_box{
  display: block;
 }
 .iklan120,
 .iklan160 {
  display:block;
  overflow:hidden;
  text-align:-moz-center;
  text-align:-webkit-center
 }
 .adspost300{
  margin: 0 auto;
  text-align: center;
  width: 300px;
  height: 250px;
 }
 .adspost468 {
  margin:0 auto 15px;
  width:100%;
 }
 .adspost468,
 .adspost728 {
  display:block;
  overflow:hidden;
  height: auto;
 }
 .adspost520 {
     margin: 0 auto;
     margin: 3px;
     width: 509px;
     float: left;
     height: auto;
 }
 .adspost520, .adspost468 {
     min-height: 45px;
 }
 .adspost520 a, .adspost468 a, .adspost300 a, .adspost345 a {
     display: inline-block;
 }
 .adspost520 img, .adspost700 img, .adspost468 img {
     max-width: 520px;
     width: 100%;
     min-height: 42px;
 }
 .adspost700 img, .adspost468 img {
     height: auto;
 }
 .adspost728, .adspost700, .adspost345 {
  margin:0 auto;
  margin-top:10px;
  text-align:-moz-center;
  text-align:-webkit-center
 }
 .adspost345 {
  display: inline-block;
  width: 49.3%;
  height: auto;
  min-height: 59px;
 }
 .adspost345 img {
  width:100%;
  height: auto;
  min-height: 56px;
  padding: 0px 2px;
 }
 .adspost728 {
  width:1068px;
 }
 .adspost728 img {
  max-height:98px;
  max-width:100%
 }
 .clear, .clear1 {
    clear: both;
 }
 .floating_footer{
 width: 100%;
 text-align: center;
 position: fixed;
 bottom: 0;
 margin: 0 auto;
 z-index: 103;
 }
 .close_floating{
 cursor: pointer;
 padding:5px
 }
 .box_footer{
 margin: 0 auto;
 max-width: 1038px;
 position: relative;
 display: inline-block;
 }
 .banner_player{
 position: absolute;
 z-index: 110;
 width: 100%;
 height: 100%;
 text-align: center;
 }
 .banner_player img{
 max-width: 300px;
 max-height: 250px;
 width: 100%;
 height: 100%;
 }
 #banner_animeid
 {
   max-width:100%;
 }
 .close_banner{
 background: var(--third-color);
 border-radius: 3px;
 color: var(--font2-color);
 cursor: pointer;
 margin: 10px auto 0;
 padding: 10px;
 position: relative;
 width: 300px;
 }
 .navbar-banner {
   width: 520px;
   max-height: 60px;
 }
 .advancedsearch {
  background:var(--primary-color);
  border-radius:5px;
  font-size:.8rem;
  margin:0;
  overflow:hidden;
  padding:10px;
  width:100%
 }
 .advancedsearch .kotakcekbox {
  font-size:.9rem;
  font-weight:700;
  padding-right:10px;
  text-align:right;
  text-transform:capitalize;
  width:110px
 }
 .advancedsearch .kotakcekpilih {
  display:flex;
  flex:1;
  flex-flow:row wrap
 }
 .advancedsearch button.searchkotak,
 button.searchkotak2 {
  background:var(--primary-color);
  border:1px solid var(--third-color);
  border-radius:4px;
  color:var(--font-color);
  cursor:pointer;
  display:block;
  float:right;
  line-height:28px;
  padding:0 15px;
  position:relative;
  top:-50px
 }
 .searchkotak2.lteps{top: 50px !important;}
 .advancedsearch button.searchkotak:hover,
 button.searchkotak2:hover {
  background:var(--primary-color)
 }
 .advancedsearch form {
  float:left;
  width:98%
 }
 .advancedsearch tr {
  border-bottom:1px solid var(--secondary-color);
  padding:15px 0
 }
 .advancedsearch tr {
  display:flex;
  flex-direction:row;
  margin-bottom:5px
 }
 .alt-logo {
  display:none!important
 }
 .row-group {
  background:var(--primary-color);
  border-radius:5px;
  padding:15px
 }
 .episodelist ul {
  overflow-x:hidden
 }
 .notedes,
 .tagpst, .tagpstlu, .tagpstmx, .tagpsthu, .tagpstjk {
  background:#fff;
  border-radius:3px;
  line-height:normal;
  padding:10px
 }
 .libur li{
 padding: 5px;
 margin: 10px;
 }
 .sinoparea, .tagpst, .tagpstlu, .tagpstmx, .tagpsthu, .tagpstjk{line-height:1.5;text-align: justify;}
 .sinoparea{min-height: 250px;}
 .redtext {
  color:var(--red-color) !important
 }
 .greentext, .mepr_product_link {
  color:var(--green-color) !important
 }
 .letter-cell {
  margin-bottom:5px;
  text-align:center;
  text-transform:uppercase
 }
 .animeseries {
  margin-top:10px;
  position:relative
 }
 .animeseries ul {
  overflow:hidden
 }
 .animeseries {
  float:left;
  overflow:hidden;
  width:24.4%;
  background:var(--primary-color);
  margin:2px
 }
 .animeseries .less {
  moz-transition:all .2s;
  transition:all .2s;
  webkit-transition:all .2s
 }
 .animeseries .less {
  line-height:17px;
  padding:7px 0
 }
 .animeseries .less span {
  white-space:normal
 }
 .animeseries .nlat {
  margin-bottom:3px
 }
 .animeseries .title {
  bottom: -3px;
  color: #636363;
  font-size: 13px;
  height: 30px;
  max-height: 30px;
  overflow: hidden;
  position: absolute;
  text-align: center;
  transition: all .2s;
  width: 100%;
}
 .animeseries .title span {
  display: block;
  overflow: hidden;
  position: relative;
}
 .animeseries img {
  display: block;
  height:100%;
  width:100%
 }
 .animeseries.cst ul li img {
  height:274px;
  width:100%
 }
 .sera .limit:hover .play {
  display:block;
  z-index:1
 }
 .animeseries ul li:hover .title {
  background:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.1) 5%,rgba(0,0,0,.95) 70%)
 }
 .content .releases,
 .headpost {
  position:relative
 }
 .menunfbox {
  padding:15px;
  background:var(--primary-color);
  border-radius:5px
 }
 .nfpage {
  text-align:center;
  margin-top:30px
 }
 .nftext1 {
  font-size:24px;
  margin-top:50px
 }
 .nftext1,
 .nftext2 {
  display:block;
  line-height:30px;
  text-align:center
 }
 .nftext2 {
  font-size:14px;
  margin-bottom:50px
 }
 .rgnav ul li a {
  color:#fff;
  font-size:14px
 }
 .bold {
  font-weight:700;
  padding-top:10px
 }
 .bold,
 .data .tagline {
  display:inline-block
 }
 .bor {
  float:left;
  padding:1px;
  width:33%;
  position:relative
 }
 .bottomtitle,
 .breadcrumbs {
  line-height:20px;
  margin:8px 0;
  overflow:hidden;
  padding:5px;
  text-overflow:ellipsis;
  white-space:nowrap;
  width:100%
 }
 .bottomtitle a,
 .bottomtitle span.dashicons {
  font-size:13px;
  line-height:20px;
  padding:0 5px;
  color:var(--font2-color)
 }
 .bottomtitle span.dashicons,
 .bottomtitle span.fn {
  font-size:13px;
  line-height:22px;
  padding:0 5px
 }
 .rgnav ul,
 .rgnav ul li {
  position:relative
 }
 .boxinfores .dashicons-desktop,
 .boxinfores .dashicons-star-empty {
  font-size:12px;
  height:0;
  line-height:1.2
 }
 .boxinfores .nilaiseries {
  padding-right:15px
 }
 .boxradioceklis {
  cursor:pointer;
  display:block;
  margin-bottom:5px;
  margin-right:15px;
  moz-user-select:none;
  ms-user-select:none;
  padding-left:18px;
  position:relative;
  user-select:none;
  webkit-user-select:none
 }
 .boxradioceklis {
  width:20%
 }
 .boxradioceklis input {
  cursor:pointer;
  opacity:0;
  position:absolute
 }
 .boxradioceklis input:checked~.cekliskotak {
  background-color:var(--primary-color);
  border:3px dashed var(--third-color);
  margin-top:-1.5px
 }
 .boxtab,
 .boxtab1,
 .boxtab2 {
  cursor:default;
  padding:12px!important;
  pointer-events:none
 }
 .boxtab2 {
 }
 .boxtab2 {
  margin:0 5px 0 0!important;
  width:28%
 }
 .breadcrumbs {
  overflow:hidden;
  text-align:center;
  background:var(--third-color)
 }
 .breadcrumbs span {
  display:inline-block;
  margin:0 5px;
  color:var(--font2-color)
 }
 .breadcrumbs,
 .episodelist ul,
 ul,
 ul.tabs,
 ul.tabs1 {
  list-style:none
 }
 .breadcrumbs,
 .kotakseries .data {
  margin-bottom:10px;
  padding:15px
 }
 .cekliskotak {
  background-color:#ddd;
  border-radius:50%;
  height:12px;
  left:0;
  position:absolute;
  top:3px;
  width:12px
 }
 .clear,
 .clear1 {
  clear:both
 }
 .clear1 {
  border:5px solid #fff
 }
 .commentarea #respond h3 {
  background:0;
  border-bottom:0;
  padding:0
 }
 .commentarea h3 {
  color:#6f6f73;
  font-size:13px;
  font-weight:700;
  margin-bottom:0;
  text-transform:uppercase
 }
 .container,
 .container1 {
  margin-top:10px;
  width:100%
 }
 .content {
  float:left;
  padding-bottom:20px;
  width: 99%;
 }
 .content .releases h1,
 .content .releases h2 {
  font-size:14px;
  font-weight:700;
  margin-bottom:0;
  padding:10px 0;
  position:relative;
  text-align:left;
  background:var(--hover-color);
  color:var(--font2-color);
  padding:15px
 }
 .latestepisodes li,
 ul li .bor .limit,
 ul.latestepisodes {
  overflow:hidden
 }
 .contentpost {
  line-height:normal
 }
 .contentpost iframe {
  border-width:0;
  height:auto;
  margin:0;
  width:100%;
  z-index:102;
  overflow-x:hidden;
  overflow-y:hidden;
 }
 .dashicons.dashicons-plus-alt {
  color:#3dd972
 }
 .dashicons.dashicons-calendar {
  font-size: 14px;
 line-height: 35px;
 }
 .dashicons.dashicons-arrow-right, .dashicons.dashicons-download, .dashicons.dashicons-arrow-down {
  font-size:20px;
  height:0;
  line-height:.7;
  position:
  relative
 }
 .dashicons.dashicons-arrow-up-alt2 {
  line-height:45px
 }
 .dashicons.dashicons-download {
  height:0
 }
 .dashicons.dashicons-plus-alt,
 .dashicons.dashicons-smartphone,
 .sera .dashicons.dashicons-clock,
 .sera .dashicons.dashicons-desktop,
 .sera .dashicons.dashicons-info-outline {
  font-size:12px;
  height:0;
 }
 .sera .dashicons.dashicons-info-outline {
 line-height: 1;
 color: var(--red-color);
 }
 .dashicons.dashicons-star-empty {
  font-size:12px;
  height:0;
  line-height:1.2;
 }
 .dashicons.dashicons-star-filled {
  font-size:13px;
  height:13px;
  width:15px
 }
 .data .tagline {
  border-bottom:1px solid var(--secondary-color);
  border-top:1px solid var(--secondary-color);
  font-size:14px;
  padding:5px;
  width:100%
 }
 .data .tagline a {
  background:var(--primary-color);
  color:rgba(255,255,255,.9);
  font-size:12px;
  margin:0 1px
 }
 .data .tagline a,
 .extra span {
  padding:5px 10px;
  background-color:var(--third-color);
  color:var(--font2-color)
 }
 .data .tagline a:hover,
 .extra .dateseries a:hover {
  color:var(--secondary-color)
 }
 .desc {
  border:1px solid #e6ebff;
  font-size:12px;
  height:27px;
  margin:5px 0;
  overflow-y:scroll;
  padding:5px
 }
 .desc p {
  margin:0
 }
 .lazySearch {
  margin-bottom: 5px;
  text-align: center;
 }
 .episodelist {
  margin:35px 0
 }
 .episodelist .tit {
  color:var(--font-color);
  font-size:14px;
  font-weight:700;
  line-height:20px;
  margin-bottom:25px;
  text-align:center
 }
 .episodelist .top {
  color:var(--font2-color);
  display:flex;
  display:-ms-flexbox;
  display:-webkit-box;
  flex-wrap:wrap;
  ms-flex-wrap:wrap;
  padding:8px
 }
 .episodelist .top,
 .episodelist ul .top span {
  background:var(--header-color);
 border: 1px solid var(--secondary-color);
 }
 .episodelist ul {
  max-height:45em;
  overflow-y:auto;
  scrollbar-width:thin
 }
 .episodelist ul .top span {
  color:#fff
 }
 .episodelist ul li {
  border-bottom:1px solid var(--bg-color);
  overflow:hidden;
  position:relative;
  text-align:center;
  padding:7px 0
 }
 .episodelist ul li .t1 {
  padding:0 0 0 7px;
  width:71%
 }
 .episodelist ul li .t2 {
  padding:0 0 0 7px;
  text-align:center;
  width:105px
 }
 .episodelist ul li .t3 {
  border-right:0;
  text-align:center;
  width:27%
 }
 .episodelist ul li span {
  border-right:1px solid var(--secondary-color);
  display:block;
  float:left;
  line-height:30px
 }
 .episodelist ul li span:hover {
  color:var(--third-color)
 }
 .episodelist ul li:hover {
  background-color:var(--primary-color)!important
 }
 .episodelist ul li:nth-child(even) {
  background-color:var(--secondary-color)
 }
 .episodelist ul li:nth-child(odd) {
  background-color:var(--primary-color)
 }
 .notedes {
  line-height:normal;
  margin:10px 0;
  padding:5px 10px;
  text-align:justify
 }
 .extra, .scoreseries, .sys, .data .tagline {
  padding: 10px !important;
 }
 .extra {
  border-bottom:1px solid var(--secondary-color);
  border-top:1px solid var(--secondary-color);
  font-size:14px;
  line-height:20px;
  margin-bottom:5px;
  padding:5px 0;
  position:relative
 }
 .extra .dateseries a {
  color:var(--font2-color)
 }
 .fullwdth {
  float:unset!important;
  width:100%!important
 }
 .label {
  color:#fff
 }
 .genres {
  font-size:13px;
  margin-top:5px;
  overflow:hidden
 }
 .genres ul {
  overflow:hidden
 }
 .genres ul li {
  float:left;
  padding:10px 0;
  width:25%
 }
 .genres ul li a {
  padding:5px
 }
 .headerbtm {
  margin:auto;
  max-width:1330px;
  position:relative
 }
 .headpost {
  color: #8b8b8b;
  padding:15px;
  width: 100%;
 }
 .hrf-content {
  display:none;
  font-size:14px;
  word-break:normal
 }
 .hrf-content,
 h3.hrf-title {
  background:#fff;
  color:#444;
  padding:10px 10px 10px 50px
 }
 .hrf-entry {
  border:none!important;
  margin-bottom:0!important;
  padding-bottom:0!important
 }
 .hrf-faq-list blockquote {
  line-height:normal
 }
 .hrf-faq-list blockquote img {
  height:auto;
  max-width:100%
 }
 .hrf-title {
  cursor:pointer
 }
 .hrf-title span {
  background:url(images/open.png) center center no-repeat #444
 }
 .hrf-title span {
  display:inline-block;
  height:30px;
  left:0;
  margin-left:-42px;
  margin-right:12px;
  position:relative;
  top:8px;
  width:30px
 }
 .iklan120,
 .iklan160 {
  float:left;
  margin:0 9px
 }
 .infovid {
  background:var(--primary-color);
  font-size:13px;
  margin:10px 0;
  padding:15px
 }
 .infovid .right,
 .infovid p.left {
  margin:unset;
  line-height:unset
 }
 .infovid .left {
  float:left;
  position:relative;
  z-index:402
 }
 .infovid .left .vidspan {
  cursor:pointer;
  margin-right:5px
 }
 .infovid .left .vidspan,
 .infovid .right .vidspan {
  background:var(--secondary-color);
  box-shadow:0 1px 1px rgba(0,0,0,.1);
  color:var(--font-color);
  display:block;
  float:left;
  padding:6px 10px
 }
 .infovid .left .vidtheater:hover {
  background:#5168aa;
  color:rgba(255,255,255,.9)
 }
 .infovid .right {
  float:right
 }
 .kotakanime-btn {
  border:1px solid transparent;
  display:inline-block;
  font-size:14px;
  margin:0 1px;
  outline:0;
  padding:2px 5px;
  white-space:nowrap;
  width:70px
 }
 .kotakanime-btn {
  color:#fff;
  font-weight:400;
  text-align:center
 }
 .kotakanime-top {
  left:10px;
  z-index:3
 }
 .kotakanime-top {
  background-color:rgba(0,0,0,.3);
  border-radius:10px;
  bottom:5px;
  color:#fff;
  cursor:pointer;
  display:none;
  font-size:1.4rem;
  height:45px;
  line-height:3.2rem;
  position:fixed;
  right:10px;
  text-align:center;
  width:45px
 }
 .kotakanime-top:hover {
  background-color:rgba(13,44,134,.7);
  color:#fff!important
 }
 .kotakkanan {
  float:right;
  width:900px
 }
 .kotakscore {
  top:5px
 }
 .kotakscore,
 span.anitime {
  background:rgba(27,27,27,.7)
 }
 .kotakscore,
 span.anitime,
 span.types {
  color:var(--font2-color);
  font-size:12px;
  font-weight:700;
  line-height:13px;
  padding:5px 8px;
  position:absolute;
  text-transform:uppercase;
  top:0;
  z-index:1
 }
 span.status {
 text-transform:none !important;
 }
 .sys {
  margin-right:5%
 }
 .kotakseries {
  float:left;
  padding:15px;
  width:100%;
  background:var(--primary-color)
 }
 .kotakseries .data {
  float:right;
  padding:0;
  width:calc(100% - 170px)
 }
 .kotakseries img {
  float:left;
  height:auto;
  margin-right:8px;
  padding:1px;
  width:160px
 }
 .label {
  border-radius:.25em;
  font-size:12px;
  font-weight:700;
  margin:1px 1.5px;
  padding:0 7px;
  text-align:center;
  vertical-align:baseline;
  white-space:nowrap
 }
 .label,
 .letter-group,
 .nav_apb a {
  display:inline-block
 }
 .latestepisodes li {
  line-height:18px
 }
 .latestepisodes li .lefts {
  color:var(--font-color)
 }
 .latestepisodes li .lefts,
 ul li .right .latest,
 ul li .right .title {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
 }
 .latestepisodes li .lefts:hover {
  color:#ffffff
 }
 .latestepisodes li .ongoingkanan {
  float:right;
  width:37%
 }
 .latestepisodes li .ongoingkanan .episode {
  color:var(--red-color);
  font-size:12px;
  margin:0;
  padding:0 10px;
  text-align:center
 }
 .latestepisodes li .ongoingkiri {
  float:left;
  overflow:hidden;
  width:63%
 }
 .latestepisodes li .rights {
  float:right;
  margin-left:5px
 }
 .latestepisodes li .rights .video {
  background:rgba(13,44,134,.7);
  border-radius:3px;
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:normal;
  margin:4px 0;
  padding:3px 10px;
  text-align:center;
  text-transform:uppercase;
  width:55px
 }
 .latestepisodes li span {
  float:right
 }
 #sidebar_right ul li a,
 .latestepisodes li {
  color:var(--font-color)
 }
 .latestepisodes li:hover .ongoingkanan span,
 .latestepisodes li:hover .ongoingkiri {
  color:rgba(255,255,255,.9)
 }
 .latestest {
  border:1px solid var(--third-color);
  float:right;
  margin-bottom:10px;
  margin-left:10px;
  padding:1px;
  text-align:center;
  width:150px
 }
 .latestest .latestepisode {
  color:#333;
  display:block;
  font-size:18px;
  padding:10px 0
 }
 .latestest .latestheader {
  background:var(--third-color);
  color:var(--font2-color);
  display:block;
  font-size:15px;
  height:35px;
  line-height:35px;
  margin:0;
  padding:0
 }
 .letter-cell {
  background:var(--third-color);
  border-radius:4px;
  color:var(--font2-color);
  font-family: 'Montserrat', sans-serif;
  font-size:13px;
  font-weight:700;
  padding:7px;
  position:relative
 }
 .letter-cell a {
  color:#fff;
  position:absolute;
  top:-52px
 }
 .letter-group {
  margin:30px 0;
  position:relative;
  width:100%
 }
 .lightSwitcher:hover {
  background:#5167a6
 }
 .limit img {
  width:100%;
  height:auto;
  top:0;
  position:absolute;
  left:0
 }
 .listinfo {
  padding:3px 9px
 }
 .listinfo {
  float:left;
  margin-left:10px;
  margin-top:10px;
  position:relative;
  width:calc(100% - 920px)
 }
 .listinfo .featuredtitle {
  background:var(--header-color);
  border-bottom:0;
  border-radius:2px;
  color:#fff;
  font-size:13px;
  margin-bottom:5px;
  margin-top:1px;
  padding:6px 8px;
  text-align:center;
  box-shadow:2px 3px rgba(0,0,0,.1)
 }
 .listinfo .latestepisodes li span {
  color:#3a8a26;
  float:right
 }
 .listinfo span {
  color:#eee;
  float:right;
  line-height:12px;
  position:relative
 }
 .listinfo ul {
  background:var(--secondary-color);
  font-size:13px;
  margin-bottom:10px;
  padding:10px;
  position:relative
 }
 .listinfo ul li {
  background:var(--secondary-color);
  box-shadow:0 1px 1px rgba(0,0,0,.1);
  margin-bottom:6px;
  overflow:hidden;
  padding:9px
 }
 .listinfo ul li:hover {
  background:var(--header-color)
 }
 .seasontext {
  background:var(--header-color)
 }
 .loading-img {
  display:none
 }
 .ltsposts {
  color:#333;
  font-size:13px;
  padding-top:3px
 }
 .ltsposts a {
  padding-right:10px
 }
 .menu .dashicons-admin-home,
 .menu .dashicons-arrow-down-alt2,
 .menu .dashicons-awards,
 .menu .dashicons-update,
 .menu .dashicons-sticky
 {
  font-size:14px;
  line-height:35px
 }
 .menu .dashicons-sticky{
  line-height:1.4
 }
 .mirror {
  background:var(--secondary-color);
  border-bottom:1px solid #f1f1f1;
  border-top:1px solid #f1f1f1;
  overflow:hidden;
  padding:5px
 }
 .mirror li {
  display:inline-block;
  padding:5px 1px;
  text-align:center;
  width:19.4%
 }
 .mirror li .active {
  background:rgba(13,44,134,.7);
  color:rgba(255,255,255,.9)
 }
 .mirror li a {
  background:var(--font-color);
  color:#fff;
  display:block;
  line-height:30px;
  padding:0 10px
 }
 .mirror li a span {
  border-left:1px solid #fff;
  float:right;
  padding-left:10px
 }
 .mirror li a:hover {
  background:rgba(13,44,134,.7);
  color:#fff
 }
 .nav_apb {
  top:0;
  right:0;
  margin:0;
  position:fixed;
  text-align:center;
  z-index:3;
  vertical-align:text-top;
  display:inline-grid
 }
 .nav_apb a {
  background:var(--third-color);
  color:var(--font2-color);
  font-size:15px;
  font-weight:700;
  margin:1px;
  padding:7px 10px
 }
 .nav_apb a:hover {
  color:#fff;
  opacity:.5
 }
 .nilaiseries {
  border-right:1px solid #edf2ff
 }
 .notedes,
 .tagpst, .tagpstlu, .tagpstmx, .tagpsthu, .tagpstjk {
  background:var(--primary-color);
  border-radius:3px;
  line-height:normal;
  padding:15px
 }
 .naveps {
  font-size:13px;
  overflow:hidden;
  margin-top: 10px;
 }
 .naveps .dashicons {
  height:unset!important;
  font-size:unset!important;
  margin:0 5px
 }
 .nvs {
  width:calc(100%/3);
  float:left;
  text-align:center;
  background:var(--header-color);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
 }
 .nvs a {
  color:#fff;
  padding:10px;
  display:block
 }
 .nvs a:hover {
  background:var(--third-color);
  color:#fff
 }
 .nvsc {
  background:var(--third-color);
  color:#333
 }
 .nonex {
  cursor:not-allowed;
  color:var(--font2-color);
  padding:10px;
  display:block
 }
 .pagination {
  line-height:23px;
  overflow:hidden;
  text-align:center;
  margin-top: 10px;
}
 .pembatassearch {
  border-right:1px var(--secondary-color) dotted;
  padding-right:20px
 }
 .play {
  background:rgba(0,0,0,.7);
  bottom:0;
  display:none;
  left:0;
  position:absolute;
  right:0;
  top:0;
  transition:background-color .2s ease;
  webkit-transition:background-color .2s ease
 }
 .play .dashicons {
  color:#fff;
  color:rgba(255,255,255,.7);
  font-size:55px;
  height:60px;
  left:50%;
  margin:-32px 0 0 -25px;
  position:absolute;
  top:50%;
  width:60px
 }
 .play .dashicons-controls-repeat {
  left:47%
 }
 .play .dashicons-video-alt3 {
  left:46%;
  z-index:1
 }
 .iframe-placeholder {
   display: flex;
   align-items: center;
   justify-content: center;
   background: #000;
   position: absolute !important;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 2;
 }
 
 .iframe-placeholder button {
   position: absolute;
   background: rgba(0, 0, 0, 0.5);
   color: #fff;
   border: none;
   padding: 10px 20px;
   cursor: pointer;
   font-size: 16px;
   width: 100%;
   height: 100%;
 }
 .player-embed iframe,
 .player-embed object,
 .plyr--video,
 .player-embed #kotakvideo{
  position:absolute !important;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:2
 }
 .progress {
  background-color:var(--secondary-color);
  border-radius:4px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
  height:auto;
  margin-bottom:0;
  overflow:hidden;
  webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1)
 }
 .progress-bar {
  background-color:rgba(197,207,246,.9);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);
  color:var(--font2-color);
  float:left;
  font-size:13px;
  font-weight:600;
  height:100%;
  line-height:20px;
  o-transition:width .6s ease;
  text-align:center;
  transition:width .6s ease;
  webkit-box-shadow:inset 0 -1px 0 rgba(0,0,0,.15);
  webkit-transition:width .6s ease
 }
 .progress-bar-info {
  background:var(--header-color)
 }
 .progress-bar-striped {
  background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
  background-size:40px 40px;
  webkit-background-size:40px 40px
 }
 .rank {
 }
 .rank li {
  background:var(--primary-color);
  box-shadow:0 1px 1px rgba(0,0,0,.1);
  margin-bottom:10px
 }
 .rank li .mid {
  float:left;
  width:calc(100% - 70px)
 }
 .rank li .mid .viewer {
  color:var(--font-color);
  display:inline-block;
  margin-top:5px
 }
 .rank li .mid h2 {
  font-size:14px
 }
 .rank li .mid p {
  color:var(--font-color);
  font-size:13px;
  line-height:normal;
  margin-bottom:0;
  margin-top:5px
 }
 .rank li img {
  float:right;
  height:auto;
  width:45px
 }
 .rank li:hover {
  background:var(--secondary-color);
  box-shadow:none
 }
 .rank,
 .rank li {
  overflow:hidden;
  padding:10px
 }
 .rekomen {
  background:var(--secondary-color);
  color:#333;
  font-size:13px;
  margin-top:8px;
  overflow:hidden;
  padding:5px
 }
 .rekomen .featuredtitle {
  background:var(--header-color);
  border-radius:2px;
  color:var(--font2-color);
  float:left;
  font-family: 'Montserrat', sans-serif;
  font-size:13px;
  font-weight:700;
  line-height:13px;
  margin:-5px 10px -5px -5px;
  padding:6px
 }
 .rekomen b {
  background:var(--primary-color);
  border-radius:2px;
  color:#fff;
  float:left;
  font-size:13px;
  font-weight:700;
  line-height:13px;
  margin:-5px 10px -5px -5px;
  padding:6px
 }
 .releases h3 {
  color:var(--font2-color);
  font-size:14px;
  margin-bottom:5px;
  padding:15px;
  background:var(--header-color)
 }
 .releases span {
  color:var(--font2-color);
  float:right;
  font-size:inherit;
 }
 .result {
  overflow:hidden;
  padding:10px
 }
 .result ul {
  overflow:hidden
 }
 .result ul li {
  background:var(--primary-color);
  box-shadow:0 1px 1px rgba(85,107,170,.2);
  float:left;
  height:165px;
  margin:2px;
  padding:10px;
  position:relative;
  width:32.8%;
  border-radius: 10px;
 }
 .result ul li .boxinfores {
  font-size:12px;
  margin-bottom:5px;
  margin-top:8px;
  padding:4px 0
 }
 .result ul li .boxinfores span.rsrated,
 .result ul li .boxinfores span.typeseries {
  border-right:1px solid var(--secondary-color);
  padding:0 20px;
  text-align:center
 }
 .result ul li .boxinfores,
 .result ul li .genre {
  border-radius:2px;
  color:var(--font-color);
  font-weight:700;
  text-transform:uppercase;
  max-height: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 .result ul li .descs {
  color:var(--font-color);
  font-size:13px;
  margin-top:5px;
  height:75px;
  overflow:hidden;
  line-height: 1.5;
  text-overflow:ellipsis
 }
 .result ul li .genrebatas {
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
 }
 .result ul li .genre {
  display:inline-block;
  font-size:12px;
  margin-right:3px;
  padding:5px;
  text-style:none
 }
 .result ul li .top {
  overflow:hidden
 }
 .result ul li .top h2, .result ul li .top h3, .result ul li .top h4 {
  font-size:14px;
  max-height:40px;
  overflow:hidden;
  text-overflow:ellipsis;
 white-space: nowrap;
 }
 .result ul li .top img {
  float:left;
  height:95px;
  margin-right:10px;
  width:auto
 }
 .result ul li:hover {
  background:var(--secondary-color);
  box-shadow:none
 }
 .rgnav .random {
  border-radius:3px;
  color:#fff;
  cursor:pointer;
  float:right;
  font-size:13px;
  line-height:31px;
  margin:6px 6px 6px 0;
  padding:0 8px;
  text-transform:uppercase
 }
 .rgnav .random,
 .rgnav ul li ul li a:hover {
  background:var(--header-color)
 }
 .rgnav ul {
  float:left;
  margin:15px 0 10px 30px;
 }
 .rgnav ul .current-menu-item a {
  color:#fff
 }
 .rgnav ul li {
  float:left
 }
 .rgnav ul li a {
  display:block;
  line-height:35px;
  padding:0 15px;
  text-transform:uppercase
 }
 .rgnav ul li a,
 body {
  font-family: 'Montserrat', sans-serif;
 }
 .rgnav ul li a:hover {
  background:var(--header2-color)
 }
 .rgnav ul li ul {
  box-shadow:0 2px 2px rgba(0,0,0,.4);
  display:none;
  position:absolute;
  text-align:center;
  webkit-box-shadow:0 2px 2px rgba(0,0,0,.4);
  z-index:9999
 }
 .rgnav ul li ul li a {
  background:var(--header2-color);
  display:block;
  line-height:20px;
  min-width:150px;
  padding:5px 10px
 }
 .rgnav ul li ul li a:hover {
  color:var(--header2-color)
 }
 .rgnav ul li:hover ul {
 display: block;
 float: left;
 overflow: hidden;
 width: 345px;
 background: var(--primary-color);
 position: absolute;
 left: -15px;
 z-index: 9999;
 top: 20px;
 }
 .rgnav ul li ul li {
   border: none;
   outline: none;
   color: white;
   padding: 8px 10px;
   background-color: inherit;
   margin: 0;
 }
 .row-cells {
  -moz-column-count:2;
  -webkit-column-count:2;
  column-count:2;
  overflow:hidden;
  padding-left:10px;
  width:100%
 }
 .score .dashicons.dashicons-star-filled {
  line-height:25px
 }
 .scoreseries {
  float:left;
  font-size:30px;
  line-height:81px
 }
 .scoreseries .dashicons.dashicons-star-empty {
  font-size:35px;
  line-height:76px
 }
 .scoreseries span {
  padding:0 15px
 }
 .seasonbox {
  margin:5px 0;
  position:relative;
  left:0;
  width:100%
 }
 .seasontext {
  border-radius:2px;
  color:#fff;
  float:left;
  padding:3px 15px;
  position:relative;
  text-align:center;
  width:37%;
 font-size: 14px;
 }
 .seasontext,
 .thatasseries ul li .title span,
 .thatasseries ul li:hover .play {
  display:block
 }
 .sera:hover .kotakscore {
  background:rgba(85,107,170,.7);
  ms-transform:translateX(63px);
  transform:translateX(63px);
  webkit-transform:translateX(63px);
  z-index:3
 }
 .sera:hover .kotakscore,
 .sera:hover span.anitime,
 .sera:hover span.status,
 .sera:hover span.types {
  color:rgba(255,255,255,.9);
  left:0;
  moz-transition:all .4s;
  transition:all .4s;
  webkit-transition:all .4s;
  z-index:3
 }
 .sera:hover span.anitime {
  top:2.5%;
  width:100%
 }
 .sera:hover span.anitime {
  top:2.5%;
  width:100%
 }
 .sera:hover span.anitime,
 .sera:hover span.types {
  transform:translateY(100%);
 text-transform: unset;
 }
 .sera:hover span.types {
  top:-22px
 }
 .sera:hover span.episodes {
  top:5px;
 }
 .seriesdesc {
  background:var(--primary-color);
  display:block;
  margin:10px 0;
  min-height:250px;
  padding:5px 15px;
  text-align:justify;
  float:left;
  width:calc(100% - 310px);
 }
 .seriesdesc h2 {
  display:inline-block;
  font-size:14px
 }
 .show-menu {
  color:var(--font2-color);
  cursor:pointer;
  display:none;
  font-size:16px;
  font-weight:700;
  line-height:37px;
  overflow:hidden;
  text-align:center;
  text-transform:uppercase
 }
 .show-menu .dashicons {
  float:left;
  font-size:30px;
  padding:3px
 }
 .skoraniser {
  float:inline-end;
  margin-right:10px;
  margin-top:4px
 }
 .spoiler-body,
 .spoiler-body1 {
  display:none
 }
 .spoiler-btn,
 .spoiler-btn1 {
  background-color:var(--third-color);
  color:var(--font2-color);
  cursor:pointer;
  line-height:20px;
  margin:0 auto 10px;
  padding:5px 10%;
  text-align:center;
  width:40%
 }
 .spoiler-btn1:hover,
 .spoiler-btn:hover {
  background-color:var(--secondary-color);
  color:#fff
 }
 .tab-content,
 .tab-content1 {
  display:none
 }
 .tab-content.current,
 .tab-content1.current1 {
  display:inherit
 }
 .tagpst h2, .tagpstlu h2, .tagpstmx h2, .tagpsthu h2, .tagpstjk h2
 .tagpst h3, .tagpstlu h3, .tagpstmx h3, .tagpsthu h3, .tagpstjk h3 {
  color:var(--font-color);
  display:inline;
  font-size:15px;
  line-height:25px
 }
 .tagpst, .tagpstlu, .tagpstmx, .tagpsthu, .tagpstjk, .tagpst1, .tagpst823, .tagpst992, .tagpstku, .tagpstpo{
  background:var(--primary-color);
  border:1px solid var(--secondary-color);
  color:var(--font-color);
  height:65px;
  margin-bottom:15px;
  text-align:justify;
  overflow:hidden
 }
 .tagpst:hover, .tagpstlu:hover, .tagpstmx:hover, .tagpsthu:hover, .tagpstjk:hover {
  overflow-y:scroll;
  scrollbar-width:thin
 }
 .tagpst1, .tagpst823, .tagpst992, .tagpstku, .tagpstpo {
  height:unset!important;
  overflow-y:unset!important;
  text-align:center!important;
  padding:10px
 }
 .tagpst1.notice {
  z-index: 10;
  position: absolute;
  width: 100%;
  top: 5px;
 }
 .tagpst1{
  margin-top:15px;
  z-index: 3;
  position: relative;
 }
 .notice-iklan { display: inline-block; }
 .tagpst1 a {
   color: var(--green-color);
 }
 .border_batas{
  border: 1.5px var(--third-color) solid;
 }
 .thatasseries {
  padding:0 10px
 }
 .thatasseries ul {
  overflow:hidden
 }
 .thatasseries ul li {
  float:left;
  overflow:hidden;
  width:16.66%
 }
 .thatasseries ul li .title {
  background:linear-gradient(to bottom,rgba(0,0,0,.1) 5%,rgba(0,0,0,.95) 70%);
  bottom:0;
  color:#fff;
  display:unset;
  font-size:13px;
  font-weight:400;
  line-height:normal;
  overflow:hidden;
  padding:7px 0;
  position:absolute;
  text-align:center;
  width:100%;
  z-index:1
 }
 .thatasseries ul li .title span {
  overflow:hidden;
  padding:0 10px;
  text-overflow:ellipsis
 }
 .thatasseries ul li:hover .title {
  display:block;
  moz-transition:all .4s;
  padding:40px 0;
  transform:translateY(0);
  transition:all .4s;
  webkit-transition:all .4s
 }
 .title-cell {
  font-weight:300;
  line-height:25px;
  margin-left:10px;
  padding:3px 0;
  width: 98%;
 }
 .title-cell .dashicons-arrow-right-alt2 {
  color:var(--font-color);
  font-size:12px;
  line-height:25px;
  margin-left:-14px;
  width:10px
 }
 .title-cell a {
  font-size:13px;
  width: calc(100% - 80px);
  display: inline-block;
 }
 .top .t1 {
  display:block!important;
  -ms-flex-preferred-size:0;
  flex-basis:0%;
  -webkit-box-flex:1;
  -ms-flex-positive:1;
  flex-grow:1;
  max-width:100%;
  line-height:20px
 }
 .top .t3 {
  flex:0 0 25%;
  flex-basis:0;
  flex-grow:1;
  line-height:20px;
  margin-right:100px;
  max-width:25%;
  ms-flex:0 0 25%;
  ms-flex-positive:1;
  ms-flex-preferred-size:0;
  webkit-box-flex:0
 }
 .video-container {
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
  z-index:102
 }
 .video-container embed,
 .video-container iframe,
 .video-container object,
 .video-container video {
  position:absolute!important;
  top:0;
  left:0;
  width:100%;
  height:100%
 }
 .wp-pagenavi {
  border-radius:3px;
  display:inline-block;
  font-size:13px;
  overflow:hidden
 }
 .wp-pagenavi .current {
  background:var(--header-color);
  color:#fff
 }
 .wp-pagenavi .current,
 .wp-pagenavi a {
  border-radius:3px;
  box-shadow:0 1px 1px rgba(0,0,0,.1);
  display:block;
  float:left;
  margin-right:5px;
  padding:5px 10px
 }
 .wp-pagenavi .last {
  border-right:0
 }
 .wp-pagenavi .pages {
  background:var(--third-color);
  border-radius:3px;
  box-shadow:0 1px 1px rgba(0,0,0,.1);
  color:#fff;
  display:block;
  float:left;
  padding:5px;
  margin:0 3px
 }
 .wp-pagenavi a {
  background:var(--third-color);
  color:var(--font2-color)
 }
 .wp-pagenavi a:hover {
  background:var(--secondary-color);
  color:#fff
 }
 .infoseries {
  padding-right:15px;
  border-right:1px solid #333;
  margin-left:15px
 }
 #server {
  overflow:hidden;
  margin-bottom:14px;
  text-align:center;
  margin-top:14px
 }
 #server ul li {
  display:inline-block;
  width:18%;
  margin:2px
 }
 .kotak_player_option-backup, .loadmore_button {
  width:100%;
  background:var(--third-color);
  padding:10px 1px;
  font-weight:400;
  cursor:pointer;
  font-size:14px;
  color:#fff;
 }
 .load_more{
  display: table;
  width:100%;
  margin: 15px auto;
  text-align: center;
 }
 .kotak_player_option.on {
   color: var(--font2-color) !important;
   background: var(--green-color2) !important;
 }
 .bor .limit,
 .sera .limit {
  position:relative;
  overflow:hidden;
  padding:137% 0 0;
  border-radius: 15px;
 }
 .animeseries .sera {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
 }
 .bor .limit img {
  padding:3px
 }
 .kotakbatas {
  background:var(--primary-color);
  overflow:hidden
 }
 html {
  scrollbar-color:var(--hover-color) var(--secondary-color);
  scrollbar-width:thin;
  background:#100e17;
  color:#fff;
  overflow-x:hidden
 }
 *,
 ::before,
 ::after {
  box-sizing:border-box
 }
 
 /* custom */
  #disqus_thread {
   background-color: var(--disqus-bg);
   color: var(--disqus-text);
   padding: 20px;
   border-radius: 8px;
 }
 #disqus_thread input,
 #disqus_thread textarea {
   background-color: var(--primary-color);
   color: var(--font-color);
   border: 1px solid var(--secondary-color);
 }
 #disqus_thread a {
   color: #4a90e2;
 }
 
 #disqus_thread a:hover {
   color: #3a7bc8;
 }
 .commentarea {
  margin-bottom:15px;
  padding:15px;
 border-top: 1px solid var(--secondary-color);
 }
 .theme .slider.round {
  border-radius:34px
 }
 .leftarea {
  float:left
 }
 .kotakseries,
 .seriesdesc,
 .content h4,
 h1.entry-title.cs,
 .breadcrumbs,
 .kotakseries .data,
 .data .tagline a,
 .extra span,
 .latestest,
 .releases h3,
 .headpost,
 .tagpst, .tagpstlu, .tagpstmx, .tagpsthu, .tagpstjk, .tagpst1, .tagpst823, .tagpst992, .tagpstku, .tagpstpo,
 .naveps, .infovid, #server .kotak_player_option, #arealinker, div[class*='animeinfoku5-'], div[class*='animeinfoab-'], div[class*='animeinfoxy-'], div[class*='animeinfozy-'], div[class*='animeinfomu-'] {
  border-radius:5px
 }
 div[class*='animeinfoku5-'] .imgbox, div[class*='animeinfoab-'] .imgbox, div[class*='animeinfoxy-'] .imgbox, div[class*='animeinfozy-'] .imgbox, div[class*='animeinfomu-'] .imgbox {
 width: 171px;
 float: left;
 overflow: hidden;
 margin-right: 15px;
 }
 div[class*='animeinfoku5-'] h2, div[class*='animeinfoab-'] h2, div[class*='animeinfoxy-'] h2, div[class*='animeinfozy-'] h2, div[class*='animeinfomu-'] h2 {
   font-size: 18px;
   text-align: center;
   margin-bottom: 23px;
 }
 .mishafilterlb {
   margin: 10px;
 }
 .boxfilter{margin: 15px 0;;width:100%}
 .buttfilter {background: var(--primary-color);
   border: 1px solid var(--third-color);
   border-radius: 4px;
   color: var(--font-color);
   cursor: pointer;
   display: block;
   float: right;
   line-height: 28px;
   padding: 0 15px;
   position: relative;
 }
 .mepr_product_link {
   padding: 0 8px;
 }
 .commentarea, #disqus_thread {
   color: var(--font-color) !important;
 }
 .featuredimgs img {
     max-height: 210px;
   height:auto;
   border-radius: 10px;
 }
 .right {
   float:right;
 }
 .clearAll{
   transition: all .15s;
   border-radius: .25rem;
   font-size: .85em;
   color: #fff;
   background-color: var(--header2-color);
   padding: 3px 8px;
   float: right;
   cursor: pointer;
 }
 .clearAll:hover{
   background-color: var(--red-color);
 }
 .btnRemove {
   float: right;
   line-height: 1.5;
   cursor: pointer;
 }
 .btnRemove:hover {
   color: var(--red-color);
 }
 .trailerbutton {
   text-align: center;
   background: #c00;
   font-size: 13px;
   color: #fff;
   border-radius: 5px;
   padding: 8px 5px;
   display: block;
   margin: 6px 0;
   line-height: 1.52;
 }
 .trailerbutton:hover {
   background: #b20c0c;
   color: #fff !important;
 }
 .bookmark.marked {
   background: #333;
 }
 .bookmark {
   text-align: center;
   background: var(--header2-color);
   font-size: 13px;
   color: #fff;
   border-radius: 5px;
   padding: 8px 5px;
   cursor: pointer;
 }
 .bookmark a {
   color: var(--font2-color);
 }
 .social_grup {
   text-align: center;
   font-size: 20px;
   background: var(--primary-color);
   padding: 10px;
   margin: 0 auto;
   line-height: 1.3;
 }
 .social_grup a {
   color: var(--green-color);
 }
 .social_grup a:hover {
   color: var(--header2-color);
 }
 .serverplayer {
   background: var(--primary-color) !important;
   color: var(--font-color) !important;
   margin: 3px !important;
   padding: 10px 2px !important;
   text-align: center;
 }
 .serverinfo {
   width: 100% !important;
   text-align: center;
   margin-bottom: 2px !important;
   background: var(--header-color) !important;
   color: var(--font2-color) !important;
 }
 .tabs1.player {
   border: none;
   padding: 3px 1px 5px 5px;
 }
 .discord-button, .telegram-button, .facebook-button {
     position: relative;
     display: inline-block;
     vertical-align: top;
     box-sizing: border-box;
     cursor: pointer;
     border-radius: 3px;
     padding: 5px;
     font-weight: bold;
     font-size: 11px;
     text-decoration: none;
     margin: 0 2px;
     width: 30%;
   color: var(--font2-color) !important;
 }
 .discord-button:hover, .telegram-button:hover, .facebook-button:hover {
   color: var(--header2-color) !important;
 }
 .discord-button {
   background-color: #5d71b7;
   border: 2px solid #5d71b7;
 }
 .facebook-button {
   background-color: #146de1;
   border: 2px solid #1877f2;
 }
 .telegram-button {
   background-color: #027bb7;
   border: 2px solid #027bb7;
 }
 .multiselect-dropdown {
  position: relative;
  width: 70%;
  user-select: none;
margin-top: -10px;
}

.multiselect-dropdown .select-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
}
.multiselect-dropdown .select-box:after {
  content: '\25BC';
  position: absolute;
  right: 10px;
}

.multiselect-dropdown .options {
background: var(--secondary-color);
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  border-top: none;
  border-radius: 0 0 4px 4px;
  max-height: 219px;
  overflow-y: auto;
}

.multiselect-dropdown .option {
  padding: 8px;
  cursor: pointer;
  width: 33%;
  float: left;
}

.multiselect-dropdown .option:hover {
  background-color: var(--primary-color);
}

.multiselect-dropdown .option.selected {
  background-color: #e0e0e0;
}

.multiselect-dropdown .option input[type="checkbox"] {
  width: unset !important;
}
.select-box {
    border: 1px solid #ddd;
    padding: 8px;
    cursor: pointer;
}

.selected-items {
    margin: 5px 0;
}

.selected-item {
    display: inline-block;
    background: var(--bg-color);
    padding: 2px 8px;
    margin: 2px;
    border-radius: 3px;
}

.selected-item .remove {
    margin-left: 5px;
    cursor: pointer;
    color: #666;
}
.search-box {
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

.search-input {
    width: 100%;
    padding: 5px;
    border: 1px solid #ddd;
}
 
 /* Ads Vast Custom */ 
 #skipbtn{
      float: right;
      height:60px;
      position:relative;
      background-color: #000;
      background-repeat:no-repeat;
      border: none;
      cursor:pointer;
      overflow: hidden;
      outline:none;
      opacity: 0.5;
      color:white;
      z-index: 5;
      margin-top:-100px;
      margin-right:20px;
      font-weight:bold;
      padding-left:5px;
      padding-right:5px;
      font-size:16px;
 }
  #skipbtn:hover {
      opacity: 1;
 }
  #playVideo {
      background: url(https://i0.wp.com/kotakanimeid.com/jc-panel/assets/images/play_white_3.png),linear-gradient(to bottom,transparent,rgba(0,0,0,.4) 77%,rgba(0,0,0,.4) 100%) 100% 100%/100% 400px no-repeat transparent;
      background-repeat:no-repeat;
      width:100%;
      height:100%;
      position:absolute;
      left:0%;
      right:0%;
    top:0%;
    bottom:0%;
      margin:auto;
      background-position: center;
      cursor: pointer;
      display: block;
      z-index: 4;
 }
      /* For mobile phones: */
 @media only screen and (max-width:500px) {
 #skipbtn{top: 25%;}
 #playVideo {height:200px;}
 }
 
 /* END Custom */
 
 :focus {
  outline:0
 }
 a {
  color:var(--font-color);
  moz-transition:color .1s linear;
  transition:color .1s linear;
  webkit-transition:color .1s linear
 }
 a,
 article,
 aside,
 b,
 body,
 canvas,
 div,
 footer,
 form,
 h1,
 h2,
 h3,
 h4,
 header,
 html,
 i,
 iframe,
 img,
 label,
 li,
 p,
 span,
 ul {
  border:0;
  direction:ltr;
  font-size:100%;
  margin:0;
  padding:0;
  vertical-align:baseline
 }
 a,
 article,
 aside,
 b,
 body,
 div,
 footer,
 form,
 h1,
 h2,
 h3,
 header,
 html,
 iframe,
 img,
 label,
 li,
 p,
 small,
 span,
 strong,
 time,
 ul {
  border:0;
  direction:ltr;
  font-size:100%;
  margin:0;
  padding:0;
  vertical-align:baseline
 }
 a:hover {
  color:var(--third-color);
 }
 a:hover .kotakscore {
  background:rgba(85,107,170,.7);
  color:rgba(255,255,255,.9);
  display:block;
  left:0;
  moz-transition:all .4s;
  ms-transform:translateX(81px);
  transform:translateX(81px);
  transition:all .4s;
  webkit-transform:translateX(81px);
  webkit-transition:all .4s
 }
 article,
 aside,
 footer,
 header {
  display:block
 }
 blockquote,
 q {
  border-left:3px solid rgba(13,44,134,.7);
  margin-left:0;
  padding:5px 35px;
  quotes:none
 }
 blockquote:after,
 blockquote:before,
 q:after,
 q:before {
  content:'';
  content:none
 }
 body {
  background:var(--bg-color);
  color:var(--font-color);
  font-size:13px;
  line-height:1.2em;
  margin:0 auto;
  padding:0
 }
 h1 {
  font-size:18px;
  line-height: 1;
  color: var(--hover-color);
 }
 .content h4,
 h1.entry-title.cs {
  font-size:14px;
  font-weight:700;
  margin-bottom:10px;
  padding:10px 0;
  position:relative;
  text-align:center;
  background:var(--primary-color)
 }
 h2,
 h3 {
  font-size:16px
 }
 .recommended-posts h3 {
  background-color: #333;
  color: #fff;
  padding: 0.8em 1em;
  border-radius: 8px;
  display: inline-block;
  text-align: center;
  width: 100%;
}
.recommended-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: 2px;
}
@media (min-width: 768px) {
    .recommended-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-left: 2px;
    }
  }
 h3.hrf-title {
  font-size:18px;
  khtml-user-select:none;
  margin:0;
  moz-user-select:none;
  ms-user-select:none;
  outline-style:none;
  user-select:none;
  webkit-touch-callout:none;
  webkit-user-select:none
 }
 img {
  image-rendering:-webkit-optimize-contrast;
  max-width:100%;
 }
 img[data-lazy-src] {
  opacity:0
 }
 input#show-menu[type="checkbox"] {
  display:none !important;
  webkit-appearance:none
 }
 input[type=checkbox]:checked~#menu-navbar {
  display:block;
  position:relative;
  z-index:9999
 }
 li.mirror-item-text {
  color:red;
  display:block;
  line-height:30px
 }
 p {
  margin:10px 0
 }
 p {
  line-height:1.5
 }
 span.anitime {
  display:none;
  left:0
 }
 span.anitime {
  right:0;
  top:121px;
  width:80%
 }
 span.episodes {
  text-transform:uppercase;
  top:55%;
  z-index:3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 span.types {
  background:linear-gradient(to left,rgba(0,0,0,.6) 15%,rgba(0,0,0,.4) 100%);
  right:0
 }
 span.video {
  border-radius:3px;
  display:block;
  font-size:12px;
  font-weight:700;
  opacity:.8;
  padding:0 8px;
  text-align:center;
  text-transform:uppercase
 }
 table {
  border-collapse:collapse;
  border-spacing:0;
  width:100%
 }
 ul li .bor {
  border-radius:3px;
  float:left;
  padding:1px
 }
 ul li .bor .limit {
  height:39px
 }
 ul li .limit img {
  height:39px;
  width:auto;
  top:unset
 }
 ul li .right {
  font-size:13px;
  height:41px;
  line-height:18px;
  margin-left:48px;
  padding:1px 5px
 }
 ul li .right .latest {
  display:block;
  font-size:13px
 }
 ul li .right .title {
  display:block;
  font-weight:700
 }
 ul li a.popseries {
  color:rgba(13,44,134,.7)
 }
 ul.latestepisodes {
  background:var(--primary-color);
  font-size:13px;
  margin-bottom:10px;
  padding:10px;
  position:relative
 }
 ul.tabs li,
 ul.tabs1 li,
 .viewalleps {
  background:var(--header-color);
  color:var(--font2-color);
  cursor:pointer;
  display:inline-block;
  font-size:12px;
  font-weight:700;
  padding:10px 13px;
  z-index: 3;
  position: relative;
  margin: 0 1px;
 }
 ul.tabs li.current,
 ul.tabs1 li.current1 {
  background:var(--third-color);
  color:var(--font2-color)
 }
 ul.tabs,
 ul.tabs1 {
  border-bottom:2px solid var(--header-color);
  border-top:2px solid var(--header-color);
  margin:0;
  padding:0
 }
 @media only screen and (max-width:1280px) {
  .row {
   width:100%
  }
  .kotakkiri {
   width:40%
  }
  .kotakkanan {
   float:right;
   width:56%
  }
 }
 @media only screen and (min-width:1091px) {
  .serverplayer {
   width: 24% !important;
  }
 }
 @media only screen and (max-width:1090px) {
  #wrap {
   width:100%
  }
  .boxtab,
  .boxtab1 {
   width:50%
  }
  .tab-link.tabchs {
   width:18%
  }
  .adspost520{max-width: 48%;}
 }
 @media only screen and (min-width:981px) and (max-width:1279px) {
  .kotakkanan {
   display:block;
   text-align:-moz-center;
   text-align:-webkit-center
  }
 }
 @media only screen and (max-width:980px) {
  .box_footer { 
      max-width: 90% 
  }
  .boxtab,
  .boxtab1,
  .boxtab2 {
   display:inline-block!important
  }
  .boxtab1 {
   margin:0
  }
  .result {
   padding:10px 0
  }
  .result ul li {
   width:46%
  }
  .wp-pagenavi .current,
  .wp-pagenavi .pages,
  .wp-pagenavi a {
   padding:10px
  }
  #server ul li {
   margin-bottom:10px;
   width:30%
  }
  .animeseries {
   width:24.1%
  }
  ul.tabs,
  ul.tabs1 {
   width:100%
  }
 }
 @media only screen and (max-width:900px) {
  .top .t3 {
   margin-right:80px
  }
 }
 @media only screen and (max-width:927px) {
  .boxtab2 {
   width:100%
  }
  ul.tabs li.tab-link {
   width:13%
  }
  .top .t3 {
   margin-right:60px
  }
  #wrap {
   margin-top:0;
   padding:5px;
   width:auto
  }
  .content {
   padding:unset;
   padding-bottom:10px;
   width:100%
  }
  .result {
   width:96%
  }
  .animeseries {
   width:16%
  }
  #sidebar_right {
   float:left;
   width:100%
  }
  .listinfo {
   width:100%;
   float:unset;
   padding:0;
   margin:25px 0
  }
  .kotakkanan {
   float:none;
   width:100%;
   margin-top:50px
  }
  #sidebar_right .side {
   margin:15px 0
  }
  .bor {
   width:16.5%
  }
  .multiselect-dropdown .option {
   width: 50%;
  }
 }
 @media only screen and (max-width:768px) {
  #main-menu form {
   width:98%
  }
  #main-menu form #s {
   width:89%
  }
  #sidebar_right .latestepisodes li {
   color:var(--font-color);
   line-height:27px;
   overflow:hidden;
   padding:5px 15px
  }
  #wrap,
  .container,
  .container1 {
   width:96%
  }
  .adspost728 {
   overflow:hidden;
   width:96%
  }
  .bor {
   padding:5px;
   width:25%
  }
  .boxtab2 {
   width:100%
  }
  ul.tabs li.tab-link {
   width:24.8%
  }
  .sys {
   float:left
  }
  .infoseries {
   width:100%;
   display:block;
   padding:5px
  }
  #sidebar_right ul.latestepisodes,
  .listinfo #onscroll,
  .listinfo #onscroll1 {
   height:235px;
  }
 .adspostkeeper{
   margin: 35px 0;
 }
 .animeseries {
   width:19.4%
  }
  .adspost520 img {
      height: auto;
  }
 }
 @media only screen and (max-width:720px) {
  .advancedsearch tr {
   margin-left:-50px
  }
  .boxradioceklis {
   width:100%
  }
  .result ul li {
   width:98%
  }
  .animeseries {
   width:24.1%
  }
  .tab-link.tabchs {
  }
  .extra span,
  .data .tagline a {
   width:40%;
   display:inline-block;
   margin:2px;
   text-overflow:ellipsis;
   white-space:nowrap;
   overflow:hidden;
   padding:10px
  }
  div[class*='animeinfoku5-'].mepr, div[class*='animeinfoab-'].mepr, div[class*='animeinfoxy-'].mepr, div[class*='animeinfozy-'].mepr, div[class*='animeinfomu-'].mepr{
   margin: 15px 0;
  }
 }
 @media only screen and (max-width:640px) {
  .latestest {
   width:98%
  }
  .row-cells {
   -moz-column-count:1;
   -webkit-column-count:1;
   column-count:1
  }
  .listinfo {
   position:relative;
   width:99%;
   float:unset;
   margin:25px 0;
   max-width:unset;
   padding:0;
   background:unset
  }
  .spoiler-btn {
   width:70%
  }
 .seriesdesc, .ads300px {
   width:100%;
 }
 .close_banner {
   width: 60%;
 }
 .banner_player{
   margin-top: unset;
 }
 .banner_player img {
   width: 300px;
   max-width: 50%;
   height: auto;
 }
 }
 @media only screen and (max-width:540px) {
  .top .t3 {
   margin-right:20px
  }
 .load_more{
  width:100%;
 }
 }
 @media only screen and (max-width:500px) {
 .advancedsearch button.searchkotak2{margin-top:15px;width:100%}
  #arealinker .listlink a {
   display:block;
   padding:6.7%
  }
  .searchkotak2 {
   top: 0 !important;
   margin-top: 15px !important;
 }
  #footer {
   padding:0;
   width:100%
  }
  #footer .inner {
   line-height:19px;
   margin:0 auto;
   padding:0;
   text-align:center;
   width:100%
  }
  #footer .inner .copyright {
   float:none
  }
  #footer .inner .other {
   float:none
  }
  #header .logo img {
   height:auto;
  }
  #main-menu {
   margin-bottom:0;
   padding:0
  }
  #main-menu .random {
   display:none
  }
  #menu-social-1 li {
   padding:8px
  }
  #sidebar_right {
   float:unset;
   width:100%
  }
  .bor {
   padding:5px;
   width:33%;
  }
  .center,
  .tab-content,
  .tab-content1 {
   width:100%;
  }
  .episodelist ul li .t3 {
   float:right
  }
  .kotakseries .data {
   width:100%
  }
  .rgnav ul {
   display:none;
   margin:unset;
   position:static;
   width:100%
  }
  .rgnav ul li {
   background:var(--header-color);
   float:none;
   position:relative;
   width:100%
  }
  .rgnav ul li a {
   color:var(--font2-color);
   display:block;
   font-size:14px;
   line-height:37px;
   padding:0 15px;
   text-transform:uppercase
  }
  .rgnav ul li ul {
   box-shadow:none;
   display:block;
   padding-left:5px;
   position:relative;
   text-align:left;
   webkit-box-shadow:none
  }
  .rgnav ul li ul li a {
   margin:5px 0px 5px 30px
  }
  .rgnav ul li ul li{
    padding: unset;
  }
 .rgnav ul li:hover ul {
  width: 100%;
  background: unset;
  position: relative;
  top:0;
 }
 .rgnav ul li ul li a:hover{
   color: unset;
 }
  .top .t3 {
   flex:0 0 45%;
   max-width:45%
  }
  .wp-pagenavi .pages {
   float:none;
   margin-bottom:5px
  }
  span.anitime {
   top:25px
  }
  span.episodes:hover {
   display:none
  }
  .boxtab,
  .boxtab1 {
   width:100%
  }
  .misha_loadmore {
   left:32%
  }
  .result {
   width:90%
  }
  ul.tabs li,
  ul.tabs1 li {
  }
  .nav_apb {
   line-height:.75
  }
  .animeseries {
   width:48.90%
  }
  #server ul li {
   margin-bottom:10px;
   width:45%
  }
  .tab-link.tabchs {
   background:var(--primary-color);
   color:var(--font-color);
   margin:5px;
   width:35%;
   float:left
  }
  .show-menu {
   background:rgba(52,77,147,.8);
   display:block;
   width:100%
  }
  .show-menu {
   background:var(--menu-color);
   display:block
  }
  .pagination{margin: 10px auto;}
  .misha_filters {text-align: unset;}
  .misha_number_of_results{width:50%}
  .adspost520{max-width: 100%;margin: 1px;text-align: center;height: auto;}
  .kotak_player_option.on {color: var(--font2-color);background: var(--green-color2);}
  .adspost345 {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 100%;
   max-width: 345px;
  }
  .serverplayer {
   width: 47.8% !important;
   float: left !important;;
  }
  .multiselect-dropdown .option, .multiselect-dropdown {
    width: 100%;
  }
 }
 @media only screen and (max-width:360px) {
  .animeseries {
   width:48.5%
  }
 .load_more{
  width:65%;
 }
 }
 @media only screen and (max-width:359px) {
  #header .logo .linklogo {
   width:100%
  }
  #sidebar_right .latestepisodes li .lefts {
   width:60%
  }
  .bor {
   width:50%
  }
  ul.tabs li.tab-link {
   width:40%
  }
 }
.videos-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-top: 5px;
}
.thumb-block {
    flex: 1 1 370px;
    max-width: 100%;
    padding: 5px;
    box-sizing: border-box;
    margin-bottom: 2%;
    background: #181818;
}
.thumb-block .post-thumbnail {
    line-height: 0;
    position: relative;

    overflow: hidden;
    width: 100%;
    height: 0;
    background-color: #000;
}
.post-thumbnail {
    padding-bottom: 56.25%;
    display: block;
    position: relative;
}
.post-thumbnail-container {
    display: flex
;
    align-items: stretch;
    position: absolute;
    width: 100%;
    height: 100%;
}
.post-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}
.thumb-block .post-thumbnail img {
    width: 100%;
    z-index: 10;
}
.thumb-block .entry-header {
    text-align: center;
    display: block;
    padding: 1.8em 0 0;
    font-size: 1em;
    overflow: visible;
    color: #cccccc;
    height: 55px;
}
.overlay-info {
  pointer-events: none;
  margin-top: 5px;
}
.categories-list .thumb-block .entry-header, .actors-list .thumb-block .entry-header, #filters .filters-options {
    background-color: #ff821c !important;
    text-align: center;
    font-size: 80%;
    color: #fff;
    height: 1.5em;
    height: auto;
    overflow: visible;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .thumb-block a {
        display: block;
    }
}
 @media (min-width: 768px) and (max-width: 991.98px) {
    .thumb-block {
        width: 33.333333%;
        padding: 5px;
        margin-bottom: 3%;
    }
}
#filters .filters-select, #filters .filters-options {
    background-color: #333 !important;
    border: 1px solid #333;
    text-align: center;
    font-size: 75%;
    color: #fff;
    height: 1.5em;
}
#filters .filters-options span, #filters .filters-select:hover {
    display: block;
}
#filters .filters-options span a {
    color: var(--hover-color);
    font-size: 12px;
    padding: 0.75em 1em;
    display: block;
}
#filters .filters-options span a:hover {
    background-color: var(--hover-color);
    color: #333;
}
#filters .filters-select:after {
  color: var(--hover-color);
}
#filters {
    position: absolute;
    right: 0.45em;
    top: 0.65em;
}
#filters .filters-select {
    background-color: #181818 !important;
    position: relative;
    display: inline-block;
    cursor: pointer;
    height: auto;
    padding: 0.25em 1em;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px / 1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.fa-filter:before {
    content: "\f0b0";
}
#filters .filters-options {
    display: none;
    background-color: #222 !important;
    border-top: 8px solid #282828 !important;
    border-color: #282828 !important;
    border-width: 1px;
    position: absolute;
    z-index: 99999;
    right: -9px;
    top: 100%;
    height: auto;
    font-size: inherit;
    box-shadow: none;
}
#filters .filters-options.show {
    display: block !important;
}
#filters .filters-options span {
    width: 160px;
    text-align: right;
}

#filters .filters-select:after {
    content: "\f0d7";
    font-family: fontAwesome;
    margin-left: 0.3em;
}

.pagination ul {
  list-style: none;
  padding: 0;
  display: inline-flex;
  gap: 5px;
}

.pagination li {
  display: inline;
}

.pagination a {
  display: block;
  padding: 8px 14px;
  border-radius: 4px;
  background: #222;
  color: #eee;
  text-decoration: none;
  transition: background 0.2s;
}

.pagination a.inactive:hover {
  background: #444;
}

.pagination a.current {
  background: var(--hover-color);
  color: #fff;
  font-weight: bold;
  cursor: default;
}
.pagination .disabled {
  pointer-events: none;
  color: #777;
  cursor: not-allowed;
  display: block;
  padding: 8px 14px;
  border-radius: 4px;
  background: #222;
  text-decoration: none;
  transition: background 0.2s;
}
.download-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background-color: var(--hover-color);
    color: #fff;
    padding: 0.8em 1em;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    margin-bottom: 1em;
    transition: 0.3s;
    width: 100%;
    justify-content: center;
    font-size: 15px;
}

.download-btn:hover {
    background-color: #FFF;
}

.recommended-posts h3 {
    background-color: #333;
    color: #fff;
    padding: 0.8em 1em;
    border-radius: 8px;
    margin-bottom: 1em;
    display: inline-block;
}
div#video-content {
  background: #333;
  border-radius: 5px;
}
.w3-col, .w3-half, .w3-third, .w3-twothird, .w3-threequarter, .w3-quarter {
  float: left;
  width: 100%;
}
.w3-left-align {
  text-align: left!important;
}
.w3-center {
  text-align: center !important;
}
.w3-right-align {
  text-align: right !important;
}
.views-count {
  padding-right: 8px;
}
.like-count {
  padding-right: 4px;
}
.views-like {
  font-size: 0.8em;
  color: #ccc;
}
.w3-col.s4 {
  width: 33.33333%;
}
.w3-col.s6 {
  width: 49.99999%;
}
.w3-padding {
  padding: 10px 16px!important;
}
.likes-button {
  margin-top: 5px;
  margin-right: 6px;
}
.fa.fa-thumbs-up.likes-button {
  margin-right: 0 !important;
}
.w3-col.likes-count.w3-right-align.s4.m4.l4 {
  font-size: 11.5px;
  transform: translateY(-4px);
}
.w3-col.views-count.w3-left-align.s4.m4.l4 {
  letter-spacing: 0.3em;
}
.label {
  background: var(--hover-color);
  color: #000;
  padding: 5px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.video-tags {
  padding: 10px;
  background-color: #000;
}
.tags-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.video-tags a {
  margin: 0 10px 10px 0;
  display: inline-block;
}
.video-tags a i {
  font-size: 13px;
  margin-right: 1px;
}
div#wrap {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   justify-content: flex-start;
   margin: 0 auto;
   padding: 0;
}
@media (min-width: 768px) {
  div#wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
  }
}
/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}
.site-header {
  background: #000;
  border-bottom: 1px solid #000000;
  display: flex;
  justify-content: center;
}
.site-branding,
.site-content {
	padding: 1em;
	overflow: hidden;
}

.site-branding {
	display: flex;
	align-items: center;
	height: 3.750em;
	max-height: 3.750em;
	overflow: visible;
}

/*.site-branding .logo,
.site-branding .header-search,
.site-branding .main-navigation {
	align-self: center;
	width: 100%;
}*/

.site-branding .logo {
	order: 1;
	line-height: 0;
}

.site-branding .logo i {
	margin-right: 0;
}

.site-branding .header-search {
	order: 2;
	flex: 1 auto;
	margin: 0 1em;
}

.site-branding .header-search form {
	position: relative;
}

.site-branding .header-search input {
	float: left;
	height: 40px;
	line-height: 40px;
	width: 100%;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

.site-branding .header-search input::-webkit-input-placeholder,
.site-branding .header-search input::-moz-placeholder {
	opacity: 0.5;
}
input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
    background-color: #fff;
    border: 1px solid #e5e5e5;
    color: #646C79;
    padding: 0.4em 0.8em;
}
input {
    color: #404040;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.5px;
}
.fa-input {
    font-family: FontAwesome, 'Montserrat', sans-serif;
}
.site-branding .header-search input#searchsubmit {
    width: 45px;
    background: none;
    border: none;
    line-height: inherit;
    position: absolute;
    right: 0;
    font-size: 1.4em;
    color: #646C79;
}
.site-branding .header-search input#searchsubmit {
	width: 45px;
	background: none;
	border: none;
	line-height: inherit;
	position: absolute;
	right: 0;
	font-size: 1.4em;
	color: #646C79;
}
.site-branding .main-navigation {
	order: 3;
	text-align: right;
}
.site-branding .logo a {
	display: inline-block;
	color: #FF9900;
	outline: none;
}
.site-branding .logo img {
    max-width: 270px;
    max-height: 50px;
    margin-top: -7px;
    margin-left: 0px;
    margin-bottom: 10px;
}

/* Navigation */
#site-navigation,
#site-navigation ul,
#site-navigation ul li,
#site-navigation ul li a,
#site-navigation #head-mobile {
	border:0;
	list-style:none;
	line-height:1;
	display:block;
	position:relative;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

#site-navigation:after,
#site-navigation > ul:after {
	content:".";
	display:block;
	clear:both;
	visibility:hidden;
	line-height:0;
	height:0;
}

#site-navigation #head-mobile,
#site-navigation .button-nav {
	display:none;
}
#site-navigation {
    clear: both;
    display: block;
    float: left;
}
#site-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    z-index: 9999;
}
#site-navigation > ul > li {
	float:left;
}
#site-navigation > ul > li > a {
	display: block;
	padding: 21px 18px;
	color: var(--hover-color);
	font-weight: bold;
	outline: 0;
}
#site-navigation ul li.my-area a {
	padding-right: 0;
}
#site-navigation > ul > li:hover,
#site-navigation ul li.current-menu-item:hover,
#site-navigation ul li.current-menu-item,
#site-navigation ul li.has-sub.current-menu-item:hover {
	-webkit-transition:background .3s ease;
	-ms-transition:background .3s ease;
	transition:background .3s ease;
}
#site-navigation > ul > li.has-sub > a:after {
	content: "\f078";
	font-size: 0.75em;
	position: relative;
	top: -2px;
	font-family: fontAwesome;
	padding-left: 0.8em;
}
#site-navigation ul ul {
	position:absolute;
	left:-9999px;
	background: #000000;
	border-left: 1px solid #e5e5e5;
	border-right: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
	padding-left: 0;
	padding-bottom: 10px;
}
#site-navigation ul ul li {
	-webkit-transition:all .25s ease;
	-ms-transition:all .25s ease;
	transition:all .25s ease;
}

#site-navigation ul ul li a:before {
	content: "";
}

#site-navigation li:hover > ul {
	left:auto;
}

#site-navigation ul ul ul {
	margin-left: 100%;
	top: 0;
}
#site-navigation ul ul li a {
	padding: 11px 25px;
	width: 170px;
	color: #646C79;
	text-decoration: none;
	font-weight: 400;
	text-align: left;
}

#site-navigation ul li.my-area ul li a {

}

#site-navigation ul ul li:last-child > a,
#site-navigation ul ul li.last-item > a {
	border-bottom: 0;
}

#site-navigation ul ul li.has-sub > a:after {
	content: "\f0da";
	font-family: fontAwesome;
	position: absolute;
	right: 11px;
}

#site-navigation ul ul ul li.current-menu-item a {
	border-left: 1px solid #eee;
}
#site-navigation > ul > li.has-sub > ul > li.current-menu-item > a,
#site-navigation > ul ul > li.has-sub > ul > li.current-menu-item> a {
	border-top: 1px solid #eee;
}
#site-navigation ul {list-style: none;margin: 0;padding-left: 0;z-index: 9999;}
#site-navigation > ul > li {
float:left;
}

/* Smartphones */
@media (max-width: 48em) {
	.site-branding {
		height: auto;
		max-height: inherit;
		display: block;
		position: relative;
	}

.site-branding .logo, .site-branding .header-search {
		margin: 0.3em 0;
	}
#site-navigation {
  position: absolute;
  top: 20px;
  right: 0;
  float: none;
  }
}

.server-buttons {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin-top: 3em;
    padding: 10px;
}

.server-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background-color: var(--hover-color); /* default */
    color: #fff;                           /* default */
    padding: 0.8em 1em;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    width: 48%;
    justify-content: center;
    font-size: 15px;
    transition: 0.3s;
}

/* tombol aktif */
.server-btn.active {
    background-color: #333;
    color: #ff64db;
}

/* tombol aktif tetap sama saat hover */
.server-btn.active:hover {
    background-color: #333;
    color: #ff64db;
}

.iframe {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

#iframe-server2 {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 ratio */
    background: #000;
    overflow: hidden;
}

#iframe-server2 video,
#iframe-server2 iframe,
#iframe-server2 #video-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* jaga aspect ratio video */
}

#ad-video {
    display: none; /* awal hidden */
}

#bunny-player {
    display: none; /* awal hidden */
}

#video-thumbnail {
    display: block; /* thumbnail tampil dulu */
}

#ad-cta {
    display: none; /* hidden awal */
    position: absolute;
    bottom: 6%;
    left: 17%;
    transform: translateX(-50%);
    z-index: 10;
    padding: 0.3em 0.5em;
    background-color: #ff00c3;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
}

#custom-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ff00c3;
    border: none;
    color: white;
    fill: white;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    padding: 0;
}

#custom-play .circle:hover {
    background: rgba(0,0,0,0.7);
}

#custom-play .triangle {
    width: 0;
    height: 0;
    border-left: 25px solid #fff;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    margin-left: 5px;
}


@media (max-width: 64em){
	#site-navigation {
		width:100%;
	}
	#site-navigation ul {
		background: #000000;
		width:100%;
		padding-left: 0;
		display:none;
		top: 59px;
	}
	#site-navigation ul li {
		width: 100%;
		border-bottom: 1px solid #000000;
	}
	#site-navigation ul li:hover{
		background:#000000;
	}
	#site-navigation ul ul {
		border: none;
	}
	#site-navigation ul ul li {
		border-bottom: none;
	}
	#site-navigation ul ul li,
	#site-navigation li:hover > ul > li{
		height:auto;
	}
	#site-navigation ul li a,
	#site-navigation ul ul li a{
		width:100%;
		border-bottom:0;
		text-align: left;
	}
	#site-navigation > ul > li{
		float:none;
	}
	#site-navigation ul ul li a{
		padding-left:25px;
	}
	#site-navigation ul ul li{
		background:#000000!important;
	}
	#site-navigation ul ul li:hover{
		background:#000000!important;
	}
	#site-navigation ul ul ul li a{
		padding-left:35px
	}
	#site-navigation ul ul li a{
		color:#646C79;
		background:none
	}
	#site-navigation ul ul,
	#site-navigation ul ul ul{
		position:relative;
		left:0;
		width:100%;
		margin:0;
		text-align:left;
		top: 0;
	}
	#site-navigation > ul > li.has-sub > a:after,
	#site-navigation > ul > li.has-sub > a:before,
	#site-navigation ul ul > li.has-sub > a:after,
	#site-navigation ul ul > li.has-sub > a:before{
		display:none
	}
	#site-navigation #head-mobile {
		display:block;
		padding:0;
		color:#ffffff;
		font-size:12px;
		font-weight:700
	}
  #site-navigation .button-nav{
		display: block;
		background-color: inherit;
		border: none;
		position: absolute;
		right: 13px;
		top: 0;
		cursor: pointer;
		height: 50px;
		line-height: 50px;
		width: 48px;
	}
  	#site-navigation .button-nav:after{
		position:absolute;
		top:23px;
		right:14px;
		display:block;
		height:9px;
		width:20px;
		border-top:2px solid #ffffff;
		border-bottom:2px solid #ffffff;
		content:''}
	#site-navigation .button-nav:after{
		position:absolute;
		top:23px;
		right:14px;
		display:block;
		height:9px;
		width:20px;
		border-top:2px solid var(--hover-color);
		border-bottom:2px solid var(--hover-color);
		content:''}
	#site-navigation .button-nav:before{
		-webkit-transition:all .3s ease;
		-ms-transition:all .3s ease;
		transition:all .3s ease;
		position:absolute;
		top:16px;
		right:14px;
		display:block;
		height:2px;
		width:20px;
		background: var(--hover-color);
		content:''
	}
	#site-navigation .button-nav.menu-opened:after{
		-webkit-transition:all .3s ease;
		-ms-transition:all .3s ease;
		transition:all .3s ease;
		top:23px;
		border:0;
		height:2px;
		width:19px;
		background:#ffffff;
		-webkit-transform:rotate(45deg);
		-moz-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		-o-transform:rotate(45deg);
		transform:rotate(45deg)
	}
	#site-navigation .button-nav.menu-opened:before{
		top:23px;
		background:#646C79;
		width:19px;
		-webkit-transform:rotate(-45deg);
		-moz-transform:rotate(-45deg);
		-ms-transform:rotate(-45deg);
		-o-transform:rotate(-45deg);
		transform:rotate(-45deg)
	}
	#site-navigation .submenu-button{
		position:absolute;
		z-index:99;
		right:0;
		top:0;
		display:block;
		border-left:1px solid #ffffff;
		height:57px;
		width:48px;
		cursor:pointer
	}
	#site-navigation .submenu-button.submenu-opened{
		background:#eee
	}
	#site-navigation ul ul .submenu-button{
		height:34px;
		width:34px
	}
	#site-navigation .submenu-button:after{
		position:absolute;
		top:28px;
		right:19px;
		width:8px;
		height:2px;
		display:block;
		background:#ffffff;
		content:''
	}
	#site-navigation ul ul .submenu-button:after{
		top:15px;
		right:13px
	}
	#site-navigation .submenu-button.submenu-opened:after{
		background:#000000
	}
	#site-navigation .submenu-button:before{
		position:absolute;
		top:25px;
		right:22px;
		display:block;
		width:2px;
		height:8px;
		background:#ffffff;
		content:''
	}
	#site-navigation ul ul .submenu-button:before{
		top:12px;
		right:16px
	}
	#site-navigation .submenu-button.submenu-opened:before{
		display:none
	}
	#site-navigation ul ul ul li.active a{
		border-left:none
	}
	#site-navigation > ul > li.has-sub > ul > li.active > a,
	#site-navigation > ul ul > li.has-sub > ul > li.active > a{
		border-top:none
	}
}
/* Mobile */
#menu-main-menu {
  display: none;
}

/* Desktop */
@media (min-width: 992px) {
  #menu-main-menu {
    display: block;
  }
}