/* =========================================================
   BLUEVER YTS — Aurora theme (skeleton)
   ========================================================= */
:root {
  --bg: #070610;
  --panel: rgba(255,255,255,.045);
  --panel-2: rgba(255,255,255,.07);
  --stroke: rgba(255,255,255,.10);
  --stroke-strong: rgba(255,255,255,.22);
  --text: #f2eefe;
  --muted: #a99fca;
  --aqua: #2ec4f0;
  --blue: #1e88e8;
  --violet: #7d34ba;
  --pink: #ef2f3d;
  --amber: #ffcf8f;
  --radius: 18px;
  /* Halaman media: grid memakai ruang kiri-kanan, tidak dikurung di kolom
     1220px yang menyisakan margin kosong lebar di layar besar. Dipakai 100%
     (bukan satuan vw) supaya layar sedang tetap selebar dulu dan tidak ada
     scrollbar horizontal; napas kiri-kanan datang dari padding main. */
  --maxw: min(100%, 2040px);
  --maxw-text: 1220px;                 /* untuk blok teks yang tetap perlu batas baca */
  /* Lebar minimum kartu ikut lebar layar: layar kecil tetap dapat 2 kolom,
     layar lebar dapat poster besar — bukan sekadar kolom yang makin banyak.
     Lantainya naik bertahap lewat media query di bawah. */
  --card-min: clamp(150px, 15vw, 250px);
  --ease: cubic-bezier(.16,1,.3,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Space Grotesk', system-ui, sans-serif; background: var(--bg); color: var(--text);
  line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
::selection { background: rgba(125,52,186,.4); color: #fff; }
a { color: inherit; text-decoration: none; }
input, select, button { font-family: inherit; }

/* aurora bg */
.net-canvas { position: fixed; inset: 0; z-index: -3; width: 100%; height: 100%; opacity: .45; mix-blend-mode: screen; }
.aurora { position: fixed; inset: -20vh -10vw; z-index: -4; overflow: hidden; filter: blur(72px) saturate(140%); pointer-events: none; }
.blob { position: absolute; border-radius: 50%; opacity: .5; mix-blend-mode: screen; will-change: transform; }
.b1 { width: 44vw; height: 44vw; left: -6vw; top: -6vh; background: radial-gradient(circle at 30% 30%, var(--blue), transparent 62%); animation: d1 24s var(--ease) infinite; }
.b2 { width: 40vw; height: 40vw; right: -8vw; top: 4vh; background: radial-gradient(circle at 60% 40%, var(--violet), transparent 62%); animation: d2 28s var(--ease) infinite; }
.b3 { width: 38vw; height: 38vw; left: 20vw; bottom: -16vh; background: radial-gradient(circle at 50% 50%, var(--aqua), transparent 60%); animation: d3 32s var(--ease) infinite; }
.b4 { width: 30vw; height: 30vw; right: 10vw; bottom: -8vh; background: radial-gradient(circle at 50% 50%, var(--pink), transparent 64%); animation: d4 26s var(--ease) infinite; opacity: .32; }
@keyframes d1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(12vw,10vh) scale(1.15); } }
@keyframes d2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-10vw,10vh) scale(1.15); } }
@keyframes d3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(10vw,-12vh) scale(1.2); } }
@keyframes d4 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-12vw,-8vh) scale(1.1); } }
body::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(120% 90% at 50% -10%, transparent 40%, rgba(7,6,16,.55) 100%); }
.grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .45; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); }
.cursor-glow { position: fixed; top: 0; left: 0; width: 480px; height: 480px; border-radius: 50%; z-index: -1; pointer-events: none;
  transform: translate(-50%,-50%); mix-blend-mode: screen; background: radial-gradient(circle, rgba(46,196,240,.12), transparent 62%); }
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 100; border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--aqua), var(--blue), var(--violet), var(--pink)); box-shadow: 0 0 14px rgba(46,196,240,.6); }

/* topbar */
.topbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 18px;
  padding: 12px clamp(14px,4vw,32px); background: rgba(12,10,26,.55); backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--stroke); }
