/* VORTEX — طبقة الرئيسية الأخيرة: أسهم البطل والمانغا، وبطاقات آخر الفصول. تُحمَّل بعد كل ملفات الرئيسية. */

/* ---------- أسهم البطل ---------- */
.h4-hero { position: relative; }
.h4-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
    border: 1px solid rgba(255,255,255,.18); background: rgba(5,8,12,.55); color: #fff;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: border-color .2s, color .2s, background .2s;
}
.h4-arrow:hover { border-color: #13abd2; color: #76e5fd; background: rgba(5,8,12,.8); }
.h4-arrow svg { width: 20px; height: 20px; }
/* في الترتيب العربي: "التالي" على اليسار بسهم يشير لليسار، و"السابق" على اليمين */
.h4-arrow-next { inset-inline-start: 14px; }
.h4-arrow-next svg { transform: scaleX(-1); }
.h4-arrow-prev { inset-inline-end: 14px; }
.h4-arrow-prev svg { transform: none; }
@media (max-width: 640px) { .h4-arrow { width: 38px; height: 38px; } .h4-arrow svg { width: 17px; height: 17px; } }

/* ---------- أزرار المانغا: ظاهرة دائمًا ---------- */
.h4-nav { display: flex !important; gap: 8px; }
.h4-nav button { width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #fff; cursor: pointer; display: grid; place-items: center; }
.h4-nav button:hover { border-color: #13abd2; color: #76e5fd; }
.h4-nav button svg { width: 18px; height: 18px; }
#shelf-next svg { transform: scaleX(-1); }
#shelf-prev svg { transform: none; }

/* ---------- بطاقات آخر الفصول ---------- */
.h4-latest { grid-auto-columns: minmax(150px, 176px); }
@media (min-width: 900px) { .h4-latest { grid-auto-columns: minmax(184px, 200px); } }
.h4-lcard { display: block; color: inherit; text-decoration: none; min-width: 0; }
.h4-lcover { position: relative; aspect-ratio: 2 / 3; border-radius: 14px; overflow: hidden; background: #111820; border: 1px solid rgba(255,255,255,.08); transition: transform .3s, border-color .3s, box-shadow .3s; }
.h4-lcover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.h4-lcard:hover .h4-lcover { transform: translateY(-4px); border-color: rgba(118,229,253,.45); box-shadow: 0 22px 44px -18px rgba(19,171,210,.35); }
.h4-lnocover { position: absolute; inset: 0; display: grid; place-items: center; font-size: 56px; font-weight: 800; color: rgba(118,229,253,.35); }
.h4-lcard h3 { margin: 12px 2px 4px; font-size: 15px; font-weight: 700; color: #fff; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.h4-lnum { display: inline-block; margin: 0 2px; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(118,229,253,.35); color: #76e5fd; font-size: 12px; font-weight: 700; }
.h4-ltitle { display: block; margin: 6px 2px 0; font-style: normal; font-size: 13px; color: #8a96a3; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }