/* === DESIGN TOKENS === */
:root {
  --c-bg:#080810;--c-card:#10101c;--c-raised:#181828;--c-overlay:#1e1e32;
  --c-border:rgba(255,255,255,.06);--c-border-md:rgba(255,255,255,.1);
  --c-accent:#6c63ff;--c-accent-2:#ff6584;
  --c-accent-dim:rgba(108,99,255,.12);--c-accent-glow:rgba(108,99,255,.35);
  --c-green:#4ade80;--c-yellow:#fbbf24;--c-red:#f87171;--c-blue:#60a5fa;
  --c-text:#eeeef5;--c-text-2:#b8b8d0;--c-muted:#7878a0;--c-faint:#3a3a58;
  --g-accent:linear-gradient(135deg,#6c63ff 0%,#ff6584 100%);
  --g-accent-v:linear-gradient(180deg,#6c63ff 0%,#ff6584 100%);
  --g-card:linear-gradient(180deg,transparent 30%,rgba(8,8,16,.95) 70%,#080810 100%);
  --g-hero:linear-gradient(90deg,rgba(8,8,16,.98) 28%,rgba(8,8,16,.7) 55%,rgba(8,8,16,.15) 100%);
  --g-hero-b:linear-gradient(0deg,#080810 0%,rgba(8,8,16,.6) 30%,transparent 60%);
  --g-dark:linear-gradient(180deg,rgba(8,8,16,0) 0%,rgba(8,8,16,.98) 100%);
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--s12:48px;--s16:64px;
  --r-xs:4px;--r-sm:6px;--r-md:10px;--r-lg:16px;--r-xl:24px;--r-2xl:32px;
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  --t-xs:.72rem;--t-sm:.8125rem;--t-base:.9375rem;--t-md:1rem;
  --t-lg:1.125rem;--t-xl:1.25rem;--t-2xl:1.5rem;--t-3xl:1.875rem;--t-4xl:2.5rem;
  --t-5xl:clamp(2rem,5vw,3.5rem);
  --tr:.18s ease;--tr-fast:.12s ease;--tr-slow:.38s ease;
  --tr-spring:.3s cubic-bezier(.34,1.56,.64,1);
  --header-h:64px;--sidebar-w:300px;--max-w:1440px;
  --content-px:clamp(16px,3.5vw,48px);
}

/* === RESET === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{
  background:var(--c-bg);color:var(--c-text);font-family:var(--font-body);
  font-size:var(--t-base);line-height:1.6;min-height:100vh;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.018'/%3E%3C/svg%3E");
}
img,video,svg,canvas,iframe{display:block;max-width:100%}
img{height:auto}
ul,ol{list-style:none}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;outline:none;cursor:pointer}
input[type='text'],input[type='search']{cursor:text}
textarea{resize:vertical;cursor:text}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:var(--r-xs)}
:focus:not(:focus-visible){outline:none}

/* === SCROLLBAR === */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--c-raised);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:var(--c-faint)}
*{scrollbar-width:thin;scrollbar-color:var(--c-raised) transparent}

/* === TYPOGRAPHY === */
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:700;line-height:1.15;letter-spacing:-.02em}
h1{font-size:clamp(1.75rem,4vw,2.8rem);font-weight:800}
h2{font-size:clamp(1.25rem,2.5vw,1.75rem)}
h3{font-size:clamp(1rem,2vw,1.35rem)}
h4{font-size:var(--t-lg)}
p{color:var(--c-text-2);line-height:1.72}
.text-gradient{background:var(--g-accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* === LAYOUT === */
.container{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 var(--content-px)}
.pt-header{padding-top:var(--header-h)}
#app{padding-top:var(--header-h)}
/* Hero dan series-banner tetap bleed di belakang header transparan */
.hero{margin-top:calc(-1 * var(--header-h))}
.series-banner{margin-top:calc(-1 * var(--header-h))}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* === HEADER === */
#hdr{
  position:fixed;top:0;left:0;right:0;height:var(--header-h);z-index:900;
  background:linear-gradient(180deg,rgba(8,8,16,.95) 0%,rgba(8,8,16,.7) 100%);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;
  transition:background var(--tr-slow),border-color var(--tr-slow);
}
#hdr.scrolled{background:rgba(8,8,16,.97);border-bottom-color:var(--c-border);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.hdr-inner{display:flex;align-items:center;justify-content:space-between;height:100%;padding:0 var(--content-px);gap:var(--s4)}
.logo{font-family:var(--font-display);font-size:1.4rem;font-weight:800;letter-spacing:-.04em;background:var(--g-accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;flex-shrink:0;transition:opacity var(--tr);user-select:none}
.logo:hover{opacity:.85}
.logo .logo-dim{-webkit-text-fill-color:var(--c-text-2);opacity:.55;font-weight:300}
.hdr-nav{display:flex;align-items:center;gap:var(--s1);flex:1;justify-content:center}
.hdr-nav__link{display:flex;align-items:center;gap:var(--s1);font-family:var(--font-display);font-size:var(--t-sm);font-weight:500;color:var(--c-muted);padding:var(--s2) var(--s3);border-radius:var(--r-sm);transition:color var(--tr),background var(--tr);letter-spacing:.01em;white-space:nowrap;position:relative}
.hdr-nav__link:hover{color:var(--c-text);background:var(--c-raised)}
.hdr-nav__link.is-active{color:var(--c-text)}
.hdr-nav__link.is-active::after{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:16px;height:2px;background:var(--g-accent);border-radius:1px}
.nav-arrow{width:12px;height:12px;transition:transform var(--tr);opacity:.6}
.hdr-nav__link:hover .nav-arrow{transform:rotate(180deg)}
/* Dropdown */
.nav-dropdown-wrap{position:relative}
.nav-dropdown-wrap .hdr-nav__link{cursor:default}
.nav-dropdown{position:absolute;top:calc(100% + 8px);right:0;min-width:180px;background:var(--c-card);border:1px solid var(--c-border-md);border-radius:var(--r-md);padding:var(--s2);box-shadow:0 16px 48px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity var(--tr),transform var(--tr),visibility var(--tr);z-index:910}
.nav-dropdown-wrap:hover .nav-dropdown,.nav-dropdown-wrap:focus-within .nav-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.nav-dropdown__link{display:flex;align-items:center;gap:var(--s2);font-family:var(--font-display);font-size:var(--t-sm);font-weight:500;color:var(--c-muted);padding:var(--s2) var(--s3);border-radius:var(--r-sm);transition:color var(--tr),background var(--tr);white-space:nowrap}
.nav-dropdown__link:hover{color:var(--c-text);background:var(--c-raised)}
.nav-dropdown__link svg{width:13px;height:13px;opacity:.5;flex-shrink:0}
.hdr-right{display:flex;align-items:center;gap:var(--s2);flex-shrink:0}
.btn-search-trigger{display:flex;align-items:center;gap:var(--s2);background:var(--c-raised);border:1px solid var(--c-border);color:var(--c-muted);padding:var(--s2) var(--s3);border-radius:var(--r-md);font-family:var(--font-display);font-size:var(--t-sm);transition:border-color var(--tr),color var(--tr),background var(--tr);min-width:190px;cursor:pointer}
.btn-search-trigger:hover{border-color:rgba(108,99,255,.4);color:var(--c-text);background:var(--c-overlay)}
.search-icon{width:14px;height:14px;flex-shrink:0}
.search-placeholder{flex:1;text-align:left}
.search-kbd{display:flex;align-items:center;gap:2px;margin-left:auto}
.search-kbd kbd{font-family:var(--font-display);font-size:.6rem;background:var(--c-card);border:1px solid var(--c-border-md);border-radius:3px;padding:1px 5px;color:var(--c-faint);letter-spacing:.04em}
.btn-icon{display:flex;align-items:center;justify-content:center;width:38px;height:38px;background:var(--c-raised);border:1px solid var(--c-border);border-radius:var(--r-md);color:var(--c-muted);transition:var(--tr);flex-shrink:0;position:relative}
.btn-icon:hover{border-color:rgba(108,99,255,.35);color:var(--c-text);background:var(--c-overlay)}
.btn-icon svg{width:16px;height:16px;pointer-events:none}
.notif-dot{position:absolute;top:7px;right:7px;width:7px;height:7px;background:var(--c-accent-2);border:1.5px solid var(--c-bg);border-radius:50%}
.hdr-avatar{width:36px;height:36px;border-radius:50%;background:var(--g-accent);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--t-sm);font-weight:700;cursor:pointer;flex-shrink:0;box-shadow:0 0 0 2px var(--c-bg),0 0 0 4px rgba(108,99,255,.3);transition:box-shadow var(--tr);user-select:none}
.hdr-avatar:hover{box-shadow:0 0 0 2px var(--c-bg),0 0 0 4px rgba(108,99,255,.6)}
.btn-menu{display:none;align-items:center;justify-content:center;width:38px;height:38px;background:var(--c-raised);border:1px solid var(--c-border);border-radius:var(--r-md);cursor:pointer;flex-direction:column;gap:5px;transition:var(--tr);flex-shrink:0}
.btn-menu__line{display:block;width:18px;height:2px;background:var(--c-text-2);border-radius:1px;transition:transform var(--tr),opacity var(--tr),width var(--tr);transform-origin:center}
.btn-menu[aria-expanded='true'] .btn-menu__line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.btn-menu[aria-expanded='true'] .btn-menu__line:nth-child(2){opacity:0;width:0}
.btn-menu[aria-expanded='true'] .btn-menu__line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none;position:fixed;top:var(--header-h);left:0;right:0;bottom:0;background:rgba(8,8,16,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:850;padding:var(--s8) var(--content-px);flex-direction:column;gap:var(--s2);overflow-y:auto;transform:translateY(-8px);opacity:0;transition:opacity var(--tr-slow),transform var(--tr-slow)}
.mobile-nav.is-open{display:flex;transform:translateY(0);opacity:1}
.mobile-nav__link{display:flex;align-items:center;gap:var(--s3);font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;color:var(--c-text-2);padding:var(--s3) var(--s4);border-radius:var(--r-md);border:1px solid transparent;transition:var(--tr);letter-spacing:-.01em}
.mobile-nav__link:hover,.mobile-nav__link.is-active{background:var(--c-raised);border-color:var(--c-border);color:var(--c-text)}
.mobile-nav__link.is-active{color:var(--c-accent)}
.mobile-nav__sep{height:1px;background:var(--c-border);margin:var(--s2) 0}

/* === SEARCH OVERLAY === */
.search-overlay{position:fixed;inset:0;z-index:950;background:rgba(8,8,16,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:flex-start;justify-content:center;padding-top:15vh;opacity:0;pointer-events:none;transition:opacity var(--tr-slow)}
.search-overlay.is-open{opacity:1;pointer-events:all}
.search-modal{width:100%;max-width:640px;margin:0 var(--content-px);transform:translateY(-16px);transition:transform var(--tr-slow)}
.search-overlay.is-open .search-modal{transform:translateY(0)}
.search-modal__input-wrap{position:relative;background:var(--c-card);border:1px solid var(--c-border-md);border-radius:var(--r-xl);display:flex;align-items:center;padding:var(--s3) var(--s4);gap:var(--s3);box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 0 1px rgba(108,99,255,.1);transition:box-shadow var(--tr),border-color var(--tr)}
.search-modal__input-wrap:focus-within{border-color:rgba(108,99,255,.4);box-shadow:0 24px 80px rgba(0,0,0,.6),0 0 0 1px rgba(108,99,255,.2),0 0 40px rgba(108,99,255,.08)}
.search-modal__icon{width:20px;height:20px;color:var(--c-muted);flex-shrink:0}
.search-modal__input{flex:1;background:none;color:var(--c-text);font-family:var(--font-display);font-size:var(--t-xl);font-weight:500;letter-spacing:-.01em;min-width:0}
.search-modal__input::placeholder{color:var(--c-muted)}
.search-modal__close{font-family:var(--font-display);font-size:var(--t-xs);color:var(--c-muted);background:var(--c-raised);border:1px solid var(--c-border);padding:var(--s1) var(--s2);border-radius:var(--r-xs);letter-spacing:.04em;flex-shrink:0;white-space:nowrap}
.search-close-mobile{display:none}
.search-close-esc{display:inline}
.search-modal__tips{margin-top:var(--s3);padding:var(--s2) var(--s4);display:flex;gap:var(--s4);align-items:center}
.search-tip{font-size:var(--t-xs);color:var(--c-muted);display:flex;align-items:center;gap:var(--s1);font-family:var(--font-display)}
.search-tip kbd{font-family:var(--font-display);font-size:.58rem;background:var(--c-raised);border:1px solid var(--c-border-md);border-radius:3px;padding:2px 5px;letter-spacing:.04em}
/* Typeahead dropdown */
.search-dropdown{margin-top:var(--s2);background:var(--c-card);border:1px solid var(--c-border-md);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.6);display:none}
.search-dropdown.is-open{display:block}
.search-dd-item{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3);cursor:pointer;transition:background var(--tr);text-decoration:none;color:inherit}
.search-dd-item:hover,.search-dd-item.is-focused{background:var(--c-raised)}
.search-dd-thumb{width:38px;height:54px;border-radius:var(--r-sm);overflow:hidden;flex-shrink:0;background:var(--c-raised)}
.search-dd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.search-dd-info{flex:1;min-width:0}
.search-dd-title{font-family:var(--font-display);font-size:var(--t-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.search-dd-meta{font-size:.7rem;color:var(--c-muted);display:flex;gap:var(--s1);align-items:center}
.search-dd-meta .dot{width:2px;height:2px;background:var(--c-faint);border-radius:50%;flex-shrink:0}
.search-dd-divider{height:1px;background:var(--c-border);margin:0}
.search-dd-all{display:flex;align-items:center;justify-content:space-between;padding:var(--s3) var(--s4);font-family:var(--font-display);font-size:var(--t-sm);font-weight:600;color:var(--c-accent);cursor:pointer;transition:background var(--tr);text-decoration:none}
.search-dd-all:hover{background:var(--c-raised)}
.search-dd-all svg{width:14px;height:14px;flex-shrink:0}
/* Skeleton items */
.search-dd-skel{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s3)}
.search-dd-skel-thumb{width:38px;height:54px;border-radius:var(--r-sm);flex-shrink:0}
.search-dd-skel-line{height:11px;border-radius:var(--r-xs);margin-bottom:var(--s1)}
.search-dd-skel-line--sm{height:9px;width:55%}
@media(max-width:768px){
  .search-overlay{padding-top:0;align-items:flex-start}
  .search-modal{margin:0;max-width:100%;background:var(--c-card);border-bottom:1px solid var(--c-border);border-radius:0}
  .search-modal__input-wrap{border-radius:0;border:none;border-bottom:1px solid var(--c-border-md);box-shadow:none;padding:var(--s4) var(--s4);background:transparent}
  .search-modal__input-wrap:focus-within{box-shadow:none;border-color:var(--c-accent)}
  .search-modal__input{font-size:var(--t-lg)}
  .search-modal__close{padding:var(--s2) var(--s3);font-size:.7rem}
  .search-close-esc{display:none}
  .search-close-mobile{display:inline}
  .search-modal__tips{display:none}
  /* Mobile: dropdown inline, no border-radius, menyatu dengan modal */
  .search-dropdown{margin-top:0;border-radius:0;border-left:none;border-right:none;border-top:1px solid var(--c-border);box-shadow:none;max-height:55vh;overflow-y:auto}
  .search-dd-item,.search-dd-skel{padding:var(--s2) var(--s4)}
  .search-dd-all{padding:var(--s3) var(--s4)}
}

/* === FOOTER (compact) === */
#ftr{border-top:1px solid var(--c-border);margin-top:var(--s16)}
.ftr-main{display:flex;align-items:center;justify-content:space-between;gap:var(--s6);padding:var(--s6) var(--content-px);flex-wrap:wrap}
.ftr-left{display:flex;flex-direction:column;gap:var(--s2);max-width:480px}
.ftr-brand-row{display:flex;align-items:center;gap:var(--s3)}
.ftr-brand-row .logo{font-size:1.1rem}
.ftr-copy{font-size:var(--t-xs);color:var(--c-faint)}
.ftr-desc{font-size:var(--t-xs);color:var(--c-muted);line-height:1.6}
.ftr-social{display:flex;gap:var(--s2)}
.social-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--c-raised);border:1px solid var(--c-border);border-radius:var(--r-md);color:var(--c-muted);transition:var(--tr)}
.social-btn:hover{border-color:rgba(108,99,255,.4);color:var(--c-accent);background:var(--c-accent-dim)}
.social-btn svg{width:15px;height:15px;fill:currentColor}
.ftr-disc-wrap{border-top:1px solid var(--c-border);padding:var(--s3) var(--content-px)}
.ftr-disc{font-size:.6rem;color:rgba(120,120,160,.3);line-height:1.5;text-align:center;font-style:italic;letter-spacing:.01em}
@media(max-width:768px){
  .ftr-main{flex-direction:column;align-items:flex-start;gap:var(--s4);padding:var(--s5) var(--content-px)}
  .ftr-desc{font-size:.68rem}
}