.tb-brand { display: flex; align-items: center; gap: 8px; }
.tb-brand img { height: 26px; width: auto; filter: drop-shadow(0 2px 8px rgba(46,196,240,.4)); }
.tb-sub { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--aqua); }
.tb-search { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--stroke); transition: border-color .3s, box-shadow .3s; }
.tb-search:focus-within { border-color: var(--stroke-strong); box-shadow: 0 0 0 3px rgba(46,196,240,.12); }
.tb-ic { color: var(--muted); font-size: 16px; }
.tb-search input { flex: 1; background: none; border: 0; outline: none; color: var(--text); font-size: 14px; }
.tb-links { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.tb-links a { color: var(--muted); font-size: 14px; font-weight: 500; transition: color .25s; white-space: nowrap; }
.tb-links a:hover { color: var(--text); }

/* tombol Drive di topbar */
.tb-drive { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--stroke); color: var(--muted); font-family: inherit; font-size: 13px;
  font-weight: 600; white-space: nowrap; transition: border-color .25s, color .25s, background .25s; }
.tb-drive:hover { color: var(--text); border-color: var(--stroke-strong); background: var(--panel-2); }
.dv-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); opacity: .5; flex: none; }
.dv-dot.on { background: var(--aqua); opacity: 1; box-shadow: 0 0 8px rgba(46,196,240,.8); }
.dv-dot.err { background: var(--pink); opacity: 1; box-shadow: 0 0 8px rgba(239,47,61,.8); }

/* layout */
main { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(14px,4vw,32px) 60px; position: relative; z-index: 1; }

/* hero */
.hero { text-align: center; padding: clamp(50px,8vw,90px) 0 40px; }
.pill { display: inline-flex; align-items: center; gap: 9px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--amber);
  padding: 7px 15px; border-radius: 999px; border: 1px solid rgba(255,207,143,.3); background: rgba(255,207,143,.08); }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 0 rgba(255,207,143,.6); animation: pulse 2.2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,207,143,.5); } 70% { box-shadow: 0 0 0 11px rgba(255,207,143,0); } 100% { box-shadow: 0 0 0 0 rgba(255,207,143,0); } }
.hero h1 { font-size: clamp(40px,7vw,76px); letter-spacing: -2.5px; margin: 18px 0 10px; font-weight: 700; }
.hero h1 .grad { background: linear-gradient(120deg, var(--aqua), var(--blue) 45%, var(--violet)); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: hue 7s linear infinite; }
@keyframes hue { to { background-position: 200% center; } }
.hero p { color: var(--muted); font-size: 17px; max-width: 560px; margin: 0 auto; }
.hero p b { color: var(--text); }
.hero-search { display: flex; align-items: center; gap: 10px; max-width: 560px; margin: 30px auto 0; padding: 8px 8px 8px 18px;
  border-radius: 999px; background: var(--panel); border: 1px solid var(--stroke); backdrop-filter: blur(12px);
  transition: border-color .3s, box-shadow .3s; }
.hero-search:focus-within { border-color: var(--stroke-strong); box-shadow: 0 12px 40px rgba(46,196,240,.18); }
.hs-ic { color: var(--muted); font-size: 20px; }
.hero-search input { flex: 1; background: none; border: 0; outline: none; color: var(--text); font-size: 16px; padding: 8px 0; }
.hs-btn { padding: 12px 26px; border: 0; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 15px; color: #08131c;
  background: linear-gradient(120deg, var(--aqua), var(--blue)); background-size: 180% auto; box-shadow: 0 8px 24px rgba(30,136,232,.4);
  transition: transform .3s var(--spring), box-shadow .3s; animation: hue 6s linear infinite; }
