@import "https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@400;500;600;700&display=swap";:root{color:#fff;font-synthesis:none;background:#08050d;font-family:Noto Kufi Arabic,system-ui,sans-serif}*{box-sizing:border-box}body{background:#08050d;margin:0}.page{min-height:100vh;padding:0 18px 32px}.shell{width:min(1500px,100%);margin:auto}.header{direction:ltr;border-bottom:1px solid #241426;justify-content:space-between;align-items:center;height:72px;margin-bottom:16px;display:flex}.brand{align-items:center;gap:10px;text-decoration:none;display:flex}.brand b{color:#0000;background:linear-gradient(90deg,#c55aff,#f146a4);-webkit-background-clip:text;background-clip:text;font-size:24px}.logo{color:#f0373f;border:1px solid #58202f;border-radius:7px;place-items:center;width:32px;height:32px;display:grid}.header-actions{direction:ltr;align-items:center;gap:14px;display:flex}.age{color:#d8c9d7;border:1px solid #553044;border-radius:7px;padding:5px 7px;font-size:11px}.outline-btn,.mix{color:#fff;background:#1b0d18;border:1px solid #5c294a;border-radius:999px;padding:11px 20px;font-family:inherit}.hero{background-position:50%;background-size:cover;border:1px solid #74305e;border-radius:15px;height:690px;position:relative;overflow:hidden}.hero-shade,.card-shade{background:linear-gradient(#0000 48%,#060309eb 100%);position:absolute;inset:0}.hero-age{z-index:2;font-size:12px;position:absolute;top:30px;left:28px}.spark{color:#e447d5;z-index:3;background:#2a092d;border:1px solid #68235d;border-radius:50%;width:44px;height:44px;position:absolute;top:24px;right:24px}.play{color:#fff;z-index:3;background:#2d0f1f66;border:1px solid #ffffffa6;border-radius:50%;place-items:center;width:86px;height:86px;margin:auto;display:grid;position:absolute;inset:0}.hero-info{z-index:3;text-align:left;direction:ltr;position:absolute;bottom:55px;left:32px;right:32px}.hero-info h1{margin:0 0 24px;font-size:27px}.hero-info small{color:#c3aeba}.hero-nav{z-index:3;color:#baa5b4;align-items:center;gap:12px;font-size:12px;display:flex;position:absolute;bottom:28px;right:26px}.hero-nav button{color:#fff;background:#21101e;border:1px solid #75435f;border-radius:50%;width:38px;height:38px}.controls{justify-content:space-between;align-items:center;margin:22px 0 18px;display:flex}.tabs{background:#130b15;border:1px solid #2d182a;border-radius:999px;padding:4px;display:flex}.tabs button{color:#7f6c7b;background:0 0;border:0;border-radius:999px;padding:10px 20px;font-family:inherit}.tabs button.active{color:#e5c8df;background:#48203f}.mix{align-items:center;gap:7px;padding:10px 16px;display:flex}.grid{grid-template-columns:repeat(4,1fr);gap:14px;display:grid}.card{background:#171019;border:1px solid #362038;border-radius:12px;height:465px;position:relative;overflow:hidden}.card img{object-fit:cover;width:100%;height:100%}.duration{background:#120f16bf;border-radius:5px;padding:5px 8px;font-size:11px;position:absolute;top:12px;left:12px}.card h3{z-index:2;white-space:nowrap;text-overflow:ellipsis;text-align:right;margin:0;font-size:13px;position:absolute;bottom:17px;left:55px;right:15px;overflow:hidden}.card-go{z-index:3;color:#fff;background:#f52e84;border:0;border-radius:50%;place-items:center;width:36px;height:36px;display:grid;position:absolute;bottom:12px;left:12px}.bottom-cta{background:#180b16;border:1px solid #54243e;border-radius:14px;justify-content:space-between;align-items:center;gap:20px;width:min(610px,100%);margin:35px auto 0;padding:14px 15px;display:flex}.bottom-cta p{color:#c6a8bd;margin:0;font-size:11px}.bottom-cta button{color:#fff;white-space:nowrap;background:linear-gradient(135deg,#ff2f84,#c83fd3);border:0;border-radius:10px;padding:15px 27px;font-family:inherit;font-weight:700}@media (width<=800px){.page{padding:0 8px 18px}.header{height:57px;margin-bottom:9px}.brand b{font-size:20px}.outline-btn{padding:9px 14px;font-size:11px}.hero{border-radius:12px;height:490px}.play{width:62px;height:62px}.hero-info{bottom:50px;left:16px;right:16px}.hero-info h1{margin-bottom:14px;font-size:18px}.hero-nav{bottom:17px;right:14px}.controls{margin:13px 0}.tabs button{padding:9px 14px;font-size:10px}.mix{padding:9px 12px;font-size:10px}.grid{grid-template-columns:repeat(2,1fr);gap:8px}.card{border-radius:10px;height:325px}.card h3{font-size:10px;bottom:12px;right:9px}.card-go{width:31px;height:31px;bottom:8px;left:8px}.duration{font-size:9px;top:8px;left:8px}.bottom-cta{margin-top:22px;padding:11px}.bottom-cta p{font-size:8px}.bottom-cta button{padding:12px 15px;font-size:10px}}@media (width>=801px) and (width<=1200px){.hero{height:560px}.card{height:380px}}.hero-swipe{touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab;background:0 0}.hero-swipe.dragging{cursor:grabbing}.hero-slide{will-change:transform;background-position:50%;background-size:cover;transition:transform .18s;position:absolute;inset:0}.hero-next-enter-active,.hero-next-leave-active,.hero-prev-enter-active,.hero-prev-leave-active{transition:transform .28s,opacity .28s}.hero-next-enter-from{opacity:.35;transform:translate(7%)}.hero-next-leave-to,.hero-prev-enter-from{opacity:.35;transform:translate(-7%)}.hero-prev-leave-to{opacity:.35;transform:translate(7%)}.hero-swipe .hero-info,.hero-swipe .hero-nav,.hero-swipe .hero-age,.hero-swipe .spark,.hero-swipe .play,.hero-swipe .hero-shade{pointer-events:none}.hero-swipe .hero-nav,.hero-swipe .spark,.hero-swipe .play{pointer-events:auto}