/* ============================================================
 * YLnime V2 — Shared widget styles (notif bell, resume, autonext)
 * Semua warna mengikuti tema Netflix-dark yang sudah ada.
 * ============================================================ */

/* ---------- Video Pre-roll (skip-ad) ---------- */
.yl-preroll { position: absolute; inset: 0; z-index: 60; background: #000; overflow: hidden; }
.yl-preroll-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.yl-preroll-tag { position: absolute; top: 12px; left: 12px; z-index: 3;
  background: rgba(0,0,0,0.7); color: #ffd400; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 1px; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; }
.yl-preroll-unmute { position: absolute; top: 10px; right: 12px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(0,0,0,0.6); color: #fff; font-size: 0.85rem; }
.yl-preroll-unmute:hover { background: rgba(0,0,0,0.85); }
.yl-preroll-visit { position: absolute; bottom: 14px; left: 14px; z-index: 3;
  background: rgba(255,255,255,0.92); color: #111; font-weight: 600; font-size: 0.8rem;
  padding: 8px 14px; border-radius: 6px; text-decoration: none; box-shadow: 0 3px 10px rgba(0,0,0,0.4); }
.yl-preroll-visit:hover { background: #fff; color: #000; }
.yl-preroll-skip { position: absolute; bottom: 14px; right: 14px; z-index: 3;
  font-size: 0.82rem; font-weight: 600; padding: 9px 16px; border-radius: 6px; }
.yl-preroll-skip.counting { background: rgba(0,0,0,0.65); color: #ccc; cursor: default; }
.yl-preroll-skip.ready { background: #fff; color: #111; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,0.4); }
.yl-preroll-skip.ready:hover { background: #E50914; color: #fff; }
@media (max-width: 576px) {
  .yl-preroll-visit { font-size: 0.72rem; padding: 6px 10px; bottom: 10px; left: 10px; }
  .yl-preroll-skip { font-size: 0.74rem; padding: 7px 11px; bottom: 10px; right: 10px; }
}

/* ---------- Rating stars (gaya Shopee) ---------- */
.yl-avg-stars { color: #f5a623; font-size: 1.25rem; letter-spacing: 3px; line-height: 1; }
.yl-avg-stars .far { color: #4a4a4a; }
.yl-rate-input .fa-star.text-secondary { color: #4a4a4a !important; }
.yl-rate-login .yl-rate-login-stars { transition: color 0.2s; letter-spacing: 3px; }
.yl-rate-login:hover .yl-rate-login-stars,
.yl-rate-login:hover .fa-star { color: #f5a623 !important; }

/* ---------- Notification Bell ---------- */
.ylnime-notif-wrap { position: relative; display: inline-flex; margin-right: 6px; }
.ylnime-notif-btn {
  background: rgba(255,255,255,0.06); border: 1px solid #333; color: #e5e5e5;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; position: relative; transition: 0.25s;
}
.ylnime-notif-btn:hover { background: #E50914; border-color: #E50914; color: #fff; }
.ylnime-notif-btn.has-notif i { animation: ylBell 1.6s ease-in-out infinite; transform-origin: top center; }
@keyframes ylBell { 0%,50%,100%{transform:rotate(0)} 10%,30%{transform:rotate(12deg)} 20%,40%{transform:rotate(-12deg)} }
.ylnime-notif-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  background: #E50914; color: #fff; border: 2px solid #141414; border-radius: 10px;
  font-size: 0.66rem; font-weight: 700; display: none; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.ylnime-notif-panel {
  position: absolute; top: 52px; right: 0; width: 340px; max-width: 92vw;
  background: #181818; border: 1px solid #333; border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.7); overflow: hidden; z-index: 3000;
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: 0.22s ease;
}
.ylnime-notif-panel.open { opacity: 1; visibility: visible; transform: translateY(0); }
.ylnime-notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid #2b2b2b; font-weight: 600; font-size: 0.9rem; color: #fff;
}
.ylnime-notif-head .ylnime-notif-all { font-size: 0.75rem; color: #E50914; font-weight: 600; }
.ylnime-notif-list { max-height: 380px; overflow-y: auto; }
.ylnime-notif-list::-webkit-scrollbar { width: 6px; }
.ylnime-notif-list::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }
.ylnime-notif-item {
  display: flex; gap: 10px; padding: 11px 16px; border-bottom: 1px solid #232323;
  text-decoration: none; transition: background 0.15s;
}
.ylnime-notif-item:hover { background: #222; }
.ylnime-notif-item.unread { background: rgba(229,9,20,0.09); }
.ylnime-notif-item.unread:hover { background: rgba(229,9,20,0.16); }
.ylnime-notif-item.personal { border-left: 3px solid #E50914; }
.yni-tag { display: inline-block; margin-left: 6px; font-size: 0.6rem; font-weight: 700; color: #fff;
  background: #E50914; padding: 1px 6px; border-radius: 10px; vertical-align: middle; }
.ylnime-notif-item img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid #333; }
.yni-body { min-width: 0; flex: 1; }
.yni-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.yni-name { font-weight: 600; font-size: 0.82rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yni-time { font-size: 0.68rem; color: #888; flex-shrink: 0; }
.yni-text { font-size: 0.8rem; color: #b3b3b3; margin-top: 2px; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ylnime-notif-empty { text-align: center; color: #777; padding: 32px 16px; font-size: 0.85rem; }
.ylnime-notif-foot { padding: 10px 16px; border-top: 1px solid #2b2b2b; text-align: center; }
.yni-cta { color: #fff; background: #E50914; display: block; padding: 9px; border-radius: 8px;
  font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: 0.2s; }
.yni-cta:hover { background: #b20710; color: #fff; }

/* ---------- Resume Card ---------- */
.ylnime-resume-card {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 40; width: max-content; max-width: 94%;
  background: rgba(20,20,20,0.96); border: 1px solid #E50914; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7); animation: ylFade 0.3s ease; backdrop-filter: blur(6px);
}
@keyframes ylFade { from{opacity:0;transform:translate(-50%,-8px)} to{opacity:1;transform:translate(-50%,0)} }
.ylnime-resume-card .yr-inner { display: flex; align-items: center; gap: 14px; padding: 10px 14px; flex-wrap: wrap; justify-content: center; }
.ylnime-resume-card .yr-text { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 0.85rem; }
.ylnime-resume-card .yr-text i { color: #E50914; }
.ylnime-resume-card .yr-text b { color: #ffcf33; }
.ylnime-resume-card .yr-btns { display: flex; gap: 8px; }
.ylnime-resume-card .yr-resume { background: #E50914; color: #fff; border: none; padding: 7px 16px; border-radius: 7px; font-weight: 600; font-size: 0.82rem; cursor: pointer; }
.ylnime-resume-card .yr-resume:hover { background: #b20710; }
.ylnime-resume-card .yr-restart { background: transparent; color: #ccc; border: 1px solid #555; padding: 7px 14px; border-radius: 7px; font-size: 0.82rem; cursor: pointer; }
.ylnime-resume-card .yr-restart:hover { border-color: #999; color: #fff; }

/* ---------- Seek flash (gesture) ---------- */
.yl-seek-flash {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 35;
  background: rgba(0,0,0,0.6); color: #fff; padding: 12px 16px; border-radius: 50px;
  font-weight: 700; font-size: 0.95rem; animation: ylSeek 0.65s ease; pointer-events: none;
}
.yl-seek-left { left: 12%; } .yl-seek-right { right: 12%; }
@keyframes ylSeek { 0%{opacity:0;transform:translateY(-50%) scale(0.7)} 30%{opacity:1;transform:translateY(-50%) scale(1)} 100%{opacity:0;transform:translateY(-50%) scale(1)} }

/* ---------- Autoplay next ---------- */
.ylnime-autonext {
  position: absolute; bottom: 20px; right: 20px; z-index: 45;
  background: rgba(20,20,20,0.96); border: 1px solid #333; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7); animation: ylFade2 0.3s ease; backdrop-filter: blur(6px);
}
@keyframes ylFade2 { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.ylnime-autonext .yan-inner { padding: 14px 18px; }
.ylnime-autonext .yan-title { color: #fff; font-weight: 600; font-size: 0.9rem; margin-bottom: 2px; }
.ylnime-autonext .yan-count { color: #a3a3a3; font-size: 0.78rem; margin-bottom: 10px; }
.ylnime-autonext .yan-count b { color: #E50914; }
.ylnime-autonext .yan-btns { display: flex; gap: 8px; }
.ylnime-autonext .yan-go { background: #E50914; color: #fff; padding: 7px 14px; border-radius: 7px; font-size: 0.8rem; font-weight: 600; text-decoration: none; }
.ylnime-autonext .yan-go:hover { background: #b20710; color: #fff; }
.ylnime-autonext .yan-cancel { background: transparent; color: #ccc; border: 1px solid #555; padding: 7px 12px; border-radius: 7px; font-size: 0.8rem; cursor: pointer; }

/* ---------- Continue Watching row ---------- */
#ylnime-continue-watching { display: none; margin-bottom: 2.5rem; }
#ylnime-continue-watching .ylc-scroll { scrollbar-width: thin; }
#ylnime-continue-watching .ylc-card .card-img-wrapper { border-radius: 8px; overflow: hidden; }
#ylnime-continue-watching .ylc-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255,255,255,0.25); }
#ylnime-continue-watching .ylc-bar span { display: block; height: 100%; background: #E50914; }
#ylnime-continue-watching .ylc-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35); color: #fff; font-size: 1.6rem; opacity: 0; transition: 0.25s;
}
#ylnime-continue-watching .ylc-card:hover .ylc-play { opacity: 1; }

/* PWA install banner */
.ylnime-pwa-banner {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 4000; background: #1f1f1f; border: 1px solid #333; border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,0.7); padding: 12px 14px; display: flex; align-items: center; gap: 12px;
  max-width: 92vw; animation: ylFade2 0.35s ease;
}
.ylnime-pwa-banner .ylp-txt { font-size: 0.82rem; color: #eee; }
.ylnime-pwa-banner .ylp-txt b { color: #fff; }
.ylnime-pwa-banner button { border: none; border-radius: 7px; padding: 7px 14px; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.ylnime-pwa-banner .ylp-install { background: #E50914; color: #fff; }
.ylnime-pwa-banner .ylp-close { background: transparent; color: #999; }

@media (max-width: 576px) {
  /* Panel dipin ke viewport agar tidak terpotong di layar kecil */
  .ylnime-notif-panel {
    position: fixed; top: 62px; right: 8px; left: 8px;
    width: auto; max-width: none;
  }
  .ylnime-notif-list { max-height: 60vh; }
  .ylnime-resume-card .yr-inner { padding: 9px 11px; gap: 9px; }
  .ylnime-resume-card .yr-text { font-size: 0.78rem; }
}