.hs-btn:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 14px 36px rgba(46,196,240,.55); }
.hero-stats { display: flex; gap: 26px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.hero-stats div { font-family: 'JetBrains Mono', monospace; }
.hero-stats b { display: block; font-size: 26px; background: linear-gradient(120deg, var(--aqua), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-stats span { color: var(--muted); font-size: 12.5px; }

/* toolbar */
.toolbar { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; padding: 18px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--stroke); backdrop-filter: blur(12px); margin-bottom: 18px; }
/* toolbar selebar grid, tapi tiap filter tidak ikut melar jadi 350px */
.tool { display: flex; flex-direction: column; gap: 6px; flex: 0 1 210px; min-width: 140px; }
.tool label { font-size: 11.5px; font-family: 'JetBrains Mono', monospace; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.tool select { padding: 10px 12px; border-radius: 12px; background: rgba(10,8,24,.6); color: var(--text); border: 1px solid var(--stroke);
  outline: none; cursor: pointer; font-size: 14px; transition: border-color .25s; }
.tool select:hover, .tool select:focus { border-color: var(--stroke-strong); }
.tool select option { background: #0f0c1e; }
/* "Per page" hanya memuat angka — jangan ikut melebar seperti filter lain */
.tool-per { flex: 0 0 104px; min-width: 104px; }
.tool-reset { margin-left: auto; padding: 10px 18px; border-radius: 12px; background: transparent; border: 1px solid var(--stroke-strong); color: var(--muted);
  cursor: pointer; font-size: 14px; font-weight: 500; transition: color .25s, border-color .25s; }
.tool-reset:hover { color: var(--text); border-color: var(--pink); }

.results-meta { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.results-meta #resCount { font-weight: 600; font-size: 15px; }
.results-meta .note { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); }

/* grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); gap: 22px; }
.mov { position: relative; border-radius: 14px; overflow: hidden; cursor: pointer; background: var(--panel); border: 1px solid var(--stroke);
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; opacity: 0; transform: translateY(24px); }
.mov.in { opacity: 1; transform: none; }
.mov:hover { transform: translateY(-6px); border-color: var(--stroke-strong); box-shadow: 0 24px 50px rgba(0,0,0,.45), 0 0 34px rgba(46,196,240,.16); }
.poster { position: relative; aspect-ratio: 2/3; display: grid; place-items: center; overflow: hidden; }
.poster .pimg, .modal-poster .pimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.poster .init { font-size: 46px; font-weight: 700; letter-spacing: -1px; color: rgba(255,255,255,.9); text-shadow: 0 4px 20px rgba(0,0,0,.5); z-index: 0; }
.modal-poster .init { z-index: 0; }
.poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(7,6,16,.85)); }
.poster .rate { position: absolute; top: 10px; left: 10px; z-index: 2; font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px; background: rgba(7,6,16,.7); backdrop-filter: blur(6px); border: 1px solid var(--stroke); color: var(--amber); }
.poster .inlib { position: absolute; top: 10px; right: 10px; z-index: 2; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  font-weight: 700; padding: 4px 8px; border-radius: 999px; background: rgba(46,196,240,.22); backdrop-filter: blur(6px);
  border: 1px solid rgba(46,196,240,.55); color: #bfeeff; }
.poster .quals { position: absolute; bottom: 10px; left: 10px; right: 10px; z-index: 2; display: flex; gap: 5px; flex-wrap: wrap; }
.poster .q { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; padding: 3px 7px; border-radius: 6px;
  background: rgba(46,196,240,.18); border: 1px solid rgba(46,196,240,.4); color: #bfeeff; }
.mov-hover { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; opacity: 0; transition: opacity .3s;
  background: linear-gradient(180deg, rgba(30,136,232,.25), rgba(125,52,186,.35)); backdrop-filter: blur(2px); }
.mov:hover .mov-hover { opacity: 1; }
.mov-hover span { padding: 10px 20px; border-radius: 999px; background: rgba(7,6,16,.7); border: 1px solid var(--stroke-strong); font-size: 13px; font-weight: 600; }
.mov-info { padding: 12px 14px 14px; }
.mov-info h3 { font-size: 14.5px; line-height: 1.25; margin-bottom: 3px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mov-info .yr { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted); }

.empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty button, .pager button { cursor: pointer; }
.empty button { margin-left: 8px; background: none; border: 1px solid var(--stroke-strong); color: var(--text); padding: 8px 16px; border-radius: 999px; }

/* pager */
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.pager button { min-width: 40px; height: 40px; padding: 0 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--stroke);
  color: var(--text); font-weight: 600; font-size: 14px; transition: border-color .25s, background .25s, transform .2s; }
.pager button:hover:not(:disabled) { border-color: var(--stroke-strong); transform: translateY(-2px); }
.pager button.active { background: linear-gradient(120deg, var(--aqua), var(--blue)); color: #08131c; border-color: transparent; }
.pager button:disabled { opacity: .4; cursor: not-allowed; }
.pager button.gap { min-width: 26px; padding: 0 2px; background: none; border-color: transparent; }

/* footer */
.footer { text-align: center; padding: 40px 20px; border-top: 1px solid var(--stroke); color: var(--muted); font-size: 13.5px; }
.footer p { max-width: var(--maxw-text); margin: 0 auto; }   /* teks tetap enak dibaca walau halaman melebar */
.footer a { color: var(--aqua); }

/* modal */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(4,3,10,.72); backdrop-filter: blur(8px); animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; } }
.modal-card { position: relative; z-index: 1; width: min(820px, 100%); max-height: 90vh; overflow-y: auto; border-radius: 22px;
  background: rgba(14,11,28,.92); border: 1px solid var(--stroke-strong); box-shadow: 0 40px 90px rgba(0,0,0,.6);
  animation: pop .4s var(--spring); }
@keyframes pop { from { opacity: 0; transform: scale(.94) translateY(10px); } }
.modal-x { position: absolute; top: 14px; right: 14px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: rgba(7,6,16,.6); border: 1px solid var(--stroke); color: var(--text); font-size: 15px; transition: border-color .25s, transform .25s; }
.modal-x:hover { border-color: var(--pink); transform: rotate(90deg); }
.modal-grid { display: grid; grid-template-columns: 260px 1fr; }
.modal-poster { aspect-ratio: 2/3; position: relative; display: grid; place-items: center; }
.modal-poster .init { font-size: 64px; font-weight: 700; color: rgba(255,255,255,.9); text-shadow: 0 6px 24px rgba(0,0,0,.5); }
.modal-body { padding: 30px 30px 26px; }
.modal-body h2 { font-size: 26px; letter-spacing: -.6px; margin-bottom: 10px; }
.modal-meta { display: flex; gap: 14px; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--muted); margin-bottom: 14px; }
.modal-meta .r { color: var(--amber); }
.modal-genres { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.modal-genres span { font-size: 12px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--stroke); color: var(--muted); }
.modal-syn { color: var(--muted); font-size: 14.5px; margin-bottom: 22px; }
.modal-body h4 { font-size: 14px; margin-bottom: 12px; }
/* ---------- library Drive di dalam modal ---------- */
.drive-lib { display: flex; flex-direction: column; gap: 10px; }
.dv-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px; background: var(--panel);
  border: 1px solid var(--stroke); flex-wrap: wrap; transition: border-color .25s; }
