:root{
--bg:#F7F7F9; --bg2:#F1F1F4;
--card:#FCFCFD; --alt:#EFEFF1; --sunk:#EBEBEF;
--line:#DEDEE4; --line-2:#C8C8D0;
--ink:#111118; --mut:#5F5F73; --faint:#9A9AAB;
--amber:#D97706; --amber-lo:#EFA02B; --amber-hi:#B15D04; --amber-edge:#A05505;
--violet:#7C3AED; --green:#059669; --teal:#0891B2;
--smoke-1:#FCFCFD; --smoke-2:#EDEDF1; --smoke-3:#DBDBE2;
--smoke-line:#BFBFCA; --smoke-ink:#3A3A48;
--smoke-sh:0 1px 0 rgba(255,255,255,.85) inset,0 -1px 0 rgba(17,17,24,.055) inset,0 2px 4px rgba(17,17,24,.11);
--smoke-sh-hi:0 1px 0 rgba(255,255,255,.92) inset,0 -1px 0 rgba(17,17,24,.07) inset,0 5px 11px rgba(17,17,24,.16);
--smoke-sh-in:0 2px 5px rgba(17,17,24,.20) inset;
--amber-sh:0 1px 0 rgba(255,255,255,.35) inset,0 -1px 0 rgba(0,0,0,.16) inset,0 3px 7px rgba(177,93,4,.30);
--amber-sh-hi:0 1px 0 rgba(255,255,255,.42) inset,0 -1px 0 rgba(0,0,0,.16) inset,0 7px 16px rgba(177,93,4,.38);
--r:16px; --r-sm:10px; --nav-h:68px; --w:1080px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:92px;overflow-x:hidden}
body{
font-family:'Tajawal',system-ui,-apple-system,sans-serif;
color:var(--ink);line-height:1.85;font-size:16.5px;overflow-x:hidden;
-webkit-font-smoothing:antialiased;
background:
linear-gradient(rgba(124,58,237,.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(124,58,237,.035) 1px,transparent 1px),
radial-gradient(1000px 500px at 88% -10%,rgba(217,119,6,.10),transparent 60%),
linear-gradient(178deg,var(--bg2),var(--bg) 45%);
background-size:44px 44px,44px 44px,auto,auto;
background-attachment:fixed;
}
h1,h2,h3,h4{font-family:'Cairo',sans-serif;line-height:1.35;font-weight:800;letter-spacing:-.4px}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--w);margin-inline:auto;padding-inline:24px}
.mono{font-family:'IBM Plex Mono',monospace;direction:ltr;unicode-bidi:isolate}
::selection{background:rgba(217,119,6,.20)}
:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:6px}
/* الأزرار */
.btn,.b2{display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;
padding:13px 26px;border-radius:var(--r-sm);transition:transform .16s,box-shadow .16s,color .16s}
.btn{background:linear-gradient(180deg,var(--amber-lo),var(--amber) 55%,var(--amber-hi));
border:1px solid var(--amber-edge);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.26);box-shadow:var(--amber-sh)}
.btn:hover{transform:translateY(-2px);box-shadow:var(--amber-sh-hi)}
.b2{background:linear-gradient(180deg,var(--smoke-1),var(--smoke-2) 52%,var(--smoke-3));
border:1px solid var(--smoke-line);color:var(--smoke-ink);
text-shadow:0 1px 0 rgba(255,255,255,.7);box-shadow:var(--smoke-sh)}
.b2:hover{transform:translateY(-2px);color:var(--ink);box-shadow:var(--smoke-sh-hi)}
.b2:active,.btn:active{transform:translateY(1px);box-shadow:var(--smoke-sh-in)}
.sm{padding:9px 17px;font-size:13.5px}
/* التنقّل */
.nav{position:sticky;top:0;z-index:60;height:var(--nav-h);
background:rgba(247,247,249,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
border-bottom:1px solid var(--line)}
.nav .in{height:100%;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand .m{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
background:linear-gradient(180deg,var(--amber-lo),var(--amber) 55%,var(--amber-hi));
border:1px solid var(--amber-edge);
box-shadow:0 3px 0 rgba(17,17,24,.10),0 7px 15px rgba(177,93,4,.26),inset 0 1px 0 rgba(255,255,255,.35)}
.brand .m i{width:7px;height:7px;border-radius:50%;background:#fff;font-style:normal}
.brand b{font-family:'Cairo',sans-serif;font-weight:900;font-size:18px}
.brand b span{color:var(--amber)}
.nav ul{display:flex;gap:2px;list-style:none;margin-inline-end:auto}
.nav ul a{padding:8px 14px;border-radius:var(--r-sm);font-size:14.5px;color:var(--mut);font-weight:500;transition:.18s}
.nav ul a:hover{color:var(--ink);background:var(--sunk)}
.nav ul a.on{color:var(--amber);background:var(--sunk);font-weight:700}
.nav .end{margin-inline-start:auto;display:flex;gap:9px;align-items:center}
.burger{display:none;width:40px;height:40px;position:relative;cursor:pointer;border-radius:var(--r-sm);
background:linear-gradient(180deg,var(--smoke-1),var(--smoke-3));
border:1px solid var(--smoke-line);box-shadow:var(--smoke-sh)}
.burger s{position:absolute;inset-inline:11px;height:2px;background:var(--ink);border-radius:2px;
transition:transform .26s,opacity .18s,top .26s}
.burger s:nth-child(1){top:13px}.burger s:nth-child(2){top:19px}.burger s:nth-child(3){top:25px}
.burger[aria-expanded=true] s:nth-child(1){top:19px;transform:rotate(45deg)}
.burger[aria-expanded=true] s:nth-child(2){opacity:0}
.burger[aria-expanded=true] s:nth-child(3){top:19px;transform:rotate(-45deg)}
.dw{position:fixed;top:var(--nav-h);inset-inline:0;z-index:59;background:var(--card);
border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(17,17,24,.18);
transform:translateY(-10px);opacity:0;visibility:hidden;transition:.24s}
.dw.open{transform:none;opacity:1;visibility:visible}
.dw ul{list-style:none;padding:12px 24px 20px}
.dw a{display:block;padding:14px;border-radius:var(--r-sm);font-size:17px;font-weight:500;
border-bottom:1px solid var(--line)}
/* الترويسة */
.crumbs{padding-top:24px;font-size:12.5px;color:var(--faint)}
.crumbs a:hover{color:var(--amber)}
.top{padding:26px 0 6px;max-width:760px}
.eye{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
padding:6px 15px;border-radius:99px;color:var(--amber);
background:linear-gradient(180deg,var(--smoke-1),var(--smoke-3));
border:1px solid rgba(217,119,6,.32);
box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 1px 3px rgba(17,17,24,.07)}
.eye i{width:6px;height:6px;border-radius:50%;background:var(--amber);font-style:normal}
.top h1{font-size:clamp(29px,5.2vw,48px);font-weight:900;margin-top:22px;line-height:1.25}
.top p{margin-top:20px;font-size:17px;color:var(--mut);line-height:2}
.top p b{color:var(--ink)}
/* التخطيط */
.layout{display:grid;grid-template-columns:230px 1fr;gap:44px;align-items:start;margin-top:44px}
.toc{position:sticky;top:92px;padding:20px;border-radius:var(--r);background:var(--card);
border:1px solid var(--line);
box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 0 rgba(17,17,24,.045),0 8px 20px rgba(17,17,24,.07)}
.toc h4{font-size:12.5px;color:var(--amber);margin-bottom:14px;letter-spacing:.3px}
.toc ol{list-style:none;display:grid;gap:2px}
.toc a{display:flex;gap:10px;align-items:baseline;padding:8px 10px;border-radius:8px;
font-size:13.2px;color:var(--mut);line-height:1.6;transition:.18s}
.toc a:hover{background:var(--sunk);color:var(--ink)}
.toc a.on{background:var(--sunk);color:var(--amber);font-weight:700}
.toc a em{font-family:'IBM Plex Mono',monospace;font-style:normal;font-size:10.5px;
color:var(--faint);flex-shrink:0;direction:ltr}
/* بطاقة مفهوم */
.c{padding:28px 30px;margin-bottom:20px;border-radius:var(--r);background:var(--card);
border:1px solid var(--line);scroll-margin-top:92px;
box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 0 rgba(17,17,24,.045),0 8px 20px rgba(17,17,24,.07)}
.c .hd{display:flex;align-items:flex-start;gap:15px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.c .num{flex-shrink:0;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;
font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:700;direction:ltr;
background:linear-gradient(180deg,var(--amber-lo),var(--amber) 55%,var(--amber-hi));
border:1px solid var(--amber-edge);
box-shadow:0 3px 0 rgba(17,17,24,.10),0 7px 15px rgba(177,93,4,.24),inset 0 1px 0 rgba(255,255,255,.35)}
.c.v .num{background:linear-gradient(180deg,#9B6BF2,var(--violet) 55%,#6023C9);border-color:#5219B5;
box-shadow:0 3px 0 rgba(17,17,24,.10),0 7px 15px rgba(96,35,201,.24),inset 0 1px 0 rgba(255,255,255,.35)}
.c.g .num{background:linear-gradient(180deg,#34D399,var(--green) 55%,#047857);border-color:#046B4D;
box-shadow:0 3px 0 rgba(17,17,24,.10),0 7px 15px rgba(4,120,87,.24),inset 0 1px 0 rgba(255,255,255,.35)}
.c .hd h2{font-size:21px}
.c .hd .en{display:block;margin-top:3px;font-family:'IBM Plex Mono',monospace;direction:ltr;
font-size:11.5px;color:var(--faint)}
.rows{display:grid;gap:0;margin-top:4px}
.row{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:18px 0;
border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0;padding-bottom:0}
.row dt{font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;padding-top:2px;
position:relative;padding-inline-start:14px}
.row dt::before{content:"";position:absolute;inset-inline-start:0;top:8px;width:4px;height:16px;border-radius:2px}
.row.a dt{color:var(--amber)} .row.a dt::before{background:var(--amber)}
.row.v dt{color:var(--violet)} .row.v dt::before{background:var(--violet)}
.row.g dt{color:var(--green)} .row.g dt::before{background:var(--green)}
.row dd{font-size:14.8px;color:var(--mut);line-height:1.95}
.row dd b{color:var(--ink);font-weight:700}
.apps{display:flex;flex-wrap:wrap;gap:7px}
.apps span{font-size:12.5px;padding:5px 12px;border-radius:8px;color:var(--smoke-ink);
background:linear-gradient(180deg,var(--smoke-1),var(--smoke-3));
border:1px solid var(--smoke-line);
box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 1px 2px rgba(17,17,24,.07)}
/* تنبيه + خريطة */
.note{display:flex;gap:14px;padding:20px 22px;border-radius:var(--r);margin-bottom:20px;
border:1px solid rgba(217,119,6,.4);
background:linear-gradient(180deg,rgba(239,160,43,.09),rgba(217,119,6,.045));
box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 2px 0 rgba(217,119,6,.1)}
.note .i{color:var(--amber);font-size:19px;line-height:1.2}
.note h3{font-size:15px;margin-bottom:7px}
.note p{font-size:14px;color:var(--mut);line-height:1.95}
.note b{color:var(--ink)}
.map{padding:26px 30px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);
margin-bottom:20px;
box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 0 rgba(17,17,24,.045),0 8px 20px rgba(17,17,24,.07)}
.map h2{font-size:20px;color:var(--amber)}
.map>p{margin-top:10px;font-size:14.5px;color:var(--mut);line-height:1.95}
.rings{margin-top:22px}
.ring{border-radius:13px;padding:15px;text-align:center;border:1px solid}
.ring>b{display:block;font-family:'Cairo',sans-serif;font-size:13px;margin-bottom:11px}
.r1{background:rgba(217,119,6,.06);border-color:rgba(217,119,6,.38)} .r1>b{color:var(--amber)}
.r2{background:rgba(124,58,237,.06);border-color:rgba(124,58,237,.38)} .r2>b{color:var(--violet)}
.r3{background:rgba(8,145,178,.06);border-color:rgba(8,145,178,.38)} .r3>b{color:var(--teal)}
.r4{background:rgba(5,150,105,.08);border-color:rgba(5,150,105,.42);padding:13px} .r4>b{color:var(--green);margin:0}
.next{padding:26px 30px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);
box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 0 rgba(17,17,24,.045),0 8px 20px rgba(17,17,24,.07)}
.next h2{font-size:20px;color:var(--amber)}
.next p{margin-top:10px;font-size:14.5px;color:var(--mut);line-height:1.95}
.next .r{margin-top:20px;display:flex;gap:11px;flex-wrap:wrap}
footer{border-top:1px solid var(--line);background:rgba(239,239,241,.5);margin-top:56px}
.fg{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px;padding:44px 0 30px;font-size:14.5px}
.fg h4{font-size:14.5px;margin-bottom:13px}
.fg ul{list-style:none;display:grid;gap:9px}
.fg a{color:var(--mut)}.fg a:hover{color:var(--amber)}
.fg p{color:var(--mut);font-size:14px;line-height:1.9}
.fb{border-top:1px solid var(--line);padding:16px 0;text-align:center;font-size:12.5px;color:var(--faint)}
@media(max-width:900px){
.nav ul{display:none}.nav .end .btn{display:none}.burger{display:block}
.layout{grid-template-columns:1fr;gap:24px}
.toc{position:static}
.toc ol{grid-template-columns:1fr 1fr;display:grid}
.c{padding:22px}
.row{grid-template-columns:1fr;gap:7px;padding:16px 0}
.fg{grid-template-columns:1fr 1fr;gap:26px}
}
@media(max-width:560px){
.wrap{padding-inline:18px}
.toc ol{grid-template-columns:1fr}
.next .r>a{width:100%}
.fg{grid-template-columns:1fr;gap:24px}
}
@media(prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;scroll-behavior:auto!important}}
/* ═══ إضافات النسخة الموسّعة ═══ */
/* قائمة منسدلة في التنقّل */
.nav ul li{position:relative}
.nav .has>a::after{content:"▾";font-size:10px;margin-inline-start:5px;color:var(--faint)}
.sub{position:absolute;top:calc(100% + 8px);inset-inline-start:0;min-width:212px;padding:7px;
background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
box-shadow:0 14px 32px rgba(17,17,24,.16);
opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;z-index:70}
.nav .has:hover .sub,.nav .has:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;color:var(--mut);white-space:nowrap}
.sub a:hover{background:var(--sunk);color:var(--amber)}
.dw a.ind{padding-inline-start:34px;font-size:15.5px;color:var(--mut)}
/* شبكات عامة */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mt{margin-top:20px}.mt2{margin-top:36px}
/* بطاقة عامة */
.box{padding:24px 26px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);
margin-bottom:20px;scroll-margin-top:92px;
box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 0 rgba(17,17,24,.045),0 8px 20px rgba(17,17,24,.07)}
.box>h2{font-size:20px;color:var(--amber)}
.box.v>h2{color:var(--violet)}.box.g>h2{color:var(--green)}.box.t>h2{color:var(--teal)}
.box>h3{font-size:16px;margin-top:20px}
.box p{font-size:14.8px;color:var(--mut);line-height:1.95;margin-top:11px}
.box p b,.box li b{color:var(--ink);font-weight:700}
.box ul,.box ol{margin:12px 0 0;padding-inline-start:20px;display:grid;gap:9px}
.box li{font-size:14.6px;color:var(--mut);line-height:1.9}
.box li::marker{color:var(--amber)}
.box.v li::marker{color:var(--violet)}.box.g li::marker{color:var(--green)}
/* بطاقة قطاع */
.sect{padding:22px 24px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);
scroll-margin-top:92px;
box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 0 rgba(17,17,24,.045),0 6px 16px rgba(17,17,24,.06)}
.sect .sh{display:flex;align-items:center;gap:13px;padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.sect .ic{flex-shrink:0;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:19px;
background:linear-gradient(180deg,var(--smoke-1),var(--smoke-2) 52%,var(--smoke-3));
border:1px solid var(--smoke-line);box-shadow:var(--smoke-sh)}
.sect h3{font-size:16.5px}
.sect .en{display:block;margin-top:2px;font-family:'IBM Plex Mono',monospace;direction:ltr;font-size:10.5px;color:var(--faint)}
.sect ul{list-style:none;display:grid;gap:10px}
.sect li{position:relative;padding-inline-start:19px;font-size:14.2px;color:var(--mut);line-height:1.85}
.sect li::before{content:"←";position:absolute;inset-inline-start:0;top:1px;color:var(--amber);font-size:12px}
.sect li b{color:var(--ink);font-weight:700}
.sect.v li::before{color:var(--violet)}.sect.g li::before{color:var(--green)}.sect.t li::before{color:var(--teal)}
/* جدول */
.tw{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);background:var(--card);
box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 0 rgba(17,17,24,.045),0 8px 20px rgba(17,17,24,.07)}
table{width:100%;border-collapse:collapse;font-size:14.3px;min-width:560px}
thead th{background:var(--sunk);text-align:start;padding:13px 16px;font-family:'Cairo',sans-serif;
font-size:13px;font-weight:800;color:var(--ink);border-bottom:1px solid var(--line-2);white-space:nowrap}
tbody td{padding:14px 16px;border-bottom:1px solid var(--line);color:var(--mut);line-height:1.85;vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(217,119,6,.035)}
td b,td strong{color:var(--ink);font-weight:700}
td .mono{font-size:12.5px;color:var(--violet)}
/* مسرد */
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.srch{flex:1;min-width:210px;position:relative}
.srch input{width:100%;font-family:inherit;font-size:14.5px;padding:12px 16px;border-radius:var(--r-sm);
color:var(--ink);background:var(--card);border:1px solid var(--line-2);box-shadow:var(--smoke-sh-in)}
.srch input::placeholder{color:var(--faint)}
.chip{font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:9px 15px;border-radius:99px;
color:var(--smoke-ink);background:linear-gradient(180deg,var(--smoke-1),var(--smoke-2) 52%,var(--smoke-3));
border:1px solid var(--smoke-line);box-shadow:var(--smoke-sh);transition:.16s}
.chip:hover{transform:translateY(-1px);box-shadow:var(--smoke-sh-hi)}
.chip.on{background:linear-gradient(180deg,var(--amber-lo),var(--amber) 55%,var(--amber-hi));
border-color:var(--amber-edge);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.26);box-shadow:var(--amber-sh)}
.gcount{font-size:12.5px;color:var(--faint);margin:6px 2px 14px}
.tag{display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.tag.a{color:var(--amber-hi);background:rgba(217,119,6,.11);border:1px solid rgba(217,119,6,.32)}
.tag.v{color:#5219B5;background:rgba(124,58,237,.10);border:1px solid rgba(124,58,237,.30)}
.tag.g{color:#046B4D;background:rgba(5,150,105,.10);border:1px solid rgba(5,150,105,.30)}
.tag.t{color:#065F7C;background:rgba(8,145,178,.10);border:1px solid rgba(8,145,178,.30)}
.empty{padding:36px;text-align:center;color:var(--faint);font-size:14.5px}
/* خط زمني */
.tl{position:relative;padding-inline-start:26px;margin-top:22px}
.tl::before{content:"";position:absolute;inset-inline-start:6px;top:6px;bottom:6px;width:2px;
background:linear-gradient(180deg,var(--amber),rgba(124,58,237,.5))}
.tl .it{position:relative;padding-bottom:24px}
.tl .it:last-child{padding-bottom:0}
.tl .it::before{content:"";position:absolute;inset-inline-start:-25px;top:5px;width:12px;height:12px;border-radius:50%;
background:linear-gradient(180deg,var(--amber-lo),var(--amber-hi));border:2px solid var(--card);
box-shadow:0 0 0 2px rgba(217,119,6,.28)}
.tl .yr{font-family:'IBM Plex Mono',monospace;direction:ltr;font-size:12px;font-weight:700;color:var(--amber)}
.tl h4{font-size:15.5px;margin:4px 0 6px}
.tl p{font-size:14.2px;color:var(--mut);line-height:1.9}
/* إحصاءات */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}
.stat{padding:20px 18px;border-radius:var(--r);text-align:center;background:var(--card);border:1px solid var(--line);
box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 0 rgba(17,17,24,.045),0 6px 16px rgba(17,17,24,.06)}
.stat b{display:block;font-family:'Cairo',sans-serif;font-size:27px;font-weight:900;color:var(--amber);line-height:1.2}
.stat.v b{color:var(--violet)}.stat.g b{color:var(--green)}.stat.t b{color:var(--teal)}
.stat span{display:block;margin-top:7px;font-size:12.8px;color:var(--mut);line-height:1.7}
/* بطاقة شركة */
.co{padding:20px 22px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);
box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 0 rgba(17,17,24,.045),0 6px 16px rgba(17,17,24,.06)}
.co .ch{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.co h3{font-size:17px}
.co .meta{font-family:'IBM Plex Mono',monospace;direction:ltr;font-size:10.5px;color:var(--faint);margin-top:3px}
.co p{font-size:14.2px;color:var(--mut);line-height:1.9}
.co p b{color:var(--ink)}
.co .apps{margin-top:13px}
/* خطوات */
.step{display:grid;grid-template-columns:56px 1fr;gap:18px;padding:22px 24px;border-radius:var(--r);
background:var(--card);border:1px solid var(--line);margin-bottom:16px;scroll-margin-top:92px;
box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 0 rgba(17,17,24,.045),0 8px 20px rgba(17,17,24,.07)}
.step .sn{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;
font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:700;direction:ltr;
background:linear-gradient(180deg,var(--amber-lo),var(--amber) 55%,var(--amber-hi));
border:1px solid var(--amber-edge);
box-shadow:0 3px 0 rgba(17,17,24,.10),0 7px 15px rgba(177,93,4,.24),inset 0 1px 0 rgba(255,255,255,.35)}
.step.v .sn{background:linear-gradient(180deg,#9B6BF2,var(--violet) 55%,#6023C9);border-color:#5219B5}
.step.g .sn{background:linear-gradient(180deg,#34D399,var(--green) 55%,#047857);border-color:#046B4D}
.step.t .sn{background:linear-gradient(180deg,#38BDF8,var(--teal) 55%,#0E6E8C);border-color:#0B5D77}
.step h3{font-size:17px}
.step .when{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;padding:4px 11px;border-radius:99px;
color:var(--smoke-ink);background:linear-gradient(180deg,var(--smoke-1),var(--smoke-3));
border:1px solid var(--smoke-line)}
.step p{margin-top:11px;font-size:14.4px;color:var(--mut);line-height:1.95}
.step ul{margin-top:12px;list-style:none;display:grid;gap:9px}
.step li{position:relative;padding-inline-start:19px;font-size:14.2px;color:var(--mut);line-height:1.85}
.step li::before{content:"✓";position:absolute;inset-inline-start:0;top:0;color:var(--green);font-size:12px;font-weight:700}
.step li b{color:var(--ink)}
/* سؤال وجواب */
details{border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line);margin-bottom:10px;overflow:hidden}
summary{cursor:pointer;list-style:none;padding:15px 18px;font-family:'Cairo',sans-serif;font-size:15px;font-weight:700;
display:flex;justify-content:space-between;align-items:center;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--amber);font-size:19px;font-weight:400;flex-shrink:0}
details[open] summary::after{content:"−"}
details[open] summary{border-bottom:1px solid var(--line)}
details .dc{padding:15px 18px;font-size:14.3px;color:var(--mut);line-height:1.95}
details .dc b{color:var(--ink)}
/* اقتباس / خلاصة */
.pull{padding:20px 24px;border-radius:var(--r);margin:22px 0;
border:1px solid rgba(124,58,237,.34);border-inline-start:4px solid var(--violet);
background:linear-gradient(180deg,rgba(124,58,237,.055),rgba(124,58,237,.02))}
.pull p{font-size:15.5px;color:var(--ink);line-height:2;font-weight:500}
.pull span{display:block;margin-top:8px;font-size:12.5px;color:var(--faint)}
/* بطاقة تدوينة */
.post{display:block;padding:22px 24px;border-radius:var(--r);background:var(--card);border:1px solid var(--line);
transition:transform .16s,box-shadow .16s;
box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 0 rgba(17,17,24,.045),0 6px 16px rgba(17,17,24,.06)}
.post:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 3px 0 rgba(17,17,24,.05),0 14px 30px rgba(17,17,24,.12)}
.post .pm{display:flex;gap:9px;align-items:center;margin-bottom:11px;flex-wrap:wrap}
.post .dt{font-family:'IBM Plex Mono',monospace;direction:ltr;font-size:11px;color:var(--faint)}
.post h3{font-size:17.5px;line-height:1.5}
.post p{margin-top:10px;font-size:14.2px;color:var(--mut);line-height:1.9}
.post .go{display:inline-flex;gap:7px;align-items:center;margin-top:14px;font-size:13.5px;font-weight:700;color:var(--amber)}
/* مقياس دعم العربية */
.dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;display:inline-block}
.d1{background:linear-gradient(180deg,#34D399,#047857)}
.d2{background:linear-gradient(180deg,#EFA02B,#B15D04)}
.d3{background:linear-gradient(180deg,#F87171,#B91C1C)}
.d4{background:linear-gradient(180deg,#C8C8D0,#8A8A9A)}
.lvl{display:flex;gap:8px;align-items:center;font-size:12.8px;color:var(--mut)}
/* نموذج تواصل */
.frm{display:grid;gap:14px;margin-top:18px}
.frm label{font-size:13px;font-weight:700;font-family:'Cairo',sans-serif;display:block;margin-bottom:7px}
.frm input,.frm textarea,.frm select{width:100%;font-family:inherit;font-size:14.5px;padding:12px 15px;
border-radius:var(--r-sm);color:var(--ink);background:var(--card);border:1px solid var(--line-2);
box-shadow:var(--smoke-sh-in)}
.frm textarea{min-height:130px;resize:vertical;line-height:1.85}
@media(max-width:900px){
.g2,.g3,.g4,.stats{grid-template-columns:1fr 1fr}
.step{grid-template-columns:1fr;gap:12px}
.box{padding:20px}
.nav .has .sub{display:none}
}
@media(max-width:560px){
.g2,.g3,.g4,.stats{grid-template-columns:1fr}
.tools .chip{flex:1}
}
/* KHW-CHROME:BEGIN */
/* ============================================================
KHW.2.4 — شريط التنقّل المعدني (Chrome Nav) + شعار التذييل
Appended to kh.css and kh-home.css by patch_chrome.py.
Idempotent: the block between the BEGIN/END markers is
stripped and re-appended on every run.
============================================================ */
:root{
--nav-h:78px;
--chrome-1:#FDFDFE; --chrome-2:#EFF0F3; --chrome-3:#DCDEE3;
--chrome-4:#C6C9D0; --chrome-5:#B4B8C1; --chrome-edge:#9AA0AB;
--gold-1:#FBF1DA; --gold-2:#F1DEB0; --gold-3:#E4CB8A; --gold-edge:#C39A3E;
--gold-ink:#7A4405;
}
/* ---------- الشريط نفسه ---------- */
.nav{
height:var(--nav-h);
background:
linear-gradient(180deg,
#FFFFFF 0%, var(--chrome-2) 14%, var(--chrome-3) 46%,
var(--chrome-4) 74%, var(--chrome-5) 92%, #ADB2BB 100%);
border-bottom:1px solid var(--chrome-edge);
backdrop-filter:none;-webkit-backdrop-filter:none;
box-shadow:
0 1px 0 rgba(255,255,255,.95) inset,
0 -1px 0 rgba(255,255,255,.45) inset,
0 7px 20px rgba(17,17,24,.16);
}
/* خطوط المعدن المصقول */
.nav::before{
content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
background:repeating-linear-gradient(90deg,
rgba(255,255,255,.30) 0 1px, rgba(17,17,24,.014) 1px 3px);
opacity:.55;
}
/* الحافة السفلية اللامعة */
.nav::after{
content:"";position:absolute;inset-inline:0;bottom:-4px;height:4px;pointer-events:none;
background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(17,17,24,.10) 60%,transparent);
}
.nav .in{position:relative;z-index:2;gap:14px;max-width:1240px;flex-wrap:nowrap}
/* ---------- روابط التنقّل ---------- */
.nav ul{gap:1px}
.nav ul a{
color:#26262F;font-weight:600;font-size:14px;white-space:nowrap;
padding:8px 11px;border-radius:999px;border:1px solid transparent;
text-shadow:0 1px 0 rgba(255,255,255,.85);
}
.nav ul a:hover{
color:#111118;
background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(255,255,255,.42));
border-color:rgba(255,255,255,.85);
box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 5px rgba(17,17,24,.13);
}
/* الصفحة الحالية — لوحة ذهبية */
.nav ul a.on,
.nav ul a.on:hover{
color:var(--gold-ink);font-weight:800;
background:linear-gradient(180deg,var(--gold-1) 0%,var(--gold-2) 55%,var(--gold-3) 100%);
border:1px solid var(--gold-edge);
text-shadow:0 1px 0 rgba(255,255,255,.75);
box-shadow:
0 1px 0 rgba(255,255,255,.90) inset,
0 -1px 0 rgba(160,120,40,.28) inset,
0 2px 6px rgba(17,17,24,.18);
}
.nav .has>a::after{color:#6B6B7A}
/* ---------- العلامة (منصة.AI) ---------- */
.nav .brand{gap:9px}
.nav .brand .m{
width:38px;height:38px;border-radius:50%;
background:
radial-gradient(circle at 34% 26%,#FFF7E4 0%,#F3DCA6 26%,#DDB65E 58%,#B98A2C 82%,#8E661C 100%);
border:1px solid #A97F26;
box-shadow:
0 1px 0 rgba(255,255,255,.85) inset,
0 -2px 6px rgba(90,60,10,.35) inset,
0 3px 7px rgba(17,17,24,.22);
}
/* أيقونة الشبكة العصبية */
.nav .brand .m i{
width:22px;height:22px;border-radius:0;background:#4A3208;
-webkit-mask:var(--khw-brain) center/contain no-repeat;
mask:var(--khw-brain) center/contain no-repeat;
}
:root{
--khw-brain:url("data:image/svg+xml;utf8,");
}
.nav .brand b{font-size:19px;color:#14141B;text-shadow:0 1px 0 rgba(255,255,255,.8)}
.nav .brand b span{
color:#B7891F;
background:linear-gradient(180deg,#E7C05A,#9C7413);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
/* ---------- شعار KHW في الشريط — أكبر ---------- */
.nav .khw-logo{
width:56px;height:56px;
border:1px solid #A5AAB4;background:#fff;
box-shadow:
0 1px 0 rgba(255,255,255,.95) inset,
0 2px 6px rgba(17,17,24,.22),
0 0 0 3px rgba(255,255,255,.55);
}
.nav .khw-logo::after{width:15px;height:15px;border-color:#DCDEE3}
.nav .khw-logo:hover{transform:scale(1.07)}
/* ---------- مبدّل اللغة — كرة معدنية ---------- */
.nav .langsw{
position:relative;width:44px;height:44px;padding:0;border-radius:50%;
font-size:0;overflow:hidden;flex:0 0 auto;
background:
var(--khw-globe) center/86% 86% no-repeat,
radial-gradient(circle at 33% 25%,#FFFFFF 0%,#E8EAEE 20%,#C0C5CD 52%,#949AA5 78%,#70767F 100%);
border:1px solid #878D97;
box-shadow:
0 1px 0 rgba(255,255,255,.95) inset,
0 -4px 10px rgba(0,0,0,.28) inset,
0 3px 8px rgba(17,17,24,.24);
transition:transform .16s ease,box-shadow .16s ease;
}
:root{
--khw-globe:url("data:image/svg+xml;utf8,");
}
.nav .langsw:hover{transform:translateY(-1px) scale(1.05);background-color:transparent;
box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 -4px 10px rgba(0,0,0,.28) inset,0 6px 14px rgba(17,17,24,.30)}
/* ---------- زر «ابدأ الآن» — لامع برتقالي ---------- */
.nav .end{gap:10px}
.nav .end .btn{
position:relative;overflow:hidden;isolation:isolate;white-space:nowrap;flex:0 0 auto;
padding:11px 22px;padding-inline-end:44px;line-height:1.2;
border-radius:999px;font-size:14.5px;font-weight:800;
background:linear-gradient(180deg,#F7AC42 0%,#E58116 38%,#C86308 74%,#A94F06 100%);
border:1px solid #8C4404;
color:#fff;text-shadow:0 1px 2px rgba(90,40,0,.45);
box-shadow:
0 1px 0 rgba(255,255,255,.45) inset,
0 -3px 8px rgba(90,40,0,.30) inset,
0 4px 11px rgba(150,74,6,.42);
}
.nav .end .btn::before{ /* لمعة زجاجية */
content:"";position:absolute;inset-block-start:2px;inset-inline:3px;height:44%;
border-radius:999px;pointer-events:none;z-index:-1;
background:linear-gradient(180deg,rgba(255,255,255,.60),rgba(255,255,255,0));
}
.nav .end .btn::after{ /* السهم داخل دائرة */
content:"\2192";position:absolute;inset-block-start:50%;inset-inline-end:9px;
transform:translateY(-50%);width:24px;height:24px;border-radius:50%;
display:grid;place-items:center;font-size:13px;line-height:1;
background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.45);
text-shadow:none;
}
.nav .end .btn:hover{transform:translateY(-2px);
box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 -3px 8px rgba(90,40,0,.30) inset,0 8px 18px rgba(150,74,6,.48)}
/* ---------- الشاشات المتوسطة ---------- */
@media(max-width:1180px){
.nav .in{gap:10px}
.nav ul a{padding:7px 8px;font-size:13.2px}
.nav .brand b{font-size:17px}
.nav .end .btn{padding:10px 18px;padding-inline-end:40px;font-size:13.5px}
}
/* القائمة تنطوي مبكراً حتى لا يزدحم الشريط */
@media(max-width:1060px){
.nav ul{display:none}
.nav .end .btn{display:none}
.burger{display:block}
}
/* ---------- الجوال ---------- */
@media(max-width:900px){
.nav .in{gap:12px}
.nav .khw-logo{width:48px;height:48px}
.nav .langsw{width:40px;height:40px}
.nav .brand b{font-size:17px}
}
/* ============================================================
شعار KHW مكرّر — أسفل منتصف كل صفحة
============================================================ */
.khw-foot{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:9px;padding:26px 16px 6px;text-align:center;
}
.khw-foot .khw-sites{display:inline-flex}
.khw-foot .khw-logo{
width:88px;height:88px;
border:1px solid #A5AAB4;background:#fff;
box-shadow:
0 1px 0 rgba(255,255,255,.95) inset,
0 4px 14px rgba(17,17,24,.26),
0 0 0 4px rgba(255,255,255,.5);
}
.khw-foot .khw-logo::after{width:18px;height:18px}
.khw-foot .khw-logo:hover{transform:scale(1.06)}
.khw-foot .khw-cap{
font-size:.72rem;font-weight:700;letter-spacing:.03em;
color:var(--faint,#9A9AAB);
}
/* القائمة تفتح للأعلى ومتمركزة */
.khw-foot .khw-menu{
inset-block-start:auto;inset-inline-start:auto;inset-inline-end:auto;
top:auto;bottom:calc(100% + 12px);left:50%;right:auto;
transform:translateX(-50%) translateY(6px);text-align:start;
}
.khw-foot .khw-menu.on{transform:translateX(-50%) translateY(0)}
@media(max-width:520px){
.khw-foot .khw-logo{width:74px;height:74px}
.khw-foot .khw-menu{min-width:min(292px,86vw)}
}
/* KHW-CHROME:END */
/* KHW25:BEGIN */
/* ════════════════════════════════════════════════
KHW.2.5 — طبقة التحويل
نشرة بريدية · أداة الأسبوع · جربها الآن · مُحوّل الأوامر
المصدر الوحيد: _pipeline_khw/khw25.css
ملاحظة RTL: كل التمركز فيزيائي (left/right) لا منطقي.
════════════════════════════════════════════════ */
/* ─── ختم آخر تحديث ─────────────────────────── */
.rev{display:inline-flex;align-items:center;gap:7px;margin-top:18px;
padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;
color:var(--mut);background:var(--alt);border:1px solid var(--line)}
.rev i{width:5px;height:5px;border-radius:50%;background:var(--green);font-style:normal;flex:0 0 auto}
.rev time{font-family:'IBM Plex Mono',monospace;direction:ltr;unicode-bidi:isolate;font-size:11.5px}
/* ─── جربها الآن ────────────────────────────── */
.tryit{margin:38px 0 6px;border-radius:var(--r);overflow:hidden;
background:var(--card);border:1px solid var(--line-2);
box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 4px 14px rgba(17,17,24,.07)}
.tryit>.h{display:flex;align-items:center;gap:11px;padding:15px 24px;
background:linear-gradient(180deg,var(--amber-lo),var(--amber) 60%,var(--amber-hi));
border-bottom:1px solid var(--amber-edge);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.tryit>.h b{font-family:'Cairo',sans-serif;font-size:17px;font-weight:800;letter-spacing:-.3px}
.tryit>.h span{font-size:12.5px;font-weight:700;opacity:.9;margin-inline-start:auto}
.tryit>.h .ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.34);font-size:14px;flex:0 0 auto}
.tryit .bd{padding:22px 24px 24px}
.tryit .step{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.9}
.tryit .step em{flex:0 0 auto;width:25px;height:25px;border-radius:8px;display:grid;place-items:center;
font-style:normal;font-weight:800;font-size:12.5px;color:#fff;margin-top:5px;
background:linear-gradient(180deg,#8B5CF6,var(--violet));border:1px solid #6D28D9}
.tryit .why{margin-top:12px;font-size:13.4px;color:var(--mut);line-height:1.9;
padding-inline-start:37px}
.tryit .cmd{margin-top:16px;position:relative;border-radius:var(--r-sm);
background:#15151E;border:1px solid #2C2C3C;padding:17px 19px}
.tryit .cmd p{font-size:14px;line-height:1.95;color:#E4E4EC;white-space:pre-wrap;margin:0}
.tryit .cmd .lbl{display:block;font-size:11px;font-weight:700;color:#8B8BA6;margin-bottom:9px;
letter-spacing:.4px}
.tryit .act{margin-top:15px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tryit .act .hint{font-size:12.5px;color:var(--faint)}
/* زر النسخ — مشترك */
.cp{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;
font-size:13.5px;font-weight:700;padding:10px 19px;border-radius:var(--r-sm);
background:linear-gradient(180deg,var(--smoke-1),var(--smoke-2) 52%,var(--smoke-3));
border:1px solid var(--smoke-line);color:var(--smoke-ink);
text-shadow:0 1px 0 rgba(255,255,255,.7);box-shadow:var(--smoke-sh);
transition:transform .16s,box-shadow .16s,color .16s}
.cp:hover{transform:translateY(-2px);color:var(--ink);box-shadow:var(--smoke-sh-hi)}
.cp:active{transform:translateY(1px);box-shadow:var(--smoke-sh-in)}
.cp.ok{background:linear-gradient(180deg,#34D399,var(--green));border-color:#047857;
color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.2)}
/* ─── أداة الأسبوع ──────────────────────────── */
.totw{border-radius:var(--r);overflow:hidden;margin-bottom:26px;
background:var(--card);border:1px solid var(--line-2);
box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 6px 20px rgba(17,17,24,.09)}
.totw>.h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 22px;
background:linear-gradient(180deg,#FCFCFD,#EDEDF1 52%,#DBDBE2);
border-bottom:1px solid var(--smoke-line)}
.totw>.h .pin{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;
padding:5px 12px;border-radius:999px;color:#7A4405;
background:linear-gradient(180deg,#FBF1DA,#E4CB8A);border:1px solid #C39A3E}
.totw>.h .wk{font-size:12px;color:var(--mut);font-weight:700;
font-family:'IBM Plex Mono',monospace;direction:ltr;unicode-bidi:isolate}
.totw>.h .dt{margin-inline-start:auto;font-size:11.5px;font-weight:700;color:#B15D04}
.totw .grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.totw .media{background:#0F0F17;position:relative;min-height:240px;display:grid;place-items:center;
border-inline-end:1px solid var(--line)}
.totw .media video,.totw .media img{width:100%;height:100%;object-fit:cover;display:block}
.totw .shots{display:grid;grid-template-rows:repeat(3,1fr);width:100%;height:100%;gap:1px;background:#2C2C3C}
.totw .shots figure{position:relative;overflow:hidden;background:#15151E}
.totw .shots figcaption{position:absolute;bottom:0;left:0;right:0;padding:7px 12px;font-size:12px;
color:#fff;background:linear-gradient(0deg,rgba(15,15,23,.92),transparent)}
.totw .ph{color:#5A5A72;font-size:13px;text-align:center;padding:26px;line-height:1.9}
.totw .ph b{display:block;color:#8B8BA6;font-size:14px;margin-bottom:6px}
.totw .info{padding:22px 24px}
.totw .info h2,.totw .info h3{font-size:21px;margin-bottom:4px;color:var(--ink)}
.totw .info .en{font-size:12px;color:var(--faint);font-family:'IBM Plex Mono',monospace;
direction:ltr;unicode-bidi:isolate;display:block;margin-bottom:13px}
.totw .info>p{font-size:14.3px;color:var(--mut);line-height:1.95}
.totw .meta{margin-top:15px;display:flex;flex-wrap:wrap;gap:8px}
.totw .meta span{font-size:11.8px;font-weight:700;padding:5px 11px;border-radius:999px;
background:var(--alt);border:1px solid var(--line);color:var(--mut)}
.totw ol{margin:16px 0 0;padding:0;list-style:none;counter-reset:t}
.totw ol li{counter-increment:t;position:relative;padding-inline-start:31px;margin-bottom:9px;
font-size:14px;line-height:1.85;color:var(--ink)}
.totw ol li::before{content:counter(t);position:absolute;top:3px;width:21px;height:21px;
border-radius:7px;display:grid;place-items:center;font-size:11.5px;font-weight:800;color:#fff;
background:linear-gradient(180deg,var(--amber-lo),var(--amber-hi));border:1px solid var(--amber-edge)}
[dir="rtl"] .totw ol li::before{right:0}
[dir="ltr"] .totw ol li::before{left:0}
.totw .foot{padding:15px 24px;border-top:1px solid var(--line);background:var(--alt);
display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.totw .foot .note{font-size:12.3px;color:var(--faint);margin-inline-start:auto}
/* ─── النشرة البريدية ───────────────────────── */
.nl{margin:0;padding:30px 26px;border-top:1px solid var(--line);
background:linear-gradient(178deg,rgba(217,119,6,.055),rgba(124,58,237,.045))}
.nl .in{max-width:var(--w);margin-inline:auto;display:grid;grid-template-columns:1.15fr 1fr;
gap:30px;align-items:center}
.nl h4{font-family:'Cairo',sans-serif;font-size:19px;font-weight:800;color:var(--ink);
line-height:1.5;letter-spacing:-.3px}
.nl h4 b{color:var(--amber)}
.nl .sub{margin-top:9px;font-size:13.5px;color:var(--mut);line-height:1.9}
.nl form{display:flex;gap:9px;flex-wrap:wrap}
.nl input[type=email]{flex:1 1 210px;min-width:0;font-family:inherit;font-size:14.5px;
padding:13px 16px;border-radius:var(--r-sm);color:var(--ink);
background:var(--card);border:1px solid var(--line-2);box-shadow:var(--smoke-sh-in)}
.nl input[type=email]::placeholder{color:var(--faint)}
.nl input[type=email]:focus{outline:2px solid var(--violet);outline-offset:2px}
/* KHW.2.7: كان position:absolute;left:-9999px — وهو في RTL يمتدّ خارج الحافة
المنطقية للصفحة فيولّد تمريراً أفقياً هائلاً على الهاتف وانزياحاً في نقطة
البداية. الإخفاء الآن بالقصّ (clip-path) بلا أي إزاحة: صفر بكسل خارج التدفّق،
ويبقى الحقل قابلاً للقراءة آلياً كما تتوقّعه مصيدة Netlify. */
.nl .hp{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;
overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
inset-inline-start:auto;inset-inline-end:auto;left:auto;right:auto;top:auto;bottom:auto}
.nl .fine{margin-top:11px;font-size:11.8px;color:var(--faint);line-height:1.8}
/* KHW.2.6: كان النطاق .nl وحده، فرسالة نموذج التواصل تُكتب ولا تظهر أبداً. */
.nl .msg,.khw-form .msg{margin-top:12px;font-size:13.5px;font-weight:700;display:none;line-height:1.8}
.nl .msg.on,.khw-form .msg.on{display:block}
.nl .msg.good,.khw-form .msg.good{color:var(--green)}
.nl .msg.bad,.khw-form .msg.bad{color:#B4232A}
/* ─── مُحوّل الأوامر — الصفحة الكاملة ────────── */
.pb{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:28px;align-items:start}
.pb .pane{border-radius:var(--r);background:var(--card);border:1px solid var(--line);
padding:22px 24px}
.pb .pane>h2{font-size:19px;color:var(--amber);margin-bottom:4px}
.pb .pane>.d{font-size:13.3px;color:var(--mut);line-height:1.9;margin-bottom:18px}
.pb .f{margin-bottom:17px}
.pb .f>label{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:800;
color:var(--ink);margin-bottom:8px}
.pb .f>label i{width:9px;height:9px;border-radius:3px;font-style:normal;flex:0 0 auto}
.pb .f>label small{font-weight:500;color:var(--faint);font-size:12px}
.pb textarea,.pb select,.pb input[type=text]{width:100%;font-family:inherit;font-size:14.3px;
line-height:1.9;padding:12px 14px;border-radius:var(--r-sm);color:var(--ink);
background:var(--bg);border:1px solid var(--line-2);box-shadow:var(--smoke-sh-in);resize:vertical}
.pb textarea::placeholder,.pb input::placeholder{color:var(--faint)}
.pb textarea:focus,.pb select:focus,.pb input:focus{outline:2px solid var(--violet);outline-offset:2px}
.pb select{cursor:pointer} /* السهم الأصلي متروك عمداً — appearance:none يخفيه في RTL */
.pb .chips{display:flex;flex-wrap:wrap;gap:8px}
.pb .chips label{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
font-size:12.8px;font-weight:700;padding:8px 13px;border-radius:999px;color:var(--mut);
background:var(--alt);border:1px solid var(--line);transition:all .14s}
.pb .chips label:hover{border-color:var(--line-2);color:var(--ink)}
.pb .chips input{accent-color:var(--violet);width:14px;height:14px;cursor:pointer}
.pb .chips input:checked+span{color:var(--ink)}
.pb .chips label:has(input:checked){background:rgba(124,58,237,.10);border-color:#B49BF0;color:var(--ink)}
.pb .meter{display:flex;gap:5px;margin-bottom:14px}
.pb .meter i{flex:1;height:5px;border-radius:3px;background:var(--sunk);
border:1px solid var(--line);transition:background .2s}
.pb .meter i.on{background:linear-gradient(90deg,var(--amber-lo),var(--amber));border-color:var(--amber-edge)}
.pb .score{font-size:12.5px;font-weight:700;color:var(--mut);margin-bottom:14px}
.pb .score b{color:var(--ink)}
.pb .out{border-radius:var(--r-sm);background:#15151E;border:1px solid #2C2C3C;
padding:19px 21px;min-height:220px;max-height:460px;overflow:auto}
.pb .out p{font-size:14.2px;line-height:2;color:#E4E4EC;white-space:pre-wrap;margin:0}
.pb .out .tok{border-radius:4px;padding:1px 3px;box-decoration-break:clone;
-webkit-box-decoration-break:clone}
.pb .out .empty{color:#5A5A72;font-size:13.5px;line-height:2}
.pb .bar{margin-top:15px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.pb .bar .n{font-size:12.3px;color:var(--faint);margin-inline-start:auto;
font-family:'IBM Plex Mono',monospace;direction:ltr;unicode-bidi:isolate}
/* ألوان المكوّنات — نفس مفتاح الصفحة الرئيسية */
.k-role,.t-role{background:rgba(217,119,6,.20)}
.k-ctx,.t-ctx{background:rgba(124,58,237,.20)}
.k-task,.t-task{background:rgba(5,150,105,.20)}
.k-fmt,.t-fmt{background:rgba(8,145,178,.20)}
.k-lim,.t-lim{background:rgba(180,35,42,.18)}
.pb .out .t-role{background:rgba(239,160,43,.24)}
.pb .out .t-ctx{background:rgba(139,92,246,.26)}
.pb .out .t-task{background:rgba(52,211,153,.22)}
.pb .out .t-fmt{background:rgba(34,211,238,.20)}
.pb .out .t-lim{background:rgba(248,113,113,.22)}
/* المكتبة */
.lib{margin-top:34px}
.lib .filt{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px}
.lib .filt button{cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;
padding:9px 17px;border-radius:999px;color:var(--mut);
background:linear-gradient(180deg,var(--smoke-1),var(--smoke-2) 52%,var(--smoke-3));
border:1px solid var(--smoke-line);box-shadow:var(--smoke-sh);transition:all .15s}
.lib .filt button:hover{color:var(--ink);transform:translateY(-1px)}
.lib .filt button.on{background:linear-gradient(180deg,var(--amber-lo),var(--amber) 55%,var(--amber-hi));
border-color:var(--amber-edge);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.26);box-shadow:var(--amber-sh)}
.lib .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.lib .card{border-radius:var(--r);background:var(--card);border:1px solid var(--line);
padding:19px 21px;display:flex;flex-direction:column;transition:border-color .15s,transform .15s}
.lib .card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.lib .card .tag{align-self:flex-start;font-size:11px;font-weight:800;padding:4px 10px;
border-radius:999px;background:var(--alt);border:1px solid var(--line);color:var(--mut);margin-bottom:11px}
.lib .card h4{font-size:15.5px;line-height:1.6;margin-bottom:8px}
.lib .card p{font-size:13.2px;color:var(--mut);line-height:1.9;flex:1}
.lib .card .r{margin-top:15px;display:flex;gap:8px;flex-wrap:wrap}
.lib .card .r .cp{font-size:12.5px;padding:8px 15px}
.lib .card .r .ld{background:none;border:1px dashed var(--line-2);box-shadow:none;color:var(--mut)}
.lib .card .r .ld:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-1px)}
/* ─── الجوال ─────────────────────────────────── */
@media(max-width:900px){
.pb{grid-template-columns:1fr}
.pb .pane.out-pane{position:static}
.totw .grid{grid-template-columns:1fr}
.totw .media{min-height:200px;border-inline-end:0;border-bottom:1px solid var(--line)}
.nl .in{grid-template-columns:1fr;gap:20px}
}
@media(max-width:560px){
.tryit>.h{padding:13px 17px;gap:9px}
.tryit>.h b{font-size:15.5px}
.tryit>.h span{display:none}
.tryit .bd{padding:18px 17px 20px}
.tryit .why{padding-inline-start:0}
.tryit .act .cp{width:100%;justify-content:center}
.nl{padding:24px 18px}
.nl form .cp,.nl form .btn{width:100%;justify-content:center}
.totw .info,.totw .foot{padding-inline:18px}
.pb .pane{padding:18px 17px}
.lib .cards{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
.cp,.lib .card,.lib .filt button{transition:none}
.cp:hover,.lib .card:hover{transform:none}
}
/* KHW25:END */
/* KHW-UX:BEGIN */
/* ════════════════════════════════════════════════════════════
KHW.2.7 — طبقة إصلاح التجربة
المصدر الوحيد: _pipeline_khw/khw_ux.css
يُحقن في assets/kh.css و assets/kh-home.css بين علامتي
KHW-UX:BEGIN / KHW-UX:END بواسطة patch_ux.py.
تُلحَق آخر الملف عمداً: هذه الطبقة تصحّح قواعد سابقة،
فلا بدّ أن تأتي بعدها في التتالي بلا !important إلا للضرورة.
الهوية والألوان كما هي — لا إعادة تصميم.
════════════════════════════════════════════════════════════ */
/* ─── ١. الترويسة على الهاتف ─────────────────────────────────
المشكلة: شعار KHW (٤٨px) + العلامة + مبدّل اللغة + زر القائمة
في ٣٩٠px يزدحمون فيُقصّ أحدهم. الحل: شبكة المواقع تنتقل إلى
داخل الدرج، ويبقى في الشريط ما لا يُستغنى عنه فقط. */
@media (max-width:700px){
.nav .in{gap:10px}
.nav .khw-sites{display:none} /* ينتقل إلى الدرج — انظر .dw-sites */
.nav .brand{min-width:0}
.nav .brand b{font-size:16px;white-space:nowrap}
.nav .end{gap:7px}
.nav .langsw{width:36px;height:36px}
.burger{width:38px;height:38px}
.burger s{inset-inline:10px}
.burger s:nth-child(1){top:12px}
.burger s:nth-child(2){top:18px}
.burger s:nth-child(3){top:24px}
}
@media (max-width:380px){
.nav .brand b{font-size:15px}
.nav .in{gap:8px}
}
/* شبكة مواقع KHW داخل الدرج — تظهر فقط حيث اختفت من الشريط */
.dw-sites{display:none}
@media (max-width:700px){
.dw-sites{
display:flex;align-items:center;gap:12px;
margin:6px 24px 0;padding:14px 0 4px;
border-top:1px solid var(--line,#DEDEE4);
}
.dw-sites .khw-logo{width:44px;height:44px}
.dw-sites .khw-cap{font-size:.78rem;font-weight:700;color:var(--mut,#5F5F73)}
/* الدرج ينفتح للأسفل، فالقائمة تنفتح للأسفل أيضاً لا للأعلى */
.dw-sites .khw-menu{inset-block-start:calc(100% + 8px);inset-inline-start:0}
.dw{max-height:calc(100dvh - var(--nav-h));overflow-y:auto;
padding-bottom:env(safe-area-inset-bottom,0px)}
}
/* ─── ٢. عنوان الصفحة الرئيسية على الهاتف ────────────────────
clamp موجود أصلاً؛ الناقص كان منع التقطيع القبيح للكلمة
العربية الطويلة وموازنة الأسطر. */
.hero h1,.top h1{
text-wrap:balance; /* المتصفحات الحديثة */
overflow-wrap:break-word;
word-break:normal;
hyphens:none; /* العربية لا تُوصَل بشرطة */
}
@supports not (text-wrap:balance){
.hero h1,.top h1{text-wrap:pretty} /* بديل، ثم لا شيء — الخط لا ينكسر */
}
@media (max-width:420px){
.hero h1{font-size:clamp(26px,7.6vw,34px);line-height:1.3}
.hero h1 br{display:none} /* الكسر اليدوي يضرّ في العرض الضيّق */
.hero p{font-size:15.5px;line-height:1.95}
.top h1{font-size:clamp(24px,7vw,31px);line-height:1.3}
}
/* الدعوة الأساسية — «ابنِ أمرك الآن» */
.hero .cta .btn.pb-cta{font-weight:800}
.hero .cta .b2{font-weight:600}
/* ─── ٣. بطاقة أداة الأسبوع — بديل احترافي بلا تعليمات ───────
اللوحة النائبة كانت تعرض على الزائر مسار مجلد واسم ملف بايثون. */
.totw .ph{
display:grid;place-items:center;gap:10px;width:100%;height:100%;
padding:30px 24px;text-align:center;color:#8B8BA6;
background:
radial-gradient(120% 100% at 50% 0%,rgba(217,119,6,.16),transparent 62%),
linear-gradient(180deg,#15151E,#0F0F17);
}
.totw .ph .mk{
width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
font-size:24px;line-height:1;
background:linear-gradient(180deg,rgba(217,119,6,.30),rgba(217,119,6,.12));
border:1px solid rgba(217,119,6,.42);
}
.totw .ph b{display:block;color:#E4E4EC;font-size:15px;margin:0}
.totw .ph span{display:block;font-size:12.8px;line-height:1.85;color:#8B8BA6;max-width:34ch}
/* ─── ٤. وسم «Arabic only» في النسخة الإنجليزية ──────────────
رابط بعنوان إنجليزي ينقل إلى صفحة عربية — يُعلَن قبل النقر. */
.ar-only{
display:inline-flex;align-items:center;gap:5px;vertical-align:middle;
margin-inline-start:7px;padding:2px 8px;border-radius:999px;
font-size:.66rem;font-weight:700;letter-spacing:.02em;line-height:1.7;
white-space:nowrap;direction:ltr;unicode-bidi:isolate;
color:var(--amber-hi,#B15D04);background:var(--alt,#EFEFF1);
border:1px solid var(--line-2,#C8C8D0);
}
.nav .ar-only,.dw .ar-only{margin-inline-start:5px;font-size:.6rem;padding:1px 6px}
.hb .ar-only,.col3 .ar-only{margin-inline-start:6px}
/* ─── ٥. منع التمرير الأفقي غير المقصود ──────────────────────
السبب الحقيقي (مصيدة السبام) عولج في khw25.css. هذه شبكة أمان
للوسائط العريضة فقط — لا بديل عن العلاج. */
img,video,svg,iframe,table{max-width:100%}
.tw,.saifquick{max-width:100%}
/* ─── ٦. الشريط في النسخة الإنجليزية ─────────────────────────
عناوين إنجليزية أطول + وسم Arabic only على كل رابط ⇒ الشريط
يتجاوز 1280px بنحو ٦٧px فيُقصّ زر «Start now». تُستعاد المساحة
بتضييق الحشو والوسم — لا بحذف الوسم، فهو صلب المشكلة أصلاً. */
@media (min-width:1061px) and (max-width:1400px){
html[lang="en"] .nav .in{gap:10px}
html[lang="en"] .nav ul a{padding:8px 7px;font-size:13.4px}
html[lang="en"] .nav .ar-only{margin-inline-start:3px;padding:0 4px;font-size:.55rem}
html[lang="en"] .nav .end .btn{padding:10px 16px;padding-inline-end:38px;font-size:13.5px}
html[lang="en"] .nav .brand b{font-size:17px}
}
/* ─── ٧. شريط التاريخ والوقت — أعلى الصفحة ───────────────────
شريط رفيع بعرض الصفحة تحت الترويسة الثابتة مباشرةً. الهيكل يُحقن
في HTML فارغاً بارتفاع محجوز، ويملؤه khw-clock.js — فلا يقفز
التخطيط عند التحميل. */
.khw-clock{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:8px 22px;padding:9px 20px;min-height:42px;
border-bottom:1px solid var(--line,#DEDEE4);
background:var(--alt,#EFEFF1);
}
.khw-clock .kc-dates{display:flex;flex-wrap:wrap;align-items:center;gap:5px 10px;
font-size:13px;color:var(--ink,#1B1B22)}
.khw-clock .kc-h{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.khw-clock .kc-h i{font-style:normal;color:var(--amber-hi,#B15D04);font-size:14px;line-height:1}
.khw-clock .kc-g{color:var(--mut,#5F5F73)}
.khw-clock .kc-sep{color:var(--line-2,#C8C8D0)}
.khw-clock .kc-time{display:flex;align-items:baseline;gap:8px}
.khw-clock .kc-clock{
font-family:"IBM Plex Mono",ui-monospace,monospace;
font-size:15.5px;font-weight:600;letter-spacing:.02em;
color:var(--amber-hi,#B15D04);font-variant-numeric:tabular-nums;
direction:ltr;unicode-bidi:isolate;min-width:9ch;text-align:center;
}
.khw-clock .kc-off{font-size:11px;color:var(--mut,#5F5F73);direction:ltr;unicode-bidi:isolate}
.khw-clock .kc-pick{display:flex;align-items:center;gap:7px}
.khw-clock .kc-lbl{font-size:12px;color:var(--mut,#5F5F73);white-space:nowrap}
.khw-clock .kc-sel{
font:inherit;font-size:12.4px;padding:4px 9px;max-width:200px;
border:1px solid var(--line-2,#C8C8D0);border-radius:8px;
background:var(--bg,#FFF);color:var(--ink,#1B1B22);cursor:pointer;
}
.khw-clock .kc-sel:focus-visible{outline:2px solid var(--amber,#D97706);outline-offset:2px}
/* الهاتف: سطران — التاريخان فوق، والوقت والمبدّل تحت */
@media (max-width:700px){
.khw-clock{gap:5px 14px;padding:8px 12px;min-height:auto}
.khw-clock .kc-dates{width:100%;justify-content:center;font-size:12.2px;gap:4px 8px}
.khw-clock .kc-time{order:2}
.khw-clock .kc-clock{font-size:14.5px}
.khw-clock .kc-off{display:none} /* المنطقة ظاهرة في المبدّل نفسه */
.khw-clock .kc-pick{order:3}
.khw-clock .kc-sel{max-width:150px;font-size:11.8px}
}
@media (max-width:380px){
.khw-clock .kc-lbl{display:none}
.khw-clock .kc-sel{max-width:170px}
}
@media print{.khw-clock .kc-pick{display:none}}
/* KHW-UX:END */
/* KHW3-CHROME:BEGIN */
/* ══════════════════════════════════════════════════════════════
KHW.3.0 — طبقة «العصري»: الشريط العائم، الأزرار، لغة البطاقات.
تُحقن في kh.css و kh-home.css معاً (patch_khw3.py) فتسري على
كل صفحات الموقع لا الرئيسية وحدها.
المرجع البصري: نموذج التصميم المرفق — لوح زجاجي عائم، ظلال
ناعمة موجّهة لأسفل، حواف 12–18px، بلا معدن مصقول.
══════════════════════════════════════════════════════════════ */
:root{
--h3-blue:#3B6FF6; --h3-blue-lo:#7BA2FF;
--h3-violet:#7C3AED; --h3-rose:#E5484D; --h3-teal:#0EA5A5;
--h3-glass:rgba(255,255,255,.80);
--h3-edge:rgba(255,255,255,.92);
--h3-hair:rgba(19,24,44,.09);
--h3-sh:0 1px 2px rgba(19,24,44,.05), 0 10px 26px -8px rgba(19,24,44,.14);
--h3-sh-hi:0 2px 5px rgba(19,24,44,.07), 0 22px 44px -12px rgba(19,24,44,.24);
--h3-r:14px; --h3-r-lg:20px;
--nav-h:88px; /* 12 + 64 + 12 — يعتمد عليه .dw */
}
/* ───────────────── ١) الشريط: من المعدن المصقول إلى لوح عائم ───── */
.nav{
/* الهامش الجانبي على .nav لا على .in — وإلّا لصق اللوح بحافّة
الشاشة في كل عرض بين 1240px وعرض المحتوى. */
height:auto; padding:12px 18px;
background:transparent; border-bottom:0;
backdrop-filter:none; -webkit-backdrop-filter:none;
box-shadow:none;
}
.nav::before,.nav::after{content:none;display:none}
.nav .in{
height:64px; max-width:1240px; margin-inline:auto;
padding-inline:14px; gap:12px;
background:var(--h3-glass);
backdrop-filter:blur(18px) saturate(1.7);
-webkit-backdrop-filter:blur(18px) saturate(1.7);
border:1px solid var(--h3-edge);
border-radius:var(--h3-r-lg);
box-shadow:var(--h3-sh), 0 0 0 1px var(--h3-hair);
}
/* ترتيب النموذج: العلامة يميناً، ثم الروابط، ثم أدوات التحكّم،
وشعار الشبكة في أقصى اليسار بدل مزاحمته للعلامة. */
.nav .brand{order:1}
.nav ul{order:2}
.nav .end{order:3}
.nav .khw-sites{order:4}
.nav ul{gap:2px}
.nav ul a{
position:relative; color:#4B4B5C; font-weight:600; font-size:14.5px;
padding:9px 13px; border-radius:11px; border:0;
text-shadow:none; background:transparent; box-shadow:none;
}
.nav ul a:hover{
color:var(--ink); background:rgba(59,111,246,.075);
border:0; box-shadow:none;
}
.nav ul a.on,.nav ul a.on:hover{
color:var(--h3-blue); font-weight:800;
background:transparent; border:0; box-shadow:none; text-shadow:none;
}
.nav ul a.on::before{
content:""; position:absolute; inset-inline:13px; bottom:3px;
height:2.5px; border-radius:2px; background:var(--h3-blue);
}
.nav .has>a::after{color:#9A9AAB}
/* القائمة المنسدلة تتبع اللوح لا الشريط المعدني */
.nav .sub{
border-radius:var(--h3-r); border:1px solid var(--h3-hair);
box-shadow:var(--h3-sh-hi); background:rgba(255,255,255,.94);
backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
/* شعار الشبكة — قرص مسطّح صغير بدل الكرة المعدنية */
.nav .khw-logo{
width:40px; height:40px; border-radius:13px;
border:1px solid var(--h3-hair); background:#fff;
box-shadow:0 1px 2px rgba(19,24,44,.06);
}
.nav .khw-logo img{width:100%;height:100%;object-fit:contain;padding:2px}
.nav .khw-logo::after{width:11px;height:11px;border-color:#E4E6EC}
.nav .khw-logo:hover{transform:translateY(-1px);box-shadow:var(--h3-sh)}
/* مبدّل اللغة — زرّ الكرة الأرضية مسطّحاً */
.nav .langsw{
width:40px; height:40px; padding:0; border-radius:13px;
background:var(--khw-globe) center/68% 68% no-repeat, #fff;
border:1px solid var(--h3-hair);
box-shadow:0 1px 2px rgba(19,24,44,.06);
}
.nav .langsw:hover{
transform:translateY(-1px); background-color:#fff;
box-shadow:var(--h3-sh);
}
/* الشريط اللاصق صار أعلى (88px)، فأي هدف مرساة يحتاج هامش تمرير
وإلّا اختفى عنوانه تحته عند النقر على #pillars أو #proof. */
[id]{scroll-margin-top:calc(var(--nav-h) + 14px)}
/* ───────────────── ٢) الأزرار: مسطّحة بظلّ ملوّن ───────────────── */
.btn,.b2{border-radius:var(--h3-r);text-shadow:none;font-weight:700}
.btn{
background:linear-gradient(135deg,#F2A62E 0%,#D97706 52%,#C2410C 100%);
border:1px solid transparent; color:#fff;
box-shadow:0 1px 2px rgba(146,64,14,.20), 0 10px 22px -7px rgba(194,65,12,.45);
}
.btn:hover{
transform:translateY(-2px);
box-shadow:0 2px 5px rgba(146,64,14,.22), 0 18px 34px -9px rgba(194,65,12,.52);
}
.btn:active{transform:translateY(1px);box-shadow:0 2px 6px rgba(120,50,10,.32) inset}
.b2{
background:rgba(255,255,255,.88); color:#33333F;
border:1px solid var(--h3-hair);
backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
box-shadow:0 1px 2px rgba(19,24,44,.05), 0 6px 16px -7px rgba(19,24,44,.16);
}
.b2:hover{
transform:translateY(-2px); color:var(--ink); background:#fff;
box-shadow:0 2px 5px rgba(19,24,44,.06), 0 14px 28px -9px rgba(19,24,44,.22);
}
.b2:active{transform:translateY(1px);box-shadow:0 2px 5px rgba(19,24,44,.14) inset}
/* زرّ «ابدأ الآن» في الشريط — بلا اللمعة الزجاجية ولا السهم المُدوّر */
.nav .end{gap:9px}
.nav .end .btn{
padding:10px 18px; font-size:13.8px; border-radius:13px;
border:1px solid transparent;
background:linear-gradient(135deg,#F2A62E 0%,#D97706 52%,#C2410C 100%);
box-shadow:0 1px 2px rgba(146,64,14,.20), 0 8px 18px -6px rgba(194,65,12,.48);
}
.nav .end .btn::before,.nav .end .btn::after{content:none;display:none}
.nav .end .btn:hover{
transform:translateY(-2px);
box-shadow:0 2px 5px rgba(146,64,14,.22), 0 14px 28px -8px rgba(194,65,12,.55);
}
/* ───────────────── ٣) لغة البطاقات ──────────────────────────── */
.col3,.hb{
border-radius:18px; border:1px solid var(--h3-hair);
background:rgba(255,255,255,.88);
box-shadow:var(--h3-sh);
}
@media(hover:hover){
.col3:hover,.hb:hover{
transform:translateY(-4px); border-color:rgba(59,111,246,.28);
box-shadow:var(--h3-sh-hi);
}
}
/* الرقم يصير لوحة ملوّنة كما في النموذج — والتسلسل هنا حقيقي
(أربع فجوات مرقّمة في النصّ نفسه، وأربعة أقسام). */
.col3 .n{
display:inline-grid; place-items:center;
width:46px; height:46px; border-radius:14px;
font-family:'Cairo',sans-serif; font-size:15px; font-weight:800;
letter-spacing:0; color:#fff; margin-bottom:4px;
}
.cols .col3:nth-child(1) .n{background:linear-gradient(140deg,#F2A62E,#D97706);
box-shadow:0 6px 14px -5px rgba(194,65,12,.55)}
.cols .col3:nth-child(2) .n{background:linear-gradient(140deg,#7BA2FF,#3B6FF6);
box-shadow:0 6px 14px -5px rgba(59,111,246,.55)}
.cols .col3:nth-child(3) .n{background:linear-gradient(140deg,#A78BFA,#7C3AED);
box-shadow:0 6px 14px -5px rgba(124,58,237,.55)}
.cols .col3:nth-child(4) .n{background:linear-gradient(140deg,#34D399,#059669);
box-shadow:0 6px 14px -5px rgba(5,150,105,.55)}
.col3 .go,.hb .go{color:var(--h3-blue)}
.cols .col3:nth-child(1) .go{color:var(--amber-hi)}
.cols .col3:nth-child(3) .go{color:#6D28D9}
.cols .col3:nth-child(4) .go{color:#047857}
/* لوحات المحاور — ألوان النموذج على المربّع لا على الشارة وحدها */
.hb .hi{
width:46px; height:46px; border-radius:14px; font-size:21px;
border:0; box-shadow:0 6px 14px -5px rgba(19,24,44,.28);
background:linear-gradient(140deg,#FDE7C7,#F8CE96);
}
.hb.v .hi{background:linear-gradient(140deg,#E9DEFF,#C9B2FB)}
.hb.g .hi{background:linear-gradient(140deg,#CDF3E4,#8FE0C4)}
.hb.t .hi{background:linear-gradient(140deg,#CFEFF7,#9BD9EA)}
.moat,.pt{border-radius:20px;border:1px solid var(--h3-hair);box-shadow:var(--h3-sh-hi)}
/* ───────────────── ٤) الهاتف ────────────────────────────────── */
@media(max-width:900px){
:root{--nav-h:78px}
.nav{padding:10px 12px}
.nav .in{height:58px;border-radius:16px;padding-inline:10px}
.nav .khw-logo,.nav .langsw{width:36px;height:36px;border-radius:11px}
}
@media(prefers-reduced-motion:reduce){
.btn,.b2,.col3,.hb,.nav .khw-logo,.nav .langsw{transition:none}
.btn:hover,.b2:hover,.col3:hover,.hb:hover{transform:none}
}
/* KHW3-CHROME:END */