/* Hero slider — desktop cover + page banner */
.hero-slider{position:relative;width:100%;height:min(760px,82vh);min-height:570px;overflow:hidden;background:#050505}
.hero-track{position:relative;width:100%;height:100%}
.hero-slide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .75s ease}
.hero-slide.active{opacity:1;visibility:visible}
.hero-bg-picture{position:absolute;inset:0;display:block;z-index:0}.hero-bg-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(.72) saturate(.94);transform:scale(1.02);z-index:0}
.hero-slide::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(5,5,5,.55) 0%,rgba(5,5,5,.42) 12%,rgba(5,5,5,.28) 38%,rgba(5,5,5,.10) 69%,rgba(5,5,5,.38) 100%),linear-gradient(180deg,rgba(5,5,5,.48) 0%,rgba(5,5,5,0) 18%,rgba(5,5,5,.03) 58%,rgba(5,5,5,.24) 70%,rgba(5,5,5,.68) 88%,#050505 100%)}
.hero-slide::after{content:"";position:absolute;inset:0;z-index:2;background:radial-gradient(circle at 30% 48%,rgba(226,184,87,.08),transparent 27%),linear-gradient(90deg,rgba(5,5,5,.28) 0%,transparent 26%,transparent 72%,rgba(5,5,5,.22) 100%);pointer-events:none}
.hero-cover-wrap{position:absolute;left:7%;top:50%;z-index:4;transform:translateY(-50%);width:min(255px,22vw);aspect-ratio:2/3;border:1px solid rgba(226,184,87,.26);border-radius:14px;overflow:hidden;background:#11151c;box-shadow:0 24px 48px rgba(0,0,0,.48),0 0 24px rgba(226,184,87,.06)}
.hero-cover-image{width:100%;height:100%;display:block;object-fit:cover;object-position:center}
.hero-content{position:relative;z-index:5;width:min(720px,54vw);margin-left:auto;margin-right:7%;padding-top:28px;text-align:right}
.hero-badge{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;font-size:11px;font-weight:900;margin-bottom:16px}
.hero-type-popular{color:#fff;background:linear-gradient(135deg,#d95b2b,#9d2e1b);box-shadow:0 0 22px rgba(217,91,43,.18)}
.hero-type-new{color:#0a0907;background:var(--gold);box-shadow:0 0 22px rgba(226,184,87,.14)}
.hero-type-suggested{color:#fff;background:linear-gradient(135deg,#315c9f,#263c6d);box-shadow:0 0 22px rgba(49,92,159,.18)}
.hero-title{margin:0;color:#fff;font-family:"Cinzel Decorative",serif;font-size:clamp(42px,5.2vw,76px);line-height:1.06;direction:ltr;text-align:right;text-shadow:0 8px 35px rgba(0,0,0,.55)}
.hero-arabic-title{margin:10px 0 18px;color:#e9e8e5;font-size:21px;font-weight:800}
.hero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-bottom:15px}
.hero-mal-rating{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:#1d66d8;color:#fff;font-size:12px;font-weight:900;box-shadow:0 0 18px rgba(29,102,216,.14)}
.hero-mal-rating b{font-size:10px;letter-spacing:.5px}
.hero-status{display:inline-flex;align-items:center;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.11);color:#eee;font-size:11px;font-weight:900}
.hero-views{color:#bbb;font-size:11px;font-weight:800}
.hero-genres{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:15px}
.hero-genres span{padding:6px 10px;color:#eee;border:1px solid rgba(226,184,87,.24);border-radius:999px;background:rgba(226,184,87,.055);font-size:11px;font-weight:900;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.hero-desc{max-width:650px;margin:0;color:#d5d5d8;font-size:14px;line-height:1.95}
.hero-actions{display:flex;justify-content:flex-start;align-items:center;gap:10px;margin-top:22px}
.hero-read-btn{display:inline-flex;align-items:center;justify-content:center;min-width:170px;padding:12px 20px;border-radius:12px;color:#090909;background:linear-gradient(135deg,var(--gold-2),var(--gold));text-decoration:none;font-size:14px;font-weight:900;box-shadow:0 10px 28px rgba(226,184,87,.14);transition:.22s}.hero-read-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(226,184,87,.2)}
.hero-dots{position:absolute;z-index:10;bottom:25px;left:50%;transform:translateX(-50%);display:flex;gap:9px}.hero-dot{width:34px;height:4px;border:0;border-radius:99px;background:rgba(255,255,255,.25);cursor:pointer;transition:.25s}.hero-dot.active{width:58px;background:var(--gold);box-shadow:0 0 12px rgba(226,184,87,.25)}
@media(max-width:900px){.hero-slider{min-height:540px;height:70vh}.hero-cover-wrap{left:5%;width:min(210px,24vw)}.hero-content{width:min(680px,67vw);margin-left:7%;margin-right:7%}.hero-title{font-size:clamp(36px,7vw,58px)}}
@media(max-width:650px){.hero-slider{min-height:620px;height:78vh}.hero-bg-image{object-position:center}.hero-slide::before{background:linear-gradient(180deg,#050505 0%,rgba(5,5,5,.45) 22%,rgba(5,5,5,.20) 46%,rgba(5,5,5,.92) 80%,#050505 100%)}.hero-slide::after{background:linear-gradient(180deg,transparent 0%,rgba(5,5,5,.2) 35%,#050505 92%)}.hero-cover-wrap{display:none}.hero-content{width:calc(100% - 34px);margin:0 auto;padding-top:110px}.hero-title{font-size:35px;text-align:right}.hero-arabic-title{font-size:18px}.hero-desc{font-size:12px;line-height:1.9}.hero-genres span{font-size:9px}.hero-read-btn{min-width:150px}.hero-dots{bottom:18px}}

.hero-favorite-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:150px;padding:12px 18px;border:1px solid rgba(226,184,87,.28);border-radius:12px;color:#eee;background:rgba(255,255,255,.045);font:inherit;font-size:13px;font-weight:900;cursor:pointer;transition:.22s ease;backdrop-filter:blur(8px)}.hero-favorite-btn i{color:var(--gold)}.hero-favorite-btn:hover{transform:translateY(-2px);border-color:var(--gold);background:rgba(226,184,87,.08);box-shadow:0 10px 28px rgba(226,184,87,.1)}.hero-favorite-btn.is-favorite{color:#090909;background:var(--gold);border-color:var(--gold)}.hero-favorite-btn.is-favorite i{color:#090909}
@media(max-width:650px){.hero-content{width:calc(100% - 34px);margin:0 auto}.hero-genres{gap:6px}.hero-genres span{font-size:10px;padding:5px 8px}.hero-actions{justify-content:flex-start;flex-wrap:wrap}.hero-favorite-btn{min-width:145px}}
.hero-cover-image,.hero-bg-image{image-rendering:auto;backface-visibility:visible}
.hero-favorite-btn{position:relative;z-index:8;pointer-events:auto;}
.hero-favorite-btn:active{transform:translateY(0) scale(.985)}

/* v27.4: desktop slider bottom blend — keeps the artwork visible and fades naturally into the page */
@media (min-width:651px){
  .hero-slide::before{
    background:
      linear-gradient(90deg,rgba(5,5,5,.48) 0%,rgba(5,5,5,.34) 13%,rgba(5,5,5,.20) 38%,rgba(5,5,5,.06) 68%,rgba(5,5,5,.28) 100%),
      linear-gradient(180deg,rgba(5,5,5,.38) 0%,rgba(5,5,5,0) 20%,rgba(5,5,5,.02) 55%,rgba(5,5,5,.20) 68%,rgba(5,5,5,.58) 86%,#050505 100%);
  }
}