.dv-row:hover { border-color: var(--stroke-strong); }
.dv-q { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12.5px; color: #bfeeff; min-width: 56px; }
.dv-info { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--muted); flex: 1; min-width: 150px; line-height: 1.5;
  overflow-wrap: anywhere; }
.dv-info b { color: var(--text); font-weight: 500; font-size: 12.5px; }

.dv-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--stroke-strong); background: var(--panel-2); color: var(--text); font-family: inherit; font-size: 12.5px;
  font-weight: 600; white-space: nowrap; transition: transform .25s var(--spring), box-shadow .25s, border-color .25s, opacity .25s; }
.dv-btn:hover { transform: translateY(-2px); border-color: var(--aqua); }
.dv-btn.primary { border-color: transparent; color: #08131c; background: linear-gradient(120deg, var(--aqua), var(--blue));
  box-shadow: 0 6px 18px rgba(30,136,232,.35); }
.dv-btn.primary:hover { box-shadow: 0 10px 26px rgba(30,136,232,.5); }
.dv-btn.ghost { background: transparent; border-color: var(--stroke); color: var(--muted); }
.dv-btn.ghost:hover { color: var(--text); }
.dv-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 2px; }

.dv-note { font-size: 13px; color: var(--muted); padding: 12px 14px; border-radius: 12px; background: var(--panel);
  border: 1px solid var(--stroke); line-height: 1.55; }
