:root{
  --bg:#141414;
  --bg2:#181818;
  --mut:#bcbcbc;
  --red:#e50914;
  --spring:cubic-bezier(.3,1.1,.5,1);
  --soft:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(40px, 3.5vw, 68px);
  --pad:var(--gutter);
  --n:6;
  --ease:cubic-bezier(.32,.72,0,1);
  --ioc:cubic-bezier(.65,0,.25,1);
  --ioc2:cubic-bezier(.4,0,.12,1);
  --ambient-rgb: 40, 28, 22;
  color-scheme:dark;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px)
}
*{box-sizing:border-box;margin:0}
html{scrollbar-gutter:stable;overflow-x:hidden}
body{
  background-color: #141414;
  background-image: radial-gradient(circle at 50% 120px, rgba(var(--ambient-rgb), calc(var(--ambient-opacity, 1) * 0.95)) 0%, rgba(var(--ambient-rgb), calc(var(--ambient-opacity, 1) * 0.6)) 380px, rgba(20, 20, 20, calc(var(--ambient-opacity, 1) * 0.2)) 700px, transparent 860px);
  background-repeat: no-repeat;
  color:#fff;
  font-family:"Plus Jakarta Sans",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  letter-spacing:-.006em;
  overflow-x:clip;
  min-height:100vh;
  padding-top:0;
  transition:background-image .8s var(--soft);
}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* NAV */
nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:50;
  height:90px;
  display:flex;
  align-items:center;
  gap:24px;
  padding:0 var(--gutter);
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transition:background .35s var(--soft), backdrop-filter .35s var(--soft), -webkit-backdrop-filter .35s var(--soft);
}
nav.scrolled{
  background:rgba(20, 20, 20, 0.92) !important;
  backdrop-filter:blur(24px) !important;
  -webkit-backdrop-filter:blur(24px) !important;
}
.logo{display:inline-flex;align-items:baseline;color:var(--red);font-weight:800;font-size:26px;line-height:1;letter-spacing:-.042em;white-space:nowrap;text-decoration:none;transform:scaleY(1.18);transform-origin:left center;transition:filter .45s var(--soft),opacity .3s}
.logo:hover{filter:drop-shadow(0 0 20px #e5091466)}
.logo .lg-e{color:#f5f5f5}
.logo .lg-n{color:var(--red)}
.links{position:relative;display:flex}
.links a{position:relative;z-index:1;padding:8px 16px;font-size:15px;font-weight:500;white-space:nowrap;color:#e5e5e5;cursor:pointer;transition:color .3s}
.links a.on{color:#fff;font-weight:600}
.links a:hover{color:#fff}
.pill{position:absolute;top:0;bottom:0;left:0;border-radius:99px;background:rgba(255,255,255,0.18);transition:transform .35s var(--soft),width .35s var(--soft);pointer-events:none}
.sp{flex:1}
.search{display:flex;align-items:center;height:38px;width:38px;border-radius:99px;border:1px solid transparent;overflow:clip;color:#e5e5e5;
  transition:width .45s var(--soft),background .35s,border-color .35s,box-shadow .35s,color .3s}
.search:not(.open):hover{background:#ffffff17;color:#fff}
.search:focus-within{border-color:#ffffff8c;background:#ffffff0f}
.search.open{width:270px;min-width:210px;padding-right:12px;background:#ffffff14;border-color:#ffffff2e}
.search.open:focus-within{border-color:#ffffffa6;background:#ffffff1f;box-shadow:0 0 0 3px #ffffff0f}
.search button{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:99px;transition:color .3s}
.search.open button{color:#fff}
.search input{flex:1;min-width:0;background:none;border:0;border-radius:0;outline:0;box-shadow:none;color:#fff;font:inherit;font-size:14.5px;opacity:0;filter:blur(6px);
  text-overflow:ellipsis;transition:opacity .35s .1s,filter .35s .1s}
.search input:focus-visible{outline:0}
.search input::placeholder{color:#9c9c9c}
.search.open input{opacity:1;filter:none}
.ava{display:flex;align-items:center;gap:8px}
.ava b{width:32px;height:32px;border-radius:4px;background:linear-gradient(135deg,#ff8a3d,#b3000c);display:grid;place-items:center;font-size:14px;transition:transform .5s var(--spring)}
.ava:hover b{transform:scale(1.12) rotate(-5deg)}.ava .i{width:14px;height:14px}

/* HERO (Card in safe-zone) */
.hero{
  position: relative;
  margin: 104px var(--gutter) 28px;
  height: calc(100vh - 138px);
  min-height: 500px;
  max-height: 780px;
  border-radius: 22px;
  overflow: clip;
  isolation: isolate;
  background: #000;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.7);
}
.hs{position:absolute;inset:0;opacity:0;filter:blur(8px);transform:scale(1.01);visibility:hidden;transition:opacity 1.1s var(--soft),filter 1.1s var(--soft),transform 1.6s var(--soft),visibility 0s 1.1s}
.hs.on{opacity:1;filter:none;transform:none;visibility:visible;transition:opacity 1.1s var(--soft),filter 1.1s var(--soft),transform 1.6s var(--soft),visibility 0s}
.hs .pic{position:absolute;inset:0;width:100%;height:100%;border-radius:0}.hp .pt{display:none}
.hs .pic img.bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}
.hs::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 38%, rgba(0,0,0,0) 70%),
             linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 28%, rgba(0,0,0,0) 60%);
  z-index:1;
}
.hc{
  position:absolute;
  z-index:2;
  left:44px;
  bottom:44px;
  width:min(520px, 56%);
}
.hc>*{opacity:0;transform:translateY(16px);filter:blur(8px);transition:opacity .7s var(--soft),transform .7s var(--soft),filter .7s var(--soft)}
.hs.on .hc>*{opacity:1;transform:none;filter:none}
.hs.on .hc>:nth-child(2){transition-delay:.1s}.hs.on .hc>:nth-child(3){transition-delay:.2s}.hs.on .hc>:nth-child(4){transition-delay:.3s}
.lg{font-size:clamp(36px,4.2vw,62px);line-height:.95;margin-bottom:16px;text-shadow:0 4px 24px #000b;font-weight:800}
.hero-logo-wrap{margin-bottom:16px;max-width:min(420px,85%);min-height:60px;display:flex;align-items:flex-end}
.hero-logo{max-width:100%;max-height:115px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 4px 18px rgba(0,0,0,0.9));user-select:none;pointer-events:none}

/* Netflix Metadata One-line */
.hm-line{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:14.5px;
  font-weight:600;
  color:#e0e0e0;
  margin-bottom:14px;
  text-shadow:0 2px 8px rgba(0,0,0,0.8);
}
.hm-line span.dot{opacity:.5;font-size:12px}

.hc p{
  font-size:15.5px;
  line-height:1.45;
  color:#dedede;
  margin-bottom:20px;
  text-shadow:0 2px 10px rgba(0,0,0,0.85);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
}
.btns{display:flex;align-items:center;gap:12px}
.pb,.ib{
  display:inline-flex;
  align-items:center;
  gap:10px;
  height:44px;
  padding:0 24px;
  border-radius:99px;
  font-weight:700;
  font-size:16px;
  letter-spacing:-.01em;
  transition:transform .3s var(--spring),background .2s;
}
.pb{background:#fff;color:#000}
.pb:hover{background:#e6e6e6;transform:scale(1.04)}
.ib{background:rgba(109,109,110,0.7);color:#fff;backdrop-filter:blur(8px)}
.ib:hover{background:rgba(109,109,110,0.9);transform:scale(1.04)}
.pb:active,.ib:active{transform:scale(.96)}
.pb .i{width:22px;height:22px;fill:currentColor}

/* Netflix Badge di Kanan Bawah */
.nb{
  position:absolute;
  z-index:2;
  right:32px;
  bottom:36px;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(20,20,20,0.8);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(8px);
  border-radius:6px;
  padding:6px 12px;
  font-size:13px;
  font-weight:700;
  color:#eee;
  box-shadow:0 4px 16px rgba(0,0,0,0.6);
}
.nb i{width:18px;height:18px;border-radius:4px;background:var(--red)}

/* Mute button di Kanan Atas Hero */
.hero-mute{
  position:absolute;
  z-index:3;
  right:36px;
  top:36px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.45);
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(8px);
  display:grid;
  place-items:center;
  color:#fff;
  cursor:pointer;
  transition:border-color .2s, transform .2s, background .2s;
}
.hero-mute:hover{border-color:#fff;background:rgba(0,0,0,0.7);transform:scale(1.08)}
.hero-mute .i{width:20px;height:20px}

.dots{position:absolute;z-index:3;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:6px}
.dots button{width:6px;height:6px;border-radius:9px;background:#fff6;transition:width .6s var(--spring),background .3s}
.dots button.on{width:22px;background:#fff}
/* ART (Horizontal 16:9 Posters) */
.pic{position:relative;overflow:clip;container-type:inline-size;aspect-ratio:16/9;border-radius:12px;background:#181818}
.pic img.bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .4s var(--soft)}
.pic:hover img.bg-img,.slide:hover img.bg-img,.gc:hover img.bg-img{transform:scale(1.05)}
.pic::before,.pic::after{display:none!important}
.pt{position:absolute;z-index:2;left:5cqw;bottom:5cqw;max-width:80cqw;font-size:max(11px,6.5cqw);line-height:1.12;text-shadow:0 2px 8px #000, 0 1px 3px #000;overflow-wrap:break-word}
.pt-logo-wrap{position:absolute;z-index:2;left:5cqw;bottom:5cqw;max-width:54cqw;max-height:26cqw;display:flex;align-items:flex-end;justify-content:flex-start;pointer-events:none}
.pt-logo{max-width:100%;max-height:24cqw;width:auto;height:auto;object-fit:contain;object-position:left bottom;filter:drop-shadow(0 2px 6px rgba(0,0,0,0.92)) drop-shadow(0 1px 2px rgba(0,0,0,0.85));user-select:none;pointer-events:none}
.pa .pt-logo-wrap{max-width:50cqw;max-height:25cqw;left:5cqw;bottom:5cqw}
.pa .pt-logo{max-height:22cqw}
/* TMDB SVG wordmarks have a viewBox but no intrinsic width/height, so
   width/height:auto collapses them to 0x0. Give them an explicit box. */
.pt-logo[src$=".svg"]{width:54cqw;height:24cqw;object-fit:contain;object-position:left bottom}
.pa .pt-logo[src$=".svg"]{width:50cqw;height:22cqw}
/* The authentic English wordmark is the normal state (not hover-only). */
/* Contexts that intentionally never show a title keep the wordmark hidden too. */
.hp .pt-logo-wrap,.th .pt-logo-wrap,.ytp .pt-logo-wrap,.ntf .th2 .pt-logo-wrap,.ep .pt-logo-wrap,.subprev .pt-logo-wrap{display:none!important}
/* Semua varian judul poster pakai font brand yang sama (Plus Jakarta Sans) */
.f0{font-weight:800;text-transform:uppercase;letter-spacing:-.02em}.f1{font-weight:500;letter-spacing:.02em}.f2{text-transform:uppercase;letter-spacing:.16em;font-weight:600}.f3{font-weight:800;letter-spacing:-.04em}

/* ROWS */
main{padding-bottom:90px}
.row{position:relative;margin-bottom:52px}
.row h2{font-size:22px;font-weight:500;line-height:28px;color:#fff;padding:0 var(--gutter);margin-bottom:18px;letter-spacing:-.01em}
.vp{overflow:visible;position:relative}
.track{
  display:flex;
  width:max-content;
  padding-left:var(--gutter);
  --gap:10px;
  --w:calc((100vw - 2 * var(--gutter) - 4 * var(--gap)) / 5);
}
.slide{
  position:relative;
  flex:none;
  width:var(--w);
  margin-right:var(--gap);
  border-radius:12px;
  transition:transform .7s var(--soft) var(--d,0ms),opacity .25s;
}
.slide.dim{opacity:.2}.track.mv .slide{will-change:transform}
.poster{cursor:pointer;border-radius:12px;overflow:clip}

/* Progress bar Continue Watching (tipis 3px, rounded, lebar 60% terpusat di bawah kartu) */
.pg{
  width:60%;
  height:3px;
  margin:8px auto 0;
  border-radius:99px;
  background:rgba(255,255,255,0.25);
  overflow:clip;
}
.pg i{display:block;height:100%;background:var(--red);border-radius:99px}

/* Label New Episode | Watch Now */
.bg2{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:8px;
  transform:translateX(-50%);
  display:flex;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
  border-radius:4px;
  overflow:clip;
  box-shadow:0 2px 8px rgba(0,0,0,0.8);
}
.bg2 b{padding:2px 8px;background:var(--red);color:#fff}
.bg2 u{text-decoration:none;padding:2px 8px;background:#fff;color:#000}

/* Top 10 Card */
.slide.top{
  width: clamp(210px, 18.5vw, 290px);
  height: clamp(210px, 18.5vw, 290px);
  flex: none;
  position: relative;
  overflow: visible;
  margin-right: 18px;
}
.top .num{
  position: absolute;
  left: 6%;
  bottom: 0;
  top: 0;
  width: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  font-size: clamp(170px, 15vw, 240px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.76;
  color: #141414;
  -webkit-text-stroke: 3px #595959;
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.95);
  z-index: 1;
  user-select: none;
  /* Angka besar ikut jadi area hover/klik kartu, bukan zona mati. */
  pointer-events: auto;
  cursor: pointer;
  font-family: Impact, "Arial Black", "Helvetica Neue", sans-serif;
  transform: translateY(2px);
}
.top .poster{
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 63%;
  aspect-ratio: auto;
  border-radius: 12px;
  z-index: 2;
  box-shadow: -6px 0 22px rgba(0, 0, 0, 0.88);
  background: #181818;
}

/* Tombol panah kanan/kiri Netflix */
.arr{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:68px;
  z-index:6;
  display:grid;
  place-items:center;
  background:rgba(20,20,20,0.75);
  backdrop-filter:blur(10px);
  color:#fff;
  opacity:0;
  transition:opacity .25s, background .25s, transform .25s var(--spring);
}
.arr:hover{background:rgba(20,20,20,0.92)}
.arr .i{width:22px;height:22px;transition:transform .3s var(--spring)}
.arr:hover .i{transform:scale(1.25)}
.arr.l{left:0;border-radius:0 8px 8px 0}
.arr.r{right:0;border-radius:8px 0 0 8px}
.row:hover .arr{opacity:1}
.arr.off{opacity:0!important;pointer-events:none}
footer{padding:30px var(--gutter);color:#777;font-size:13px}
/* HOVER PREVIEW */
.cb{width:36px;height:36px;border-radius:50%;border:2px solid #ffffff80;background:#2a2a2a99;color:#fff;display:grid;place-items:center;transition:transform .4s var(--spring),border-color .3s,background .3s}
.cb .i{width:17px;height:17px}.cb:hover{border-color:#fff;transform:scale(1.12)}.cb.p,.cb.act{background:#fff;color:#000;border-color:#fff}
.bx{border:1px solid #888;padding:0 5px;font-size:12px;line-height:17px;color:#fff;white-space:nowrap}
.pv{position:fixed;z-index:80;display:none;background:var(--bg2);border-radius:8px;overflow:clip;box-shadow:0 14px 44px #000d;transform-origin:0 0;will-change:transform,clip-path;transition:transform .45s var(--ease),clip-path .45s var(--ease),opacity .25s}
.pv.s{display:block}.pa{overflow:clip;cursor:pointer;position:relative}.pa .pic{height:100%;aspect-ratio:auto;border-radius:0}
.pi{padding:14px 16px;opacity:0;filter:blur(8px);transition:opacity .3s,filter .3s}.pv.on .pi{opacity:1;filter:none;transition-delay:.12s}
.pr{display:flex;gap:8px;margin-bottom:12px}.pr .cb:last-child{margin-left:auto}
.pm{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--mut)}.tg{margin-top:10px;font-size:14px}
.mu{position:absolute;z-index:3;right:12px;bottom:12px;width:30px;height:30px;border-radius:50%;border:1.5px solid #fff8;background:#0006;display:grid;place-items:center}.mu .i{width:14px;height:14px}
/* MODAL */
.bd{position:fixed;inset:0;z-index:90;background:#000b;opacity:0;pointer-events:none;transition:opacity .5s var(--soft)}.bd.on{opacity:1;pointer-events:auto}
.modal{position:fixed;z-index:100;overflow:clip;border-radius:8px;background:var(--bg2);box-shadow:0 20px 80px #000;transform-origin:0 0;will-change:transform,clip-path;transition:transform .55s var(--ease),clip-path .55s var(--ease),opacity .3s}
.mm{position:absolute;left:0;top:0;width:100%;aspect-ratio:16/9;border-radius:0;transition:opacity .35s .1s}.modal.open .mm{opacity:0}
.mc{position:absolute;left:0;top:0;height:100%;overflow-y:auto;scrollbar-width:thin;opacity:0;filter:blur(10px);transition:opacity .35s .1s,filter .35s .1s}.modal.open .mc{opacity:1;filter:none}
.ma{position:relative}.ma .pic{border-radius:0}.ma .pt,.ma .pt-logo-wrap{display:none!important}.fd{position:absolute;inset:0;background:linear-gradient(0deg,var(--bg2) 0,#0000 45%)}
.mo{position:absolute;left:44px;right:44px;bottom:36px}.mo .lg{font-size:46px}.mb2{display:flex;gap:10px;align-items:center}
.mp{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 24px;border-radius:4px;background:#fff;color:#000;font-weight:700;font-size:18px;transition:transform .4s var(--spring)}.mp:hover{transform:scale(1.06)}.mp .i{width:22px;height:22px}
.mb2 .cb{width:42px;height:42px}
.x{position:absolute;z-index:5;right:16px;top:16px;width:36px;height:36px;border-radius:50%;background:var(--bg2);display:grid;place-items:center;transition:transform .5s var(--spring)}.x:hover{transform:rotate(90deg) scale(1.12)}
.mbd{padding:0 44px 44px;display:grid;grid-template-columns:2fr 1fr;gap:6px 36px}
.mm2{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--mut);margin-bottom:8px}.ds{font-size:16px;line-height:1.5;margin-top:10px}
.sd{font-size:14px;line-height:1.7}.sd i{font-style:normal;color:#777}
.wide{grid-column:1/-1}.wide h3{font-size:24px;margin:26px 0 10px}
.watch{display:flex;flex-direction:column;gap:12px}
.wgrp{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.wlb{flex:none;width:74px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8c8c8c}
.wprovs{display:flex;flex-wrap:wrap;gap:10px}
.wprov{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 6px;border:1px solid var(--line2);border-radius:10px;background:#ffffff0d;transition:transform .4s var(--spring),border-color .3s,background .3s}
.wprov:hover{transform:translateY(-2px);border-color:#fff;background:#ffffff1a}
.wprov img{width:32px;height:32px;border-radius:7px;object-fit:cover}
.wprov b{font-size:13px;font-weight:600;white-space:nowrap}
.wtnone{color:#a3a3a3;font-size:14px;margin:0}
.wattr{font-size:11.5px;color:#7a7a7a;margin:12px 0 0}
.wattr a{color:#bdbdbd;text-decoration:underline}
.ep{display:flex;gap:16px;align-items:center;padding:16px 10px;border-bottom:1px solid #404040;border-radius:4px;transition:background .3s,transform .5s var(--spring)}.ep:hover{background:#2a2a2a;transform:translateX(6px)}
.ep>b{font-size:22px;color:var(--mut);width:28px;text-align:center}.th{position:relative;width:140px;flex:none;cursor:pointer}.th .pt{display:none}
.th::before{display:none}
.th::after{content:"";position:absolute;inset:0;width:auto;height:auto;margin:0;border-radius:0;background:linear-gradient(0deg,#000000b8,#0000 62%);opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.ep:hover .th::after{opacity:1}
.epp{position:absolute;z-index:2;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;display:grid;place-items:center;border-radius:50%;background:#000000b8;border:2px solid #ffffffd9;color:#fff;opacity:.7;transition:opacity .3s var(--ease),transform .4s var(--spring),background .25s,color .25s,border-color .25s}
.epp .i{width:19px;height:19px;margin-left:2px}
.ep:hover .epp{opacity:1;transform:scale(1.1)}
.epp:hover{background:#fff;color:#000;border-color:#fff;transform:scale(1.16)}
.epp:active{transform:scale(.95)}
.ep{cursor:pointer}.ep p{font-size:13px;color:var(--mut);margin-top:5px;line-height:1.4}.ep strong{font-size:15px}
.th-noimg{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,#2b2b2b,#151515 62%);border-radius:inherit}
.th-noimg span{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8d8d8d}
.ep-empty{padding:26px 12px;color:#aaa;text-align:center;font-size:15px;line-height:1.55}
.ep-retry{margin-left:8px;padding:6px 14px;border-radius:6px;border:1px solid #ffffff40;background:#2c2c2c;color:#fff;font-size:14px;cursor:pointer;transition:background .2s,border-color .2s}
.ep-retry:hover{background:#3a3a3a;border-color:#ffffff70}
.ml{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}.mi{background:#2f2f2f;border-radius:6px;overflow:clip;display:flex;flex-direction:column;cursor:pointer;transition:transform .35s var(--spring3),box-shadow .35s}.mi:hover{transform:translateY(-3px);box-shadow:0 12px 26px #0008}.mi .pic{border-radius:0}.mi-thumb{cursor:pointer}.mi-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:9px;flex:1}.mi p{padding:0;margin:0;font-size:12.5px;color:#cfcfcf;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.45em * 3)}.mi-btn{align-self:flex-start;margin-top:auto;padding:6px 12px;border-radius:6px;background:#ffffff1c;color:#fff;font-size:12px;font-weight:600;transition:background .2s}.mi-btn:hover{background:#ffffff30}.mi-empty{color:#9a9a9a;font-size:13px}
/* ============================================================
   PLAYER - Netflix-style reference (production integration)
   Stage: centered 16:9, max 1180px, 14px radius, fullscreen fill.
   Semua tombol dihubungkan ke controller playback nyata di app.js.
   ============================================================ */
html.ply-open{scrollbar-gutter:auto!important}
/* Halaman di belakang overlay tidak perlu terus beranimasi. */
body.ply-open #view *,body.ply-open nav *{animation-play-state:paused!important}
html.ply-open,body.ply-open{overflow:hidden!important;scrollbar-width:none!important}
html.ply-open::-webkit-scrollbar,body.ply-open::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}

.ply{
  --bg:#141414;--red:#e50914;--mut:#9a9a9a;
  --sp:cubic-bezier(.3,1.7,.5,1);--ez:cubic-bezier(.22,1,.36,1);
  position:fixed;inset:0;width:100vw;height:100vh;z-index:200;background:var(--bg);overflow:hidden;
  color:#fff;transform-origin:0 0;will-change:transform,clip-path;
  transition:transform .6s var(--ease),clip-path .6s var(--ease),opacity .3s;
  display:flex;align-items:center;justify-content:center;
  padding:0;
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  cursor:default;
}

/* Ambient light tetap dipertahankan, tetapi hanya sebagai glow di belakang
   stage supaya tidak mengganggu kontras kontrol. */
#amb{position:absolute;inset:0;pointer-events:none;contain:paint;opacity:.95;
  background:
    radial-gradient(ellipse 58% 58% at 84% 44%,var(--c1,transparent),transparent 70%),
    radial-gradient(ellipse 55% 62% at 18% 82%,var(--c2,transparent),transparent 72%),
    radial-gradient(ellipse 70% 50% at 42% 12%,var(--c3,transparent),transparent 70%);
  transition:opacity .4s}

#stage{
  position:relative;
  /* Full-bleed: pemutar mengisi seluruh jendela, tanpa sisa ruang kosong. */
  width:100%;height:100%;
  border-radius:0;overflow:hidden;background:#000;user-select:none;
  font:700 16px/1 "Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  letter-spacing:-.2px;color:#fff;
  isolation:isolate;
}
#stage:fullscreen{width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
#stage:-webkit-full-screen{width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;border-radius:0;box-shadow:none}

#frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;z-index:1}
#mbVid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;display:none;z-index:2;outline:none}
#mbVid.on{display:block}

/* Paused state memakai metadata nyata dari katalog. */
#pause{position:absolute;inset:0;z-index:8;background:rgba(0,0,0,.58);backdrop-filter:blur(6px);
  display:flex;flex-direction:column;justify-content:center;padding:0 6%;opacity:0;pointer-events:none;
  transition:opacity .35s}
#pause.on{opacity:1}
#pauseBg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.18;
  filter:saturate(.75);pointer-events:none}
#pause .pbody{position:relative;z-index:1;max-width:72%}
#pause small{display:block;font-size:clamp(11px,1.15vw,16px);color:#b3b3b3;font-weight:600}
#pause h2{font-size:clamp(24px,4.6vw,60px);font-weight:800;line-height:1.04;margin:6px 0 10px;
  text-shadow:0 4px 24px rgba(0,0,0,.55)}
#pause p{margin:0;max-width:82%;font-size:clamp(11px,1.3vw,17px);line-height:1.5;color:#d2d2d2;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.g1,.g2{position:absolute;left:0;right:0;pointer-events:none;transition:opacity .35s;z-index:9}
.g1{top:0;height:22%;background:linear-gradient(rgba(0,0,0,.78),transparent)}
.g2{bottom:0;height:44%;background:linear-gradient(transparent,rgba(0,0,0,.92))}
.top{position:absolute;top:0;left:0;z-index:20;padding:22px 26px;transition:opacity .35s,transform .35s;pointer-events:none}
.top button{pointer-events:auto}
.bot{position:absolute;left:0;right:0;bottom:0;z-index:20;padding:0 26px 18px;transition:opacity .35s,transform .35s;pointer-events:none}
.bot button,.bot #bar,.bot #vt,.bot #menu{pointer-events:auto}
#stage.idle .g1,#stage.idle .g2,#stage.idle .top,#stage.idle .bot{opacity:0}
#stage.idle .bot{transform:translateY(8px)}
#stage.idle .top{transform:translateY(-8px)}
#stage.idle{cursor:none}

/* ---------- progress ---------- */
.prow{display:flex;align-items:center;gap:16px}
#bar{position:relative;flex:1;height:26px;display:flex;align-items:center;cursor:pointer;touch-action:none}
#track{position:relative;width:100%;height:5px;border-radius:3px;background:rgba(109,109,110,.72);transition:height .12s}
#bar:hover #track,#bar.drag #track{height:8px}
#buf,#fill{position:absolute;left:0;top:0;bottom:0;border-radius:3px;width:0}
#buf{background:rgba(255,255,255,.3)}
#fill{background:var(--red)}
#dot{position:absolute;top:50%;left:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--red);
  transform:scale(0);transition:transform .2s var(--sp)}
#bar:hover #dot,#bar.drag #dot{transform:scale(1)}
#pv{position:absolute;bottom:30px;left:0;width:190px;text-align:center;transform:translateX(-50%);opacity:0;scale:.92;
  transition:opacity .15s,scale .2s var(--sp);pointer-events:none;z-index:2}
#bar:hover #pv,#bar.drag #pv{opacity:1;scale:1}
#pc{width:190px;height:107px;border-radius:6px;border:2px solid #fff;background:#111;display:block;box-shadow:0 6px 26px rgba(0,0,0,.7)}
#pt{display:block;margin-top:6px;font-size:14px;font-weight:700;text-shadow:0 1px 6px #000}
#pvVid{display:none}
#stage .st{fill:none!important;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#pv.noimg{width:auto;min-width:58px;padding:8px 12px;border:1px solid rgba(255,255,255,.16);border-radius:6px;
  background:rgba(20,20,20,.94);box-shadow:0 6px 26px rgba(0,0,0,.7)}
#pv.noimg #pc{display:none}
#pv.noimg #pt{margin:0}
#rem{font-size:clamp(13px,1.4vw,18px);font-weight:600;min-width:52px;text-align:right;font-variant-numeric:tabular-nums}

/* ---------- control row ---------- */
.crow{display:flex;align-items:center;margin-top:4px;pointer-events:none}
.crow>*{pointer-events:none}
.l,.r{flex:1;display:flex;align-items:center;gap:6px;min-width:0;pointer-events:none}
.r{justify-content:flex-end}
.l>*,.r>*{pointer-events:auto}
/* all:unset mewarisi pointer-events:none dari .bot/.l, jadi harus dinyalakan
   ulang di sini agar tombol bisa diklik (lapisan <video> ada di atasnya). */
#stage button{all:unset;cursor:pointer;pointer-events:auto;display:grid;place-items:center;width:46px;height:46px;
  transition:transform .15s var(--sp),opacity .2s}
#stage button:hover{transform:scale(1.16)}
#stage button:active{transform:scale(.9)}
#stage button:focus-visible{outline:2px solid #fff;border-radius:6px}
#stage button svg{width:34px;height:34px;fill:#fff;display:block}
#pp svg{width:38px;height:38px}
#stage button[disabled]{opacity:.32;cursor:default;transform:none!important}
.ttl{flex:0 1 auto;min-width:0;font-size:clamp(13px,1.55vw,20px);font-weight:700;text-align:center;
  white-space:nowrap;padding:0 12px;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.ttl span{font-weight:400;color:#d2d2d2;margin-left:8px}

/* volume */
.vg{display:flex;align-items:center}
#vs{width:0;overflow:hidden;transition:width .25s;display:flex;align-items:center;height:46px}
.vg:hover #vs,#vs.show{width:96px}
#vt{position:relative;width:84px;height:4px;border-radius:2px;background:rgba(255,255,255,.35);margin-left:4px;cursor:pointer;touch-action:none}
#vf{position:absolute;left:0;top:0;bottom:0;background:#fff;border-radius:2px;width:100%}
#vd{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;left:100%}

/* top actions */
.topr{left:auto;right:0}
#nbtn{width:auto;height:46px;padding:0 20px 0 14px;gap:8px;border-radius:99px;display:flex;align-items:center;
  background:rgba(38,38,38,.72);backdrop-filter:blur(10px);font-size:15px;font-weight:700;
  border:1px solid rgba(255,255,255,.12)}
#nbtn:hover{transform:scale(1.05);background:rgba(60,60,60,.85)}
#nbtn svg{width:26px;height:26px}
#nbtn.hide{display:none}
#pnote{display:none;font-size:12px;font-weight:600;color:#c7c7c7;padding:0 2px 4px;letter-spacing:0}
#stage.noctl #pnote{display:block}
#stage.noctl .prow,#stage.noctl .l{display:none}
#stage.noctl .bot{padding-bottom:12px}

/* ---------- animated settings menu ---------- */
#menu{position:absolute;right:26px;bottom:104px;z-index:30;width:230px;max-height:calc(100% - 130px);overflow:auto;
  background:rgba(38,38,38,.96);border-radius:6px;padding:6px 0;opacity:0;pointer-events:none;transform:scale(.35);
  filter:blur(6px);border-radius:28px;transform-origin:bottom right;scrollbar-width:none;
  box-shadow:0 10px 40px rgba(0,0,0,.6);
  transition:opacity .22s,transform .55s cubic-bezier(.2,1.3,.3,1),filter .3s,
    border-radius .55s cubic-bezier(.2,1,.3,1),right .45s cubic-bezier(.2,1,.3,1),
    height .42s cubic-bezier(.2,1,.3,1),width .42s cubic-bezier(.2,1,.3,1)}
#menu::-webkit-scrollbar{display:none}
#menu.open{opacity:1;pointer-events:auto;transform:none;filter:none;border-radius:14px}
@keyframes itIn{from{opacity:0;transform:translateY(10px) scale(.97);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
#menu.open h4,#menu.open .it{animation:itIn .42s cubic-bezier(.2,1,.3,1) both}
#menu h4{font-size:19px;font-weight:700;padding:12px 18px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#menu h4.bh{cursor:pointer}
#menu h4.bh:hover{color:#bbb}
.it{display:flex;align-items:center;gap:14px;padding:11px 18px;font-size:16px;font-weight:600;cursor:pointer;
  color:#cfcfcf;transition:background .12s;min-height:20px}
.it:hover{background:rgba(255,255,255,.12);color:#fff}
.it i{width:18px;height:18px;border-radius:50%;border:2px solid #8c8c8c;display:grid;place-items:center;flex:0 0 auto}
.it.on{color:#fff}.it.on i{border-color:#fff}.it.on i::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
.it em{font-style:normal;font-size:10px;background:var(--red);padding:1px 5px;border-radius:3px;margin-left:auto;flex:0 0 auto}
.it.nm{justify-content:space-between}
.it.nm span{color:#9a9a9a;font-weight:600;font-size:14px;margin-left:auto;padding-left:12px}
.it.dis{cursor:default;color:#8c8c8c}
.it.dis:hover{background:transparent;color:#8c8c8c}
.it.dis i{display:none}
.lst{max-height:min(42vh,310px);overflow-y:auto;scroll-snap-type:y proximity;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:#6b6b6b transparent}
.lst::-webkit-scrollbar{width:6px}.lst::-webkit-scrollbar-thumb{background:#6b6b6b;border-radius:3px}
.lst .it{scroll-snap-align:start}
.lst.many .it{animation:none!important;content-visibility:auto;contain-intrinsic-size:41px}

/* ---------- loading, errors, toast ---------- */
#spin{position:absolute;inset:0;z-index:35;display:grid;place-items:center;pointer-events:none;opacity:0;transition:opacity .2s}
#spin.on{opacity:1}
#spin::before{content:"";width:62px;height:62px;border-radius:50%;border:5px solid rgba(255,255,255,.18);
  border-top-color:var(--red);animation:plyrSpin .85s linear infinite}
@keyframes plyrSpin{to{transform:rotate(360deg)}}
#plyToast{position:absolute;top:22px;left:50%;z-index:40;transform:translate(-50%,-10px);background:rgba(38,38,38,.92);
  padding:9px 18px;border-radius:6px;font-size:14px;font-weight:700;opacity:0;transition:.25s;
  pointer-events:none;max-width:calc(100% - 180px);text-align:center}
#plyToast.on{opacity:1;transform:translate(-50%,0)}
.mbov{position:absolute;inset:0;z-index:6;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;background:rgba(0,0,0,.58);text-align:center;padding:8%;pointer-events:none;
  font:600 15px/1.45 "Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;letter-spacing:0}
.mbov.on{display:flex}
.mbov b{font-size:clamp(17px,2vw,23px);font-weight:700}
.mbov span{max-width:78%;font-size:clamp(12px,1.2vw,16px);font-weight:500;opacity:.86}
.mbov.err{background:rgba(0,0,0,.82)}
.mbov.err b{color:#ff5a5a}
.mbov .mbspin{width:44px;height:44px;border-radius:50%;border:4px solid rgba(255,255,255,.2);
  border-top-color:var(--red);animation:plyrSpin .8s linear infinite}
.mbov.err .mbspin{display:none}
#subOv{position:absolute;left:7%;right:7%;bottom:104px;z-index:7;display:none;text-align:center;white-space:pre-line;
  pointer-events:none;font:600 clamp(14px,1.7vw,28px)/1.35 "Inter",system-ui,sans-serif;color:#fff;
  text-shadow:0 2px 5px rgba(0,0,0,.95),0 0 3px #000;padding:0 10px}
#stage:fullscreen #subOv{bottom:10%}

@media (max-width:700px){
  /* Di layar kecil, stage memakai seluruh viewport supaya kontrol dan menu
     tidak terpotong. Visual kontrol tetap mengikuti referensi. */
  .ply{padding:0}
  #stage{width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
  .bot{padding:0 12px 8px}.top{padding:12px}
  #stage button{width:36px;height:36px}#stage button svg{width:26px;height:26px}#pp svg{width:30px;height:30px}
  .ttl,.vg{display:none}
  #nbtn{height:34px;padding:0 12px 0 8px;font-size:12px;gap:4px}#nbtn svg{width:20px;height:20px}
  #menu{bottom:64px;max-height:calc(100% - 80px);width:210px;max-width:calc(100% - 20px)}
  #pause p{display:none}
  #pause .pbody{max-width:94%}
  #rem{font-size:12px;min-width:42px}
  .prow{gap:8px}
  #pv{width:150px}#pc{width:150px;height:84px}
  .lst{max-height:min(46vh,260px)}
  #plyToast{max-width:calc(100% - 24px);font-size:12px;top:52px}
}
@media (prefers-reduced-motion:reduce){
  #stage *,#stage *::before,#stage *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  #menu{filter:none!important}
}

/* MODAL SEASON & EPISODE SYSTEM */
.ep-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 28px 0 16px;
}
.ep-header-row h3 {
  margin: 0;
  font-size: 24px;
}
.season-picker {
  position: relative;
}
.season-select {
  appearance: none;
  -webkit-appearance: none;
  background: #242424 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat calc(100% - 14px) center;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 8px;
  padding: 9px 38px 9px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.season-select:hover, .season-select:focus {
  border-color: var(--red);
  background-color: #2e2e2e;
  outline: none;
}
.season-single-badge {
  font-size: 13px;
  font-weight: 600;
  color: #ccc;
  background: #242424;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

/* BOTTOM BAR */
.ybot {
  display: none !important;
}
.ybt{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;transition:transform .3s var(--ease),background .2s}
.ybt:hover{background:#ffffff22;transform:scale(1.12)}.ybt:active{transform:scale(.92)}.ybt .i{width:28px;height:28px}
.ypg{position:relative;height:5px;border-radius:3px;background:#ffffff40;cursor:pointer;transition:height .2s;margin-bottom:12px}
.ypg::before{content:"";position:absolute;left:0;right:0;top:-14px;bottom:-14px}
.ypg:hover,.ypg.drag{height:8px}
.ypb,.ypp{position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%;transform:scaleX(0)}
.ypb{background:#ffffff59}.ypp{background:var(--red)}
.ypt{position:absolute;top:50%;left:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--red);transform:scale(0);transition:transform .25s var(--spring)}
.ypg:hover .ypt,.ypg.drag .ypt{transform:scale(1)}
.ytip{position:absolute;bottom:22px;left:0;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .2s;text-align:center;font-size:13px;font-weight:600}
.ypg:hover .ytip,.ypg.drag .ytip{opacity:1}
.ytp{width:170px;border-radius:6px;overflow:clip;margin-bottom:6px;border:2px solid #fff}.ytp .pic{border-radius:0}.ytp .pt{display:none}
.yrow{display:flex;align-items:center;gap:8px}
.yl,.yr{display:flex;align-items:center;gap:4px;flex:1}.yr{justify-content:flex-end}
.yc{flex:2;text-align:center;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#ddd}.yc b{color:#fff;margin-right:8px}
.ytm{font-size:15px;font-weight:600;margin-right:12px;font-variant-numeric:tabular-nums}
.yvol{display:flex;align-items:center}
.yvol input{width:0;opacity:0;height:4px;accent-color:#fff;cursor:pointer;transition:width .35s var(--ease),opacity .25s,margin .35s}
.yvol:hover input,.yvol:focus-within input{width:92px;opacity:1;margin:0 10px 0 4px}
.ypw{position:relative}
.ypop{position:absolute;right:-6px;bottom:62px;min-width:210px;background:#000e;border:1px solid #ffffff26;border-radius:10px;padding:8px;opacity:0;transform:translateY(10px) scale(.97);transform-origin:100% 100%;pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
.ypop.on{opacity:1;transform:none;pointer-events:auto}
.ypop h4{font-size:13px;color:#aaa;font-weight:600;padding:6px 12px}
.ypop button{display:flex;justify-content:space-between;width:100%;padding:10px 12px;border-radius:6px;font-size:15px;text-align:left;transition:background .2s}
.ypop button:hover{background:#ffffff1f}.ypop .sel::after{content:"✓";color:var(--red)}
/* Panel Settings (gear): dua dropdown -- Server dulu, lalu Resolution */
.setpop{min-width:290px;padding:13px 11px 11px;max-height:min(calc(100vh - 140px),600px);overflow-y:auto;overscroll-behavior:contain}
.setpop h4{padding:0 4px 11px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8d8d8d}
.setg{display:block}
.setg+.setg{margin-top:14px}
.ydw{padding:0}
.slb{display:flex;align-items:center;gap:7px;padding:0 8px 7px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8f8f8f}
.slb .i{width:14px;height:14px;stroke-width:2.6;color:#bdbdbd}
.setpop .ydt{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:11px 13px;border-radius:12px;background:linear-gradient(180deg,#ffffff16,#ffffff09);border:1px solid #ffffff1f;font-size:14.5px;font-weight:600;box-shadow:inset 0 1px 0 #ffffff14;transition:background .28s var(--ease),border-color .28s,box-shadow .28s}
.setpop .ydt:hover{border-color:#ffffff3d;background:linear-gradient(180deg,#ffffff20,#ffffff11)}
.ydw.on .ydt{border-color:#ffffff4d;background:linear-gradient(180deg,#ffffff22,#ffffff13);box-shadow:0 0 0 3px #ffffff0f}
.ydt>.i{width:16px;height:16px;color:#a8a8a8;transition:transform .4s var(--ease),color .25s}
.ydw.on .ydt>.i{transform:rotate(180deg);color:#fff}
.ydv{display:flex;align-items:center;gap:9px;min-width:0}
.ydv b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ydv small{color:#9b9b9b;font-size:12px;font-weight:500;white-space:nowrap}
.ydl{max-height:0;opacity:0;overflow:clip;transform:translateY(-7px);transition:max-height .44s var(--ease),opacity .3s var(--ease),transform .44s var(--ease),margin-top .3s}
.ydw.on .ydl{max-height:300px;opacity:1;transform:none;margin-top:9px}
.ydc{display:flex;flex-direction:column;gap:3px;padding:6px;border-radius:13px;background:#ffffff0a;border:1px solid #ffffff17;box-shadow:0 14px 34px #0007,inset 0 1px 0 #ffffff0f}
.ydc>*{opacity:0;transform:translateY(-5px);transition:opacity .3s var(--ease),transform .36s var(--ease),background .2s}
.ydw.on .ydc>*{opacity:1;transform:none}
.ydw.on .ydc>*:nth-child(1){transition-delay:.045s}
.ydw.on .ydc>*:nth-child(2){transition-delay:.085s}
.ydw.on .ydc>*:nth-child(3){transition-delay:.125s}
.ydw.on .ydc>*:nth-child(4){transition-delay:.165s}
.ydw.on .ydc>*:nth-child(5){transition-delay:.205s}
.ydw.on .ydc>*:nth-child(6){transition-delay:.245s}
.sfl{display:grid;place-items:center;width:25px;height:19px;border-radius:5px;background:#ffffff1a;color:#e0e0e0;font-size:10px;font-weight:700;letter-spacing:.04em;font-style:normal;flex:none}
.dt{width:7px;height:7px;border-radius:50%;background:#3ddc84;flex:none;box-shadow:0 0 7px #3ddc8480}
.dt.mid{background:#e8c14a;box-shadow:0 0 7px #e8c14a80}.dt.low{background:#e8764a;box-shadow:0 0 7px #e8764a80}
.setpop .ysrv,.setpop .yrs{display:flex;align-items:center;gap:10px;width:100%;padding:10px 11px;border-radius:9px;font-size:14px;text-align:left}
.setpop .ysrv{justify-content:flex-start}
.setpop .yrs{justify-content:space-between;font-size:14.5px}
.setpop .ysrv:hover,.setpop .yrs:hover{background:#ffffff1c}
.setpop .ysrv.sel,.setpop .yrs.sel{background:#ffffff12}
.setpop .ysrv b{font-weight:600}
.setpop .ysrv .ping{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:#9b9b9b;font-size:12px;font-weight:500;white-space:nowrap}
.yskp{position:absolute;z-index:4;right:28px;bottom:130px;opacity:0;transform:translateY(14px) scale(.96);pointer-events:none;transition:opacity .35s,transform .45s var(--ease),bottom .4s var(--ease)}
.yskp.on{opacity:1;transform:none;pointer-events:auto}
.ply:not(.ui) .yskp{bottom:40px}
.yskp{padding:12px 28px;border:2px solid #fff;background:#0009;font-size:17px;font-weight:600;border-radius:4px;transition:opacity .35s,transform .45s var(--ease),bottom .4s var(--ease),background .2s,color .2s}.yskp:hover{background:#fff;color:#000}
.ply.pop .yskp{opacity:0;pointer-events:none;transform:translateY(14px) scale(.96)}
.ysp{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;border:4px solid #ffffff33;border-top-color:var(--red);opacity:0;pointer-events:none;z-index:2;transition:opacity .25s}.ysp.on{opacity:1;animation:ysp .8s linear infinite}@keyframes ysp{to{transform:rotate(360deg)}}
.ytt{position:absolute;left:28px;top:90px;z-index:4;padding:8px 14px;background:#000c;border:1px solid #ffffff26;border-radius:6px;font-size:14px;font-weight:600;opacity:0;pointer-events:none}.ytt.go{animation:ytt 2.2s var(--ease)}@keyframes ytt{0%{opacity:0;transform:translateY(-8px)}12%,80%{opacity:1;transform:none}100%{opacity:0}}
@media (max-width:700px){.yc,.ytm{display:none}.ybot,.ytop{padding-left:12px;padding-right:12px}.ybt{width:40px;height:40px}}
@media (max-width:1180px){nav{gap:12px}.links a{padding:8px 9px;font-size:13px}.search.open{width:230px;min-width:196px}.search.open input{font-size:13.5px}}
@media (max-width:1100px){:root{--n:4}.links a:nth-child(n+7){display:none}}
@media (max-width:800px){:root{--n:3}.links a:nth-child(n+6){display:none}.search.open{width:210px;min-width:180px}.hc p{font-size:15px}}
@media (max-width:620px){:root{--n:2;--pad:16px}.links a:nth-child(n+5){display:none}.search.open{width:190px;min-width:150px}.hc{width:92%}.mbd{grid-template-columns:1fr;padding:0 20px 30px}.mo{left:20px;right:20px}.ml{grid-template-columns:repeat(2,1fr)}.th{width:100px}.logo{font-size:20px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;transition-delay:0s!important}}

/* ============================================================
   EVILNETFLIX · EXTENSION LAYER
   Browse / Filter · Search · Account · Nav dropdowns · Transitions
   Desktop-first. Semua easing/animasi mengikuti bahasa gerak
   halaman Home: bouncy spring + blurry fade + morphing.
   ============================================================ */

:root{
  --spring2:cubic-bezier(.34,1.56,.64,1);      /* bouncy */
  --spring3:cubic-bezier(.2,1.4,.45,1);        /* bouncy halus */
  --grn:#46d369;
  --card:#1f1f1f;
  --card2:#242424;
  --line:#ffffff1f;
  --line2:#ffffff38;
}

button:focus-visible,a:focus-visible,input:focus-visible,.fopt:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:8px}

/* ============================================================
   1. PAGE TRANSITION SHELL
   ============================================================ */
/* will-change hanya dipasang sesaat sebelum halaman ditinggalkan:
   mempromosikan seluruh halaman jadi layer permanen mahal (memori +
   raster ulang) dan tidak perlu saat idle. */
#view{transition:opacity .3s var(--soft),filter .3s var(--soft),transform .34s var(--soft)}
/* Pages with a page header start below the fixed nav (home has its own hero). */
body:not([data-page="home"]) #view{padding-top:90px}
@media (min-width:1900px){body:not([data-page="home"]) #view{padding-top:0}}
body.leaving #view{opacity:0;filter:blur(12px);transform:translateY(-12px) scale(.994);will-change:opacity,filter,transform}
body.leaving{pointer-events:none}
.pbar{position:fixed;left:0;right:0;top:0;height:3px;z-index:200;pointer-events:none;opacity:0;transition:opacity .3s var(--soft)}
.pbar.on{opacity:1}
.pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#b3000c,var(--red));box-shadow:0 0 14px #e50914cc;transition:width .55s var(--soft)}

@keyframes rise{from{opacity:0;transform:translateY(16px);filter:blur(12px)}to{opacity:1;transform:none;filter:none}}
@keyframes riseSm{from{opacity:0;transform:translateY(9px) scale(.96);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes barIn{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
@keyframes chipIn{from{opacity:0;transform:scale(.7) translateY(6px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes popIn{from{opacity:0;transform:translateY(14px) scale(.94);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}

.anim{animation:rise .62s var(--soft) both;animation-delay:var(--ad,0ms)}
.anim-s{animation:riseSm .5s var(--spring3) both;animation-delay:var(--ad,0ms)}
.pop-in{animation:popIn .5s var(--spring3) both;animation-delay:var(--ad,0ms)}

@media (prefers-reduced-motion:reduce){
  #view,body.leaving #view{transition:none;filter:none;transform:none}
  body.leaving #view{opacity:1}
}

/* ============================================================
   2. NAV — tombol bulat, badge, dropdown (notifikasi & akun)
   ============================================================ */
.nbtn{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;transition:background .3s,transform .5s var(--spring2)}
.nbtn:hover{background:#ffffff1c;transform:scale(1.1)}
.nbtn:active{transform:scale(.94)}
.bdg{position:absolute;top:-2px;right:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--red);font-size:11px;font-weight:800;line-height:17px;text-align:center;box-shadow:0 0 0 2px #000;transform-origin:center;transition:transform .55s var(--spring2),opacity .3s}
.bdg.zero{transform:scale(0);opacity:0}

.ava{position:relative}
.ava b{cursor:pointer}
.ava .cv{width:14px;height:14px;transition:transform .5s var(--spring2)}
.ava.on .cv{transform:rotate(180deg)}
.ava.on b{transform:scale(1.1) rotate(-5deg)}

.dd{position:relative}
.ddp{position:absolute;top:calc(100% + 16px);right:0;z-index:70;min-width:340px;padding:10px;border-radius:12px;
  background:#141414f2;border:1px solid var(--line);box-shadow:0 22px 60px #000d,0 2px 0 #ffffff0d inset;
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  opacity:0;transform:translateY(-12px) scale(.94);filter:blur(10px);pointer-events:none;transform-origin:100% 0;
  transition:opacity .26s var(--soft),transform .46s var(--spring3),filter .26s var(--soft),visibility 0s .3s;visibility:hidden}
.ddp.on{opacity:1;transform:none;filter:none;pointer-events:auto;visibility:visible;transition:opacity .26s var(--soft),transform .46s var(--spring3),filter .26s var(--soft),visibility 0s}
.ddp::before{content:"";position:absolute;top:-7px;right:22px;width:13px;height:13px;background:#141414;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg);border-radius:2px}
/* layar pendek: dropdown selalu bisa digulir, item terakhir tidak pernah terpotong */
@media (max-height:640px){
  .ddp{max-height:calc(100vh - 96px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3d3d3d transparent}
  .ddp::before{display:none}
}

.ddh{display:flex;align-items:center;justify-content:space-between;padding:8px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.ddh h4{font-size:15px;font-weight:700}
.ddh button{font-size:12.5px;font-weight:600;color:#b3b3b3;transition:color .25s,transform .4s var(--spring2)}
.ddh button:hover{color:#fff;transform:translateX(2px)}

.ddi{display:flex;gap:12px;align-items:center;width:100%;padding:10px 12px;border-radius:8px;text-align:left;transition:background .26s,transform .45s var(--spring3)}
.ddi:hover{background:#ffffff14;transform:translateX(4px)}
.ddi .i{width:19px;height:19px;color:#d2d2d2}
.ddi span{font-size:14.5px;font-weight:500}
.ddi small{display:block;font-size:12px;color:#8f8f8f;margin-top:2px;font-weight:400}
.ddp hr{border:0;border-top:1px solid var(--line);margin:8px 6px}

/* notifikasi */
.ntf{position:relative;display:flex;gap:12px;align-items:flex-start;width:100%;padding:10px 12px;border-radius:9px;text-align:left;transition:background .26s,transform .45s var(--spring3)}
.ntf:hover{background:#ffffff14;transform:translateY(-2px)}
.ntf .th2{width:74px;flex:none;border-radius:5px;overflow:clip}
.ntf .th2 .pic{border-radius:0}
.ntf .th2 .pt{display:none}
.ntf .tl{display:block;font-size:13.5px;line-height:1.4;color:#e5e5e5}
.ntf b{font-weight:600}
.ntf em{font-style:normal;display:block;font-size:12px;color:#8a8a8a;margin-top:4px}
.ntf .dot{position:absolute;left:2px;top:16px;width:6px;height:6px;border-radius:50%;background:var(--red);opacity:0;transform:scale(.4);transition:opacity .3s,transform .5s var(--spring2)}
.ntf.u .dot{opacity:1;transform:none}
.ntf.u .tl{color:#fff;font-weight:500}
.ntf.seen{opacity:.62}
.dde{display:flex;align-items:center;gap:10px;padding:16px 12px;color:#8f8f8f;font-size:13.5px}

/* akun */
.ddp.acc{min-width:270px;padding:8px}
.pfs{display:flex;align-items:center;gap:8px;padding:8px 10px 10px}
.pfs .pf{width:36px;height:36px;border-radius:6px;flex:none;display:grid;place-items:center;font-weight:700;font-size:15px;
  background:linear-gradient(135deg,var(--a,#ff8a3d),var(--b,#b3000c));transition:transform .5s var(--spring2),box-shadow .3s}
.pfs .pf:hover{transform:scale(1.12) translateY(-3px);box-shadow:0 8px 18px #0009}
.pfs .pf.on{box-shadow:0 0 0 2px #fff,0 6px 16px #0007}
.pfs .pf.add{background:#ffffff1c;color:#cfcfcf;font-size:20px;font-weight:500}
.pfs .pf.add.on{box-shadow:none}
.pfs-t{padding:0 12px 10px}
.pfs-t b{font-size:14.5px;display:block}
.pfs-t small{display:block;font-size:12px;color:#8f8f8f;margin-top:3px}
.accnote{padding:4px 12px 10px;font-size:11.5px;color:#7d7d7d;line-height:1.5}

/* ============================================================
   3. PAGE HEADER
   ============================================================ */
.phead{padding:30px var(--pad) 16px;position:relative}
.crumbs{display:flex;gap:8px;align-items:center;font-size:13px;color:#8f8f8f;margin-bottom:10px}
.crumbs a{color:#8f8f8f;transition:color .25s}
.crumbs a:hover{color:#fff}
.crumbs b{color:#e5e5e5;font-weight:600}
.phead h1{font-size:clamp(30px,3.4vw,46px);font-weight:800;letter-spacing:-.025em;line-height:1.04}
.phead .sub{color:#b3b3b3;font-size:14.5px;margin-top:10px;max-width:70ch;line-height:1.55}
.phead .sub b{color:#fff;font-weight:600}
/* Search page uses the top-nav search field; the duplicate big box is gone. */
body[data-page="search"] .sbig,body[data-page="search"] .shint{display:none}

/* ============================================================
   4. FILTER BAR + POPOVER + CHIPS
   ============================================================ */
.fbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px var(--pad) 4px;position:sticky;top:68px;z-index:40;
  background:linear-gradient(180deg,var(--bg) 62%,transparent);padding-bottom:14px}
.fdd{position:relative}
.fbtn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px;border-radius:99px;font-size:14px;font-weight:600;color:#dcdcdc;
  background:#1c1c1c;border:1px solid var(--line);transition:background .28s,border-color .28s,color .28s,transform .5s var(--spring2)}
.fbtn:hover{background:#292929;border-color:var(--line2);transform:translateY(-1px)}
.fbtn.on{background:#fff;color:#000;border-color:#fff}
.fbtn .i{width:16px;height:16px;opacity:.85}
.fbtn>.i:last-child{width:13px;height:13px;opacity:.6}
.fbtn .cnt{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center}
.fbtn.on .cnt{background:var(--red)}

.fpop{position:absolute;top:calc(100% + 12px);left:0;z-index:60;min-width:290px;max-height:min(64vh,420px);overflow:auto;padding:10px;border-radius:12px;
  background:#141414f5;border:1px solid var(--line);box-shadow:0 22px 60px #000d;
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  opacity:0;transform:translateY(-12px) scale(.95);filter:blur(10px);pointer-events:none;transform-origin:0 0;
  transition:opacity .26s var(--soft),transform .44s var(--spring3),filter .26s var(--soft),visibility 0s .3s;visibility:hidden;scrollbar-width:thin}
.fpop.on{opacity:1;transform:none;filter:none;pointer-events:auto;visibility:visible;transition:opacity .26s var(--soft),transform .44s var(--spring3),filter .26s var(--soft),visibility 0s}
.fpop.r{left:auto;right:0;transform-origin:100% 0}
.fpop h4{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:#8a8a8a;font-weight:700;padding:6px 12px 8px}
.fopt{display:flex;align-items:center;gap:11px;width:100%;padding:9px 12px;border-radius:8px;font-size:14px;text-align:left;transition:background .24s,transform .4s var(--spring3)}
.fopt:hover{background:#ffffff12;transform:translateX(3px)}
.fopt em{font-style:normal;margin-left:auto;font-size:12.5px;color:#8a8a8a;font-variant-numeric:tabular-nums}
.fopt.sel{color:#fff;font-weight:600}
.ck{width:19px;height:19px;flex:none;border-radius:5px;border:2px solid #6b6b6b;display:grid;place-items:center;transition:background .26s,border-color .26s,transform .45s var(--spring2)}
.ck .i{width:12px;height:12px;stroke-width:3.4;opacity:0;transform:scale(.4);transition:opacity .2s,transform .4s var(--spring2)}
.ck.on{background:var(--red);border-color:var(--red)}
.ck.on .i{opacity:1;transform:none}
.ck.rad{border-radius:50%}

.chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px var(--pad) 0}
.fchip{display:inline-flex;align-items:center;gap:6px;height:33px;padding:0 4px 0 14px;border-radius:99px;background:#ffffff17;border:1px solid var(--line);
  font-size:13px;font-weight:600;animation:chipIn .42s var(--spring2) both;animation-delay:var(--ad,0ms)}
.fchip span{color:#a5a5a5;font-weight:500}
.fchip button{width:25px;height:25px;border-radius:50%;display:grid;place-items:center;transition:background .24s,transform .45s var(--spring2)}
.fchip button:hover{background:#ffffff2e;transform:rotate(90deg) scale(1.12)}
.fchip button .i{width:13px;height:13px}
.freset{height:33px;padding:0 16px;border-radius:99px;font-size:13px;font-weight:600;color:#b3b3b3;border:1px dashed var(--line2);transition:color .25s,border-color .25s,transform .45s var(--spring2)}
.freset:hover{color:#fff;border-color:#fff;transform:translateY(-1px)}

/* ============================================================
   5. BROWSE GRID
   ============================================================ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:24px 16px;padding:18px var(--pad) 0}
.gc{position:relative;animation:rise .58s var(--soft) both;animation-delay:var(--ad,0ms)}
.gc .poster{aspect-ratio:16/9;border-radius:6px;transition:transform .5s var(--spring3),box-shadow .4s}
.gc:hover .poster{transform:translateY(-4px) scale(1.02);box-shadow:0 16px 34px #000a}
.gc .gm{cursor:pointer}
.gm .note{color:#8f8f8f;font-style:italic}
.sgroup .grid{padding:0}
.sgroup .empty{padding-left:0;padding-right:0}
.gc .lab{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;border-radius:0 0 5px 5px;pointer-events:none;
  background:linear-gradient(0deg,#000d,#0000);font-size:13px;font-weight:600;line-height:1.25;
  opacity:0;transform:translateY(8px);transition:opacity .3s,transform .45s var(--soft)}
.gc:hover .lab{opacity:1;transform:none}
.gc .rk{position:absolute;left:-6px;top:-6px;z-index:2;font-size:12px;font-weight:800;padding:2px 7px;border-radius:4px;background:var(--red)}
.gm{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:12.5px;color:#a9a9a9;flex-wrap:wrap}
.gm .mt{color:var(--grn);font-weight:700}
.gm .tp{color:#7f7f7f;transition:color .25s}
.gc:hover .gm .tp{color:#cfcfcf}
.gm .dot{width:3px;height:3px;border-radius:50%;background:#5c5c5c}

/* ---- 5b. Grid format 16:9 (Shows / Movies / New & Popular / My List) ----
   Poster lanskap 16:9, 4 kartu per baris. Class-nya "land" (bukan "wide")
   supaya tidak bentrok dengan .wide{grid-column:1/-1} milik halaman Search. */
.grid.land{grid-template-columns:repeat(2,1fr);gap:20px 14px}
@media (min-width:520px){.grid.land{grid-template-columns:repeat(3,1fr)}}
@media (min-width:700px){.grid.land{grid-template-columns:repeat(4,1fr);gap:24px 18px}}
.gc.land .poster{aspect-ratio:16/9;border-radius:6px}
.gc.land .pt{font-size:max(12px,7cqw);left:6cqw;bottom:6cqw}
.gc.land .lab{padding:22px 9px 8px;font-size:13px}
.gc.land .gm{margin-top:9px}

.empty{padding:70px var(--pad);text-align:center;animation:riseSm .5s var(--spring3) both}
.empty .ico{width:62px;height:62px;margin:0 auto 18px;border-radius:50%;background:#1f1f1f;display:grid;place-items:center;color:#8a8a8a}
.empty .ico .i{width:28px;height:28px}
.empty h3{font-size:21px;margin-bottom:8px}
.empty p{color:#a3a3a3;font-size:14.5px;max-width:52ch;margin:0 auto 20px;line-height:1.6}

.loadmore{display:flex;justify-content:center;padding:34px 0 0}
.lm{height:48px;padding:0 34px;border-radius:99px;border:1px solid var(--line2);font-size:15px;font-weight:600;transition:background .3s,border-color .3s,transform .5s var(--spring2)}
.lm:hover{background:#ffffff17;border-color:#fff;transform:translateY(-2px) scale(1.02)}
.lm:active{transform:scale(.96)}
.lm[disabled]{opacity:.55;cursor:default;transform:none}
.lm.tmdb{border-color:#e5091455;background:#e5091412}
.lm.tmdb:hover{background:#e5091426;border-color:var(--red)}
.tmdbnote{text-align:center;color:#a3a3a3;font-size:13px;margin:14px auto 0;max-width:60ch}
.skel{aspect-ratio:16/9;border-radius:6px;background:linear-gradient(100deg,#1c1c1c 30%,#2a2a2a 50%,#1c1c1c 70%);background-size:220% 100%;animation:shim 1.15s linear infinite}
@keyframes shim{to{background-position:-120% 0}}

/* ============================================================
   6. SEARCH PAGE
   ============================================================ */
.sbig{display:flex;align-items:center;gap:14px;height:66px;margin-top:6px;padding:0 8px 0 20px;border-radius:14px;
  background:#1b1b1b;border:1px solid var(--line);transition:border-color .3s,box-shadow .4s,background .3s}
.sbig:focus-within{border-color:#fff;background:#202020;box-shadow:0 0 0 4px #ffffff12,0 12px 40px #0008}
.sbig>.i{width:24px;height:24px;color:#8f8f8f;flex:none;transition:color .3s}
.sbig:focus-within>.i{color:#fff}
.sbig input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font:inherit;font-size:22px;font-weight:600}
.sbig input:focus-visible{outline:0}
.sbig input::placeholder{color:#6f6f6f;font-weight:500}
.sclear{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;opacity:0;transform:scale(.7);pointer-events:none;
  transition:opacity .25s,transform .45s var(--spring2),background .25s}
.sbig.has .sclear{opacity:1;transform:none;pointer-events:auto}
.sclear:hover{background:#ffffff1c}
.shint{display:flex;gap:8px;align-items:center;margin-top:14px;font-size:12.5px;color:#7d7d7d}
.kbd{padding:2px 7px;border-radius:5px;background:#ffffff14;border:1px solid var(--line);font-size:11.5px;font-weight:600;color:#cfcfcf}

.sgroup{padding:34px var(--pad) 0;animation:rise .55s var(--soft) both;animation-delay:var(--ad,0ms)}
.shdr{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.shdr h2{font-size:19px;font-weight:700}
.shdr em{font-style:normal;font-size:13px;color:#8a8a8a}

.recent{display:flex;flex-wrap:wrap;gap:10px}
.rc{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 14px;border-radius:99px;background:#1f1f1f;border:1px solid var(--line);
  font-size:14px;transition:background .26s,transform .45s var(--spring2),border-color .26s;animation:chipIn .4s var(--spring2) both;animation-delay:var(--ad,0ms)}
.rc:hover{background:#2b2b2b;border-color:var(--line2);transform:translateY(-2px)}
.rc .i{width:16px;height:16px;color:#8f8f8f}
.rc b{margin-left:auto;font-weight:500;color:#8a8a8a;font-size:12.5px;padding-left:6px}
.rc:hover b{color:#c9c9c9}
.rc .rm{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;opacity:0;transition:opacity .25s,background .25s,transform .4s var(--spring2)}
.rc:hover .rm{opacity:1}
.rc .rm:hover{background:#ffffff2b;transform:rotate(90deg)}

.gtop{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px 14px}
.gt2{position:relative;cursor:pointer}
.gt2 .poster{aspect-ratio:16/9;border-radius:6px;transition:transform .5s var(--spring3)}
.gt2:hover .poster{transform:scale(1.04) translateY(-3px)}
.gt2 .n{position:absolute;left:-8px;bottom:-16px;font-size:74px;font-weight:800;line-height:.8;letter-spacing:-.07em;color:#0b0b0b;
  -webkit-text-stroke:3px #6f6f78;user-select:none;pointer-events:none;transition:color .3s,-webkit-text-stroke-color .3s}
.gt2:hover .n{-webkit-text-stroke-color:#fff}
.gt2 .cap{margin-top:14px;font-size:13px;color:#b3b3b3;line-height:1.35}

.ppl{display:flex;flex-wrap:wrap;gap:22px}
.pp{width:124px;display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;transition:transform .5s var(--spring2)}
.pp:hover{transform:translateY(-5px)}
.pp .av2{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;font-size:30px;font-weight:700;color:#fff;
  background:radial-gradient(80% 100% at 30% 0,hsl(var(--h) 62% 46%),hsl(calc(var(--h) + 35) 45% 16%));
  box-shadow:0 10px 26px #0007,0 0 0 1px #ffffff1a inset}
.pp b{font-size:13.5px;font-weight:600}
.pp small{font-size:11.5px;color:#8a8a8a}

.gtile{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:11px;background:#1d1d1d;border:1px solid var(--line);
  transition:background .28s,transform .5s var(--spring2),border-color .28s;animation:riseSm .5s var(--spring3) both;animation-delay:var(--ad,0ms)}
.gtile:hover{background:#272727;border-color:var(--line2);transform:translateY(-3px)}
.gtile i{width:44px;height:44px;border-radius:9px;display:grid;place-items:center;font-size:18px;font-weight:800;color:#000;
  background:linear-gradient(135deg,hsl(var(--h) 78% 62%),hsl(calc(var(--h) + 40) 68% 44%))}
.gtile b{font-size:15px;font-weight:600}
.gtile small{display:block;color:#8a8a8a;font-size:12.5px;margin-top:3px}
.gtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.hl{background:transparent;color:#fff;font-weight:800;box-shadow:0 2px 0 0 var(--red)}
.seemore{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:14px;font-weight:600;color:#cfcfcf;transition:color .25s,gap .3s}
.seemore:hover{color:#fff;gap:12px}

/* ============================================================
   7. ACCOUNT PAGE
   ============================================================ */
.acct{display:grid;grid-template-columns:236px 1fr;gap:54px;padding:2px var(--pad) 40px;align-items:start}
.anav{position:sticky;top:92px;display:flex;flex-direction:column;gap:1px;max-height:calc(100vh - 124px);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#3d3d3d transparent}
.anav .glab{font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#6b6b6b;padding:20px 13px 6px}
.anav .glab:first-child{padding-top:2px}
.anav button{position:relative;text-align:left;padding:9px 13px;border-radius:8px;font-size:14px;color:#a6a6a6;
  transition:color .25s,background .25s}
.anav button:hover{color:#fff;background:#ffffff0b}
.anav button.on{color:#fff;font-weight:600;background:#ffffff12}
.anav button.on::before{content:"";position:absolute;left:0;top:50%;width:2.5px;height:17px;margin-top:-8.5px;border-radius:2px;background:var(--red);animation:barIn .5s var(--spring2) both}
.anav button.ghost{margin-top:20px;color:#767676;font-size:13px}
.anav button.ghost:hover{color:#eaeaea}
.anav .glab+button{color:#b0b0b0}

.apane{min-width:0}
.pane{display:none}
.pane.on{display:block;animation:riseSm .52s var(--spring3) both}
.pane>h2{font-size:25px;font-weight:700;letter-spacing:-.022em;margin-bottom:7px}
.pane>p.lead{color:#9e9e9e;font-size:14px;line-height:1.65;margin-bottom:22px;max-width:64ch}

.card2{background:#181818;border:1px solid #262626;border-radius:12px;padding:18px 20px;margin-bottom:12px;transition:border-color .3s}
.card2:hover{border-color:#313131}
.card2 h3{font-size:15.5px;font-weight:700;letter-spacing:-.008em;margin-bottom:3px}
.card2>p{color:#9a9a9a;font-size:13.5px;line-height:1.6}
.rowline{display:flex;align-items:center;gap:18px;padding:15px 0;border-bottom:1px solid #242424}
.rowline:last-child{border-bottom:0;padding-bottom:0}
.rowline:first-child{padding-top:0}
.rowline .gr{flex:1;min-width:0}
.rowline b{font-size:15px;font-weight:600;display:block}
.rowline small{display:block;color:#8f8f8f;font-size:13px;margin-top:4px;line-height:1.5}
.rowline .val{font-size:14.5px;color:#dcdcdc;font-weight:500}
.btn-s{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 18px;border-radius:8px;font-size:13.5px;font-weight:600;
  border:1px solid var(--line2);color:#e5e5e5;transition:background .28s,border-color .28s,transform .5s var(--spring2)}
.btn-s:hover{background:#ffffff16;border-color:#fff;transform:translateY(-2px)}
.btn-s:active{transform:scale(.96)}
.btn-s.pri{background:#fff;color:#000;border-color:#fff}
.btn-s.pri:hover{background:#e6e6e6}
.btn-s.dgr{color:#ff6b6b;border-color:#ff6b6b55}
.btn-s.dgr:hover{background:#ff6b6b1f;border-color:#ff6b6b}
.btn-s.sm{height:33px;padding:0 14px;font-size:12.5px}
.btnline{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

.sw{width:52px;height:30px;border-radius:99px;background:#4a4a4a;position:relative;flex:none;cursor:pointer;transition:background .38s var(--soft)}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px #0006;
  transition:transform .52s var(--spring2)}
.sw.on{background:var(--red)}
.sw.on::after{transform:translateX(22px)}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.plan{position:relative;padding:20px;border-radius:12px;background:var(--card);border:1px solid var(--line);cursor:pointer;overflow:clip;
  transition:border-color .3s,transform .55s var(--spring2),background .3s,box-shadow .4s}
.plan:hover{transform:translateY(-4px);border-color:var(--line2)}
.plan.sel{border-color:var(--red);box-shadow:0 0 0 1px var(--red),0 16px 40px #e5091422}
.plan .tick{position:absolute;right:14px;top:14px;width:24px;height:24px;border-radius:50%;background:var(--red);display:grid;place-items:center;
  opacity:0;transform:scale(.4) rotate(-40deg);transition:opacity .3s,transform .5s var(--spring2)}
.plan.sel .tick{opacity:1;transform:none}
.plan .tick .i{width:13px;height:13px;stroke-width:3.4}
.plan h4{font-size:15px;font-weight:700}
.plan .pr{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 5px;font-size:24px;font-weight:800;letter-spacing:-.028em;margin:10px 0 2px;line-height:1.15}
.plan .pr small{font-size:13px;font-weight:600;color:#9a9a9a;letter-spacing:0}
.plan .q{font-size:12.5px;color:#9a9a9a;margin-bottom:14px}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:13.5px;color:#cfcfcf}
.plan li{display:flex;gap:9px;align-items:flex-start}
.plan li .i{width:15px;height:15px;color:var(--grn);flex:none;margin-top:3px}

.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:14px;margin-bottom:10px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 10px 16px;border-radius:12px;
  border:1px solid transparent;cursor:pointer;transition:background .28s,border-color .28s}
.tile:hover{background:#ffffff0b;border-color:#2a2a2a}
.tile.cur{background:#ffffff0d;border-color:#333}
.tile .av2{width:84px;height:84px;border-radius:10px;display:grid;place-items:center;font-size:30px;font-weight:700;
  box-shadow:0 12px 28px #0007,0 0 0 1px #ffffff1f inset;transition:transform .55s var(--spring2),box-shadow .4s}
.tile:hover .av2{transform:scale(1.05) rotate(-2deg)}
.tile.cur .av2{box-shadow:0 0 0 2px var(--red),0 12px 26px #0008}
.tile b{font-size:13.5px;font-weight:600}
.tile small{font-size:11.5px;color:#8a8a8a}
.tile .kcur{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;letter-spacing:.03em;
  padding:3px 8px;border-radius:99px;background:var(--red);color:#fff}
.tile .kcur .i{width:11px;height:11px;stroke-width:3.4}
.tile .tedit{position:absolute;right:8px;top:8px;width:29px;height:29px;border-radius:8px;display:grid;place-items:center;
  background:#ffffff1c;color:#eaeaea;opacity:0;transform:scale(.86);
  transition:opacity .25s,transform .45s var(--spring2),background .25s,color .25s}
.tile:hover .tedit,.tile.cur .tedit,.tile:focus-within .tedit{opacity:1;transform:none}
.tile .tedit:hover{background:#fff;color:#000}
.tile .tedit .i{width:14px;height:14px}
.tile.add{background:none;border:1px dashed #333}
.tile.add:hover{background:#ffffff08;border-color:#4a4a4a}
.tile.add .av2{background:#ffffff0d;border:1px dashed #3a3a3a;color:#9a9a9a;box-shadow:none;font-size:26px}
.tile .kx{position:absolute;left:8px;top:8px;font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:4px;background:#ffffff1f;color:#cfcfcf}

/* strip profil yang sedang aktif */
.pnow{display:flex;align-items:center;gap:15px;padding:14px 18px;border-radius:12px;background:#1c1c1c;border:1px solid #2a2a2a;margin-bottom:20px}
.pnow .av2{width:46px;height:46px;border-radius:9px;display:grid;place-items:center;font-size:19px;font-weight:700;flex:none;
  box-shadow:0 8px 18px #0007,0 0 0 1px #ffffff1f inset}
.pnow .gr{min-width:0}
.pnow b{display:block;font-size:15px;font-weight:600}
.pnow small{display:block;color:#8f8f8f;font-size:12.5px;margin-top:3px}
.pnote{color:#8f8f8f;font-size:12.5px;margin:0 0 18px}

/* form edit / tambah profil */
.pedit{display:none}
.pedit.on{display:block;margin:0 0 16px;animation:riseSm .46s var(--spring3) both}
.pform{display:flex;flex-direction:column;gap:16px;max-width:540px;padding:20px 22px;border-radius:12px;background:#161616;border:1px solid #333}
.pform h3{font-size:16px;font-weight:700;letter-spacing:-.01em}
.pfld{display:flex;flex-direction:column;gap:9px}
.pfld.row{flex-direction:row;align-items:center;justify-content:space-between;gap:22px}
.pfld>span{font-size:13px;font-weight:600;color:#a5a5a5}
.pfld>span small{display:block;font-weight:400;color:#7a7a7a;font-size:12px;margin-top:3px;line-height:1.5}
.pfld input{height:42px;padding:0 14px;border-radius:9px;background:#0e0e0e;border:1px solid #333;color:#fff;
  font:inherit;font-size:14.5px;outline:0;transition:border-color .25s,background .25s}
.pfld input:focus{border-color:#fff;background:#171717}
.pcs{display:flex;gap:9px;flex-wrap:wrap}
.pcc{width:34px;height:34px;border-radius:8px;transition:transform .45s var(--spring2),box-shadow .25s}
.pcc:hover{transform:translateY(-3px) scale(1.06)}
.pcc.on{box-shadow:0 0 0 2px #fff,0 0 0 4px #141414 inset}
.pact{display:flex;gap:10px;flex-wrap:wrap;padding-top:4px}

.dev{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.dev:last-child{border-bottom:0}
.dev .ic{width:44px;height:44px;border-radius:10px;background:#2b2b2b;display:grid;place-items:center;flex:none;color:#d2d2d2}
.dev .ic .i{width:21px;height:21px}
.dev .gr{flex:1;min-width:0}
.dev b{font-size:14.5px;font-weight:600;display:block}
.dev small{display:block;color:#8f8f8f;font-size:12.5px;margin-top:4px}
.tagnow{font-size:11px;font-weight:700;color:#000;background:var(--grn);padding:2px 7px;border-radius:4px}

.subprev{margin-top:16px;border-radius:12px;overflow:clip;background:#000;border:1px solid var(--line)}
.subprev .pic{aspect-ratio:16/9;border-radius:0}
.subprev .pt{bottom:auto;top:7cqw;opacity:.92}
.subprev .sam{position:absolute;left:0;right:0;bottom:8%;text-align:center;font-weight:600;text-shadow:0 2px 8px #000;
  transition:font-size .35s var(--soft),color .3s,background .3s,padding .3s}
.fakesel{display:flex;gap:8px;flex-wrap:wrap}
.fakesel button{height:36px;padding:0 16px;border-radius:8px;border:1px solid var(--line2);font-size:13.5px;font-weight:600;color:#dcdcdc;transition:all .3s var(--soft)}
.fakesel button:hover{border-color:#fff;background:#ffffff12}
.fakesel button.on{background:#fff;color:#000;border-color:#fff}
.bar{height:7px;border-radius:4px;background:#2e2e2e;overflow:clip;margin-top:14px}
.bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#b3000c,var(--red));transition:width .6s var(--spring3)}
.note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:10px;background:#ffffff0d;border:1px solid var(--line);margin-top:16px}
.note .i{width:18px;height:18px;color:#8f8f8f;flex:none;margin-top:2px}
.note p{font-size:13px;color:#a9a9a9;line-height:1.6}

.toast{position:fixed;left:50%;bottom:34px;z-index:250;transform:translate(-50%,26px) scale(.94);opacity:0;pointer-events:none;
  display:flex;align-items:center;gap:11px;padding:13px 22px;border-radius:99px;background:#ffffff14;border:1px solid var(--line2);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);font-size:14px;font-weight:600;box-shadow:0 16px 40px #000a;
  transition:opacity .3s var(--soft),transform .55s var(--spring2)}
.toast.on{opacity:1;transform:translate(-50%,0) scale(1)}
.toast .i{width:18px;height:18px;color:var(--grn)}

/* ============================================================
   8. FOOTER
   ============================================================ */
footer{display:block;padding:56px var(--pad) 40px;color:#8a8a8a;font-size:13.5px;line-height:1.65}
.fsoc{display:flex;gap:18px;margin-bottom:24px}
.fsoc a,.fsoc button{color:#cfcfcf;transition:color .25s,transform .45s var(--spring2)}
.fsoc a:hover,.fsoc button:hover{color:#fff;transform:translateY(-3px)}
.fsoc .i{width:22px;height:22px}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:13px 26px;max-width:1060px}
.fcols a{color:#8a8a8a;display:inline-block;width:max-content;max-width:100%;transition:color .25s,transform .45s var(--spring2)}
.fcols a:hover{color:#fff;transform:translateY(-2px)}
.fbot{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line);max-width:1060px;font-size:12.5px;color:#6f6f6f}
.flang{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border:1px solid var(--line2);border-radius:4px;color:#cfcfcf;font-size:13px;font-weight:500;transition:border-color .3s,background .3s,transform .45s var(--spring2)}
.flang:hover{border-color:#fff;background:#ffffff12;transform:translateY(-1px)}
.flang .i{width:16px;height:16px}
@media (max-width:900px){.fcols{grid-template-columns:repeat(2,1fr)}}

/* ============================================================
   9. RESPONSIVE
   ============================================================ */
@media (max-width:1240px){
  .acct{grid-template-columns:212px 1fr;gap:38px}
}
@media (max-width:1100px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}
  .ddp{min-width:310px}
}
@media (max-width:900px){
  .plans{grid-template-columns:1fr}
  /* halaman account: sidebar jadi baris teks rapi, bukan pil-pil */
  .acct{grid-template-columns:1fr;gap:0}
  .anav{position:static;flex-direction:row;flex-wrap:wrap;gap:4px 2px;max-height:none;overflow:visible;padding:0 0 12px;margin-bottom:22px;
    border-bottom:1px solid #242424}
  .anav .glab{display:none}
  .anav button{white-space:nowrap;padding:8px 12px;font-size:13.5px}
  .anav button.on::before{display:none}
  .anav button.ghost{margin:4px 0 0;padding:8px 12px;border-left:0;border-radius:8px}
}
@media (max-width:800px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:22px 11px}
  .ddp{min-width:290px}
  .sbig input{font-size:18px}
  .sbig{height:56px}
  .gt2 .n{font-size:56px}
}
@media (max-width:620px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .ddp{position:fixed;left:12px;right:12px;top:74px;min-width:0}
  .ddp::before{display:none}
  .fhead{flex-wrap:wrap}
  .gtiles{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .anav button{padding:8px 10px}
}

/* ---- penutup: aturan tambahan ---- */
a{color:inherit;text-decoration:none}
.subprev{position:relative}
.tile{position:relative}
.fchip .lb{color:#a5a5a5;font-weight:500}
.fchip .lb::after{content:":"}

/* ============================================================
   10. FINAL POLISH — EvilNetflix
   Perbaikan bug, performa render, dan skala elemen desktop.
   ============================================================ */

/* ---- 10.1 Kerapian teks judul ---- */
.lg,.phead h1,.pane>h2,.wide h3{letter-spacing:-.03em}
.gm,.fopt em,.rc b,.ytm{font-variant-numeric:tabular-nums}

/* ---- 10.2 Performa: isolasi cat ---- */
/* .pic muncul ratusan kali (carousel + grid + modal + player).
   contain:paint mengurung area raster sehingga animasi hover/scale
   tidak memaksa repaint di luar kotak. Aman karena .pic sudah
   overflow:hidden dan seluruh isinya memang di dalam kotak. */
.pic,.pv,.modal{contain:paint}
/* Beranda kini punya belasan baris carousel. content-visibility:auto
   membuat baris di luar viewport tidak dirender sama sekali; app.js
   mengukur ulang track saat baris mulai terlihat. contain-intrinsic-size
   memakai satuan tinggi baris nyata (~190-220px) supaya scroll tidak
   melompat sebelum baris pertama kali dirender. */
.row{content-visibility:auto;contain-intrinsic-size:auto 200px}

/* ---- 10.3 Bugfix ---- */
/* tombol filter jangan pernah terpotong dua baris */
.fbtn{white-space:nowrap}
/* baris setting di halaman akun tidak boleh memaksa lebar layar */
.rowline{flex-wrap:wrap;row-gap:12px}
/* switch yang read-only jangan terlihat bisa diklik */
.sw[data-ro]{pointer-events:none;opacity:.5}
/* popover filter membuka ke atas saat ruang bawah tidak cukup */
.fpop.up{top:auto;bottom:calc(100% + 12px);transform:translateY(12px) scale(.95);transform-origin:0 100%}
.fpop.up.r{transform-origin:100% 100%}
.fpop.up.on{transform:none}
/* daftar negara/ikon di footer & logo kecil */
@media (max-width:620px){.logo{font-size:19px}}

/* ---- 10.4 Skala desktop: 1500px+ (1080p & QHD) ---- */
@media (min-width:1500px){
  :root{--n:6;--gutter:clamp(44px,3.5vw,72px);--pad:var(--gutter)}
  body{padding-top:0}
  nav{height:90px;gap:26px}
  .logo{font-size:27px}
  .links a{font-size:15.5px;padding:8px 15px}
  .search.open{width:300px}
  .fbar{top:90px}
  .anav{top:110px}

  .hero{margin:104px var(--gutter) 32px;height:calc(100vh - 144px);max-height:820px;border-radius:24px}
  .hc{left:48px;bottom:48px;width:min(580px,54%)}
  .lg{font-size:clamp(38px,3.5vw,72px);margin-bottom:20px}
  .hc p{font-size:16.5px;max-width:54ch;margin-bottom:22px}
  .pb,.ib{height:46px;font-size:17px;padding:0 26px}
  .nb{right:36px;bottom:44px;font-size:13.5px;padding:8px 14px}

  .phead{padding:38px var(--pad) 20px}
  .phead h1{font-size:clamp(36px,2.7vw,52px)}
  .phead .sub{font-size:15.5px;margin-top:12px}
  .crumbs{font-size:13.5px;margin-bottom:12px}

  .grid{grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:30px 16px;padding-top:22px}
  .gm{font-size:13.5px;margin-top:11px}
  .gc .lab{font-size:13.5px}

  .fbtn{height:42px;font-size:14.5px;padding:0 17px}
  .fchip,.freset{height:35px;font-size:13.5px}
  .fpop{min-width:320px}

  .sbig{height:74px;padding-left:24px}
  .sbig input{font-size:25px}
  .shdr h2{font-size:21px}
  .gtop{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
  .gt2 .n{font-size:84px}
  .gtile{padding:18px 20px}
  .gtile i{width:48px;height:48px;font-size:19px}
  .gtiles{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
  .pp{width:140px}
  .pp .av2{width:104px;height:104px;font-size:34px}
  .tile .av2{width:96px;height:96px;font-size:32px}

  .acct{grid-template-columns:262px 1fr;gap:58px}
  .anav .glab{font-size:11px;padding:22px 14px 7px}
  .anav button{font-size:14.5px;padding:10px 14px}
  .pane>h2{font-size:28px}
  .pane>p.lead{font-size:14.5px}
  .card2{padding:20px 24px}
  .rowline b{font-size:15px}
  .rowline .val{font-size:14.5px}
  .plan .pr{font-size:32px}
  .pnow .av2{width:50px;height:50px}
  .subprev .sam{font-size:26px}

  .ddp{min-width:368px}
  .ntf .th2{width:82px}
  .toast{font-size:15px;padding:14px 24px}
  footer{padding:72px var(--pad) 46px;font-size:14px}
}

/* ---- 10.5 Skala desktop: 1900px+ (4K / ultrawide) ---- */
@media (min-width:1900px){
  :root{--n:7;--pad:clamp(40px,3.2vw,88px)}
  body{padding-top:78px}
  nav{height:78px;gap:30px}
  .logo{font-size:29px}
  .fbar{top:78px}
  .anav{top:104px}
  .hero{height:clamp(470px,72vh,820px)}
  .hc{left:44px;bottom:44px;width:min(620px,50%)}
  .lg{font-size:clamp(42px,3.1vw,86px)}
  .grid{grid-template-columns:repeat(auto-fill,minmax(224px,1fr))}
  .phead h1{font-size:clamp(40px,2.5vw,58px)}
  .row h2{font-size:24px;line-height:28px}
  .ddp{min-width:392px}
}

/* ---- 10.6 Skala desktop: 2400px+ ---- */
@media (min-width:2400px){
  :root{--n:8}
  .grid{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
}