/* ══ ياكوزا — ستايل الصفحات الداخلية المشترك ══ */
:root{--paper:#EFE8D8;--ink:#141210;--ink2:#3f3a32;--red:#C4161F}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Almarai,sans-serif;color:var(--ink);background:var(--paper);overflow-x:hidden}
canvas.bg{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;display:block}

/* الهيدر المعتمد */
.shell{position:sticky;top:0;z-index:20;padding:16px 3vw 8px}
header{max-width:1310px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:10px 24px;background:rgba(239,232,216,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border:1px solid rgba(20,18,16,.12);border-radius:44px;box-shadow:0 10px 32px rgba(20,18,16,.14)}
.brand{display:flex;align-items:center;gap:10px}
.brand img.lg{height:38px}.brand img.wm{height:24px}
nav{display:flex;align-items:center;gap:2px;font-weight:500;font-size:.93rem}
nav a{color:var(--ink2);text-decoration:none;transition:all .2s;white-space:nowrap;padding:8px 10px;border-radius:20px}
nav a:hover{background:rgba(20,18,16,.07);color:var(--ink)}
nav a.on{color:var(--red);font-weight:700;background:rgba(196,22,31,.08)}
.vipgrp{display:flex;align-items:center;gap:2px;margin:0 4px;padding:4px;
border:1px solid rgba(196,22,31,.30);border-radius:26px;background:rgba(196,22,31,.05)}
nav a.vip2{color:var(--red);font-weight:700;font-size:.88rem;padding:7px 10px}
nav a.vip2:hover{background:rgba(196,22,31,.12);color:var(--red)}
nav a.vip{position:relative;overflow:hidden;background:var(--red);color:#fff;
font-weight:800;font-size:.95rem;padding:8px 16px;border-radius:22px;box-shadow:0 4px 14px rgba(196,22,31,.30)}
nav a.vip:hover{color:#fff;background:#a91018}
nav a.vip .sheen{position:absolute;top:0;bottom:0;right:100%;width:45%;pointer-events:none;
background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent);
transform:skewX(-18deg);animation:sheen 6s ease-in-out infinite}
@keyframes sheen{0%,55%{transform:translateX(0) skewX(-18deg);opacity:0}60%{opacity:1}80%,100%{transform:translateX(-340%) skewX(-18deg);opacity:0}}
.auth{display:flex;gap:10px}
.btn{display:inline-block;padding:9px 15px;border-radius:24px;font-weight:700;font-size:.9rem;
white-space:nowrap;text-decoration:none;border:1.5px solid transparent;transition:transform .2s;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn.red{background:var(--red);color:#fff}
.btn.ghost{border-color:rgba(20,18,16,.35);color:var(--ink)}
.burger{display:none;font-size:1.5rem;color:var(--ink);background:none;border:0;cursor:pointer}
@media (max-width:1420px){nav,.auth{display:none}.burger{display:block}}

/* قائمة الموبايل — بتنبنى من روابط القائمة الحية عند كل فتحة */
.mnav{display:flex;flex-direction:column;gap:2px;max-width:1250px;margin:10px auto 0;
padding:14px;background:rgba(239,232,216,.97);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
border:1px solid rgba(20,18,16,.12);border-radius:24px;box-shadow:0 18px 44px rgba(20,18,16,.18)}
.mnav a{padding:12px 16px;border-radius:14px;color:var(--ink2);text-decoration:none;
font-weight:700;text-align:center}
.mnav a:hover{background:rgba(20,18,16,.07);color:var(--ink)}
.mnav a.on{color:var(--red);background:rgba(196,22,31,.08)}
.mnav a.vip{background:var(--red);color:#fff}
.mnav a.vip2{color:var(--red)}
.mnav .sep{height:1px;background:rgba(20,18,16,.12);margin:8px 4px}
@media (min-width:1421px){.mnav{display:none}}

/* زر الشات العايم + مربع التواصل */
.chatfab{position:fixed;bottom:18px;left:18px;z-index:60;width:54px;height:54px;border-radius:50%;
background:var(--red);border:0;cursor:pointer;box-shadow:0 10px 26px rgba(196,22,31,.4);
display:flex;align-items:center;justify-content:center;transition:transform .2s}
.chatfab:hover{transform:translateY(-3px)}
.chatfab svg{width:26px;height:26px;fill:#fff}
.chatbox{position:fixed;bottom:84px;left:18px;z-index:60;width:min(280px,calc(100vw - 36px));
background:rgba(239,232,216,.98);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(20,18,16,.14);
border-radius:18px;padding:20px;box-shadow:0 24px 60px rgba(20,18,16,.25)}
.chatbox h4{font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:1.02rem;margin-bottom:6px}
.chatbox p{color:var(--ink2);font-size:.88rem;line-height:1.9;margin-bottom:14px}
.chatbox .btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;text-align:center}
.chatbox .btn svg{width:17px;height:17px;fill:#fff}

/* هيكل الصفحة */
main{max-width:1150px;margin:0 auto;padding:40px 5vw 90px;position:relative}
h1.page{font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;
font-size:clamp(1.7rem,3.2vw,2.6rem);line-height:1.8;margin-bottom:10px}
h1.page em{font-style:normal;color:var(--red)}
p.lead{color:var(--ink2);line-height:2;font-size:1.08rem;max-width:42em;margin-bottom:14px}
.tempnote{display:inline-block;background:rgba(196,22,31,.08);color:var(--red);
border:1px dashed rgba(196,22,31,.4);border-radius:12px;padding:6px 16px;
font-size:.85rem;font-weight:700;margin-bottom:30px}

/* شبكة الكروت */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:960px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.grid{grid-template-columns:1fr}}
.gcard{background:rgba(255,253,247,.65);border:1px solid rgba(20,18,16,.13);border-radius:16px;
overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);
transition:transform .3s,box-shadow .3s,border-color .3s}
.gcard:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(20,18,16,.15);border-color:rgba(196,22,31,.45)}
.gcard .ph{position:relative;aspect-ratio:16/10;background:
radial-gradient(120% 100% at 50% 0%,#241f1a 0%,var(--ink) 70%);
display:flex;align-items:center;justify-content:center}
.gcard .ph img{width:34%;opacity:.35;filter:grayscale(20%)}
.gcard .ph span{position:absolute;bottom:10px;left:12px;color:rgba(239,232,216,.5);font-size:.72rem}
.gcard .body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.gcard h3{font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:1.08rem;line-height:1.7}
.gcard p{color:var(--ink2);line-height:1.9;font-size:.95rem;flex:1}
.gcard .foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.gcard .free{background:rgba(196,22,31,.09);color:var(--red);border:1px solid rgba(196,22,31,.3);
border-radius:14px;padding:3px 12px;font-size:.78rem;font-weight:700}
.gcard .go{color:var(--red);font-weight:800;font-size:.9rem}

/* صفحة التفاصيل */
.detail{display:grid;grid-template-columns:1.05fr 1fr;gap:4vw;align-items:start;margin-top:10px}
@media (max-width:900px){.detail{grid-template-columns:1fr}}
.dimg{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:
radial-gradient(120% 100% at 50% 0%,#241f1a 0%,var(--ink) 70%);
display:flex;align-items:center;justify-content:center;box-shadow:0 24px 60px rgba(20,18,16,.22)}
.dimg img{width:34%;opacity:.35}
.dimg span{position:absolute;bottom:12px;left:14px;color:rgba(239,232,216,.5);font-size:.75rem}
.dinfo h1{font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.75;margin-bottom:12px}
.dinfo .free{display:inline-block;background:rgba(196,22,31,.09);color:var(--red);
border:1px solid rgba(196,22,31,.3);border-radius:14px;padding:4px 14px;font-size:.85rem;font-weight:700;margin-bottom:16px}
.dinfo p.desc{color:var(--ink2);line-height:2.05;font-size:1.05rem;margin-bottom:24px}
.specs{border:1px solid rgba(20,18,16,.13);border-radius:14px;overflow:hidden;margin-bottom:26px}
.specs .row{display:flex;justify-content:space-between;gap:14px;padding:13px 18px;font-size:.95rem}
.specs .row:nth-child(odd){background:rgba(255,253,247,.6)}
.specs .row b{color:var(--ink2);font-weight:700}
.specs .row span{font-weight:700}
.dinfo .btns{display:flex;gap:12px;flex-wrap:wrap}
.back{display:inline-block;margin-bottom:22px;color:var(--ink2);text-decoration:none;font-weight:700;font-size:.9rem}
.back:hover{color:var(--red)}

/* حركة الظهور — الأساس ظاهر */
html.js .rv{opacity:0}
html.js .rv.go{animation:rvin .7s cubic-bezier(.22,1,.36,1) both}
@keyframes rvin{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
html.js .rv{opacity:1}}

/* ══ الفورمات — دخول وإنشاء حساب ══ */
.formwrap{max-width:460px;margin:30px auto 0}
.formcard{background:rgba(255,253,247,.72);border:1px solid rgba(20,18,16,.14);border-radius:18px;
padding:34px 30px;box-shadow:0 20px 50px rgba(20,18,16,.12)}
.formcard h1{font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:1.5rem;margin-bottom:6px}
.formcard h1 em{font-style:normal;color:var(--red)}
.formcard .sub{color:var(--ink2);font-size:.95rem;margin-bottom:24px;line-height:1.9}
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:7px}
.field input{width:100%;padding:13px 16px;border-radius:12px;border:1.5px solid rgba(20,18,16,.2);
background:rgba(255,255,255,.7);font-family:Almarai,sans-serif;font-size:1rem;color:var(--ink);
transition:border-color .2s}
.field input:focus{outline:none;border-color:var(--red)}
.formcard .btn{width:100%;text-align:center;padding:13px;font-size:1.02rem;margin-top:6px}
.formcard .links{display:flex;justify-content:space-between;gap:10px;margin-top:18px;font-size:.88rem}
.formcard .links a{color:var(--ink2);text-decoration:none;font-weight:700}
.formcard .links a:hover{color:var(--red)}

/* ══ صفحات خدمات VIP ══ */
.vhero{background:var(--ink);color:var(--paper);border-radius:20px;padding:40px 34px;margin-top:10px;
box-shadow:0 26px 60px rgba(20,18,16,.28)}
.vhero h1{font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:clamp(1.5rem,2.8vw,2.2rem);
line-height:1.8;margin-bottom:12px}
.vhero h1 em{font-style:normal;color:#e8452e}
.vhero p{color:#cfc6ae;line-height:2.05;font-size:1.05rem;max-width:46em;margin-bottom:20px}
.vhero .row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.vhero .mini{font-size:.85rem;color:#cfc6ae;opacity:.85}
.bullets{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
@media (max-width:860px){.bullets{grid-template-columns:1fr}}
.bullet{border:1px solid rgba(20,18,16,.13);border-radius:14px;padding:22px 20px;background:rgba(255,253,247,.6)}
.bullet h3{font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:1rem;margin-bottom:8px}
.bullet h3 span{color:var(--red);margin-left:7px}
.bullet p{color:var(--ink2);line-height:1.9;font-size:.93rem}
.bullets.dim .bullet{background:rgba(36,31,26,.94);border-color:rgba(239,232,216,.14)}
.bullets.dim .bullet h3{color:var(--paper)}
.bullets.dim .bullet h3 span{color:#e8452e}
.bullets.dim .bullet p{color:#cfc6ae}

/* ══ خطط الاشتراك — صفحات VIP ══ */
h2.sech{font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;
font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.8;margin:46px 0 4px}
h2.sech em{font-style:normal;color:var(--red)}
p.sechlead{color:var(--ink2);line-height:2;font-size:1rem;margin-bottom:22px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
@media (max-width:860px){.plans{grid-template-columns:1fr}}
.plan{position:relative;border:1px solid rgba(20,18,16,.13);border-radius:16px;
padding:30px 24px 26px;background:rgba(255,253,247,.6);display:flex;flex-direction:column;
align-items:center;text-align:center;gap:6px;transition:transform .3s,box-shadow .3s}
.plan:hover{transform:translateY(-6px);box-shadow:0 18px 44px rgba(20,18,16,.13)}
.plan h3{font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:1.05rem;margin-bottom:4px}
.plan .was{color:var(--ink2);text-decoration:line-through;opacity:.75;font-size:1rem}
.plan .price{font-family:'Noto Kufi Arabic',sans-serif;font-weight:800;font-size:2.3rem;line-height:1.3}
.plan .per{color:var(--ink2);font-size:.9rem;line-height:1.9;flex:1;margin-bottom:12px}
.plan .btn{width:100%;text-align:center;padding:12px}
.plan .save{position:absolute;top:-13px;right:20px;background:var(--red);color:#fff;
border-radius:14px;padding:4px 14px;font-size:.78rem;font-weight:800}
.plan.best{background:var(--ink);color:var(--paper);border-color:rgba(196,22,31,.5);
box-shadow:0 26px 60px rgba(20,18,16,.28)}
.plan.best .was,.plan.best .per{color:#cfc6ae}
.paynote{display:block;color:var(--ink2);font-size:.88rem;margin-top:18px;line-height:1.9}

/* ══ زر جوجل ══ */
.gbtn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
padding:12px;border-radius:12px;border:1.5px solid rgba(20,18,16,.22);
background:rgba(255,255,255,.85);color:var(--ink);font-weight:700;font-size:.98rem;
text-decoration:none;transition:border-color .2s,transform .2s}
.gbtn:hover{border-color:rgba(20,18,16,.45);transform:translateY(-1px)}
.gbtn svg{width:20px;height:20px;flex-shrink:0}
.or{display:flex;align-items:center;gap:14px;margin:20px 0;color:var(--ink2);font-size:.85rem;font-weight:700}
.or::before,.or::after{content:"";flex:1;height:1px;background:rgba(20,18,16,.16)}

/* ══ شارة VIP المدفوعة ══ */
.gcard .vipb,.dinfo .vipb{display:inline-block;background:var(--red);color:#fff;
border-radius:14px;padding:3px 14px;font-size:.78rem;font-weight:800;letter-spacing:.5px}
.dinfo .vipb{padding:5px 16px;font-size:.85rem;margin-bottom:16px}