.mira{background:radial-gradient(1200px 600px at 30% 0%,#fde6ee 0,transparent 60%),linear-gradient(170deg,#fbeef3 0%,#f1e4f6 55%,#FBF1E8 100%);overflow-x:hidden}
.m-hero{position:relative;display:grid;grid-template-columns:auto minmax(280px,480px);gap:5vw;align-items:center;justify-content:center;padding:4vw 5vw 3vw;min-height:80vh;transition:padding .6s}
.stage{position:relative;perspective:2400px;display:flex;justify-content:center;align-items:center}
.book{position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;transition:transform 1.2s cubic-bezier(.645,.045,.355,1),width .01s}
.m-hero:not(.reading) .book{transform:rotateY(-16deg) rotateX(6deg);cursor:pointer;animation:float 5s ease-in-out infinite}
.m-hero:not(.reading) .book:hover{transform:rotateY(-6deg) rotateX(3deg) scale(1.02)}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
.pg,.leaf .face,.cover .face{position:absolute;top:0;width:var(--w);height:var(--h);overflow:hidden;background:#f7eef3}
.pg img,.face img{width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.pg.L{left:0;border-radius:10px 2px 2px 10px}.pg.R{left:var(--w);border-radius:2px 10px 10px 2px}
.pg.L::after,.pg.R::after{content:"";position:absolute;inset:0;pointer-events:none}
.pg.L::after{background:linear-gradient(90deg,transparent 80%,rgba(60,20,60,.28))}.pg.R::after{background:linear-gradient(90deg,rgba(60,20,60,.32),transparent 18%)}
.m-hero:not(.reading) .pg{visibility:hidden}
.reading .book{width:calc(var(--w)*2);box-shadow:0 40px 80px -30px rgba(90,40,110,.55)}
.reading .book.single{width:var(--w)}
.book.single .pg.L{display:none}.book.single .pg.R{left:0;border-radius:10px}.book.single .pg.R::after{background:linear-gradient(90deg,rgba(60,20,60,.18),transparent 8%)}
/* cover */
.cover{position:absolute;left:0;top:0;width:var(--w);height:var(--h);transform-origin:right center;transform-style:preserve-3d;transition:transform 1.4s cubic-bezier(.645,.045,.355,1),opacity .4s;z-index:5}
.cover .face{backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:10px 4px 4px 10px}
.cover .front{box-shadow:-3px 3px 0 #fff,-6px 6px 0 #f3e3ee,-9px 9px 0 #fff,-12px 12px 0 #ead6e6,-14px 14px 0 #d9bfd6,-20px 34px 50px rgba(80,30,90,.45)}
.cover .front::before{content:"";position:absolute;right:0;top:0;bottom:0;width:22px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35) 40%,rgba(0,0,0,.25));z-index:2}
.cover .front::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 45%,transparent 60%);background-size:250% 100%;animation:sheen 4.5s ease-in-out infinite;z-index:2}
@keyframes sheen{0%{background-position:150% 0}60%,100%{background-position:-60% 0}}
.cover .back{transform:rotateY(180deg)}
.book.open .cover{transform:rotateY(180deg)}
.book.single.open .cover{transform:rotateY(180deg);opacity:0;transition:transform 1.3s cubic-bezier(.645,.045,.355,1),opacity .5s .8s}
/* glow hint */
.glow{position:absolute;inset:-18px;border-radius:24px;background:radial-gradient(closest-side,rgba(247,181,192,.9),rgba(186,140,230,.45) 60%,transparent);filter:blur(18px);z-index:-1;animation:pulse 2.4s ease-in-out infinite;transform:translateZ(-30px)}
@keyframes pulse{0%,100%{opacity:.55;transform:translateZ(-30px) scale(.97)}50%{opacity:1;transform:translateZ(-30px) scale(1.05)}}
.reading .glow{opacity:0;animation:none;transition:opacity .4s}
.hint{position:absolute;left:50%;bottom:-62px;transform:translateX(-50%);white-space:nowrap;text-align:center;color:#7a4fa8;font-size:14px;letter-spacing:.06em;animation:bob 2s ease-in-out infinite;pointer-events:none}
.hint b{display:block;font:500 15px Tajawal,sans-serif;color:#b0608a;margin-top:2px}
.hint::before{content:"✦";display:block;font-size:18px;color:#c9a24a;margin-bottom:2px}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 6px}}
.reading .hint{opacity:0;transition:.3s}
/* leaf */
.leaf{position:absolute;top:0;width:var(--w);height:var(--h);transform-style:preserve-3d;z-index:6;transition:transform 1.1s cubic-bezier(.645,.045,.355,1)}
.leaf .face{left:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.leaf .back{transform:rotateY(180deg)}
.leaf .face::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .55s ease-in;background:linear-gradient(90deg,rgba(40,10,50,.35),transparent 35%,rgba(255,255,255,.25) 60%,transparent 80%)}
.leaf.turning .face::after{opacity:1}
.leaf .shadow{position:absolute;inset:0;pointer-events:none}
/* sparkles */
.spk{position:absolute;width:var(--s);height:var(--s);pointer-events:none;background:radial-gradient(circle,#fff 0,#ffe8a8 30%,transparent 70%);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:tw var(--d) ease-in-out infinite;animation-delay:var(--dl);opacity:0}
@keyframes tw{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1) rotate(90deg)}}
/* controls */
.ctrls{display:none;justify-content:center;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.reading .ctrls{display:flex;animation:fadeIn .6s .9s both}
@keyframes fadeIn{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.ctrls button{padding:10px 22px;border-radius:50px;border:1.5px solid #7a4fa8;background:#fff8;color:#7a4fa8;font:500 14px Poppins,sans-serif;cursor:pointer;transition:.3s}
.ctrls button:hover:not(:disabled){background:#7a4fa8;color:#fff}.ctrls button:disabled{opacity:.35;cursor:default}
.ctrls .count{font-size:13px;color:#a77;min-width:90px;text-align:center}
.reading{grid-template-columns:1fr;min-height:auto}
.reading .m-desc{display:none}
.bookcol{display:flex;flex-direction:column;align-items:center}
/* description */
.m-desc h1{font:clamp(2.4rem,4.5vw,3.6rem)/1.1 Italiana,serif;color:#7a4fa8;margin:12px 0 6px}
.m-desc h1 small{display:block;font:700 .55em Tajawal,sans-serif;color:#c9a24a;margin-top:6px}
.m-desc .by{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#b48;margin-bottom:18px}
.m-desc .ot-lang p{font-size:16.5px;line-height:1.85;margin-bottom:12px}
.m-desc [lang=ar] p{font-size:19px;line-height:2.1}
.m-desc .q{font-style:italic;color:#7a4fa8;font-weight:500}
.m-desc [lang=ar] .q{font-style:normal}
.wide{grid-template-columns:minmax(0,1100px)!important}
@media(max-width:900px){.m-hero{grid-template-columns:1fr;justify-items:center;padding-top:8vw}.m-desc{order:2;max-width:560px;margin-top:70px}}
.m-hero{scroll-margin-top:70px}

.sgrp{margin:10px 0 34px}.sgrp h4{font:600 15px Poppins,sans-serif;color:#b0608a;letter-spacing:.08em;margin:0 0 16px;display:inline-block;background:#fff;padding:6px 18px;border-radius:50px;box-shadow:0 6px 16px #f07a7a22;transform:rotate(-2deg)}
.sgrid{display:flex;flex-wrap:wrap;gap:28px;justify-content:center}
.stk{padding:10px;border:0;background:#fff;border-radius:24px;cursor:zoom-in;box-shadow:0 12px 28px #7a4fa82a;width:min(340px,80vw);transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.stk.wide1{width:min(560px,88vw)}.stk img{width:100%;display:block;border-radius:16px}
.sgrid .stk:nth-child(odd){transform:rotate(-2.5deg)}.sgrid .stk:nth-child(even){transform:rotate(2deg)}
.stk:hover{animation:wiggle .5s ease-in-out;transform:scale(1.05) rotate(0)!important}
@keyframes wiggle{0%,100%{rotate:0deg}25%{rotate:-3deg}75%{rotate:3deg}}

.ggrid.mk{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:900px;margin:0 auto}.ggrid.mk button{padding:0;border:0;border-radius:12px;overflow:hidden;cursor:zoom-in}.ggrid.mk img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .4s}.ggrid.mk button:hover img{transform:scale(1.05)}@media(max-width:700px){.ggrid.mk{grid-template-columns:repeat(2,1fr);gap:10px}}

.landX{display:none}
html.land-lock,html.land-lock body{overflow:hidden!important}
.m-hero.land{position:fixed;inset:0;z-index:9999;margin:0;padding:0!important;min-height:0;background:radial-gradient(circle at 50% 40%,#3b2457,#140b20);display:flex;align-items:center;justify-content:center}
.m-hero.land .bookcol{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.m-hero.land.rot{inset:auto;top:0;left:100vw;width:100vh;height:100vw;transform-origin:0 0;transform:rotate(90deg)}
.m-hero.land .landX{display:flex;position:absolute;top:12px;right:14px;z-index:20;width:44px;height:44px;border-radius:50%;border:0;background:#fff;color:#4a2a6a;font-size:20px;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.35);cursor:pointer}
.m-hero.land .ctrls{gap:8px;margin-top:4px}.m-hero.land .ctrls button{padding:6px 14px;font-size:12px}.m-hero.land #close{display:none}.m-hero.land .count{color:#f3e6ff}
.m-hero.land .spk{display:none}
html,body{overflow-x:hidden;max-width:100%}@supports(overflow:clip){html,body{overflow-x:clip}}
.m-hero:not(.land) .landX{display:none!important}