/* HaruFilm v2 — shell frontend publik
   Bahasa desain: tegas, bersih, satu aksen. Bahasa animasi: portofolio Haru
   (splash, pageIn, reveal .6s, easing cubic-bezier(.2,.7,.3,1)) + header
   appear/disappear ala GarasiFilm21. Semua animasi transform/opacity. */
:root{
  --bg:#0a0a0e; --bg2:#101016; --panel:#13131a; --panel2:#181822;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --text:#f4f4f6; --muted:#9b9bab; --muted2:#6d6d80;
  --accent:#ec4899; --accent-soft:rgba(236,72,153,.16);
  --gold:#f5c518;
  --ease:cubic-bezier(.2,.7,.3,1);
  --radius:10px;
}
@font-face{
  font-family:"NetflixSans";
  src:url("fonts/NetflixSans-Medium.otf") format("opentype");
  font-weight:500 700; font-display:swap;
}
/* Wordmark resmi HaruFilm (persis lockup poster Telegram):
   ikon favicon + "Haru" pink #ec4899 + "Film" putih, di lencana berbatas pink. */
.wordmark{
  font-family:"NetflixSans","Plus Jakarta Sans",sans-serif;
  font-weight:700; letter-spacing:-.5px; color:#fff; line-height:1;
}
.wordmark i{font-style:normal; color:var(--accent)}
.logo-badge{
  display:inline-flex; align-items:center; gap:10px;
  border:2px solid rgba(236,72,153,.6); border-radius:9px;
  padding:6px 13px; background:rgba(236,72,153,.05);
}
.logo-badge img{width:26px; height:26px; display:block}
.logo-badge .wordmark{font-size:1.3rem}
.logo-badge.big{padding:13px 24px; border-radius:12px; gap:15px}
.logo-badge.big img{width:46px; height:46px}
.logo-badge.big .wordmark{font-size:2.7rem}
h1, h2, .card-title, .dl-name, .acc-head, .crow-title{
  font-family:"NetflixSans","Plus Jakarta Sans",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh;
  display:flex; flex-direction:column;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#fff}

/* ---------- splash (pola portofolio: zoom dari blur + bar) ---------- */
#splash{
  position:fixed; inset:0; z-index:300; background:#05060a;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  transition:opacity .5s ease, visibility .5s;
}
#splash.done{opacity:0; visibility:hidden}
.splash-logo{animation:splashZoom .9s var(--ease) both}
.splash-bar{width:200px;height:3px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.splash-bar i{display:block;height:100%;width:40%;border-radius:99px;background:var(--accent);animation:splashBar 1.1s ease-in-out infinite}
@keyframes splashZoom{0%{transform:scale(.6);opacity:0;filter:blur(10px)}55%{opacity:1;filter:blur(0)}100%{transform:scale(1)}}
@keyframes splashFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes splashBar{0%{transform:translateX(-110%)}100%{transform:translateX(280%)}}

/* ---------- bar atas: loading ala portofolio + progres scroll ---------- */
#topbar{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:170;
  background:linear-gradient(90deg,var(--accent),#f9a8d4);
  transition:width .2s ease;
}

/* ---------- header (appear / disappear) ---------- */
#siteHeader{
  position:fixed; top:0; left:0; right:0; z-index:150;
  background:#0a0a0e;
  border-bottom:1px solid var(--line2);
  transform:translateY(0); transition:transform .35s var(--ease);
}
#siteHeader.hidden-up{transform:translateY(-100%)}
.header-in{
  max-width:1240px; margin:0 auto; padding:12px 20px;
  display:flex; align-items:center; gap:26px;
}
.brand{display:flex;align-items:center;flex-shrink:0}
.mainnav{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1}
.mainnav::-webkit-scrollbar{display:none}
.navlink{
  padding:8px 12px;border-radius:9px;color:var(--muted);font-weight:600;font-size:.9rem;
  white-space:nowrap;transition:color .2s,background .2s;
}
.navlink:hover{color:var(--text);background:rgba(255,255,255,.06)}
.navlink.is-active{color:#fff;background:var(--accent);font-weight:800}
.searchbox{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:8px 12px;color:var(--muted);transition:border-color .2s;
}
.searchbox:focus-within{border-color:var(--line2);color:var(--text)}
.searchbox input{
  background:none;border:0;outline:0;color:var(--text);width:130px;font-size:.9rem;
}
.searchbox input::placeholder{color:var(--muted2)}

/* ---------- kerangka tampilan ---------- */
#app{flex:1;width:100%;max-width:1240px;margin:0 auto;padding:104px 20px 56px}
.view.show{animation:pageIn .55s var(--ease) both}
@keyframes pageIn{from{opacity:0;transform:translateY(16px) scale(.995)}to{opacity:1;transform:none}}

/* ---------- reveal saat scroll (pola portofolio) ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- hero ---------- */
.hero{
  position:relative;border-radius:20px;overflow:hidden;margin-bottom:34px;
  min-height:300px;display:flex;align-items:flex-end;
  background:var(--panel) center/cover no-repeat; isolation:isolate;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(78deg,rgba(5,5,9,.94) 30%,rgba(5,5,9,.45) 62%,rgba(5,5,9,.05)),
             linear-gradient(to top,rgba(5,5,9,.85),transparent 55%);
}
.hero-in{padding:30px;max-width:620px}
.hero-badges{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.hero h1{font-size:2.1rem;font-weight:800;line-height:1.12;margin-bottom:10px}
.hero p{color:#cfcfda;font-size:.95rem;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}

/* ---------- lencana & tombol ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;border-radius:7px;background:rgba(255,255,255,.1);color:#e8e8ef;
  border:1px solid var(--line);
}
.badge.raw{background:rgba(88,166,255,.16);border-color:rgba(88,166,255,.4);color:#a9ccff}
.badge.encode{background:var(--accent-soft);border-color:rgba(236,72,153,.45);color:#ffb3b8}
.badge.quality{background:rgba(245,197,24,.13);border-color:rgba(245,197,24,.4);color:#ffe28a}
/* Tombol kapsul kotak: tegas, berbatas jelas, radius kotak (bukan pil bulat) */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:10px;font-weight:800;font-size:.92rem;
  transition:transform .2s,background .2s,border-color .2s;
  border:1.5px solid transparent;
  font-family:"NetflixSans","Plus Jakarta Sans",sans-serif;
}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);color:#fff;border-color:#f78fc0}
.btn.primary:hover{background:#f75fb0}
.btn.ghost{background:#17171f;border-color:var(--line2);color:var(--text)}
.btn.ghost:hover{background:#1e1e29;border-color:var(--accent)}

/* ---------- kepala seksi + chip ---------- */
.section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.section-head h2{font-size:1.28rem;font-weight:800}
.chiprow{display:flex;gap:8px}
.chip{
  padding:7px 14px;border-radius:9px;border:1.5px solid var(--line2);
  color:var(--muted);font-weight:800;font-size:.8rem;transition:.2s;background:var(--panel);
}
.chip:hover{color:var(--text);border-color:var(--line2)}
.chip.is-active{background:var(--text);color:#0a0a0e;border-color:var(--text)}

/* ---------- grid poster ---------- */
.grid{
  display:grid;gap:18px 14px;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
}
.card{
  position:relative;border-radius:var(--radius);overflow:hidden;background:var(--panel);
  border:1px solid var(--line);cursor:pointer;
  opacity:0;transform:translateY(18px);
  transition:opacity .6s ease,transform .6s ease,border-color .25s;
  transform-style:preserve-3d;
}
.card.in{opacity:1;transform:none}
.card:hover{border-color:var(--line2)}
.card::after{ /* glow mengikuti mouse, pola tilt portofolio */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.13),transparent 65%);
}
.card:hover::after{opacity:1}
.card-poster{aspect-ratio:2/3;overflow:hidden;background:var(--bg2);position:relative}
.card-poster img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .35s ease;
}
.card-backdrop{position:absolute;inset:0;opacity:0}
.card-top{
  position:absolute;top:8px;left:8px;z-index:4;
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;
}
/* lapisan pratinjau di dalam kartu (tombol putar + info), muncul saat hover */
.pv-overlay{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:12px;gap:4px;
  background:linear-gradient(to top,rgba(4,4,8,.9),rgba(4,4,8,.25) 52%,transparent 72%);
  opacity:0;transition:opacity .35s ease;
}
.pv-play{
  width:42px;height:42px;border:2px solid rgba(255,255,255,.92);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;background:rgba(5,5,9,.5);font-size:.78rem;padding-left:2px;
  margin-bottom:7px;
}
.pv-info{display:flex;gap:10px;font-size:.76rem;font-weight:700;color:#f0f0f4}
.pv-info span:first-child{color:var(--gold)}
.pv-genres{font-size:.72rem;color:#c9c9d4}
/* ekspansi hover ala Netflix — hanya perangkat yang benar-benar punya hover */
@media (hover:hover) and (pointer:fine){
  .card{transition:opacity .6s ease,transform .38s var(--ease),border-color .25s,box-shadow .38s ease}
  .card:hover{
    transform:scale(1.14);z-index:30;
    border-color:rgba(236,72,153,.55);
    box-shadow:0 26px 54px rgba(0,0,0,.68);
  }
  .card:hover .card-poster > img:first-child{opacity:0}
  .card:hover .card-backdrop{opacity:1;animation:kenburns 7s ease both}
  .card:hover .pv-overlay{opacity:1}
}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.13)}}
.card-rate{
  position:absolute;top:8px;right:8px;z-index:2;
  background:rgba(5,5,9,.78);border-radius:7px;padding:3px 7px;
  font-size:.72rem;font-weight:800;color:var(--gold);
}
.card-body{padding:11px 12px 13px}
.card-title{
  font-weight:700;font-size:.92rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-meta{color:var(--muted);font-size:.76rem;margin-top:5px;display:flex;gap:8px;flex-wrap:wrap}
.empty-note{color:var(--muted);text-align:center;padding:44px 0}

/* ---------- halaman judul ---------- */
.backbtn{
  display:inline-flex;align-items:center;gap:8px;
  background:#17171f;border:1.5px solid var(--line2);border-radius:10px;
  color:var(--text);font-weight:800;font-size:.9rem;margin-bottom:18px;
  padding:10px 18px;transition:border-color .2s,background .2s;
  font-family:"NetflixSans","Plus Jakarta Sans",sans-serif;
}
.backbtn:hover{border-color:var(--accent);background:#1e1e29}
.detail-hero{
  position:relative;border-radius:20px;overflow:hidden;margin-bottom:26px;
  background:var(--panel) center/cover no-repeat;isolation:isolate;
}
.detail-hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(80deg,rgba(5,5,9,.95) 26%,rgba(5,5,9,.55) 60%,rgba(5,5,9,.15)),
             linear-gradient(to top,rgba(5,5,9,.9),transparent 55%);
}
.detail-in{display:flex;gap:26px;padding:30px;align-items:flex-end}
.detail-poster{
  width:178px;flex-shrink:0;border-radius:12px;overflow:hidden;
  border:1px solid var(--line2);box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.detail-poster img{width:100%;display:block;aspect-ratio:2/3;object-fit:cover}
.detail-info h1{font-size:1.9rem;font-weight:800;line-height:1.15;margin:10px 0 8px}
.detail-meta{display:flex;gap:14px;flex-wrap:wrap;color:#d7d7e0;font-size:.88rem;margin-bottom:12px}
.detail-meta b{color:var(--gold)}
.detail-syn{color:#cfcfda;line-height:1.6;font-size:.94rem;max-width:640px}
.detail-badges{display:flex;gap:8px;flex-wrap:wrap}
.block{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:20px;margin-bottom:18px;
}
.block h3{
  font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px;display:flex;align-items:center;gap:9px;
}
.block h3::after{content:"";flex:1;height:1px;background:var(--line)}
.stream-frame{
  aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
}
.stream-frame iframe{width:100%;height:100%;border:0;display:block}
.stream-empty{color:var(--muted2);font-size:.9rem;text-align:center;padding:20px}
.dl-list{display:flex;flex-direction:column;gap:10px}
.dl-row{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  transition:border-color .2s;
}
.dl-row:hover{border-color:var(--line2)}
.dl-name{font-weight:700;font-size:.9rem;flex:1;min-width:180px}
.dl-size{color:var(--muted);font-size:.8rem;font-weight:600}
.dl-btn{
  background:var(--accent);color:#fff;font-weight:800;font-size:.84rem;
  padding:9px 18px;border-radius:9px;border:1.5px solid #f78fc0;
  transition:background .2s,transform .2s;
  font-family:"NetflixSans","Plus Jakarta Sans",sans-serif;
}
.dl-btn:hover{background:#f75fb0}
.dl-btn:active{transform:scale(.96)}

/* akordeon episode (pola portofolio) */
.acc{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:10px;background:var(--bg2)}
.acc-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:13px 16px;font-weight:800;font-size:.92rem;text-align:left;
}
.acc-head .chev{color:var(--accent);font-size:1.15rem;transition:transform .35s var(--ease)}
.acc.open .acc-head .chev{transform:rotate(180deg)}
.acc-body{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
.acc-body-in{padding:0 14px 14px;display:flex;flex-direction:column;gap:10px}

/* ---------- footer ---------- */
.sitefoot{
  border-top:1px solid var(--line);padding:30px 20px 38px;text-align:center;
  max-width:1240px;margin:0 auto;width:100%;
}
.foot-brand{margin-bottom:10px}
.foot-brand .wordmark{font-size:1.45rem}
.sitefoot p{color:var(--muted2);font-size:.8rem;line-height:1.6;max-width:560px;margin:0 auto}

/* ---------- responsif ---------- */
@media (max-width:860px){
  .header-in{flex-wrap:wrap;gap:10px 16px;padding:10px 14px}
  .mainnav{order:3;flex-basis:100%}
  .searchbox{margin-left:auto}
  .searchbox input{width:104px}
  #app{padding:132px 14px 44px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:13px 9px}
  .hero{min-height:230px}
  .hero-in{padding:20px}
  .hero h1{font-size:1.45rem}
  .detail-in{flex-direction:column;align-items:flex-start;padding:20px}
  .detail-poster{width:128px}
  .detail-info h1{font-size:1.5rem}
  .logo-badge.big{padding:10px 18px}
  .logo-badge.big img{width:34px;height:34px}
  .logo-badge.big .wordmark{font-size:2rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
  html{scroll-behavior:auto}
  .reveal,.card{opacity:1;transform:none}
}