/* === SKELETONS === */
@keyframes shimmer{0%{background-position:-700px 0}100%{background-position:700px 0}}
.skel{background:linear-gradient(90deg,var(--c-raised) 25%,var(--c-overlay) 37%,var(--c-raised) 63%);background-size:700px 100%;animation:shimmer 1.4s ease infinite;border-radius:var(--r-sm)}
.skel-card{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden}
.skel-poster{aspect-ratio:2/3;width:100%}
.skel-line{height:12px;margin:var(--s2) var(--s3)}
.skel-line--sm{height:9px;width:60%}
.skel-line--lg{height:15px;margin-top:var(--s3)}
.skel-thumb-wide{aspect-ratio:16/9;width:100%}
.skel-strip-card{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-lg);display:flex;gap:var(--s3);align-items:center;padding:var(--s3)}
.skel-strip-thumb{width:44px;height:60px;flex-shrink:0;border-radius:var(--r-sm)}

/* === KEYFRAMES + ANIM UTILS === */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes eq-bars{from{transform:scaleY(.4)}to{transform:scaleY(1)}}
.anim-fade-in{animation:fadeIn .3s ease both}
.anim-slide-up{animation:slideUp .35s ease both}
.anim-d1{animation-delay:.05s}.anim-d2{animation-delay:.1s}.anim-d3{animation-delay:.15s}
.anim-d4{animation-delay:.2s}.anim-d5{animation-delay:.25s}.anim-d6{animation-delay:.3s}
.dot-live{display:inline-block;width:7px;height:7px;background:var(--c-green);border-radius:50%;animation:pulse 2s ease-in-out infinite}
.spinner{width:20px;height:20px;border:2px solid var(--c-border-md);border-top-color:var(--c-accent);border-radius:50%;animation:spin .7s linear infinite}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}

