@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
:root{--bg:#111114;--surface:#1a1a20;--surface2:#22222a;--text:#f5f4f6;--muted:#a6a3ae;--accent:#c53c59;--accent2:#84243a;--line:#303039;--radius:16px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"IBM Plex Sans Arabic",system-ui,-apple-system,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}button,input{font:inherit}
button{cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.site-header{max-width:1160px;margin:auto;padding:18px 22px;display:flex;align-items:center;gap:24px;justify-content:space-between}
.brand{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent);font-family:Arial,sans-serif;font-weight:800;color:white}
.brand-large{font-size:19px;justify-content:center;margin-bottom:22px}.brand-large .brand-mark{width:42px;height:42px}
.age-tag{font-size:10px;padding:2px 6px;border:1px solid #71404b;border-radius:5px;color:#f09aac}
.search-wrap{position:relative;max-width:400px;flex:1}
.search-wrap input{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:11px;color:var(--text);padding:11px 14px 11px 40px;outline:none}
.search-wrap input:focus{border-color:var(--accent)}
.search-wrap>span:last-child{position:absolute;left:13px;top:3px;color:var(--muted);font-size:25px}
.menu-toggle{display:none;background:transparent;color:var(--text);border:1px solid var(--line);border-radius:9px;padding:7px 10px}
.nav-bar{display:flex;gap:8px;justify-content:center;padding:0 20px 18px;border-bottom:1px solid var(--line)}
.nav-item{border:0;background:transparent;color:var(--muted);padding:9px 17px;border-radius:9px}
.nav-item:hover,.nav-item.active{background:#35202a;color:#fff}
.container{max-width:1160px;margin:0 auto;padding:24px 22px}
.ad-slot{position:relative;display:flex;align-items:center;justify-content:center;min-height:92px;border:1px dashed #42404a;border-radius:12px;background:#17171c;overflow:hidden}
.ad-label{position:absolute;top:6px;right:9px;font-size:10px;color:#777480}
.ad-placeholder{font-size:13px;color:#716d79;text-align:center;padding:24px}
.hero{margin:25px 0 38px;min-height:255px;border:1px solid #39252d;border-radius:20px;background:radial-gradient(ellipse at 78% 45%,#4c1f30 0,transparent 40%),linear-gradient(115deg,#20171d,#19191f 65%);display:flex;align-items:center;justify-content:space-between;padding:34px 42px;overflow:hidden}
.eyebrow{color:#e77991;text-transform:uppercase;font-size:12px;font-weight:700;letter-spacing:.08em;margin:0 0 7px}
.hero h1{font-size:clamp(27px,4vw,42px);line-height:1.35;margin:0 0 12px;letter-spacing:-.03em}
.hero h1 span{color:#e77991}
.hero-copy{color:var(--muted);margin:0 0 20px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:11px 18px;border-radius:10px;font-weight:600;border:1px solid transparent}
.primary{background:var(--accent);color:white}.primary:hover{background:#d64a68}
.secondary{background:#292831;color:var(--text);border-color:#3b3943}
.full{width:100%;margin-top:10px}
.hero-art{position:relative;flex:0 0 250px;height:190px;display:grid;place-items:center}
.art-orb{width:155px;height:155px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e77a91,#7d2942 42%,#24171e 72%);box-shadow:0 0 80px #a32c4b55}
.art-line{position:absolute;width:220px;height:95px;border:1px solid #df718b77;border-radius:50%;transform:rotate(-27deg)}
.hero-art>span{position:absolute;font-weight:700;font-size:28px;letter-spacing:.08em}
.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:17px}
.section-heading h2{font-size:23px;margin:0}
.result-count{color:var(--muted);font-size:12px}
.content-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.media-card{min-width:0;background:var(--surface);border:1px solid #292830;border-radius:var(--radius);overflow:hidden;transition:transform .18s,border-color .18s}
.media-card:hover{transform:translateY(-3px);border-color:#70404d}
.thumbnail{height:190px;position:relative;display:grid;place-items:center;overflow:hidden}
.thumbnail:before,.thumbnail:after{content:"";position:absolute;border-radius:50%;filter:blur(1px)}
.thumb-one{background:linear-gradient(135deg,#351b28,#8b304c 52%,#251b27)}
.thumb-one:before{width:190px;height:190px;background:#e77d9430;right:-20px;top:-70px}
.thumb-two{background:linear-gradient(145deg,#282b36,#5d3a51 60%,#24212d)}
.thumb-two:before{width:130px;height:180px;border-radius:80px 80px 25px 25px;background:linear-gradient(#bda0b333,#241b2b);left:25%;bottom:-60px}
.thumb-three{background:linear-gradient(135deg,#1e2b31,#3c6262,#1b2029)}
.thumb-three:before{width:190px;height:190px;background:#9ac6bd24;left:-50px;bottom:-110px}
.thumb-four{background:linear-gradient(135deg,#3b2831,#a05c65,#30242e)}
.thumb-four:before{width:110px;height:150px;border-radius:70px 70px 18px 18px;background:#f4c2c21f;right:30%;bottom:-50px}
.thumb-five{background:linear-gradient(135deg,#25213b,#69446e,#251d2d)}
.thumb-five:before{width:180px;height:180px;background:#d2a2e222;right:-60px;top:-60px}
.thumb-six{background:linear-gradient(135deg,#34262b,#7c5a4a,#29232b)}
.thumb-six:before{width:120px;height:180px;border-radius:80px 80px 25px 25px;background:#d9b4a222;left:35%;bottom:-70px}
.type-pill{position:absolute;top:12px;right:12px;background:#101015c9;padding:3px 9px;border-radius:6px;font-size:11px;z-index:1}
.play-icon,.photo-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#1111149c;border:1px solid #ffffff40;z-index:1;font-size:17px;padding-right:2px}
.photo-icon{border-radius:12px;font-size:24px}
.duration{position:absolute;bottom:10px;left:10px;background:#101015d9;border-radius:5px;padding:2px 7px;font-size:11px}
.card-info{padding:13px 15px 16px}
.card-info h3{font-size:15px;margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-info p{font-size:12px;color:var(--muted);margin:0}
.ad-inline{grid-column:1/-1;min-height:100px}
.ad-bottom{margin-top:25px}
.notice{display:flex;gap:10px;align-items:flex-start;margin-top:22px;padding:13px 15px;border:1px solid #3c3037;background:#211a20;border-radius:10px;color:#bcb4bd;font-size:12px}
.notice span{color:#e77991;font-size:17px}.notice p{margin:0}
.empty-state{text-align:center;padding:45px 10px;color:var(--muted)}
.site-footer{border-top:1px solid var(--line);padding:26px 22px 32px;text-align:center;color:var(--muted);font-size:12px}
.site-footer .brand{color:var(--text);justify-content:center}
.footer-links{display:flex;justify-content:center;gap:22px;margin:15px 0}.footer-links a:hover{color:white}
.age-gate{position:fixed;inset:0;z-index:10;background:#0b0b0feF;display:grid;place-items:center;padding:20px}
.age-gate.hidden{display:none}
.age-card{width:min(100%,420px);padding:30px;background:#1a191f;border:1px solid #41303a;border-radius:18px;text-align:center;box-shadow:0 20px 80px #0008}
.age-card h1{font-size:24px;margin:0 0 10px}.age-card .muted{color:var(--muted);font-size:13px}.age-card small{display:block;margin-top:18px;font-size:10px}
@media(max-width:760px){.site-header{gap:12px;padding:14px 15px;flex-wrap:wrap}.brand{font-size:13px}.brand-mark{width:30px;height:30px}.search-wrap{order:3;flex-basis:100%;max-width:none}.menu-toggle{display:block}.nav-bar{display:none;flex-wrap:wrap;justify-content:flex-start;padding:8px 14px 14px}.nav-bar.open{display:flex}.nav-item{padding:8px 12px}.container{padding:17px 14px}.hero{padding:25px 22px;min-height:225px;margin:16px 0 28px}.hero-art{flex-basis:100px;height:130px;opacity:.75}.art-orb{width:95px;height:95px}.art-line{width:130px;height:60px}.hero-art>span{font-size:20px}.hero h1{font-size:27px}.hero-copy{font-size:13px}.content-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.thumbnail{height:145px}.card-info{padding:11px}.card-info h3{font-size:13px}.card-info p{font-size:11px}.section-heading h2{font-size:20px}.ad-slot{min-height:78px}.ad-placeholder{font-size:11px;padding:20px 10px}}
@media(max-width:390px){.hero{padding:21px 16px}.hero-art{display:none}.hero h1{font-size:25px}.content-grid{gap:9px}.thumbnail{height:125px}.card-info h3{font-size:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}