.dv-note.warn { color: var(--amber); border-color: rgba(255,207,143,.3); background: rgba(255,207,143,.06); }
.dv-note code { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: rgba(255,255,255,.08); padding: 2px 6px; border-radius: 5px; }
.dv-url { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.dv-url input { flex: 1; min-width: 200px; padding: 9px 14px; border-radius: 999px; font: inherit; font-size: 13px;
  background: rgba(10,8,24,.6); border: 1px solid var(--stroke); color: var(--text); outline: none;
  transition: border-color .25s, box-shadow .25s; }
.dv-url input:focus { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(46,196,240,.14); }
.dv-url input::placeholder { color: var(--muted); opacity: .7; }

.dv-tip { font-size: 11.5px; color: var(--muted); font-family: 'JetBrains Mono', monospace; opacity: .8; line-height: 1.6; }
.dv-tip code { background: rgba(255,255,255,.07); padding: 2px 6px; border-radius: 5px; }

.dv-up { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--stroke); }
.dv-prog { flex: 1 1 100%; height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.dv-prog i { display: block; height: 100%; border-radius: 999px; transition: width .2s linear;
  background: linear-gradient(90deg, var(--aqua), var(--blue), var(--violet)); box-shadow: 0 0 12px rgba(46,196,240,.6); }
.dv-uptext { flex: 1; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--muted); min-width: 160px; }

.src-wrap { margin-top: 14px; }
.src-link { display: inline-block; font-size: 13px; color: var(--aqua); font-weight: 600; }
.src-link:hover { text-decoration: underline; }

/* ---------- pemutar ---------- */
.player-card { position: relative; z-index: 1; width: min(1100px, 100%); border-radius: 20px; overflow: hidden;
  background: linear-gradient(160deg, rgba(20,16,44,.96), rgba(9,8,22,.98)); border: 1px solid var(--stroke-strong);
  box-shadow: 0 40px 90px rgba(0,0,0,.6); animation: pop .4s var(--spring); }
.player-bar { display: flex; align-items: center; gap: 14px; padding: 14px 16px 14px 20px; border-bottom: 1px solid var(--stroke); }
.player-bar h3 { flex: 1; font-size: 16px; letter-spacing: -.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-acts { display: flex; align-items: center; gap: 12px; }
.player-acts a { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.player-acts a:hover { color: var(--aqua); }
.player-acts .modal-x { position: static; width: 34px; height: 34px; }
.player-frame { aspect-ratio: 16/9; max-height: 74vh; background: #000; }
.player-frame iframe, .player-frame video { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.player-frame [hidden] { display: none; }
.player-hint { padding: 12px 20px 16px; font-size: 11.5px; color: var(--muted); font-family: 'JetBrains Mono', monospace; opacity: .75; }

/* Lantai lebar kartu naik bertahap: tanpa ini, layar 700–1300px malah
   memaksa banyak kolom kurus alih-alih poster yang lebih besar. */
@media (min-width: 700px)  { :root { --card-min: clamp(175px, 15vw, 250px); } }
@media (min-width: 1000px) { :root { --card-min: clamp(190px, 15vw, 250px); } }

@media (max-width: 620px) {
  .modal-grid { grid-template-columns: 1fr; }
  .modal-poster { aspect-ratio: 16/9; }
  .modal-poster .init { font-size: 48px; }
  .tb-search { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .mov { opacity: 1 !important; transform: none !important; }
}