/* === BUTTONS (shared) === */
.btn-primary{display:inline-flex;align-items:center;gap:var(--s2);background:var(--g-accent);color:#fff;padding:11px 24px;border-radius:var(--r-md);font-family:var(--font-display);font-size:var(--t-sm);font-weight:700;transition:var(--tr);letter-spacing:.02em;box-shadow:0 8px 32px var(--c-accent-glow);cursor:pointer;border:none}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(108,99,255,.5)}
.btn-primary svg{width:16px;height:16px;flex-shrink:0}
.btn-secondary{display:inline-flex;align-items:center;gap:var(--s2);background:rgba(255,255,255,.07);color:var(--c-text);padding:11px 20px;border-radius:var(--r-md);font-family:var(--font-display);font-size:var(--t-sm);font-weight:600;border:1px solid var(--c-border);transition:var(--tr);cursor:pointer}
.btn-secondary:hover{background:rgba(255,255,255,.12)}
.btn-outline{display:inline-flex;align-items:center;gap:var(--s2);background:transparent;color:var(--c-text);padding:9px 18px;border-radius:var(--r-md);font-family:var(--font-display);font-size:var(--t-sm);font-weight:600;border:1px solid var(--c-border);transition:var(--tr);cursor:pointer}
.btn-outline:hover{border-color:var(--c-accent);color:var(--c-accent)}

/* === BADGES === */
.badge{font-size:.62rem;font-weight:700;font-family:var(--font-display);padding:2px 7px;border-radius:var(--r-xs);letter-spacing:.04em;display:inline-block}
.badge-ongoing{background:var(--c-green);color:#052e16}
.badge-completed{background:var(--c-raised);color:var(--c-muted);border:1px solid var(--c-border)}
.badge-new{background:var(--c-accent);color:#fff}
.badge-ep{background:rgba(8,8,16,.85);color:var(--c-text);border:1px solid var(--c-border)}
.badge-movie{background:rgba(96,165,250,.15);color:var(--c-blue);border:1px solid rgba(96,165,250,.25)}
.badge-score{background:rgba(251,191,36,.15);color:var(--c-yellow);font-size:.7rem;padding:2px 7px;display:inline-flex;align-items:center;gap:3px;border-radius:var(--r-xs);font-family:var(--font-display);font-weight:700}

/* === SECTION LAYOUT === */
.section{padding:var(--s10) var(--content-px) 0}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s5)}
.section-title{font-family:var(--font-display);font-size:var(--t-xl);font-weight:700;display:flex;align-items:center;gap:var(--s3);letter-spacing:-.02em}
.section-title::before{content:'';width:3px;height:20px;background:var(--g-accent);border-radius:2px;flex-shrink:0}
.section-link{font-size:var(--t-sm);color:var(--c-muted);font-family:var(--font-display);font-weight:500;display:flex;align-items:center;gap:var(--s1);transition:color var(--tr)}
.section-link:hover{color:var(--c-accent)}

/* === HERO === */
.hero{position:relative;height:100vh;min-height:600px;max-height:820px;display:flex;align-items:flex-end;padding-bottom:80px;overflow:hidden}
.hero-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.hero-gradient{position:absolute;inset:0;background:var(--g-hero)}
.hero-vignette{position:absolute;inset:0;background:var(--g-hero-b)}
.hero-content{position:relative;z-index:2;padding:0 var(--content-px);max-width:600px}
.hero-badge{display:inline-flex;align-items:center;gap:var(--s2);background:rgba(108,99,255,.18);border:1px solid rgba(108,99,255,.35);color:#b0aaff;padding:4px 14px;border-radius:50px;font-size:.72rem;font-family:var(--font-display);font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:var(--s4)}
.hero-title{font-family:var(--font-display);font-size:var(--t-5xl);font-weight:800;line-height:1.08;letter-spacing:-.03em;margin-bottom:var(--s3)}
.hero-title em{font-style:normal;background:var(--g-accent);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-meta{display:flex;gap:var(--s3);align-items:center;margin-bottom:var(--s4);flex-wrap:wrap}
.hero-meta span{font-size:.78rem;color:var(--c-muted);font-family:var(--font-display);display:flex;align-items:center;gap:var(--s1)}
.hero-meta .sep{width:3px;height:3px;background:var(--c-faint);border-radius:50%}
.hero-synopsis{font-size:.92rem;line-height:1.7;color:rgba(238,238,245,.68);margin-bottom:var(--s6);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-actions{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap}
.hero-indicators{position:absolute;bottom:24px;left:0;right:0;display:flex;flex-direction:row;justify-content:center;gap:7px;z-index:2}
.hi-item{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);border:none;padding:0;cursor:pointer;transition:background var(--tr),transform var(--tr),width var(--tr);flex-shrink:0}
.hi-item.is-active{background:#fff;width:24px;border-radius:4px}

/* === ONGOING STRIP === */
.ongoing-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--s4)}
.oc-card{background:var(--c-card);border-radius:var(--r-lg);border:1px solid var(--c-border);overflow:hidden;display:flex;gap:var(--s3);align-items:center;padding:var(--s3);transition:var(--tr);cursor:pointer}
.oc-card:hover{border-color:rgba(108,99,255,.35);transform:translateY(-2px)}
.oc-poster{width:44px;height:62px;border-radius:var(--r-sm);background:var(--c-raised);overflow:hidden;flex-shrink:0}
.oc-poster img{width:100%;height:100%;object-fit:cover}
.oc-info{min-width:0;flex:1}
.oc-title{font-size:.78rem;font-weight:600;font-family:var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.oc-ep{font-size:.7rem;color:var(--c-accent);font-weight:600}
.oc-new{font-size:.6rem;background:var(--c-accent);color:#fff;padding:1px 6px;border-radius:3px;font-weight:700;font-family:var(--font-display);letter-spacing:.03em;display:inline-block;margin-top:3px}

/* === GENRE NAV === */
.genre-nav-wrap{padding:var(--s10) var(--content-px) 0}
.genre-nav-inner{position:relative}
.genre-nav-inner::before,.genre-nav-inner::after{content:'';position:absolute;top:0;bottom:var(--s1);width:40px;z-index:1;pointer-events:none}
.genre-nav-inner::before{left:0;background:linear-gradient(to right,var(--c-bg) 30%,transparent)}
.genre-nav-inner::after{right:0;background:linear-gradient(to left,var(--c-bg) 30%,transparent)}
.genre-nav{display:flex;gap:var(--s2);overflow-x:auto;padding:0 36px var(--s1);scrollbar-width:none;scroll-behavior:smooth}
.genre-nav::-webkit-scrollbar{display:none}
.genre-nav-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:28px;height:28px;border-radius:50%;background:var(--c-card);border:1px solid var(--c-border-md);color:var(--c-text-2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--tr);box-shadow:0 2px 8px rgba(0,0,0,.4);padding:0}
.genre-nav-btn:hover{background:var(--c-raised);color:var(--c-text)}
.genre-nav-btn svg{width:13px;height:13px;flex-shrink:0}
.genre-nav-btn--prev{left:0}
.genre-nav-btn--next{right:0}
@media(max-width:768px){.genre-nav-btn{display:none}.genre-nav{padding:0 0 var(--s1)}}
.genre-tag{flex-shrink:0;background:var(--c-card);border:1px solid var(--c-border);color:var(--c-muted);padding:7px 18px;border-radius:50px;font-size:var(--t-sm);font-family:var(--font-display);font-weight:600;cursor:pointer;transition:var(--tr);letter-spacing:.02em;white-space:nowrap}
.genre-tag:hover,.genre-tag.is-active{background:var(--c-accent-dim);border-color:rgba(108,99,255,.45);color:var(--c-accent)}

/* === ANIME CARD GRID === */
.anime-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:var(--s5)}
.anime-card{cursor:pointer;transition:var(--tr)}
.anime-card:hover .card-poster{transform:scale(1.04)}
.anime-card:hover .card-overlay{opacity:1}
.poster-wrap{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:2/3;background:var(--c-raised);margin-bottom:var(--s3)}
.card-poster{width:100%;height:100%;object-fit:cover;transition:.35s ease}
.card-overlay{position:absolute;inset:0;background:rgba(8,8,16,.72);display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--tr)}
.play-circle{width:52px;height:52px;background:var(--g-accent);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 28px var(--c-accent-glow)}
.play-circle svg{width:20px;height:20px;fill:#fff;margin-left:3px}
.card-badges{position:absolute;top:var(--s2);left:var(--s2);display:flex;flex-direction:column;gap:3px}
.card-score-badge{position:absolute;bottom:var(--s2);right:var(--s2)}
.card-title{font-size:.82rem;font-weight:600;font-family:var(--font-display);line-height:1.3;margin-bottom:var(--s1);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-meta{font-size:.7rem;color:var(--c-muted);display:flex;gap:var(--s2);align-items:center}
.card-meta .dot{width:2px;height:2px;background:var(--c-faint);border-radius:50%}

/* === HOME TWO-COL === */
.home-grid{display:grid;grid-template-columns:1fr var(--sidebar-w);gap:var(--s8);padding:var(--s8) var(--content-px) 80px;align-items:start}
.home-sidebar{position:sticky;top:calc(var(--header-h) + var(--s4))}

/* === SIDEBAR WIDGET === */
.widget-box{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-xl);padding:var(--s5);margin-bottom:var(--s5)}
.widget-title{font-family:var(--font-display);font-size:var(--t-xs);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c-muted);margin-bottom:var(--s4);display:flex;align-items:center;gap:var(--s2)}
.widget-title svg{width:13px;height:13px;flex-shrink:0}

/* Popular widget */
.popular-list{display:flex;flex-direction:column;gap:var(--s2)}
.popular-item{display:flex;gap:var(--s3);align-items:center;padding:var(--s2) var(--s3);border-radius:var(--r-md);cursor:pointer;transition:var(--tr);border:1px solid transparent}
.popular-item:hover{background:var(--c-raised);border-color:var(--c-border)}
.pop-rank{font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:var(--c-faint);min-width:24px;text-align:center;flex-shrink:0}
.pop-rank.top{color:var(--c-accent)}
.pop-thumb{width:40px;height:56px;border-radius:var(--r-sm);background:var(--c-raised);overflow:hidden;flex-shrink:0}
.pop-thumb img{width:100%;height:100%;object-fit:cover}
.pop-info{flex:1;min-width:0}
.pop-title{font-size:.82rem;font-weight:600;font-family:var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.pop-tags{display:flex;gap:3px;flex-wrap:wrap}
.pop-tag{font-size:.62rem;background:var(--c-raised);color:var(--c-muted);padding:1px 6px;border-radius:3px;font-family:var(--font-display)}
.pop-score{font-family:var(--font-display);font-size:.88rem;font-weight:700;color:var(--c-yellow);flex-shrink:0}

/* Schedule widget */
.schedule-list{display:flex;flex-direction:column}
.sched-item{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0;border-bottom:1px solid var(--c-border)}
.sched-item:last-child{border:none}
.sched-day{width:32px;height:32px;background:var(--c-raised);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:.6rem;font-family:var(--font-display);font-weight:700;flex-shrink:0;text-transform:uppercase;letter-spacing:.04em;color:var(--c-muted)}
.sched-day.today{background:var(--c-accent-dim);color:var(--c-accent);border:1px solid rgba(108,99,255,.3)}
.sched-info{flex:1;min-width:0}
.sched-title{font-size:.78rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sched-ep{font-size:.67rem;color:var(--c-muted)}
.sched-time{font-size:.7rem;color:var(--c-muted);font-family:var(--font-display);flex-shrink:0}

/* === SERIES PAGE === */
.series-banner{position:relative;height:420px;overflow:hidden;margin-top:0}
.series-banner__img{width:100%;height:100%;object-fit:cover;object-position:top;filter:brightness(.35)}
.series-banner__grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,16,.6) 0%,transparent 30%,var(--c-bg) 100%)}
.series-main{position:relative;z-index:2;margin-top:-200px;padding:0 var(--content-px) 80px;display:grid;grid-template-columns:200px 1fr 280px;gap:var(--s8);align-items:start}
.series-poster-col{position:sticky;top:calc(var(--header-h) + var(--s4))}
.series-poster{width:100%;aspect-ratio:2/3;border-radius:var(--r-xl);overflow:hidden;border:2px solid var(--c-border);box-shadow:0 24px 64px rgba(0,0,0,.7)}
.series-poster img{width:100%;height:100%;object-fit:cover}
.series-poster-actions{margin-top:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.series-info-col{}
/* Genre pills */
.series-genres{display:flex;gap:var(--s2);flex-wrap:wrap;margin-bottom:var(--s3);align-items:center}
.genre-pill{font-size:.7rem;font-family:var(--font-display);font-weight:600;padding:3px 12px;border-radius:50px;background:var(--c-accent-dim);color:var(--c-accent);border:1px solid rgba(108,99,255,.3);transition:var(--tr)}
.genre-pill:hover{background:rgba(108,99,255,.2)}
/* Tag pills — genre dinamis (non-hardcoded) */
.tag-pill{font-size:.68rem;font-family:var(--font-display);font-weight:600;padding:2px 10px;border-radius:50px;background:var(--c-raised);color:var(--c-muted);border:1px solid var(--c-border);transition:var(--tr)}
.tag-pill::before{content:'#';opacity:.5;margin-right:1px}
.tag-pill:hover{border-color:var(--c-border-md);color:var(--c-text-2)}
/* Stats — score besar kiri, 3 item kanan */
.series-stats{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);margin-bottom:var(--s5);align-items:stretch}
.stat-score{background:var(--c-card);border:1px solid rgba(251,191,36,.2);border-radius:var(--r-lg);padding:var(--s4) var(--s5);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:88px}
.stat-score__val{font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--c-yellow);line-height:1;display:flex;align-items:center;gap:4px}
.stat-score__val svg{width:16px;height:16px;flex-shrink:0}
.stat-score__lbl{font-size:.62rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:.08em;font-family:var(--font-display)}
.stat-score__sub{font-size:.65rem;color:rgba(251,191,36,.5);font-family:var(--font-display)}
.stat-grid{display:grid;grid-template-columns:1fr;gap:var(--s2)}
.stat-row{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);padding:var(--s2) var(--s3);display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.stat-row__lbl{font-size:.65rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:.07em;font-family:var(--font-display);flex-shrink:0}
.stat-row__val{font-family:var(--font-display);font-size:.88rem;font-weight:700;text-align:right}
.stat-row__val--green{color:var(--c-green)}
.stat-row__val--yellow{color:var(--c-yellow)}
.series-title{font-family:var(--font-display);font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin-bottom:var(--s2)}
.series-title-alt{font-size:var(--t-sm);color:var(--c-muted);margin-bottom:var(--s5)}
/* Tonton button — lebih subtle, tidak full gradient */
.btn-tonton{display:flex;align-items:center;justify-content:center;gap:var(--s2);background:var(--c-accent);color:#fff;padding:10px 20px;border-radius:var(--r-md);font-family:var(--font-display);font-size:var(--t-sm);font-weight:700;transition:var(--tr);letter-spacing:.02em;cursor:pointer;border:none;box-shadow:0 4px 16px rgba(108,99,255,.3);width:100%}
.btn-tonton:hover{background:#7b74ff;box-shadow:0 6px 20px rgba(108,99,255,.45);transform:translateY(-1px)}
.btn-tonton svg{width:14px;height:14px;flex-shrink:0}
.series-synopsis-lbl{font-family:var(--font-display);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--c-muted);margin-bottom:var(--s2)}
.series-synopsis-text{font-size:.9rem;line-height:1.75;color:var(--c-text-2);margin-bottom:var(--s2)}
.synopsis-toggle{font-size:.78rem;color:var(--c-accent);font-family:var(--font-display);font-weight:600;cursor:pointer;background:none;border:none;padding:0}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2);margin-top:var(--s5)}
.info-item{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);padding:var(--s2) var(--s3)}
.info-lbl{font-size:.63rem;color:var(--c-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px;font-family:var(--font-display)}
.info-val{font-size:.83rem;font-weight:600}
.info-val--green{color:var(--c-green)}

/* Sidebar info table (upgraded) */
.info-table{display:flex;flex-direction:column;gap:0}
.info-row{display:flex;align-items:baseline;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--c-border)}
.info-row:last-child{border:none}
.info-row__lbl{font-size:.68rem;color:var(--c-muted);font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;gap:6px;flex-shrink:0}
.info-row__lbl svg{width:12px;height:12px;opacity:.5;flex-shrink:0}
.info-row__val{font-size:.8rem;font-weight:600;color:var(--c-text);text-align:right;max-width:60%;overflow-wrap:break-word;hyphens:none}
.info-row--block{align-items:flex-start;flex-direction:column;gap:4px;padding:10px 0}
.info-row--block .info-row__val{text-align:left;max-width:100%;font-size:.78rem;font-weight:500;color:var(--c-text-2);line-height:1.5}
.info-row--chips{flex-direction:column;align-items:flex-start;gap:8px;padding:10px 0}
.info-chips{display:flex;flex-wrap:wrap;gap:5px}
.info-chip{font-size:.7rem;font-weight:600;font-family:var(--font-display);background:var(--c-raised);border:1px solid var(--c-border);color:var(--c-text-2);padding:3px 9px;border-radius:50px;letter-spacing:.01em}
.info-row__val--green{color:var(--c-green)}
.info-row__val--yellow{color:var(--c-yellow)}
.info-row__val--accent{color:var(--c-accent)}
.info-row__val--score{color:var(--c-yellow);font-size:.9rem;font-weight:800;display:inline-flex;align-items:center;gap:3px}

/* Trailer button */
.trailer-btn{display:flex;align-items:center;gap:var(--s2);width:100%;justify-content:center;background:rgba(255,0,0,.08);border:1px solid rgba(255,0,0,.2);color:#ff4444;padding:9px 16px;border-radius:var(--r-md);font-family:var(--font-display);font-size:var(--t-sm);font-weight:600;cursor:pointer;transition:var(--tr);margin-top:var(--s3)}
.trailer-btn:hover{background:rgba(255,0,0,.15);border-color:rgba(255,0,0,.35)}
.trailer-btn svg{width:16px;height:16px;flex-shrink:0}

/* Mobile info details (collapsible, shown when sidebar hidden) */
.mobile-info-toggle{display:none;align-items:center;gap:var(--s2);background:var(--c-card);border:1px solid var(--c-border);color:var(--c-text-2);padding:10px 16px;border-radius:var(--r-md);font-family:var(--font-display);font-size:var(--t-sm);font-weight:600;cursor:pointer;transition:var(--tr);width:100%;margin-top:var(--s4)}
.mobile-info-toggle:hover{border-color:rgba(108,99,255,.3)}
.mobile-info-toggle svg{width:14px;height:14px;transition:transform var(--tr)}
.mobile-info-toggle.is-open svg{transform:rotate(180deg)}
.mobile-info-panel{display:none;margin-top:var(--s3);overflow:hidden;max-width:100%}
.mobile-info-panel.is-open{display:block}
@media(max-width:1024px){
  .mobile-info-toggle{display:flex}
}
.series-sidebar-col{}

/* === EPISODE SECTION === */
.ep-section{margin-top:var(--s8)}
.ep-sec-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4)}
.ep-sec-title{font-family:var(--font-display);font-size:var(--t-md);font-weight:700;display:flex;align-items:center;gap:var(--s3)}
.ep-sec-title::before{content:'';width:3px;height:16px;background:var(--g-accent);border-radius:2px;flex-shrink:0}
.ep-view-btns{display:flex;gap:var(--s2)}
.ep-view-btn{background:var(--c-card);border:1px solid var(--c-border);color:var(--c-muted);width:30px;height:30px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;transition:var(--tr);cursor:pointer}
.ep-view-btn.is-active,.ep-view-btn:hover{border-color:var(--c-accent);color:var(--c-accent)}
.season-tabs{display:flex;gap:var(--s2);margin-bottom:var(--s4);flex-wrap:wrap}
.season-tab{background:var(--c-card);border:1px solid var(--c-border);color:var(--c-muted);padding:5px 16px;border-radius:var(--r-sm);font-size:.78rem;font-family:var(--font-display);font-weight:600;cursor:pointer;transition:var(--tr)}
.season-tab.is-active{background:var(--c-accent-dim);border-color:rgba(108,99,255,.45);color:var(--c-accent)}
.ep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:var(--s3)}
.ep-card{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);overflow:hidden;cursor:pointer;transition:var(--tr)}
.ep-card:hover{border-color:rgba(108,99,255,.4);transform:translateY(-2px)}
.ep-card.is-watched{opacity:.5}
.ep-thumb{position:relative;aspect-ratio:16/9;background:var(--c-raised);overflow:hidden}
.ep-thumb img{width:100%;height:100%;object-fit:cover;transition:.3s}
.ep-card:hover .ep-thumb img{transform:scale(1.06)}
.ep-num-badge{position:absolute;bottom:var(--s1);left:var(--s2);background:rgba(8,8,16,.85);font-family:var(--font-display);font-size:.62rem;font-weight:700;padding:2px 6px;border-radius:3px}
.ep-new-dot{position:absolute;top:var(--s2);right:var(--s2);background:var(--c-accent-2);width:8px;height:8px;border-radius:50%;border:1.5px solid var(--c-card)}
.ep-card-body{padding:var(--s2) var(--s3)}
.ep-card-title{font-size:.75rem;font-weight:600;font-family:var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.ep-card-date{font-size:.65rem;color:var(--c-muted)}
.ep-list-view{display:flex;flex-direction:column;gap:var(--s2)}
.ep-list-item{display:flex;gap:var(--s3);align-items:center;padding:var(--s2) var(--s3);background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);cursor:pointer;transition:var(--tr)}
.ep-list-item:hover{border-color:rgba(108,99,255,.35)}
.ep-list-thumb{width:90px;height:52px;border-radius:var(--r-sm);overflow:hidden;background:var(--c-raised);flex-shrink:0}
.ep-list-thumb img{width:100%;height:100%;object-fit:cover}
.ep-list-info{flex:1;min-width:0}
.ep-list-num{font-size:.65rem;color:var(--c-muted);font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.ep-list-title{font-size:.82rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep-list-date{font-size:.65rem;color:var(--c-muted);margin-top:2px}

/* === PLAYER PAGE === */
.player-page{max-width:900px;margin:0 auto;padding:0 var(--content-px) 80px}
/* ─ player-unit: overflow:visible agar panel Artplayer tidak terclip ke atas ─ */
.player-unit{border-radius:var(--r-xl);overflow:visible;border:1px solid var(--c-border);box-shadow:0 16px 64px rgba(0,0,0,.8);margin-bottom:var(--s3)}
/* ─ player-box: overflow:visible — TIDAK boleh hidden.
   overflow:hidden di sini buat stacking context baru yang blokir z-index volume panel
   dan clips icon di sudut bawah. Clipping dan border-radius ditangani di .art-video-player.
   z-index:0 (bukan auto) → buat stacking context tanpa overflow:hidden, sehingga
   z-index internal Artplayer (.art-bottom dll) terkurung di dalam .player-box dan
   TIDAK bocor menutup .player-action-bar di bawahnya. ─ */
.player-box{position:relative;z-index:0;width:100%;background:#000;border:none;box-shadow:none;margin-bottom:0;overflow:visible}
.player-box--video{aspect-ratio:16/9}
.player-box--iframe{aspect-ratio:16/9}
.player-box iframe{position:absolute;inset:0;width:100%;height:100%;border:none;border-radius:var(--r-xl) var(--r-xl) 0 0}
.artplayer-app{width:100%;height:100%}
.player-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--s3);background:radial-gradient(ellipse at center,#1c1c35 0%,#080810 70%);position:absolute;inset:0}
/* Action bar — lives inside .player-unit, flush below player-box.
   position:relative + z-index:1 memastikan action bar paint di atas .player-box (z-index:0),
   mencegah Artplayer .art-bottom bocor menutup elemen ini. */
.player-action-bar{display:flex;align-items:flex-end;gap:0;padding:var(--s2) var(--s4) var(--s3);background:var(--c-card);border-top:1px solid var(--c-border);position:relative;z-index:1}
/* Vertical | separator — only rendered when nav buttons exist */
.player-ab-sep{width:1px;background:var(--c-border);align-self:stretch;flex-shrink:0;margin:2px var(--s3) 0}
/* Server column */
.player-server-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.player-server-lbl{font-family:var(--font-display);font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--c-faint);user-select:none}
.player-server-tabs{display:flex;gap:var(--s2);overflow-x:auto;scrollbar-width:none}
.player-server-tabs::-webkit-scrollbar{display:none}
.player-server-tab{display:flex;align-items:center;gap:var(--s1);background:var(--c-raised);border:1px solid var(--c-border);color:var(--c-muted);padding:6px 14px;border-radius:var(--r-md);font-size:.75rem;font-family:var(--font-display);font-weight:600;cursor:pointer;transition:var(--tr);white-space:nowrap;flex-shrink:0}
.player-server-tab.is-active{background:var(--c-accent-dim);border-color:rgba(108,99,255,.45);color:var(--c-accent)}
.player-server-tab .stag{font-size:.58rem;background:var(--c-raised);color:var(--c-muted);padding:1px 5px;border-radius:3px;font-weight:700;letter-spacing:.04em}
.player-server-tab.is-active .stag{background:rgba(108,99,255,.2);color:var(--c-accent)}
/* AV1 unsupported warning banner — persistent, sits between player-box dan action-bar */
.av1-warn{display:flex;align-items:flex-start;gap:8px;padding:8px 16px;background:rgba(255,180,0,.07);border-top:1px solid rgba(255,180,0,.18);font-size:.72rem;color:#c9a000;font-family:var(--font-display);line-height:1.5}
.av1-warn svg{flex-shrink:0;margin-top:1px;opacity:.85}
.av1-warn b{color:#f0c000;font-weight:700}
/* Pulse highlight untuk server tab alternatif yang disarankan */
@keyframes av1-suggest-pulse{0%,100%{border-color:rgba(240,192,0,.3);box-shadow:none}50%{border-color:rgba(240,192,0,.8);box-shadow:0 0 0 3px rgba(240,192,0,.15)}}
.player-server-tab.av1-suggest{border-color:rgba(240,192,0,.5);color:#f0c000;animation:av1-suggest-pulse 1.8s ease-in-out 3}
/* Nav column */
.player-nav{display:flex;flex-direction:column;gap:4px;flex-shrink:0;align-self:flex-end}
.player-nav-lbl{font-family:var(--font-display);font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--c-faint);user-select:none;text-align:right}
.player-nav-row{display:flex;gap:var(--s2)}
.player-nav-btn{display:inline-flex;align-items:center;gap:5px;background:var(--c-raised);border:1px solid var(--c-border);color:var(--c-muted);padding:6px 12px;border-radius:var(--r-md);font-family:var(--font-display);font-size:.75rem;font-weight:600;cursor:pointer;transition:var(--tr);white-space:nowrap;text-decoration:none}
.player-nav-btn:hover{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.player-nav-btn svg{width:13px;height:13px;flex-shrink:0}
/* Series info strip */
.player-info-strip{display:flex;align-items:flex-start;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-lg);margin-bottom:var(--s3)}
.pis-cover{width:40px;height:56px;border-radius:var(--r-sm);overflow:hidden;flex-shrink:0;background:var(--c-raised);margin-top:2px}
.pis-cover img{width:100%;height:100%;object-fit:cover}
.pis-body{flex:1;min-width:0;overflow:hidden}
.pis-title{font-family:var(--font-display);font-size:.88rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.pis-meta{font-size:.7rem;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pis-meta .dot{width:2px;height:2px;background:var(--c-faint);border-radius:50%;display:inline-block;vertical-align:middle;margin:0 3px}
.pis-season-nav{display:flex;align-items:center;gap:4px;margin-top:5px}
.pis-season-btn{display:inline-flex;align-items:center;gap:3px;background:var(--c-raised);border:1px solid var(--c-border);color:var(--c-muted);padding:2px 8px;border-radius:50px;font-family:var(--font-display);font-size:.62rem;font-weight:600;cursor:pointer;transition:var(--tr);text-decoration:none}
.pis-season-btn:hover{border-color:rgba(108,99,255,.3);color:var(--c-text-2)}
.pis-season-btn svg{width:10px;height:10px;flex-shrink:0}
.pis-season-cur{font-family:var(--font-display);font-size:.68rem;font-weight:600;color:var(--c-text-2);padding:0 4px}
/* Actions — vertical stack, no fixed width, buttons nowrap */
.pis-actions{display:flex;flex-direction:column;align-items:stretch;gap:4px;flex-shrink:0}
.pis-detail-btn{display:flex;align-items:center;justify-content:center;gap:4px;background:var(--c-raised);border:1px solid var(--c-border);color:var(--c-muted);padding:5px 10px;border-radius:var(--r-md);font-family:var(--font-display);font-size:.68rem;font-weight:600;cursor:pointer;transition:var(--tr);text-decoration:none;white-space:nowrap}
.pis-detail-btn:hover{border-color:rgba(108,99,255,.4);color:var(--c-accent);background:var(--c-accent-dim)}
.pis-detail-btn svg{width:11px;height:11px;flex-shrink:0}
.dl-drop-wrap{position:relative}
.dl-drop-btn{display:flex;align-items:center;justify-content:center;gap:4px;background:var(--c-accent-dim);border:1px solid rgba(108,99,255,.3);color:var(--c-accent);padding:5px 10px;border-radius:var(--r-md);font-family:var(--font-display);font-size:.68rem;font-weight:600;cursor:pointer;transition:var(--tr);white-space:nowrap;width:100%}
.dl-drop-btn:hover{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.dl-drop-btn svg{width:11px;height:11px;flex-shrink:0}
.dl-drop-btn .arr{transition:transform var(--tr)}
.dl-drop-btn.is-open .arr{transform:rotate(180deg)}
.dl-drop-panel{position:absolute;top:calc(100% + 6px);right:0;background:var(--c-card);border:1px solid var(--c-border-md);border-radius:var(--r-md);padding:var(--s1);box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:200;display:none;min-width:140px}
.dl-drop-panel.is-open{display:block}
.dl-drop-item{display:flex;align-items:center;gap:var(--s2);padding:7px var(--s3);border-radius:var(--r-sm);font-family:var(--font-display);font-size:.75rem;font-weight:600;color:var(--c-text-2);cursor:pointer;transition:var(--tr)}
.dl-drop-item:hover{background:var(--c-raised);color:var(--c-green)}
.dl-drop-item svg{width:12px;height:12px;flex-shrink:0}
/* Episode section */
.player-ep-section{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden}
.player-ep-header{display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);border-bottom:1px solid var(--c-border)}
.player-ep-label{font-family:var(--font-display);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--c-muted);flex-shrink:0}
.player-ep-search{flex:1;background:var(--c-raised);border:1px solid var(--c-border);border-radius:var(--r-sm);padding:5px 10px;font-family:var(--font-display);font-size:var(--t-sm);color:var(--c-text);transition:border-color var(--tr);min-width:0}
.player-ep-search:focus{border-color:rgba(108,99,255,.45);outline:none}
.player-ep-search::placeholder{color:var(--c-muted)}
.player-ep-toggle{display:flex;gap:2px;flex-shrink:0}
.player-ep-toggle-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background:transparent;border:1px solid var(--c-border);border-radius:var(--r-sm);cursor:pointer;color:var(--c-muted);transition:var(--tr)}
.player-ep-toggle-btn:hover,.player-ep-toggle-btn.is-active{border-color:var(--c-accent);color:var(--c-accent)}
.player-ep-toggle-btn svg{width:12px;height:12px}
/* Grid numeric */
.ep-num-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(50px,1fr));gap:6px;padding:var(--s3) var(--s4);max-height:210px;overflow-y:auto}
.ep-num-item{display:flex;align-items:center;justify-content:center;background:var(--c-raised);border:1px solid var(--c-border);border-radius:var(--r-sm);font-family:var(--font-display);font-size:.75rem;font-weight:700;color:var(--c-text-2);cursor:pointer;transition:var(--tr);padding:7px 4px;text-decoration:none}
.ep-num-item:hover{border-color:rgba(108,99,255,.4);color:var(--c-accent)}
.ep-num-item.is-active{background:var(--c-accent);border-color:var(--c-accent);color:#fff}
.ep-num-item.is-watched{opacity:.38}
.ep-num-item.is-search-match{border-color:var(--c-yellow);color:var(--c-yellow);background:rgba(251,191,36,.08)}
.ep-num-item.is-active.is-search-match{background:var(--c-accent);border-color:var(--c-yellow);box-shadow:0 0 0 2px rgba(251,191,36,.5)}
/* List mode */
.ep-list-new{display:flex;flex-direction:column;gap:2px;padding:var(--s2);max-height:320px;overflow-y:auto}
.ep-list-row{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s2);border-radius:var(--r-md);cursor:pointer;transition:var(--tr);text-decoration:none;color:inherit;border:1px solid transparent}
.ep-list-row:hover{background:var(--c-raised)}
.ep-list-row.is-active{background:var(--c-accent-dim);border-color:rgba(108,99,255,.2)}
.ep-list-row.is-search-match{border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.05)}
.ep-list-row.is-active.is-search-match{border-color:var(--c-yellow)}
.ep-list-row-thumb{width:80px;height:46px;border-radius:var(--r-sm);overflow:hidden;flex-shrink:0;background:var(--c-raised)}
.ep-list-row-thumb img{width:100%;height:100%;object-fit:cover}
.ep-list-row-info{flex:1;min-width:0}
.ep-list-row-num{font-size:.62rem;color:var(--c-muted);font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.ep-list-row.is-active .ep-list-row-num{color:var(--c-accent)}
.ep-list-row-title{font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep-now-badge{font-size:.58rem;background:var(--c-accent);color:#fff;padding:1px 6px;border-radius:3px;font-family:var(--font-display);font-weight:700;flex-shrink:0}
/* Skip overlay */
@media(max-width:768px){
  .player-page{padding:0 0 60px}
  .player-unit{border-radius:0;border-left:none;border-right:none;border-top:none;box-shadow:none}
  .player-info-strip{border-radius:0;border-left:none;border-right:none;margin:0}
  .player-ep-section{border-radius:0;border-left:none;border-right:none}
  .player-action-bar{padding:var(--s2) var(--content-px) var(--s3)}
  .ani-skip-btn{padding:7px 13px;font-size:.7rem;right:10px;bottom:16px;border-radius:8px}
  .art-control-show .ani-skip-btn{bottom:58px}
}

/* === SEARCH LABEL PAGE === */
.search-label-page{padding:var(--s8) var(--content-px) 80px}
.search-label-header{margin-bottom:var(--s6)}
.search-label-header h1{font-family:var(--font-display);font-size:var(--t-3xl);font-weight:800;letter-spacing:-.03em;margin-bottom:var(--s2)}
.search-label-header p{color:var(--c-muted);font-size:var(--t-sm)}
.search-result-count{font-size:var(--t-sm);color:var(--c-muted);margin-bottom:var(--s4)}

/* === STATIC PAGE === */
.static-page-wrap{max-width:800px;margin:0 auto;padding:var(--s8) var(--content-px) 80px}
.static-page-wrap h1{font-family:var(--font-display);font-size:var(--t-3xl);font-weight:800;letter-spacing:-.03em;margin-bottom:var(--s4)}
.static-page-wrap .post-body{font-size:var(--t-base);line-height:1.75;color:var(--c-text-2)}
.static-page-wrap .post-body h2,.static-page-wrap .post-body h3{margin:var(--s6) 0 var(--s3);color:var(--c-text)}
.static-page-wrap .post-body p{margin-bottom:var(--s4)}
.static-page-wrap .post-body a{color:var(--c-accent)}
.static-page-wrap .post-body a:hover{text-decoration:underline}
.static-page-wrap .post-body ul,.static-page-wrap .post-body ol{margin:var(--s3) 0;padding-left:var(--s6)}
.static-page-wrap .post-body li{margin-bottom:var(--s2);color:var(--c-text-2)}
/* sp = static page components */
.sp-hero{background:linear-gradient(135deg,rgba(108,99,255,.12) 0%,rgba(168,85,247,.08) 100%);border:1px solid rgba(108,99,255,.2);border-radius:var(--r-xl);padding:var(--s10) var(--s8);margin-bottom:var(--s10);text-align:center}
.sp-hero__icon{width:56px;height:56px;background:var(--c-accent-dim);border-radius:var(--r-lg);display:flex;align-items:center;justify-content:center;margin:0 auto var(--s4);border:1px solid rgba(108,99,255,.3)}
.sp-hero__icon svg{width:26px;height:26px;color:var(--c-accent)}
.sp-hero h1{font-family:var(--font-display);font-size:var(--t-3xl);font-weight:800;letter-spacing:-.03em;margin-bottom:var(--s2)}
.sp-hero p{color:var(--c-text-2);font-size:.92rem;max-width:480px;margin:0 auto}
.sp-section{margin-bottom:var(--s10)}
.sp-section__title{font-family:var(--font-display);font-size:var(--t-lg);font-weight:700;letter-spacing:-.02em;margin-bottom:var(--s4);display:flex;align-items:center;gap:var(--s2);color:var(--c-text)}
.sp-section__title svg{width:16px;height:16px;color:var(--c-accent);flex-shrink:0}
.sp-section__title::after{content:'';flex:1;height:1px;background:var(--c-border)}
.sp-prose{font-size:.92rem;line-height:1.8;color:var(--c-text-2)}
.sp-prose p{margin-bottom:var(--s4)}
.sp-prose a{color:var(--c-accent)}
.sp-prose strong{color:var(--c-text);font-weight:600}
.sp-prose ul{padding-left:var(--s5);margin:var(--s3) 0}
.sp-prose ul li{margin-bottom:var(--s2)}
.sp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s4);margin-bottom:var(--s6)}
.sp-card{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s5)}
.sp-card__icon{width:36px;height:36px;border-radius:var(--r-md);background:var(--c-accent-dim);border:1px solid rgba(108,99,255,.25);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s3)}
.sp-card__icon svg{width:16px;height:16px;color:var(--c-accent)}
.sp-card__title{font-family:var(--font-display);font-size:.82rem;font-weight:700;color:var(--c-text);margin-bottom:4px}
.sp-card__desc{font-size:.78rem;color:var(--c-muted);line-height:1.5}
.sp-faq{display:flex;flex-direction:column;gap:var(--s2)}
.sp-faq-item{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;transition:border-color var(--tr)}
.sp-faq-item.is-open{border-color:rgba(108,99,255,.35)}
.sp-faq-q{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s4) var(--s5);cursor:pointer;font-family:var(--font-display);font-size:.88rem;font-weight:600;color:var(--c-text);user-select:none}
.sp-faq-q svg{width:16px;height:16px;color:var(--c-muted);flex-shrink:0;transition:transform var(--tr)}
.sp-faq-item.is-open .sp-faq-q svg{transform:rotate(180deg);color:var(--c-accent)}
.sp-faq-a{display:none;padding:0 var(--s5) var(--s4);font-size:.85rem;line-height:1.75;color:var(--c-text-2);border-top:1px solid var(--c-border)}
.sp-faq-a p{margin-top:var(--s3);margin-bottom:0}
.sp-faq-item.is-open .sp-faq-a{display:block}
.sp-notice{display:flex;gap:var(--s3);align-items:flex-start;background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.2);border-radius:var(--r-lg);padding:var(--s4) var(--s5);margin:var(--s6) 0}
.sp-notice svg{width:16px;height:16px;color:var(--c-yellow);flex-shrink:0;margin-top:2px}
.sp-notice p{font-size:.83rem;line-height:1.6;color:var(--c-text-2);margin:0}
.sp-notice strong{color:var(--c-yellow)}
.sp-contact{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:var(--s6);display:flex;align-items:center;gap:var(--s4);margin-top:var(--s6)}
.sp-contact svg{width:20px;height:20px;color:var(--c-accent);flex-shrink:0}
.sp-contact__label{font-size:.75rem;color:var(--c-muted);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.sp-contact__val{font-size:.92rem;font-weight:600;color:var(--c-accent)}
.sp-divider{border:none;border-top:1px solid var(--c-border);margin:var(--s8) 0}
.sp-meta{font-size:.75rem;color:var(--c-faint);margin-top:var(--s8);padding-top:var(--s4);border-top:1px solid var(--c-border)}
@media(max-width:600px){.sp-hero{padding:var(--s6) var(--s4)}.sp-cards{grid-template-columns:1fr 1fr}}


/* === ARTPLAYER OVERRIDES ===
   overflow, border-radius, dan icon sizing diatur via JS di art.on('ready')
   karena JS dieksekusi SETELAH Artplayer inject CSS-nya sendiri → selalu menang.
   Di sini hanya aturan yang tidak perlu keunggulan runtime: hide PiP/screenshot,
   progress bar styling, dan font. ========================================= */
/* Progress bar */
#artplayer-mount .art-bottom .art-progress{height:3px !important}
#artplayer-mount .art-bottom .art-progress:hover{height:5px !important}
#artplayer-mount .art-progress-loaded{background:rgba(255,255,255,.18) !important}
#artplayer-mount .art-progress-played{background:#fff !important}
#artplayer-mount .art-progress-indicator{background:#fff !important;border:none !important;width:13px !important;height:13px !important;box-shadow:0 0 6px rgba(0,0,0,.5) !important}
/* Time */
#artplayer-mount .art-control-time{font-family:var(--font-display);font-size:12px}
/* PiP dan Screenshot: tersembunyi */
#artplayer-mount .art-control-pip,
#artplayer-mount .art-control-screenshot{display:none !important}
/* prevEp/nextEp: safety net CSS — visibility utama diatur via JS */
#artplayer-mount .art-control-prevEp,
#artplayer-mount .art-control-nextEp{display:none !important}
/* Mobile: kurangi padding icon agar tidak berdesakan */
@media(max-width:768px){
  #artplayer-mount .art-control{padding:0 2px !important}
  #artplayer-mount .art-control-time{font-size:10px !important}
  #artplayer-mount .art-progress-indicator{width:10px !important;height:10px !important}
}
/* ─ OP/ED timeline highlight ─ */
.ani-hl{position:absolute;top:0;height:100%;background:rgba(108,99,255,.55);pointer-events:none;z-index:25;border-radius:0}
/* ─ Skip button ─ */
.ani-skip-btn{position:absolute;right:20px;bottom:28px;display:none;opacity:0;align-items:center;gap:6px;background:rgba(255,255,255,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);color:#fff;padding:10px 18px;border-radius:10px;font:700 .78rem/1 var(--font-display);cursor:pointer;transition:all .4s ease;box-shadow:0 4px 15px rgba(0,0,0,.3);letter-spacing:.5px;text-transform:uppercase;z-index:50}
.art-control-show .ani-skip-btn{bottom:78px}
.ani-skip-btn:hover{background:rgba(255,255,255,.25);transform:scale(1.04)}
.ani-skip-btn svg{width:16px;height:16px;flex-shrink:0}
/* ─ Title overlay ─ */
.ani-title-overlay{position:absolute;top:20px;left:20px;z-index:50;opacity:0;transition:opacity .4s ease,transform .4s ease;transform:translateY(-8px);pointer-events:none;max-width:70%;display:flex;flex-direction:column;gap:2px}
.art-control-show .ani-title-overlay{opacity:1;transform:translateY(0)}
.ani-title-main{font:800 1.1rem/1.2 var(--font-display);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.9);display:flex;align-items:center;gap:6px}
.ani-title-main span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ani-title-sub{font:600 .8rem/1.3 var(--font-display);color:rgba(255,255,255,.65);text-shadow:0 1px 4px rgba(0,0,0,.8)}
/* ─ Banner modal (resume, end-of-episode) ─ */
.ani-banner{position:absolute;inset:0;background:rgba(0,0,0,.88);display:none;align-items:center;justify-content:center;z-index:9999;opacity:0;transition:opacity .5s ease}
.ani-banner.active{display:flex;opacity:1}
.ani-modal{background:rgba(255,255,255,.06);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.12);padding:32px;border-radius:var(--r-xl);text-align:center;width:88%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.8)}
.ani-modal h3{margin:0 0 12px;color:#fff;font:800 1.4rem/1.2 var(--font-display)}
.ani-modal p{color:rgba(255,255,255,.8);margin-bottom:20px;font-size:.95rem;line-height:1.6}
.ani-modal p b{color:#fff}
.ani-btns{display:flex;gap:12px;justify-content:center}
.ani-btn{padding:12px 22px;border:none;border-radius:var(--r-md);font:700 .8rem/1 var(--font-display);cursor:pointer;transition:all .25s;flex:1;text-transform:uppercase;letter-spacing:.03em}
.ani-btn:hover{transform:translateY(-3px);filter:brightness(1.15)}
.ani-btn-pri{background:var(--g-accent);color:#fff;box-shadow:0 6px 24px var(--c-accent-glow)}
.ani-btn-sec{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.15)}
/* Turbo confirm checkbox */
.ani-cb-wrap{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:20px;color:rgba(255,255,255,.7);font:600 .85rem/1 var(--font-display)}
.ani-cb-wrap input{width:16px;height:16px;accent-color:var(--c-accent);cursor:pointer}
/* Mobile artplayer fixes */
@media(max-width:768px){
  .ani-skip-btn{padding:7px 13px;font-size:.7rem;right:10px;bottom:16px;border-radius:8px}
  .art-control-show .ani-skip-btn{bottom:58px}
  .ani-title-overlay{top:10px;left:10px;max-width:75%}
  .ani-title-main{font-size:.82rem;gap:4px}
  .ani-title-sub{font-size:.68rem}
  .ani-modal{padding:22px;width:92%}
  .ani-modal h3{font-size:1.2rem}
  .ani-modal p{font-size:.85rem}
  .ani-btn{padding:10px 16px;font-size:.72rem}
}

/* === CATALOG PAGE === */
.catalog-page{padding:var(--s8) var(--content-px) 80px}
.catalog-header{margin-bottom:var(--s6)}
.catalog-header h1{font-family:var(--font-display);font-size:var(--t-3xl);font-weight:800;letter-spacing:-.03em;margin-bottom:var(--s2)}
.catalog-header p{color:var(--c-muted);font-size:var(--t-sm)}

/* Filter bar */
.catalog-filters-wrap{margin-bottom:var(--s5);position:relative}
.catalog-filters{display:flex;gap:var(--s2);align-items:center;padding:var(--s3) var(--s4);background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
.catalog-filters::-webkit-scrollbar{display:none}
.filter-group{position:relative;flex-shrink:0}
.filter-btn{display:flex;align-items:center;gap:var(--s2);background:var(--c-raised);border:1px solid var(--c-border);color:var(--c-text-2);padding:7px 14px;border-radius:var(--r-md);font-family:var(--font-display);font-size:var(--t-sm);font-weight:600;cursor:pointer;transition:var(--tr);white-space:nowrap;user-select:none;flex-shrink:0}
.filter-btn:hover,.filter-btn.is-active{border-color:rgba(108,99,255,.45);color:var(--c-accent)}
.filter-btn .fb-arr{width:12px;height:12px;transition:transform var(--tr);opacity:.6;flex-shrink:0}
.filter-btn.is-open .fb-arr{transform:rotate(180deg)}
.filter-btn .fb-count{background:var(--c-accent);color:#fff;font-size:.58rem;padding:1px 5px;border-radius:10px;font-weight:700;margin-left:2px;line-height:1.4}
/* Panel diposisikan fixed via JS — tidak lagi child dari scroll container */
.filter-panel{position:fixed;min-width:190px;background:var(--c-card);border:1px solid var(--c-border-md);border-radius:var(--r-md);padding:var(--s2);box-shadow:0 16px 48px rgba(0,0,0,.65);z-index:1000;display:none;max-height:260px;overflow-y:auto}
.filter-panel.is-open{display:block}
#cf-reset-all{margin-left:auto;color:var(--c-muted);flex-shrink:0}
.filter-panel__item{display:flex;align-items:center;gap:var(--s2);padding:7px var(--s3);border-radius:var(--r-sm);cursor:pointer;transition:var(--tr);font-family:var(--font-display);font-size:var(--t-sm);color:var(--c-text-2);font-weight:500;white-space:nowrap}
.filter-panel__item:hover{background:var(--c-raised);color:var(--c-text)}
.filter-panel__item.is-include{color:var(--c-accent)}
.filter-panel__item.is-exclude{color:var(--c-red)}
/* 3-state checkbox */
.fp-check{width:14px;height:14px;border:1.5px solid var(--c-border-md);border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:var(--tr);position:relative;font-style:normal}
/* include = ✓ */
.filter-panel__item.is-include .fp-check{background:var(--c-accent);border-color:var(--c-accent)}
.filter-panel__item.is-include .fp-check::after{content:'';display:block;width:7px;height:4px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg) translate(1px,-1px);position:absolute}
/* exclude = ✗ */
.filter-panel__item.is-exclude .fp-check{background:var(--c-red);border-color:var(--c-red)}
.filter-panel__item.is-exclude .fp-check::after{content:'\00d7';color:#fff;font-size:11px;font-weight:700;line-height:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
/* Lebih banyak toggle */
.genre-more-btn{display:flex;align-items:center;gap:var(--s2);width:100%;padding:6px var(--s3);font-size:.72rem;font-family:var(--font-display);font-weight:600;color:var(--c-muted);cursor:pointer;border:none;background:none;border-top:1px solid var(--c-border);margin-top:var(--s1);transition:color var(--tr)}
.genre-more-btn:hover{color:var(--c-accent)}
.genre-more-btn svg{width:11px;height:11px;transition:transform var(--tr);flex-shrink:0}
.genre-more-btn.is-open svg{transform:rotate(180deg)}
.genre-extra-list{display:none}
.genre-extra-list.is-open{display:block}
.filter-reset{font-size:.7rem;color:var(--c-muted);padding:var(--s2) var(--s3);font-family:var(--font-display);cursor:pointer;display:block;border-top:1px solid var(--c-border);margin-top:var(--s1);background:none;border-left:none;border-right:none;border-bottom:none;width:100%;text-align:left}
.filter-reset:hover{color:var(--c-accent-2)}
/* Panel search-in-panel */
.panel-search-wrap{padding:var(--s2) var(--s2) var(--s1);background:var(--c-card);border-bottom:1px solid var(--c-border);margin-bottom:var(--s1)}
.panel-search{width:100%;background:var(--c-raised);border:1px solid var(--c-border);border-radius:var(--r-sm);padding:5px var(--s3);font-family:var(--font-display);font-size:var(--t-sm);color:var(--c-text);transition:border-color var(--tr)}
.panel-search:focus{border-color:rgba(108,99,255,.45);outline:none}
.panel-search::placeholder{color:var(--c-muted)}
.panel-item-hidden{display:none}
.panel-no-result{padding:8px var(--s3);font-size:.72rem;color:var(--c-muted);font-family:var(--font-display);display:none}
.panel-no-result.is-visible{display:block}

/* Catalog toolbar */
.catalog-toolbar{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3);flex-wrap:nowrap}
.catalog-count{font-size:var(--t-sm);color:var(--c-muted);font-family:var(--font-display);white-space:nowrap}
.catalog-count strong{color:var(--c-text)}
.catalog-spacer{flex:1}
.catalog-pills-row{display:flex;gap:var(--s1);flex-wrap:wrap;align-items:center;margin-bottom:var(--s4)}
.catalog-pills-row:empty{display:none;margin:0}
.active-pills{display:flex;gap:var(--s1);flex-wrap:wrap;align-items:center}
.active-pill{display:inline-flex;align-items:center;gap:4px;background:var(--c-accent-dim);border:1px solid rgba(108,99,255,.3);color:var(--c-accent);padding:3px 10px 3px 12px;border-radius:50px;font-size:.68rem;font-family:var(--font-display);font-weight:600}
.active-pill.is-exclude{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.3);color:var(--c-red)}
.active-pill button{background:none;border:none;color:inherit;cursor:pointer;padding:0;display:flex;align-items:center;opacity:.6;font-size:.8rem;line-height:1;margin-left:3px;transition:opacity var(--tr)}
.active-pill button:hover{opacity:1}
.sort-dropdown{position:relative;flex-shrink:0}
.sort-dropdown-btn{display:flex;align-items:center;gap:var(--s2);background:var(--c-raised);border:1px solid var(--c-border);color:var(--c-text-2);padding:7px 14px;border-radius:var(--r-md);font-family:var(--font-display);font-size:var(--t-sm);font-weight:600;cursor:pointer;transition:var(--tr);white-space:nowrap;user-select:none;min-width:190px;justify-content:space-between}
.sort-dropdown-btn:hover,.sort-dropdown-btn.is-open{border-color:rgba(108,99,255,.45);color:var(--c-text)}
.sort-dropdown-btn .fb-arr{width:12px;height:12px;transition:transform var(--tr);opacity:.5;flex-shrink:0}
.sort-dropdown-btn.is-open .fb-arr{transform:rotate(180deg)}
.sort-dropdown-panel{position:absolute;top:calc(100% + 6px);right:0;min-width:200px;background:var(--c-card);border:1px solid var(--c-border-md);border-radius:var(--r-md);padding:var(--s2);box-shadow:0 16px 48px rgba(0,0,0,.55);z-index:200;display:none}
.sort-dropdown-panel.is-open{display:block}
.sort-dropdown-item{display:flex;align-items:center;justify-content:space-between;padding:7px var(--s3);border-radius:var(--r-sm);cursor:pointer;transition:var(--tr);font-family:var(--font-display);font-size:var(--t-sm);color:var(--c-text-2);font-weight:500;white-space:nowrap}
.sort-dropdown-item:hover{background:var(--c-raised);color:var(--c-text)}
.sort-dropdown-item.is-active{color:var(--c-accent)}
.sort-check{font-size:.75rem;margin-left:auto;opacity:0;flex-shrink:0}
.sort-dropdown-item.is-active .sort-check{opacity:1}

/* Catalog grid state */
.catalog-progress{display:flex;flex-direction:column;align-items:center;gap:var(--s3);padding:var(--s16) 0;color:var(--c-muted);grid-column:1/-1}
.catalog-progress-bar{width:220px;height:3px;background:var(--c-raised);border-radius:2px;overflow:hidden}
.catalog-progress-fill{height:100%;background:var(--g-accent);border-radius:2px;transition:width .4s ease;will-change:width}
.catalog-progress p{font-family:var(--font-display);font-size:var(--t-sm)}
.catalog-empty{text-align:center;padding:var(--s16) var(--content-px);color:var(--c-muted);grid-column:1/-1}
.catalog-empty svg{width:48px;height:48px;margin:0 auto var(--s4);opacity:.25;display:block}
.catalog-empty h3{font-family:var(--font-display);font-size:var(--t-xl);margin-bottom:var(--s2);color:var(--c-text-2)}
.catalog-empty p{font-size:var(--t-sm)}
.catalog-load-more{text-align:center;padding:var(--s8) 0 0}

@media(max-width:768px){
  .catalog-page{padding:var(--s6) var(--content-px) 60px}
  .catalog-filters{padding:var(--s2) var(--s3);gap:var(--s2);border-radius:var(--r-md)}
  .filter-btn{padding:6px 11px;font-size:.75rem}
  .sort-dropdown-btn{min-width:unset;font-size:.75rem;padding:6px 11px}
  .catalog-count{font-size:.78rem}
}

/* === BLOGGER OVERRIDES === */
#navbar-iframe,.navbar-iframe-container{display:none !important}
#attribution{display:none}
.post-body a{color:var(--c-accent)}
.post-body a:hover{text-decoration:underline}
.hidden{display:none}
.synopsis{display:none}

/* === RESPONSIVE === */
@media(max-width:1024px){
  :root{--sidebar-w:260px}
  .btn-search-trigger{min-width:unset}
  .btn-search-trigger .search-placeholder,
  .btn-search-trigger .search-kbd{display:none}
  .btn-search-trigger{width:38px;padding:var(--s2);justify-content:center}
  .home-grid{grid-template-columns:1fr}
  .home-sidebar{position:static}
  .series-main{grid-template-columns:180px 1fr;gap:var(--s6)}
  .series-sidebar-col{display:none}
  .series-stats{grid-template-columns:auto 1fr}
}
@media(max-width:768px){
  :root{--header-h:56px}
  .hdr-nav{display:none}
  .btn-menu{display:flex}
  .btn-icon{display:none}
  .section{padding-top:var(--s8)}
  .anime-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:var(--s3)}
  .hero{min-height:520px;padding-bottom:60px}
  .home-grid{padding:var(--s5) var(--content-px) 60px}
  .series-banner{height:260px}
  .series-main{grid-template-columns:1fr;margin-top:-80px}
  .series-poster-col{display:grid;grid-template-columns:130px 1fr;gap:var(--s4);position:static}
  .series-poster{width:130px}
  .series-poster-actions{margin-top:0;justify-content:flex-end}
  .series-stats{grid-template-columns:auto 1fr}
  .stat-score{min-width:76px;padding:var(--s3) var(--s4)}
  .stat-score__val{font-size:1.6rem}
  .info-grid{grid-template-columns:repeat(2,1fr)}
  .ep-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}
@media(max-width:480px){
  .ongoing-strip{grid-template-columns:repeat(2,1fr)}
  .anime-grid{grid-template-columns:repeat(2,1fr)}
  .ep-grid{grid-template-columns:repeat(2,1fr)}
}