:root{
--bg:#F8F8F9; --panel:#EFEFF1; --panel2:#E3E3E7; --line:#C4C4CC;
--ink:#111118; --mut:#65657A; --amber:#D97706; --cyan:#0F6E7A; /* 2026-09-19: كان بنفسجياً #0F6E7A — استُبدل بأزرق تيل */
--green:#059669; --red:#DC2626; --slate:#4B5563; --r:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:"Segoe UI","Tahoma","Dubai","Noto Kufi Arabic",sans-serif;
background:var(--bg); color:var(--ink); line-height:1.75; font-size:16px;
background-image:
linear-gradient(rgba(15,110,122,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(15,110,122,.04) 1px, transparent 1px);
background-size:44px 44px;
}
.eyebrow{font-family:Consolas,monospace;letter-spacing:.16em;font-size:.78rem;font-weight:700;color:#0F6E7A;text-transform:uppercase}
h1,h2,h3{line-height:1.35}
h2{font-size:1.6rem;margin-bottom:.35rem}
h3{font-size:1.12rem;color:var(--amber)}
.mut{color:var(--mut)} .amber{color:var(--amber)} .cyan{color:var(--cyan)}
small{color:var(--mut)}
/* ===== Shell ===== */
header{
position:sticky;top:0;z-index:50;background:rgba(248,248,249,.92);backdrop-filter:blur(8px);
border-bottom:1px solid var(--line);padding:.7rem 1.2rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.05rem}
.logo svg{flex:none}
nav{display:flex;gap:.25rem;flex-wrap:wrap}
nav button{
background:none;border:1px solid transparent;color:var(--mut);cursor:pointer;
padding:.4rem .8rem;border-radius:10px;font:inherit;font-size:.86rem;transition:.18s;
}
nav button:hover{color:var(--ink);border-color:var(--line)}
nav button.on{color:#fff;background:var(--amber);font-weight:700}
main{max-width:1100px;margin:0 auto;padding:1.6rem 1.2rem 5rem}
section.page{display:none;animation:fade .35s ease}
section.page.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.hero{
border:1px solid var(--line);border-radius:var(--r);padding:2.2rem 1.8rem;margin-bottom:1.4rem;
background:linear-gradient(135deg,#EFEFF1 0%,#E8E8EC 60%,#EAEAEE 100%);position:relative;overflow:hidden;
}
.hero h1{font-size:clamp(1.6rem,4vw,2.4rem);margin:.3rem 0 .6rem}
.hero p{max-width:640px;color:var(--mut)}
.hero::after{
content:"";position:absolute;inset:auto -60px -60px auto;width:260px;height:260px;border-radius:50%;
background:radial-gradient(circle,rgba(15,110,122,.08),transparent 70%);
}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.card{
background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.15rem 1.2rem;
}
.card.hl{border-color:rgba(217,119,6,.5)}
.tag{display:inline-block;font-size:.72rem;padding:.1rem .55rem;border-radius:99px;border:1px solid var(--line);color:var(--mut);margin:.15rem .1rem}
.tag.a{color:var(--amber);border-color:rgba(217,119,6,.45)}
.tag.c{color:var(--cyan);border-color:rgba(15,110,122,.45)}
.tag.g{color:var(--green);border-color:rgba(5,150,105,.35)}
table{width:100%;border-collapse:collapse;font-size:.9rem;margin:.6rem 0}
th,td{padding:.55rem .7rem;border-bottom:1px solid var(--line);text-align:start}
th{color:var(--cyan);font-weight:600;font-size:.82rem}
tr:hover td{background:rgba(15,110,122,.04)}
.steps{counter-reset:s}
.step{position:relative;padding:1rem;padding-inline-start:3.2rem;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin-bottom:.7rem}
.step::before{
counter-increment:s;content:counter(s);position:absolute;inset-inline-start:1rem;top:1rem;width:1.7rem;height:1.7rem;
border-radius:50%;background:var(--amber);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.85rem;
}
details{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:.6rem;overflow:hidden}
summary{cursor:pointer;padding:.8rem 1rem;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}
summary::after{content:"+";color:var(--cyan);font-size:1.2rem}
details[open] summary::after{content:"–"}
details .body{padding:0 1rem 1rem;color:var(--mut);font-size:.93rem}
input,select,textarea{
width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--ink);
padding:.6rem .8rem;font:inherit;font-size:.92rem;
}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--cyan);outline-offset:1px}
label{display:block;font-size:.85rem;color:var(--mut);margin:.7rem 0 .3rem}
.btn{
display:inline-block;background:var(--amber);color:#fff;border:none;border-radius:10px;
padding:.6rem 1.3rem;font:inherit;font-weight:700;cursor:pointer;transition:.15s;
}
.btn:hover{filter:brightness(1.1)}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.spec{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px dashed var(--line);font-size:.92rem}
.spec b{color:var(--amber)}
.pillrow{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
.notice{border-inline-start:3px solid var(--cyan);background:rgba(15,110,122,.05);padding:.8rem 1rem;border-radius:8px;font-size:.9rem;color:var(--mut);margin:.8rem 0}
.warn{border-inline-start-color:var(--amber);background:rgba(217,119,6,.07)}
/* ===== Branding & Animations ===== */
.klogo{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 2px var(--amber),0 1px 4px rgba(0,0,0,.28);transition:box-shadow .2s,filter .2s}
.brandbtn:hover .klogo,.brandbtn[aria-expanded="true"] .klogo{box-shadow:0 0 0 3px var(--amber),0 2px 8px rgba(0,0,0,.34)}
.contactbar{display:flex;gap:1.1rem;flex-wrap:wrap;justify-content:center;margin-top:.6rem;font-size:.86rem;color:var(--mut)}
.contactbar b{color:var(--amber)}
.ill{margin:.4rem 0 1rem}
.ill svg{width:100%;max-width:560px;display:block}
.card{transition:transform .18s,border-color .18s}
.card:hover{transform:translateY(-3px);border-color:rgba(15,110,122,.45)}
@keyframes hoverfly{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.drone-anim{animation:hoverfly 3.2s ease-in-out infinite}
.rotor{transform-origin:center;transform-box:fill-box;animation:spin .5s linear infinite}
.vidcard iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:10px}
@media (prefers-reduced-motion:reduce){.drone-anim,.rotor{animation:none}}
.typephoto{width:100%;max-width:520px;border-radius:12px;border:1px solid var(--line);display:block;margin:.6rem auto;background:#fff;direction:ltr}
.procon{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:640px){.procon{grid-template-columns:1fr}}
.backbtn{margin-bottom:1rem}
.wafab{position:fixed;bottom:22px;left:22px;z-index:60;width:56px;height:56px;border-radius:50%;
background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.45);
text-decoration:none;transition:transform .15s}
.wafab:hover{transform:scale(1.08)}
.wafab svg{width:30px;height:30px;fill:#fff}
.searchwrap{position:relative;flex:1;min-width:160px;max-width:300px}
.searchwrap input{padding:.45rem .9rem;border-radius:99px;font-size:.85rem}
.sresults{position:absolute;top:110%;right:0;left:0;background:var(--panel2);border:1px solid var(--line);
border-radius:12px;max-height:320px;overflow:auto;z-index:70;display:none;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.sresults.on{display:block}
.sresults button{display:block;width:100%;text-align:start;background:none;border:none;border-bottom:1px solid var(--line);
color:var(--ink);padding:.6rem .9rem;cursor:pointer;font:inherit;font-size:.85rem}
.sresults button:hover{background:rgba(15,110,122,.06)}
.sresults small{display:block;color:var(--mut)}
.costrow{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px dashed var(--line);font-size:.9rem}
.statusbar{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:center;
padding:.45rem 1rem;border-bottom:1px solid var(--line);background:rgba(239,239,241,.9);
font-size:.82rem;color:var(--mut)}
.statusbar b{color:var(--cyan);font-family:Consolas,monospace}
.statusbar .amber{font-family:inherit}
.locbtn{background:none;border:1px solid var(--line);color:var(--mut);border-radius:99px;
padding:.15rem .7rem;cursor:pointer;font:inherit;font-size:.78rem}
.locbtn:hover{color:var(--ink);border-color:var(--cyan)}
footer{border-top:1px solid var(--line);padding:1.4rem;text-align:center;color:var(--mut);font-size:.85rem}
.vidbar{background:linear-gradient(135deg,#EFEFF1,#E3E3E7);border:1px solid var(--line);
border-radius:16px;padding:1rem;margin:1rem 0}
.vidbar h3{font-size:1.05rem;margin-bottom:.2rem}
.vidbar .vsub{color:var(--mut);font-size:.85rem;margin-bottom:.8rem}
/* ===== لوحة مواقعي الأخرى (تأثير ثلاثي الأبعاد) ===== */
.logobtn{background:none;border:none;padding:0;cursor:pointer;position:relative;line-height:0;
perspective:800px;display:inline-block}
.logobtn:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:8px}
.logobtn .klogo{transition:transform .35s cubic-bezier(.2,1.1,.4,1);transform-style:preserve-3d}
.logobtn:hover .klogo{transform:rotateY(18deg) scale(1.06)}
.logobtn.open .klogo{transform:rotateY(180deg)}
.logodot{position:absolute;bottom:-2px;inset-inline-end:-2px;width:14px;height:14px;border-radius:50%;
background:var(--amber);color:#fff;font-size:9px;font-weight:900;display:flex;
align-items:center;justify-content:center;border:2px solid var(--bg);pointer-events:none}
.sitepanel{position:fixed;z-index:90;top:64px;inset-inline-start:12px;width:min(330px,calc(100vw - 24px));
background:linear-gradient(150deg,#F0F0F2,#E8E8EC);border:1px solid var(--line);border-radius:16px;
padding:.9rem;box-shadow:0 24px 60px rgba(0,0,0,.65),0 0 0 1px rgba(217,119,6,.12) inset;
transform-origin:top center;opacity:0;pointer-events:none;
transform:perspective(900px) rotateX(-14deg) translateY(-12px) scale(.96);
transition:opacity .22s ease, transform .3s cubic-bezier(.2,1.1,.4,1)}
.sitepanel.on{opacity:1;pointer-events:auto;transform:perspective(900px) rotateX(0) translateY(0) scale(1)}
.sphead{display:flex;align-items:center;gap:.5rem;margin-bottom:.7rem;padding-bottom:.6rem;
border-bottom:1px solid var(--line)}
.sphead b{font-size:.92rem}
.sphead small{display:block;color:var(--mut);font-size:.72rem}
.spclose{margin-inline-start:auto;background:none;border:none;color:var(--mut);font-size:1.1rem;cursor:pointer}
.spitem{display:flex;gap:.7rem;align-items:flex-start;padding:.65rem;border-radius:12px;
text-decoration:none;background:var(--panel);border:1px solid var(--line);margin-bottom:.5rem;
transition:.18s;transform-style:preserve-3d}
.spitem:hover{border-color:var(--cyan);transform:translateY(-2px) scale(1.015);
box-shadow:0 8px 20px rgba(0,0,0,.4)}
.spico{font-size:1.5rem;line-height:1;flex:none}
.spitem b{display:block;color:var(--ink);font-size:.88rem;margin-bottom:.1rem}
.spitem span{display:block;color:var(--mut);font-size:.74rem;line-height:1.5}
.spitem em{display:block;color:var(--cyan);font-size:.7rem;font-style:normal;margin-top:.25rem;
font-family:Consolas,monospace}
.spitem.cur{border-color:var(--amber);background:rgba(217,119,6,.07)}
.spitem.cur em{color:var(--amber)}
@media (prefers-reduced-motion:reduce){.sitepanel,.logobtn .klogo,.spitem{transition:none}}
/* ===== عمق ثلاثي الأبعاد لقائمة المواقع ===== */
.brandbtn{perspective:700px}
.brandbtn .klogo{transition:transform .35s cubic-bezier(.2,1.1,.4,1)}
.brandbtn:hover .klogo{transform:rotateY(20deg) scale(1.06)}
.brandbtn[aria-expanded="true"] .klogo{transform:rotateY(180deg)}
.brandcaret{transition:transform .25s}
.brandbtn[aria-expanded="true"] .brandcaret{transform:rotate(180deg)}
.sitemenu{transform-origin:top center;
transform:perspective(900px) rotateX(-16deg) translateY(-10px) scale(.95);
opacity:0;transition:opacity .22s ease, transform .3s cubic-bezier(.2,1.1,.4,1);
box-shadow:0 24px 60px rgba(0,0,0,.65), 0 0 0 1px rgba(217,119,6,.12) inset}
.sitemenu.on{transform:perspective(900px) rotateX(0) translateY(0) scale(1);opacity:1}
.smitem{transition:.18s;transform-style:preserve-3d}
.smitem:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 20px rgba(0,0,0,.45)}
@media (prefers-reduced-motion:reduce){.sitemenu,.brandbtn .klogo,.smitem{transition:none}}
.sitemenu#footerSiteMenu{top:auto;bottom:calc(100% + 8px);inset-inline-start:50%;transform:translateX(-50%)}
.condir{margin:.9rem 0}
.confilt{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.7rem}
.contbl{width:100%;border-collapse:collapse;font-size:.85rem}
.contbl th{background:var(--panel2);padding:.55rem .5rem;font-size:.78rem;color:var(--cyan)}
.contbl td{padding:.55rem .5rem;border-bottom:1px solid var(--line);vertical-align:top}
.contbl tr:hover td{background:rgba(15,110,122,.05)}
.conname{font-weight:700;color:var(--ink)}
.contbl a{color:var(--cyan);text-decoration:none;word-break:break-all}
.contbl a:hover{text-decoration:underline}
.conmail{font-family:Consolas,monospace;font-size:.8rem;word-break:break-all}
.conph{font-family:Consolas,monospace;font-size:.8rem;color:var(--amber);direction:ltr;display:inline-block}
.conna{color:#4a5a68;font-size:.78rem}
.convf{display:inline-block;font-size:.62rem;padding:.05rem .35rem;border-radius:99px;
background:rgba(5,150,105,.15);color:var(--green);margin-inline-start:.3rem;font-family:Consolas,monospace}
/* ===== قائمة المواقع من الشعار ===== */
.logo{position:relative}
.brandbtn{display:flex;align-items:center;gap:.55rem;background:none;border:none;padding:0;
font:inherit;color:inherit;cursor:pointer}
.brandbtn:hover .klogo{transform:rotate(-6deg) scale(1.06)}
.brandbtn .klogo{transition:transform .25s cubic-bezier(.2,1.3,.4,1)}
.brandcaret{font-size:.7rem;color:var(--mut);transition:transform .25s}
.brandbtn[aria-expanded="true"] .brandcaret{transform:rotate(180deg);color:var(--amber)}
.sitemenu{position:absolute;top:calc(100% + 12px);inset-inline-start:0;z-index:70;min-width:250px;
background:linear-gradient(160deg,#F2F2F4,#EBEBED);border:1px solid var(--line);border-radius:16px;
padding:.6rem;opacity:0;visibility:hidden;pointer-events:none;
transform:perspective(900px) rotateX(-14deg) translateY(-10px) scale(.95);transform-origin:top center;
box-shadow:0 18px 40px rgba(0,0,0,.6),0 0 0 1px rgba(217,119,6,.12) inset;
transition:opacity .22s ease,transform .28s cubic-bezier(.2,1.15,.4,1),visibility .22s}
.sitemenu.on{opacity:1;visibility:visible;pointer-events:auto;
transform:perspective(900px) rotateX(0) translateY(0) scale(1)}
.sitemenu::before{content:"";position:absolute;top:-7px;inset-inline-start:22px;width:13px;height:13px;
background:#F2F2F4;border-inline-start:1px solid var(--line);border-top:1px solid var(--line);
transform:rotate(45deg)}
.smhead{font-size:.68rem;color:var(--mut);letter-spacing:.14em;text-transform:uppercase;
padding:.15rem .6rem .45rem;font-family:Consolas,monospace}
.smitem{display:flex;align-items:center;gap:.65rem;padding:.55rem .6rem;border-radius:10px;
text-decoration:none;transition:.16s;transform-style:preserve-3d}
.smitem:hover{background:rgba(15,110,122,.08);transform:translateZ(14px) scale(1.02)}
.smico{flex:none;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;
justify-content:center;font-size:1.05rem;background:var(--panel2);border:1px solid var(--line)}
.smitem:hover .smico{border-color:var(--cyan)}
.smtxt b{display:block;color:var(--ink);font-size:.86rem;line-height:1.3}
.smtxt span{display:block;color:var(--mut);font-size:.73rem}
.smitem.cur{opacity:.55;pointer-events:none}
.smitem.cur .smico{border-color:var(--amber)}
.vidgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.7rem}
.vidcard{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);
border-radius:12px;padding:.9rem;transition:.16s;text-align:start}
.vidcard:hover{border-color:var(--cyan);transform:translateY(-3px);background:var(--panel2)}
.vidcard .vico{font-size:1.5rem;line-height:1;display:block;margin-bottom:.35rem}
.vidcard b{display:block;color:var(--ink);font-size:.9rem;margin-bottom:.15rem}
.vidcard span{display:block;color:var(--mut);font-size:.76rem;line-height:1.5}
.vidcard em{display:block;color:var(--cyan);font-size:.72rem;font-style:normal;margin-top:.45rem}
.navcard{display:block;width:100%;text-align:inherit;font:inherit;cursor:pointer;position:relative}
.navcard:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:0 10px 26px rgba(0,0,0,.4)}
.navcard:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.cardgo{display:block;margin-top:.6rem;font-size:.78rem;color:var(--cyan);opacity:0;transform:translateY(-3px);transition:.18s}
.navcard:hover .cardgo,.navcard:focus-visible .cardgo{opacity:1;transform:none}
@media(hover:none){.cardgo{opacity:1;transform:none}}
.pnbtn{background:var(--panel);border:1px solid var(--line);color:var(--mut);border-radius:99px;
padding:.4rem 1rem;font:inherit;font-size:.84rem;cursor:pointer;transition:.15s}
.pnbtn:hover{color:var(--ink);border-color:var(--cyan);background:var(--panel2)}
/* ===== صفحة التدريب ===== */
.trstep{display:flex;gap:.9rem;align-items:flex-start;background:var(--panel);border:1px solid var(--line);
border-radius:14px;padding:1rem;margin-bottom:.7rem;transition:.18s}
.trstep:hover{border-color:var(--cyan);transform:translateX(-4px)}
[dir=ltr] .trstep:hover{transform:translateX(4px)}
.trnum{flex:none;width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--amber),#c9832a);
color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.trstep h4{font-size:1rem;margin-bottom:.25rem}
.trstep p{color:var(--mut);font-size:.86rem;line-height:1.7}
.trwarn{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.3);border-radius:10px;
padding:.6rem .8rem;margin-top:.5rem;font-size:.82rem;color:#DC2626}
.trcen{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:.9rem;margin:.9rem 0}
.trcard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1rem;
display:flex;flex-direction:column;transition:.18s}
.trcard:hover{border-color:var(--amber);transform:translateY(-4px);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.trcard h4{font-size:1.02rem}
.trloc{font-size:.78rem;color:var(--cyan);margin-bottom:.4rem}
.trcard p{color:var(--mut);font-size:.84rem;line-height:1.65;flex:1}
.trbadges{margin:.5rem 0 .2rem}
.trmode{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:1rem;margin:.9rem 0}
.trmode svg{width:100%;height:auto;max-height:250px;display:block}
.trtable td:first-child{color:var(--cyan);font-family:Consolas,monospace;font-size:.85rem}
/* ===== أنظمة مكافحة الدرونز (C-UAS) ===== */
.cuhero{background:linear-gradient(135deg,#F8EAEB,#ECF1F3);
border:1px solid var(--line);border-radius:16px;padding:1.4rem;margin-bottom:1.1rem;position:relative;overflow:hidden}
.cuhero::after{content:"";position:absolute;inset-inline-end:-40px;top:-40px;width:180px;height:180px;
border-radius:50%;background:radial-gradient(circle,rgba(220,38,38,.12),transparent 70%)}
.custats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.8rem;margin-top:1rem}
.custat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.8rem;text-align:center}
.custat b{display:block;font-family:Consolas,monospace;font-size:1.5rem;color:var(--amber);line-height:1.1}
.custat span{font-size:.72rem;color:var(--mut)}
.cuticker{background:#1a1015;border:1px solid rgba(248,113,113,.35);border-radius:10px;
overflow:hidden;white-space:nowrap;height:36px;display:flex;align-items:center;margin-bottom:1.2rem}
.cutlabel{background:#DC2626;color:#fff;font-weight:800;font-size:.74rem;padding:0 .8rem;height:100%;
display:flex;align-items:center;flex:none;letter-spacing:.03em}
.cuttrack{display:flex;flex:none;width:max-content;gap:2.5rem;padding-inline-start:1.2rem;animation:cutick 42s linear infinite;will-change:transform}
.cuticker:hover .cuttrack{animation-play-state:paused}
@keyframes cutick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
[dir=ltr] .cuttrack{animation-name:cutickltr}
@keyframes cutickltr{from{transform:translateX(0)}to{transform:translateX(50%)}}
.cutitem{color:var(--mut);font-size:.8rem;display:inline-flex;gap:.4rem;align-items:center;white-space:nowrap}
.cutitem b{color:#DC2626;font-weight:700}
.cugrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem;margin:.9rem 0}
.cucard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:1rem;transition:.18s}
.cucard:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.cuicon{font-size:1.7rem;line-height:1;margin-bottom:.4rem}
.cucard h3{font-size:1rem;margin-bottom:.3rem}
.cucard p{color:var(--mut);font-size:.85rem;line-height:1.65}
.cutag{display:inline-block;font-size:.68rem;padding:.12rem .5rem;border-radius:99px;margin:.3rem .2rem 0 0;
font-family:Consolas,monospace}
.cutag.good{background:rgba(5,150,105,.15);color:var(--green)}
.cutag.warn{background:rgba(240,165,54,.15);color:var(--amber)}
.cudew{background:linear-gradient(135deg,#EBEBED,#E3E3E7);border:1px solid rgba(15,110,122,.25);
border-radius:16px;padding:1.2rem;margin:1rem 0}
.cudew h3{color:var(--cyan);font-size:1.1rem}
.cusplit{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:.9rem}
.cudewbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:1rem}
.cudewbox h4{font-size:.98rem;margin-bottom:.4rem}
.cuco{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.8rem;margin-top:.9rem}
.cocard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.9rem;
display:flex;flex-direction:column;transition:.18s}
.cocard:hover{border-color:var(--amber);transform:translateY(-3px)}
.cocard .conm{font-weight:700;font-size:.95rem}
.cocard .cofl{font-size:.75rem;color:var(--mut);margin-bottom:.35rem}
.cocard p{color:var(--mut);font-size:.8rem;line-height:1.6;flex:1}
.cobtn{display:inline-block;margin-top:.6rem;text-align:center;text-decoration:none;
background:none;border:1px solid var(--line);color:var(--cyan);border-radius:99px;
padding:.32rem .7rem;font-size:.76rem;transition:.15s}
.cobtn:hover{background:var(--cyan);color:#fff;border-color:var(--cyan)}
.cufig{background:linear-gradient(160deg,#EBEBED,#E3E3E7);border:1px solid var(--line);
border-radius:14px;padding:1rem;margin:.9rem 0}
.cufig svg{width:100%;height:auto;display:block;max-height:260px}
.cufig figcaption{margin-top:.6rem;font-size:.78rem;color:var(--mut);text-align:center;line-height:1.6}
/* ===== منصات الدرون العالمية ===== */
.dbstats{display:flex;gap:1.6rem;flex-wrap:wrap;margin:.8rem 0}
.dbstats div b{display:block;font-family:Consolas,monospace;font-size:1.4rem;color:var(--amber);line-height:1.1}
.dbstats div span{font-size:.72rem;color:var(--mut);letter-spacing:.05em}
.dbcontrols{display:flex;gap:.6rem;flex-wrap:wrap;margin:.8rem 0}
.dbcontrols input,.dbcontrols select{flex:1;min-width:140px;max-width:260px}
.dbchips{display:flex;gap:.4rem;flex-wrap:wrap;margin:.6rem 0 1rem}
.dbchip{background:none;border:1px solid var(--line);color:var(--mut);border-radius:99px;
padding:.3rem .9rem;font:inherit;font-size:.8rem;cursor:pointer;transition:.15s}
.dbchip:hover{color:var(--ink);border-color:var(--cyan)}
.dbchip.on{background:var(--cyan);color:#fff;border-color:var(--cyan);font-weight:700}
.dbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.9rem}
.dbcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;
cursor:pointer;transition:.16s;text-align:start}
.dbcard:hover{transform:translateY(-3px);border-color:var(--cyan)}
.dbsilo{background:var(--panel2);padding:.5rem;position:relative;border-bottom:1px solid var(--line)}
.dbsilo svg{width:100%;height:72px;display:block}
.dbsilo .tb{position:absolute;top:6px;inset-inline-end:8px;font-family:Consolas,monospace;
font-size:.58rem;color:var(--mut);letter-spacing:.08em}
.dbbody{padding:.7rem .8rem}
.dbname{font-weight:700;font-size:.95rem}
.dben{font-family:Consolas,monospace;font-size:.72rem;color:var(--cyan);margin-bottom:.2rem}
.dbmeta{font-size:.75rem;color:var(--mut);margin-bottom:.5rem}
.dbro{display:flex;justify-content:space-between;font-size:.76rem;padding:.18rem 0;border-bottom:1px dashed var(--line)}
.dbro em{color:var(--mut);font-style:normal}
.dbro b{font-family:Consolas,monospace;color:var(--amber)}
.dbro b.na{color:#4a5a68}
.dbmodal{position:fixed;inset:0;background:rgba(5,8,12,.82);z-index:80;display:none;
align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(4px)}
.dbmodal.on{display:flex}
.dbmbox{background:var(--panel);border:1px solid var(--line);border-radius:16px;max-width:520px;
width:100%;max-height:88vh;overflow:auto;padding:1.2rem}
.dbmhead{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.8rem}
.dbmhead h3{font-size:1.2rem;color:var(--ink)}
.dbclose{background:none;border:none;color:var(--mut);font-size:1.6rem;cursor:pointer;line-height:1}
.dbbar{height:7px;background:var(--panel2);border-radius:99px;overflow:hidden;margin:.3rem 0}
.dbbar i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--amber))}
.saifwrap{position:fixed;z-index:61;bottom:22px;right:22px;width:104px;
touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;
animation:saifIn .6s cubic-bezier(.2,1.2,.4,1) both}
.saifwrap.dragging{cursor:grabbing;transition:none}
.saifwrap.dragging .saifimg{animation:none}
@keyframes saifIn{from{opacity:0;transform:translateY(30px) scale(.7)}to{opacity:1;transform:none}}
.saifimg{width:100%;display:block;pointer-events:none;
filter:drop-shadow(0 8px 16px rgba(0,0,0,.5));animation:saifHover 3.4s ease-in-out infinite}
@keyframes saifHover{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.saifwrap:hover .saifimg{filter:drop-shadow(0 8px 22px rgba(240,165,54,.55))}
.saifbtn{position:absolute;inset:0;background:none;border:none;cursor:inherit;padding:0;
width:100%;height:100%}
.saifdot{position:absolute;top:14%;right:6%;width:11px;height:11px;border-radius:50%;
background:var(--green);border:2px solid var(--bg);box-shadow:0 0 8px var(--green)}
.saiftip{position:absolute;bottom:100%;inset-inline-end:0;margin-bottom:6px;white-space:nowrap;
background:var(--amber);color:#fff;font-size:.78rem;font-weight:700;padding:.35rem .8rem;
border-radius:99px;box-shadow:0 4px 12px rgba(0,0,0,.4);pointer-events:none;
opacity:0;transform:translateY(6px);transition:.25s}
.saiftip.show{opacity:1;transform:none}
.saiftip::after{content:"";position:absolute;top:100%;inset-inline-end:22px;border:6px solid transparent;
border-top-color:var(--amber)}
@media(max-width:520px){.saifwrap{width:82px;bottom:16px;right:12px}}
@media (prefers-reduced-motion:reduce){.saifwrap,.saifimg{animation:none}}
.chatpanel{position:fixed;bottom:118px;right:22px;z-index:61;width:340px;max-width:calc(100vw - 32px);
height:460px;max-height:calc(100vh - 130px);background:var(--panel);border:1px solid var(--line);
border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.55);display:none;flex-direction:column;overflow:hidden}
.chatpanel.on{display:flex}
.chathead{background:linear-gradient(135deg,#EBEBED,#E3E3E7);padding:.7rem 1rem;display:flex;align-items:center;gap:.6rem;border-bottom:1px solid var(--line)}
.chathead img{width:30px;height:30px;border-radius:50%}
.chathead b{font-size:.9rem}
.chathead small{display:block;color:var(--green);font-size:.72rem}
.chatclose{background:none;border:none;color:var(--mut);font-size:1.2rem;cursor:pointer;line-height:1}
.spkbtn{margin-inline-start:auto;background:none;border:1px solid var(--line);border-radius:99px;
color:#4a5a68;font-size:.85rem;cursor:pointer;padding:.15rem .45rem;line-height:1.4;transition:.15s}
.spkbtn.on{color:var(--green);border-color:var(--green)}
.micbtn{background:var(--panel2);border:1px solid var(--line);color:var(--mut);width:38px;height:38px;
border-radius:50%;cursor:pointer;font-size:1rem;flex:none;transition:.15s}
.micbtn:hover{color:var(--ink);border-color:var(--cyan)}
.micbtn.listening{background:#DC2626;color:#fff;border-color:#DC2626;animation:micPulse 1s infinite}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(248,113,113,.6)}50%{box-shadow:0 0 0 8px rgba(248,113,113,0)}}
.saifwrap.speaking .saifimg{animation:saifTalk .5s ease-in-out infinite}
@keyframes saifTalk{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-4px) rotate(-1.5deg)}75%{transform:translateY(-4px) rotate(1.5deg)}}
.chathead img.speaking{animation:saifTalk .5s ease-in-out infinite}
.chatbody{flex:1;overflow-y:auto;padding:.8rem;display:flex;flex-direction:column;gap:.55rem}
.cmsg{max-width:85%;padding:.55rem .8rem;border-radius:12px;font-size:.86rem;line-height:1.55;white-space:pre-wrap}
.cmsg.bot{background:var(--panel2);border:1px solid var(--line);align-self:flex-start;border-start-start-radius:3px}
.cmsg.user{background:var(--amber);color:#fff;align-self:flex-end;border-start-end-radius:3px;font-weight:600}
.cmsg a{color:var(--cyan)}
.chatquick{display:flex;gap:.35rem;flex-wrap:wrap;padding:0 .8rem .5rem}
.chatquick button{background:none;border:1px solid var(--line);color:var(--mut);border-radius:99px;
padding:.25rem .7rem;font:inherit;font-size:.76rem;cursor:pointer}
.chatquick button:hover{color:var(--ink);border-color:var(--cyan)}
.chatinput{display:flex;gap:.4rem;padding:.6rem;border-top:1px solid var(--line)}
.chatinput input{flex:1;padding:.5rem .8rem;border-radius:99px;font-size:.85rem}
.chatinput button{background:var(--amber);border:none;color:#fff;width:38px;height:38px;border-radius:50%;
cursor:pointer;font-size:1rem;flex:none}
.typing span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--mut);margin:0 2px;
animation:typingdot 1s infinite}
/* ===== صندوق نتائج البحث الخارجي ===== */
.websearch{background:var(--panel2);border:1px solid var(--line);border-radius:12px;
margin:.2rem 0 .1rem;overflow:hidden;align-self:stretch;animation:wsIn .3s ease both}
@keyframes wsIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wshead{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;
background:rgba(240,165,54,.1);border-bottom:1px solid var(--line)}
.wstitle{font-size:.8rem;font-weight:700;color:var(--amber)}
.wsquery{padding:.4rem .7rem 0;font-size:.75rem;color:var(--mut);font-style:italic}
.wsmain{padding:.6rem .7rem}
.wsgo{display:block;width:100%;box-sizing:border-box;text-align:center;text-decoration:none;
background:linear-gradient(135deg,var(--amber),#c9832a);color:#fff;border:none;
border-radius:10px;padding:.6rem;font:inherit;font-size:.88rem;font-weight:800;cursor:pointer;
box-shadow:0 3px 10px rgba(240,165,54,.3);transition:.15s}
.wsgo:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(209,119,6,.4);color:#fff}
.wshint{margin:.35rem 0 0;font-size:.7rem;color:var(--mut);text-align:center}
.wssub{font-size:.72rem;color:var(--amber);font-weight:700;margin:.2rem 0 .4rem}
.wsbody{padding:.5rem .7rem .7rem;max-height:230px;overflow-y:auto}
.wsitem{display:block;padding:.5rem;border-radius:8px;text-decoration:none;margin-bottom:.35rem;
background:var(--panel);border:1px solid transparent;transition:.15s}
.wsitem:hover{border-color:var(--cyan);background:rgba(15,110,122,.06)}
.wsitem b{display:block;color:var(--cyan);font-size:.83rem;margin-bottom:.15rem}
.wsitem span{display:block;color:var(--mut);font-size:.75rem;line-height:1.5}
.wsitem em{display:block;color:var(--amber);font-size:.68rem;font-style:normal;margin-top:.2rem;
font-family:Consolas,monospace}
.wsempty{color:var(--mut);font-size:.8rem;text-align:center;padding:.6rem}
.wsload{text-align:center;padding:.8rem}
.wsload span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);
margin:0 3px;animation:typingdot 1s infinite}
.wsload span:nth-child(2){animation-delay:.15s}.wsload span:nth-child(3){animation-delay:.3s}
.gsc-control-cse{background:transparent!important;border:none!important;padding:0!important;font-family:inherit!important}
.gsc-webResult.gsc-result{background:transparent!important;border:none!important;padding:.3rem 0!important}
.gs-title,.gs-title b{color:var(--cyan)!important}
.gs-snippet{color:var(--mut)!important;font-size:.76rem!important}
.gsc-above-wrapper-area,.gcsc-more-maybe-branding-root,.gsc-adBlock{display:none!important}
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}
@keyframes typingdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(max-width:420px){.chatpanel{right:10px;bottom:110px;width:calc(100vw - 20px);height:400px}}
@media(max-width:760px){
header{padding:.6rem .8rem}
nav{overflow-x:auto;width:100%;flex-wrap:nowrap;scrollbar-width:none}
nav button{white-space:nowrap}
}
/* --- added by build: real anchors in nav + crawlable footer sitemap --- */
nav a{background:none;border:1px solid transparent;color:var(--mut);cursor:pointer;
padding:.4rem .8rem;border-radius:10px;font:inherit;font-size:.86rem;transition:.18s;
text-decoration:none;display:inline-block}
nav a:hover{color:var(--ink);border-color:var(--line)}
nav a.on{color:#fff;background:var(--amber);font-weight:700}
.sitemapnav{max-width:1100px;margin:0 auto;padding:1.2rem;border-top:1px solid var(--line);
display:flex;flex-wrap:wrap;gap:.4rem .9rem;justify-content:center;font-size:.8rem}
.sitemapnav a{color:var(--mut);text-decoration:none}
.sitemapnav a:hover{color:var(--amber);text-decoration:underline}
/* --- added by build: FAQ accordion --- */
.faqwrap{display:flex;flex-direction:column;gap:.5rem}
.faqi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:.85rem 1rem}
.faqi summary{cursor:pointer;font-weight:700;color:var(--ink);list-style:none;font-size:.98rem}
.faqi summary::-webkit-details-marker{display:none}
.faqi summary::after{content:"+";float:inline-end;color:var(--amber);font-weight:700;margin-inline-start:.6rem}
.faqi[open] summary::after{content:"−"}
.faqi[open]{border-color:var(--amber)}
.faqi p{margin-top:.6rem;font-size:.92rem}
/* ============================================================
تعديلات 9 أغسطس 2026
1) أزرار ثلاثية الأبعاد بلون دخاني مع ظل خفيف
2) صندوق K.Pilot قابل للسحب والتحريك
3) رابط المرسوم بقانون داخل صفحة اللوائح
============================================================ */
:root{
--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 4px 9px rgba(17,17,24,.15);
--smoke-sh-in:0 2px 5px rgba(17,17,24,.20) inset, 0 1px 0 rgba(255,255,255,.45);
}
/* ---------- 1) الأزرار الدخانية ثلاثية الأبعاد ---------- */
nav button, nav a,
.btn.ghost,
.chatquick button{
background:linear-gradient(180deg,var(--smoke-1) 0%,var(--smoke-2) 52%,var(--smoke-3) 100%);
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:box-shadow .16s, transform .16s, filter .16s;
}
nav button:hover, nav a:hover,
.btn.ghost:hover,
.chatquick button:hover{
color:var(--ink);
border-color:var(--smoke-line);
box-shadow:var(--smoke-sh-hi);
transform:translateY(-1px);
}
nav button:active, nav a:active,
.btn.ghost:active,
.chatquick button:active{
box-shadow:var(--smoke-sh-in);
transform:translateY(1px);
}
nav button:focus-visible, nav a:focus-visible, .btn:focus-visible{
outline:2px solid var(--cyan); outline-offset:2px;
}
/* الزر النشط: نفس المعالجة ثلاثية الأبعاد بلون الهوية حتى تبقى الصفحة الحالية واضحة */
nav button.on, nav a.on{
color:#fff;
background:linear-gradient(180deg,#EFA02B 0%,#D97706 55%,#B15D04 100%);
border-color:#A05505;
text-shadow:0 1px 1px rgba(0,0,0,.3);
box-shadow:0 1px 0 rgba(255,255,255,.38) inset, 0 -1px 0 rgba(0,0,0,.16) inset, 0 3px 7px rgba(177,93,4,.32);
}
nav button.on:hover, nav a.on:hover{
color:#fff;
box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 -1px 0 rgba(0,0,0,.16) inset, 0 5px 12px rgba(177,93,4,.4);
}
/* الأزرار الأساسية بلون الهوية — نفس البروز ثلاثي الأبعاد */
.btn{
background:linear-gradient(180deg,#EFA02B 0%,#D97706 55%,#B15D04 100%);
border:1px solid #A05505;
text-shadow:0 1px 1px rgba(0,0,0,.28);
box-shadow: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,.3);
transition:box-shadow .16s, transform .16s, filter .16s;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 -1px 0 rgba(0,0,0,.16) inset, 0 5px 13px rgba(177,93,4,.38); }
.btn:active{ transform:translateY(1px); box-shadow:0 2px 6px rgba(0,0,0,.28) inset; }
.btn.ghost{ background:linear-gradient(180deg,var(--smoke-1) 0%,var(--smoke-2) 52%,var(--smoke-3) 100%); }
@media (prefers-reduced-motion:reduce){
nav button, nav a, .btn, .chatquick button{transition:none}
nav button:hover, nav a:hover, .btn:hover, .chatquick button:hover{transform:none}
}
/* ---------- 2) سحب صندوق K.Pilot ---------- */
.chathead.draghandle{
cursor:grab; touch-action:none;
user-select:none; -webkit-user-select:none;
}
.chathead.draghandle:active{cursor:grabbing}
/* مقبض السحب المرئي */
.chathead.draghandle::before{
content:"⠿";
font-size:.95rem; line-height:1; color:var(--mut); opacity:.55;
margin-inline-end:.15rem; flex:none;
}
.chathead.draghandle button{cursor:pointer}
.chatpanel.moved{
right:auto; bottom:auto;
inset-inline-end:auto;
}
.chatpanel.dragging{
box-shadow:0 26px 60px rgba(0,0,0,.5);
opacity:.97;
transition:none;
}
.chatpanel.dragging .chatbody{pointer-events:none}
/* ---------- 3) مرجع المرسوم داخل صفحة اللوائح ---------- */
.lawref{margin:0 0 .2rem}
.lawref summary{
cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.35rem;
border-bottom:1px dotted var(--amber); padding-bottom:1px;
}
.lawref summary::-webkit-details-marker{display:none}
.lawref summary:hover b{color:#B15D04}
.lawref .lawcaret{font-size:.72rem;color:var(--amber);transition:transform .15s}
.lawref details[open] .lawcaret{transform:rotate(180deg)}
.lawrefbox{
display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0 .2rem;
padding:.55rem .7rem; border-radius:10px;
background:var(--panel2); border:1px solid var(--line);
}
a.lawlink{
display:inline-block; text-decoration:none; color:var(--smoke-ink);
background:linear-gradient(180deg,var(--smoke-1) 0%,var(--smoke-2) 52%,var(--smoke-3) 100%);
border:1px solid var(--smoke-line); border-radius:9px;
padding:.32rem .75rem; font-size:.82rem; font-weight:700;
text-shadow:0 1px 0 rgba(255,255,255,.7);
box-shadow:var(--smoke-sh); transition:box-shadow .16s, transform .16s;
}
a.lawlink:hover{color:var(--ink); box-shadow:var(--smoke-sh-hi); transform:translateY(-1px)}
a.lawlink:active{box-shadow:var(--smoke-sh-in); transform:translateY(1px)}
/* ---------- 4) عدّاد زيارات الموقع (الفوتر) ---------- */
.visitbox{
margin-top:.55rem;
display:inline-flex; align-items:center; gap:.45rem;
font-size:.74rem; color:var(--mut);
}
.visitbox .visitimg{
height:20px; width:auto; display:block; border-radius:4px;
box-shadow:0 1px 3px rgba(17,17,24,.14);
}
/* clickable fly-zone cards -> official GCAA map */
a.zone-card{display:block;text-decoration:none;color:inherit;position:relative;cursor:pointer}
a.zone-card h3{color:inherit}
a.zone-card .zone-cta{display:block;margin-top:.7rem;font-size:.78rem;font-weight:600;opacity:.85}
a.zone-card:focus-visible{outline:2px solid var(--acc,#0F6E7A);outline-offset:3px}
a.zone-card.zone-g{border-color:rgba(16,185,129,.35)}
a.zone-card.zone-g .zone-cta{color:#10b981}
a.zone-card.zone-g:hover{border-color:rgba(16,185,129,.75);box-shadow:0 6px 22px rgba(16,185,129,.16)}
a.zone-card.zone-o{border-color:rgba(249,115,22,.35)}
a.zone-card.zone-o .zone-cta{color:#f97316}
a.zone-card.zone-o:hover{border-color:rgba(249,115,22,.75);box-shadow:0 6px 22px rgba(249,115,22,.16)}
a.zone-card.zone-r{border-color:rgba(239,68,68,.35)}
a.zone-card.zone-r .zone-cta{color:#ef4444}
a.zone-card.zone-r:hover{border-color:rgba(239,68,68,.75);box-shadow:0 6px 22px rgba(239,68,68,.16)}
/* ═══════ أدوات الطيران — Flight Tools ═══════ */
.tl-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.15rem 1.2rem;margin:1rem 0}
.tl-or{color:var(--mut);font-size:.82rem;margin:.9rem 0 .5rem;display:flex;align-items:center;gap:.6rem}
.tl-or::before,.tl-or::after{content:"";flex:1;height:1px;background:var(--line)}
.tl-inline{display:flex;gap:.5rem;flex-wrap:wrap}
.tl-inline input{flex:1;min-width:190px}
.tl-chip{background:var(--panel2);border:1px solid var(--line);color:var(--mut);border-radius:99px;
padding:.3rem .85rem;font:inherit;font-size:.82rem;cursor:pointer;transition:.15s}
.tl-chip:hover{color:var(--ink);border-color:var(--cyan);background:rgba(15,110,122,.06)}
.tl-load{color:var(--mut);font-size:.9rem;padding:1.1rem;border:1px dashed var(--line);
border-radius:var(--r);text-align:center;margin:1rem 0}
/* الحكم */
.tl-verdict{border-radius:var(--r);padding:1.05rem 1.2rem;margin:1.1rem 0;border:1px solid;border-inline-start-width:6px}
.tl-verdict.lv0{background:rgba(75,85,99,.07);border-color:rgba(75,85,99,.5)}
.tl-verdict.lv1{background:rgba(217,119,6,.09);border-color:rgba(217,119,6,.6)}
.tl-verdict.lv2{background:rgba(220,38,38,.09);border-color:rgba(220,38,38,.6)}
.tl-vhead{font-weight:800;font-size:1.1rem;display:flex;align-items:center;gap:.5rem;line-height:1.4}
.tl-verdict.lv0 .tl-vhead{color:var(--slate)}
.tl-verdict.lv1 .tl-vhead{color:var(--amber)}
.tl-verdict.lv2 .tl-vhead{color:var(--red)}
.tl-vico{font-family:Consolas,monospace;font-size:1.15rem}
.tl-vbody{color:var(--mut);font-size:.92rem;margin-top:.3rem}
/* شريط الترميز */
.tl-metar{font-family:Consolas,"Courier New",monospace;font-size:.76rem;letter-spacing:.02em;
background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:.6rem .8rem;
color:var(--mut);direction:ltr;text-align:left;overflow-x:auto;white-space:nowrap;margin:.7rem 0}
.tl-sub{font-family:Consolas,monospace;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--cyan);font-weight:700;margin-bottom:.45rem}
.tl-split{display:grid;grid-template-columns:280px 1fr;gap:1.3rem;align-items:start;margin-top:1rem}
@media(max-width:700px){.tl-split{grid-template-columns:1fr}}
/* الخريطة التخطيطية — المرحلة ٢ */
.tl-split.fc2{grid-template-columns:1fr 1fr}
@media(max-width:700px){.tl-split.fc2{grid-template-columns:1fr}}
.fcmap{margin-top:1.1rem}
.fcmap-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin-bottom:.45rem}
.fcmap-head .tl-sub{margin:0}
.fcmap-scale{font-family:Consolas,monospace;font-size:.73rem;color:var(--mut);letter-spacing:.06em}
.fcmap svg{width:100%;height:auto;display:block}
.fcmap-lg{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.75rem;color:var(--mut);margin-top:.55rem}
.fcmap-lg span{display:inline-flex;align-items:center;gap:.35rem}
.fcmap-lg i{width:13px;height:13px;border-radius:50%;border:1px solid;flex:none}
.fcmap-key{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0 1.2rem;margin-top:.6rem;font-size:.79rem}
.fcmap-key>div{display:flex;justify-content:space-between;align-items:baseline;gap:.7rem;
color:var(--mut);border-bottom:1px dotted var(--line);padding:.22rem 0}
.fcmap-key b{font-family:Consolas,monospace;font-weight:400;color:var(--ink);white-space:nowrap}
.fcmap-key u{text-decoration:none;font-family:Consolas,monospace;font-size:.7rem;color:#fff;
background:var(--slate);border-radius:4px;padding:0 .34rem;margin-inline-end:.4rem}
.fcmap-cap{font-size:.75rem;color:var(--mut);line-height:1.75;margin-top:.5rem}
/* المرحلة ٢ب — الجوال: الإطار يُصغَّر ويُكبَّر خطه داخل fcMapGeom،
وما تبقّى هنا هو تنفّس العناصر النصّية حوله. */
@media(max-width:700px){
.fcmap{margin-top:.9rem}
.fcmap-head{gap:.1rem}
.fcmap-scale{font-size:.7rem}
.fcmap-lg{gap:.25rem .75rem;font-size:.73rem}
.fcmap-key{grid-template-columns:1fr;font-size:.8rem}
.fcmap-key>div{padding:.3rem 0}
.fcmap-cap{font-size:.74rem}
}
/* الأسباب */
.tl-hit{border:1px solid var(--line);border-inline-start-width:4px;border-radius:10px;
padding:.75rem .95rem;margin-bottom:.55rem;background:var(--panel)}
.tl-hit.h2{border-inline-start-color:var(--red)}
.tl-hit.h1{border-inline-start-color:var(--amber)}
.tl-hit.h0{border-inline-start-color:var(--slate)}
.tl-hitt{font-weight:700;font-size:.94rem;margin-bottom:.2rem}
.tl-hit.h2 .tl-hitt{color:var(--red)}
.tl-hit.h1 .tl-hitt{color:var(--amber)}
.tl-hit.h0 .tl-hitt{color:var(--slate)}
.tl-hitw{color:var(--mut);font-size:.89rem;line-height:1.7}
.tl-act{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1.1rem}
/* الطقس */
.tl-why{display:flex;flex-direction:column;gap:.35rem;margin:.8rem 0}
.tl-why>div{font-size:.89rem;padding:.5rem .8rem;border-radius:8px;border-inline-start:3px solid;line-height:1.6}
.tl-w2{color:var(--red);border-color:var(--red);background:rgba(220,38,38,.06)}
.tl-w1{color:var(--amber);border-color:var(--amber);background:rgba(217,119,6,.06)}
.tl-w0{color:var(--green);border-color:var(--green);background:rgba(5,150,105,.06)}
.tl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.7rem}
.tl-cell{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.75rem .9rem}
.tl-cell>span{display:block;font-size:.78rem;color:var(--mut)}
.tl-cell>b{display:block;font-size:1.25rem;color:var(--ink);font-family:Consolas,monospace;margin:.15rem 0 .35rem}
.tl-cell>small{display:block;font-size:.73rem;color:var(--mut);margin-top:.35rem;line-height:1.5}
.tl-bar{height:5px;background:var(--panel2);border-radius:99px;overflow:hidden}
.tl-bar i{display:block;height:100%;border-radius:99px;transition:width .4s}
.tl-hours{display:flex;gap:3px;margin:.4rem 0;overflow-x:auto;padding-bottom:.2rem}
.tl-hr{flex:1;min-width:26px;height:46px;border-radius:6px;display:flex;align-items:flex-end;
justify-content:center;padding-bottom:3px}
.tl-hr.l0{background:rgba(5,150,105,.45)}
.tl-hr.l1{background:rgba(217,119,6,.5)}
.tl-hr.l2{background:rgba(220,38,38,.5)}
.tl-hrt{font-family:Consolas,monospace;font-size:.65rem;color:#111118;font-weight:700}
.tl-legend{font-size:.76rem;color:var(--mut);display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.tl-legend span{width:11px;height:11px;border-radius:3px;display:inline-block;margin-inline-start:.5rem}
.tl-legend .k0{background:rgba(5,150,105,.45)}
.tl-legend .k1{background:rgba(217,119,6,.5)}
.tl-legend .k2{background:rgba(220,38,38,.5)}
.tl-best{border-inline-start:3px solid var(--green);background:rgba(5,150,105,.05);
padding:.6rem .9rem;border-radius:8px;font-size:.88rem;color:var(--mut);margin-top:.6rem}
.tl-note{border-inline-start:3px solid var(--cyan);background:rgba(15,110,122,.05);
padding:.8rem 1rem;border-radius:8px;font-size:.89rem;color:var(--mut);margin:1rem 0;line-height:1.75}
/* المعالج */
.tl-wiz{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.3rem 1.2rem;margin:1rem 0}
.tl-wprog{display:flex;align-items:center;gap:.3rem;margin-bottom:1rem}
.tl-wprog span{width:26px;height:4px;border-radius:99px;background:var(--panel2)}
.tl-wprog span.d{background:var(--green)}
.tl-wprog span.c{background:var(--amber)}
.tl-wprog small{margin-inline-start:.6rem;font-family:Consolas,monospace;font-size:.74rem}
.tl-wq{font-size:1.14rem;font-weight:700;margin-bottom:.9rem;line-height:1.5}
.tl-wopts{display:grid;gap:.45rem}
.tl-wopt{text-align:start;background:var(--panel2);border:1px solid var(--line);color:var(--ink);
border-radius:10px;padding:.72rem .95rem;font:inherit;font-size:.93rem;cursor:pointer;transition:.15s}
.tl-wopt:hover{border-color:var(--amber);background:rgba(217,119,6,.07);transform:translateX(-3px)}
html[dir="ltr"] .tl-wopt:hover{transform:translateX(3px)}
.tl-res{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.95rem 1.1rem;margin-bottom:.7rem}
.tl-res.w{border-color:rgba(217,119,6,.5);background:rgba(217,119,6,.05)}
.tl-rest{font-family:Consolas,monospace;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--cyan);font-weight:700;margin-bottom:.5rem}
.tl-res.w .tl-rest{color:var(--amber)}
.tl-res ul{padding-inline-start:1.1rem;margin:0}
.tl-res li{color:var(--mut);font-size:.9rem;line-height:1.75;margin-bottom:.35rem}
.tl-lnks{display:flex;flex-direction:column;gap:.4rem}
.tl-lnk{color:var(--cyan);font-size:.89rem;text-decoration:none;border-bottom:1px dashed rgba(15,110,122,.35);
padding-bottom:.15rem;width:fit-content}
.tl-lnk:hover{color:var(--amber);border-color:rgba(217,119,6,.5)}
@media (prefers-reduced-motion:reduce){.tl-bar i,.tl-wopt{transition:none}.tl-wopt:hover{transform:none}}
.tl-launch{border:1px solid rgba(217,119,6,.45);border-radius:var(--r);
background:linear-gradient(135deg,rgba(217,119,6,.06),rgba(15,110,122,.05));
padding:1.1rem 1.2rem;margin-bottom:1.1rem}
.tl-launchhead h3{color:var(--ink)}
/* ===== طيّ الأنواع الفرعية داخل القائمة العلوية ===== */
.navgrp{display:inline-flex;align-items:stretch;gap:0;position:relative}
.navgrp>a{border-start-end-radius:0;border-end-end-radius:0;border-inline-end-color:transparent}
.navcaret{background:linear-gradient(180deg,var(--smoke-1) 0%,var(--smoke-2) 52%,var(--smoke-3) 100%);
border:1px solid var(--smoke-line);color:var(--smoke-ink);cursor:pointer;
padding:.4rem .5rem;font:inherit;font-size:.7rem;line-height:1.35;
border-radius:10px;border-start-start-radius:0;border-end-start-radius:0;
box-shadow:var(--smoke-sh);transition:box-shadow .16s,transform .16s}
.navcaret:hover{color:var(--ink);box-shadow:var(--smoke-sh-hi)}
.navcaret:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.navcaret[aria-expanded="true"]{color:var(--amber);box-shadow:var(--smoke-sh-in)}
.navgrp>a.on+.navcaret{background:linear-gradient(180deg,#EFA02B 0%,#D97706 55%,#B15D04 100%);
border-color:#A05505;color:#fff}
.navsub{position:fixed;z-index:75;display:flex;flex-direction:column;gap:.15rem;
background:linear-gradient(160deg,#F2F2F4,#EBEBED);border:1px solid var(--line);
border-radius:14px;padding:.5rem;opacity:0;visibility:hidden;pointer-events:none;
transform:translateY(-8px) scale(.97);transform-origin:top center;
box-shadow:0 18px 40px rgba(17,17,24,.22),0 0 0 1px rgba(217,119,6,.10) inset;
transition:opacity .2s ease,transform .24s cubic-bezier(.2,1.15,.4,1),visibility .2s}
.navsub.on{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1)}
.navsubhead{font-family:Consolas,monospace;font-size:.66rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--mut);padding:.15rem .6rem .4rem}
.navsub a{display:block;padding:.5rem .7rem;border-radius:9px;text-decoration:none;
color:var(--smoke-ink);font-size:.85rem;background:none;border:1px solid transparent;
box-shadow:none;text-shadow:none;transition:.15s}
.navsub a:hover{background:rgba(15,110,122,.09);color:var(--ink);border-color:transparent;
box-shadow:none;transform:none}
.navsub a.on{background:linear-gradient(180deg,#EFA02B 0%,#D97706 55%,#B15D04 100%);color:#fff}
@media (prefers-reduced-motion:reduce){.navsub{transition:none}}
/* اسم المنصة في الهيدر والفوتر — سطر واحد عريض */
#brandName{font-weight:800;white-space:nowrap;letter-spacing:.1px;line-height:1.15}
#ftBrand{font-weight:800!important;white-space:nowrap}
@media (max-width:420px){#brandName{font-size:.92rem}}
/*duae-faq-css*/
.duae-faq h2{margin:0 0 .8rem;font-size:1.15rem}
.duae-faq-item{border-top:1px solid rgba(128,128,128,.22);padding:.55rem 0}
.duae-faq-item:first-of-type{border-top:0}
.duae-faq-item>summary{cursor:pointer;font-weight:600;list-style:none;padding:.35rem 0;display:flex;gap:.5rem;align-items:flex-start}
.duae-faq-item>summary::-webkit-details-marker{display:none}
.duae-faq-item>summary::before{content:"+";color:var(--amber,#D97706);font-weight:800;flex:none;line-height:1.4}
.duae-faq-item[open]>summary::before{content:"\2212"}
.duae-faq-item>p{margin:.4rem 0 .6rem;opacity:.85;line-height:1.75}
@media (prefers-reduced-motion:no-preference){.duae-faq-item[open]>p{animation:duaeFaqIn .18s ease-out}}
@keyframes duaeFaqIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
/* ===== Radar orbit hero (home) ===== */
.radarwrap{margin:0 0 1.4rem}
.radarhead{text-align:center;max-width:620px;margin:0 auto .6rem}
.radarhead h1{margin:.3rem 0 .45rem}
.radarlede{color:var(--mut);font-size:.93rem;line-height:1.7;margin:0}
.radar-rest{display:flex;flex-wrap:wrap;gap:.35rem .9rem;justify-content:center;
margin-top:.5rem;font-size:.8rem;max-width:640px;margin-inline:auto}
.radar-rest a{color:var(--mut);text-decoration:none}
.radar-rest a:hover{color:var(--amber);text-decoration:underline}
/* ---- 2. Phone: go full-bleed so the circle gets every pixel ---- */
@media (max-width:560px){
.radarlede{font-size:.88rem}
.radar-rest{font-size:.78rem;gap:.3rem .7rem}
}
/* ===== KHW-CHROME-NAV BEGIN — do not edit inside, see _pipeline_drones ===== */
/* ============================================================
DronesUAE — شريط التنقّل المعدني (Chrome Nav)
Ported from KHW.2.4 (khw_chrome.css) and adapted to the
DronesUAE shell: header > .hin > .logo + nav#nav + .hend
Appended to assets/styles.*.css by patch_chrome_drones.py.
Idempotent: the block between BEGIN/END 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;
--khw-globe:url("data:image/svg+xml;utf8,");
--khw-search:url("data:image/svg+xml;utf8,");
}
/* ---------- 1) الشريط نفسه ---------- */
header{
position:sticky; top:0; z-index:50;
display:block; height:var(--nav-h); padding:0;
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);
}
/* خطوط المعدن المصقول */
header::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;
}
/* الحافة السفلية اللامعة */
header::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);
}
/* الصف الداخلي — كل شيء متمركز رأسياً */
header .hin{
position:relative; z-index:2;
height:100%; max-width:1440px; margin:0 auto;
padding-inline:clamp(10px,1.6vw,22px);
display:flex; align-items:center; gap:14px; flex-wrap:nowrap;
}
/* ---------- 2) العلامة + الشعار المعدني ---------- */
header .logo{
position:relative; display:flex; align-items:center; gap:.55rem;
flex:0 0 auto; font-weight:700; font-size:1.05rem;
}
header .brandbtn{
display:flex; align-items:center; gap:10px;
background:none; border:none; padding:0; font:inherit; color:inherit; cursor:pointer;
perspective:700px;
}
header .klogowrap{
position:relative; display:inline-flex; flex:0 0 auto;
width:54px; height:54px;
}
header .klogo{
width:54px; height:54px; border-radius:50%; object-fit:cover; background:#fff;
border:1px solid #A5AAB4;
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);
transition:transform .35s cubic-bezier(.2,1.1,.4,1), box-shadow .2s;
}
header .klogowrap::after{
content:""; position:absolute; inset-block-end:1px; inset-inline-end:1px;
width:15px; height:15px; border-radius:50%; pointer-events:none;
background:var(--amber); border:2px solid #DCDEE3;
background-image:linear-gradient(135deg,transparent 45%,#fff 45%,#fff 55%,transparent 55%);
}
header .brandbtn:hover .klogo,
header .brandbtn[aria-expanded="true"] .klogo{
box-shadow:
0 1px 0 rgba(255,255,255,.95) inset,
0 4px 12px rgba(17,17,24,.30),
0 0 0 3px rgba(255,255,255,.7);
}
header .brandbtn:hover .klogo{transform:scale(1.06)}
header .brandbtn[aria-expanded="true"] .klogo{transform:rotateY(180deg)}
header #brandName{
font-size:1rem; font-weight:800; color:#14141B; white-space:nowrap;
text-shadow:0 1px 0 rgba(255,255,255,.8);
}
header .brandcaret{font-size:.7rem; color:#5B5F68; transition:transform .25s}
header .brandbtn[aria-expanded="true"] .brandcaret{transform:rotate(180deg); color:var(--amber)}
header .sitemenu{top:calc(100% + 14px)}
/* ---------- 3) روابط التنقّل — صف واحد ---------- */
header nav#nav{
flex:1 1 auto; min-width:0;
display:flex; align-items:center; justify-content:center;
gap:2px; flex-wrap:nowrap; overflow:hidden;
}
header nav#nav > a,
header nav#nav > .navgrp,
header nav#nav > .navmore{flex:0 0 auto}
header nav#nav a{
background:none; border:1px solid transparent; box-shadow:none;
color:#26262F; font-weight:600; font-size:14px; white-space:nowrap;
padding:8px 11px; border-radius:999px;
text-shadow:0 1px 0 rgba(255,255,255,.85);
transition:background .16s, box-shadow .16s, color .16s;
}
header nav#nav a:hover{
color:#111118; transform:none;
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);
}
/* الصفحة الحالية — لوحة ذهبية */
header nav#nav a.on,
header nav#nav 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);
}
/* مجموعة «أنواع الدرون» + سهمها */
header nav#nav .navgrp{display:inline-flex; align-items:center; gap:0}
header nav#nav .navgrp > a{
border-start-end-radius:0; border-end-end-radius:0; padding-inline-end:7px;
}
header nav#nav .navcaret{
background:none; border:1px solid transparent; box-shadow:none;
color:#5B5F68; font-size:.68rem; line-height:1; cursor:pointer;
padding:9px 8px 9px 4px; border-radius:999px;
border-start-start-radius:0; border-end-start-radius:0;
transition:background .16s, color .16s;
}
header nav#nav .navcaret:hover{
color:#111118;
background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(255,255,255,.42));
}
header nav#nav .navgrp > a.on + .navcaret{
background:linear-gradient(180deg,var(--gold-1) 0%,var(--gold-2) 55%,var(--gold-3) 100%);
border-color:var(--gold-edge); border-inline-start-color:transparent; color:var(--gold-ink);
}
header nav#nav .navcaret[aria-expanded="true"]{color:var(--amber)}
/* العناصر المُزاحة إلى قائمة «المزيد» */
header nav#nav .navhide{display:none !important}
/* ---------- 4) زر «المزيد» ---------- */
.navmore{
display:inline-flex; align-items:center; gap:6px; cursor:pointer;
padding:8px 13px; border-radius:999px; font:inherit; font-size:14px; font-weight:700;
color:#26262F; text-shadow:0 1px 0 rgba(255,255,255,.85);
background:linear-gradient(180deg,#FFFFFF 0%,#F0F1F4 52%,#DCDEE3 100%);
border:1px solid #A5AAB4;
box-shadow:
0 1px 0 rgba(255,255,255,.95) inset,
0 -1px 0 rgba(17,17,24,.06) inset,
0 2px 5px rgba(17,17,24,.16);
transition:box-shadow .16s, transform .16s;
}
.navmore:hover{transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 4px 10px rgba(17,17,24,.22)}
.navmore:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
.navmore i{font-style:normal; font-size:.66rem; transition:transform .22s}
.navmore[aria-expanded="true"]{
box-shadow:0 2px 5px rgba(17,17,24,.20) inset, 0 1px 0 rgba(255,255,255,.45);
}
.navmore[aria-expanded="true"] i{transform:rotate(180deg)}
.navmore .burgerbars{display:none}
.navmorepanel{
position:fixed; z-index:80; display:none;
max-height:min(72vh,560px); overflow:auto;
padding:.55rem;
background:linear-gradient(160deg,#F7F7F9,#EBEBEF);
border:1px solid #A5AAB4; border-radius:16px;
box-shadow:0 22px 52px rgba(17,17,24,.28), 0 1px 0 rgba(255,255,255,.9) inset;
opacity:0; transform:translateY(-8px) scale(.98);
transition:opacity .2s ease, transform .24s cubic-bezier(.2,1.15,.4,1);
}
.navmorepanel.on{display:grid; opacity:1; transform:translateY(0) scale(1)}
.navmorepanel{grid-template-columns:1fr; gap:2px}
.navmorepanel .navmorehead{
font-size:.68rem; font-weight:800; letter-spacing:.04em;
color:#6B6B7A; padding:.35rem .75rem .5rem;
}
.navmorepanel a{
display:block; width:100%; padding:.55rem .75rem; border-radius:10px;
font-size:.88rem; font-weight:600; color:#26262F; text-decoration:none;
background:none; border:1px solid transparent; box-shadow:none; text-shadow:none;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.navmorepanel a:hover{background:rgba(15,110,122,.09); color:#111118; transform:none; box-shadow:none}
.navmorepanel a.on{
color:var(--gold-ink); font-weight:800;
background:linear-gradient(180deg,var(--gold-1) 0%,var(--gold-2) 55%,var(--gold-3) 100%);
border-color:var(--gold-edge);
}
.navmorepanel .navgrp{display:flex; align-items:center; width:100%}
.navmorepanel .navgrp > a{flex:1 1 auto; border-radius:10px !important; padding-inline-end:.75rem}
.navmorepanel .navcaret{
flex:0 0 auto; background:none; border:1px solid transparent; box-shadow:none;
color:#6B6B7A; padding:.5rem .6rem; border-radius:10px !important; cursor:pointer;
}
@media (prefers-reduced-motion:reduce){.navmorepanel{transition:none}}
/* ---------- 5) الطرف: البحث + الكرة الأرضية + زر الإجراء ---------- */
header .hend{
margin-inline-start:auto; flex:0 0 auto;
display:flex; align-items:center; gap:10px;
}
/* البحث — أيقونة معدنية تتمدّد */
header .searchwrap{
position:relative; flex:0 0 auto;
width:44px; height:44px; min-width:0; max-width:none;
transition:width .3s cubic-bezier(.2,1,.3,1);
}
header .searchwrap.open{width:min(320px,34vw)}
header .searchwrap input#gsearch{
position:absolute; inset-block-start:0; inset-inline-start:0;
width:100%; height:44px; margin:0;
border-radius:999px; font-size:.86rem;
padding-inline-start:16px; padding-inline-end:52px;
background:linear-gradient(180deg,#E7E8EC,#F6F7F9);
border:1px solid #9AA0AB; color:#1C1F25;
box-shadow:0 2px 5px rgba(17,17,24,.16) inset, 0 1px 0 rgba(255,255,255,.85);
opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s;
}
header .searchwrap.open input#gsearch{opacity:1; visibility:visible}
.searchbtn{
position:absolute; inset-block-start:0; inset-inline-end:0;
width:44px; height:44px; padding:0; border-radius:50%; cursor:pointer;
font-size:0; flex:0 0 auto;
background:
var(--khw-search) center/44% 44% 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;
}
.searchbtn:hover{transform:translateY(-1px) scale(1.05);
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)}
.searchbtn:focus-visible{outline:2px solid var(--cyan); outline-offset:2px}
header .searchwrap .sresults{
top:calc(100% + 10px); inset-inline-end:0; inset-inline-start:auto;
left:auto; right:auto; width:min(360px,86vw);
background:linear-gradient(160deg,#F7F7F9,#EBEBEF);
border:1px solid #A5AAB4; border-radius:14px;
box-shadow:0 22px 52px rgba(17,17,24,.28);
}
[dir="rtl"] header .searchwrap .sresults{right:0}
[dir="ltr"] header .searchwrap .sresults{left:auto; right:0}
/* مبدّل اللغة — كرة معدنية */
header .hend #langBtn,
header .hend .langsw{
position:relative; width:44px; height:44px; padding:0; border-radius:50%;
font-size:0; overflow:hidden; flex:0 0 auto; border:1px solid #878D97;
display:inline-block; text-decoration:none;
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%);
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;
}
header .hend #langBtn:hover,
header .hend .langsw:hover{
transform:translateY(-1px) scale(1.05);
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);
}
/* زر الإجراء الرئيسي — لامع برتقالي */
header .hend .ctabtn{
position:relative; overflow:hidden; isolation:isolate;
white-space:nowrap; flex:0 0 auto; text-decoration:none;
padding:11px 20px; padding-inline-end:42px; line-height:1.2;
border-radius:999px; font-size:14px; 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);
transition:transform .16s, box-shadow .16s;
}
header .hend .ctabtn::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));
}
header .hend .ctabtn::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;
}
[dir="rtl"] header .hend .ctabtn::after{content:"\2190"}
header .hend .ctabtn: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)}
/* ---------- 6) الشاشات المتوسطة ---------- */
@media(max-width:1240px){
header .hin{gap:10px}
header nav#nav a{padding:7px 9px; font-size:13.2px}
header #brandName{font-size:.92rem}
header .hend .ctabtn{padding:10px 16px; padding-inline-end:38px; font-size:13.3px}
}
@media(max-width:1080px){
header #brandName{display:none}
header .brandcaret{display:none}
}
@media(max-width:860px){
header .hend .ctabtn{display:none}
header .searchwrap.open{width:min(260px,52vw)}
}
/* ---------- 7) الجوال ---------- */
@media(max-width:760px){
:root{--nav-h:66px}
header .hin{gap:8px; padding-inline:10px}
header .klogowrap,header .klogo{width:44px; height:44px}
header .klogowrap::after{width:13px; height:13px}
header nav#nav{
justify-content:flex-end; overflow:visible; overflow-x:visible;
width:auto; flex:0 0 auto; flex-wrap:nowrap;
}
header .hend{gap:7px}
header .searchwrap,header .hend #langBtn,header .hend .langsw,.searchbtn{width:40px; height:40px}
header .searchwrap input#gsearch{height:40px; padding-inline-end:46px}
header .searchwrap.open{width:min(220px,54vw)}
/* «المزيد» يصبح زرّ قائمة */
.navmore{padding:0; width:42px; height:42px; justify-content:center; gap:0}
.navmore span{display:none}
.navmore i{display:none}
.navmore .burgerbars{display:block; position:relative; width:18px; height:12px}
.navmore .burgerbars s{
position:absolute; inset-inline:0; height:2px; background:#26262F; border-radius:2px;
transition:transform .26s, opacity .18s, top .26s;
}
.navmore .burgerbars s:nth-child(1){top:0}
.navmore .burgerbars s:nth-child(2){top:5px}
.navmore .burgerbars s:nth-child(3){top:10px}
.navmore[aria-expanded="true"] .burgerbars s:nth-child(1){top:5px; transform:rotate(45deg)}
.navmore[aria-expanded="true"] .burgerbars s:nth-child(2){opacity:0}
.navmore[aria-expanded="true"] .burgerbars s:nth-child(3){top:5px; transform:rotate(-45deg)}
.navmorepanel a{white-space:normal}
}
@media(max-width:420px){
header .searchwrap.open{width:min(190px,50vw)}
}
/* ===== KHW-CHROME-NAV END ===== */
/* ── فاحص المجال الجوي — شريط الثقة وهامش الحدّ (Phase 1) ── */
.tl-conf{display:flex;gap:.4rem;flex-wrap:wrap;margin:.65rem 0 .2rem}
.tl-chip{font-family:Consolas,monospace;font-size:.72rem;line-height:1.5;
padding:.22rem .6rem;border-radius:99px;border:1px solid var(--line);
color:var(--mut);background:var(--panel)}
.tl-chip b{color:var(--ink);font-weight:700}
.tl-chip.ok{border-color:rgba(15,110,122,.35);color:var(--cyan)}
.tl-chip.bad{border-color:rgba(220,38,38,.55);color:var(--red);background:rgba(220,38,38,.06)}
.tl-chip.bad b{color:var(--red)}
.tl-margin{margin:.9rem 0;padding:.75rem .95rem;border:1px solid var(--line);
border-inline-start:4px solid var(--slate);border-radius:10px;background:var(--panel)}
.tl-margin.tight{border-inline-start-color:var(--red);background:rgba(220,38,38,.06);
border-color:rgba(220,38,38,.35)}
.tl-margint{font-size:.94rem;font-weight:600}
.tl-margin.tight .tl-margint{color:var(--red)}
.tl-marginw{color:var(--mut);font-size:.87rem;line-height:1.75;margin-top:.35rem}
@media (prefers-reduced-motion:no-preference){
.tl-margin.tight{animation:none}
}
/* ===== Council phase 3 (2026-08-16) ===== */
/* لا تمرير أفقي بسبب عناصر مطلقة مخفية (قائمة الفوتر/الرأس) */
html,body{overflow-x:clip}
a.btn{text-decoration:none}
/* القيم اللاتينية والأرقام داخل RTL: اتجاه ثابت حتى لا تنعكس "4-in-1" و"$350–700" و"~9" */
.spec>b,.costrow>b,.dbro b,.tl-cell>b,.conph,.dben{direction:ltr;unicode-bidi:isolate}
[dir="rtl"] .spec>b,[dir="rtl"] .costrow>b{text-align:left}
/* العربية لا تحتمل تباعد الحروف — يُلغى في العناوين المونوسبيس */
[dir="rtl"] .eyebrow,[dir="rtl"] .tl-sub,[dir="rtl"] .tl-rest,[dir="rtl"] .navsubhead,[dir="rtl"] .tl-chip,[dir="rtl"] .fcmap-scale{letter-spacing:0;font-family:inherit;text-transform:none}
/* سيف على الجوال: أصغر ولا يغطي المحتوى، ولا فقاعة تعريف */
@media(max-width:520px){.saifwrap{width:64px;bottom:12px}.saiftip{display:none}}
/* شريط الحالة في «أقدر أطير» على الجوال */
@media(max-width:520px){.tl-metar{white-space:normal;word-break:break-word}}
/* ===== معالج تصاريح السعودية — Saudi permit wizard ===== */
.tl-wkick{font-family:Consolas,monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--cyan);font-weight:700;margin-bottom:.35rem}
.tl-whelp{color:var(--mut);font-size:.86rem;line-height:1.7;margin:-.55rem 0 .9rem}
.tl-wopt.two{display:flex;flex-direction:column;gap:.18rem;line-height:1.55}
.tl-wopt.two b{font-weight:700;font-size:.94rem;color:var(--ink)}
.tl-wopt.two small{color:var(--mut);font-size:.8rem;line-height:1.65}
.tl-badge{display:inline-block;padding:.26rem .72rem;border-radius:999px;font-size:.78rem;
font-weight:800;border:1px solid currentColor;white-space:nowrap;margin-inline-start:auto}
.tl-vhead.sp{flex-wrap:wrap;gap:.55rem}
@media print{
header,.statusbar,#pageNav,.duae-share,.saifwrap,.chatpanel,.sitemapnav,footer,.navsub,
.navmorepanel,.duae-ccmenu,#duaeCcPill,.tl-act,.tl-wiz .tl-wopts,.tl-wiz .btn,details{display:none!important}
body{background:#fff}
.tl-res,.tl-verdict,.card,table{break-inside:avoid;box-shadow:none}
a[href^="http"]::after{content:" (" attr(href) ")";font-size:.7em;color:#555}
}
/* ---- Flight Record ---- */
/* ---- Flight Record: page-local only. No global class is redefined. ---- */
.fr-verdict{border-radius:14px;padding:1rem 1.1rem;display:flex;gap:.9rem;align-items:flex-start;margin:1rem 0}
.fr-vicon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.35rem;font-weight:700;flex:0 0 44px;color:#fff}
.fr-vttl{font-size:1.08rem;font-weight:700;margin:0 0 .15rem}
.fr-gate{border:1px solid var(--bd,#e3e3e3);border-radius:12px;padding:.85rem .95rem}
.fr-ghead{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;font-weight:700;font-size:.95rem}
.fr-dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px}
.fr-why{font-size:.82rem;line-height:1.6;margin:.28rem 0;padding-inline-start:.9rem;position:relative}
.fr-why::before{content:"";position:absolute;inset-inline-start:0;top:.55em;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.5}
.fr-chk{display:flex;align-items:flex-start;gap:.55rem;padding:.32rem .4rem;border-radius:8px;cursor:pointer;font-size:.85rem;line-height:1.45}
.fr-chk input{width:17px;height:17px;flex:0 0 17px;margin-top:.15rem;accent-color:var(--amber,#d97706);cursor:pointer}
.fr-chk.done{background:rgba(22,163,74,.09)}
.fr-cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:.2rem}
.fr-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:.5rem;margin:.7rem 0}
.fr-mcell{background:rgba(128,128,128,.09);border-radius:9px;padding:.45rem .6rem}
.fr-mcell i{display:block;font-style:normal;font-size:.68rem;opacity:.62;margin-bottom:.1rem}
.fr-mcell b{font-size:.92rem;font-variant-numeric:tabular-nums}
.fr-rec{border:1px solid var(--bd,#e3e3e3);border-radius:11px;padding:.7rem .85rem;margin-bottom:.55rem}
.fr-rhead{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.fr-tag{font-size:.7rem;font-weight:700;padding:.12rem .5rem;border-radius:5px;color:#fff}
.fr-note{width:100%;min-height:62px;border-radius:9px;border:1px solid var(--bd,#e3e3e3);padding:.55rem .7rem;font:inherit;font-size:.87rem;background:transparent;color:inherit;resize:vertical}
.fr-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
@media print{header,nav,footer,.fr-actions,.tl-panel,.fr-noprint{display:none!important}}
/* ================= UX pass 2026-08-22 ================= */
/* --- 2. مبدّل اللغة: كرة بارزة تُعرّف بنفسها -------------------------- */
/* The metallic sphere alone told an English speaker nothing. A persistent EN
badge + amber ring makes the affordance readable without adding a word of
chrome to the header. */
header .hend #langBtn,
header .hend .langsw{
width:46px; height:46px; overflow:visible;
border:1px solid var(--amber);
box-shadow:
0 1px 0 rgba(255,255,255,.95) inset,
0 -4px 10px rgba(0,0,0,.28) inset,
0 0 0 3px rgba(217,119,6,.22),
0 3px 8px rgba(17,17,24,.24);
}
header .hend #langBtn::after,
header .hend .langsw::after{
content:attr(data-lang);
position:absolute; inset-inline-end:-4px; bottom:-4px;
min-width:20px; height:18px; padding:0 5px;
display:flex; align-items:center; justify-content:center;
font-family:Arial,"Segoe UI",sans-serif;
font-size:11px; font-weight:800; line-height:1; letter-spacing:.02em;
color:#fff; background:var(--amber);
border:1.5px solid #fff; border-radius:999px;
box-shadow:0 1px 3px rgba(0,0,0,.35);
pointer-events:none;
}
header .hend #langBtn::before,
header .hend .langsw::before{
content:""; position:absolute; inset:-6px; border-radius:50%;
border:2px solid var(--amber); opacity:0;
animation:khwPing 3.2s ease-out 2s 3;
pointer-events:none;
}
@keyframes khwPing{
0%{transform:scale(.86); opacity:.65}
70%{transform:scale(1.25); opacity:0}
100%{transform:scale(1.25); opacity:0}
}
@media (prefers-reduced-motion:reduce){
header .hend #langBtn::before,
header .hend .langsw::before{animation:none}
}
/* --- 7. شريط التنقّل: أيقونة الرجوع ---------------------------------- */
.pnbtn.pnback{display:inline-flex; align-items:center; gap:.4rem}
.pnbtn .pnico{width:16px; height:16px; flex:0 0 16px}
[dir="rtl"] .pnbtn .pnico{transform:scaleX(-1)} /* السهم يتبع اتجاه القراءة */
/* --- 1. تقرير الطباعة ------------------------------------------------ */
#fcPrintDoc{display:none}
#fcPrintDoc .fpr-head{display:flex; align-items:center; gap:14px; border-bottom:2px solid #d97706; padding-bottom:10px; margin-bottom:14px}
#fcPrintDoc .fpr-logo{width:56px; height:56px; border-radius:50%; object-fit:cover}
#fcPrintDoc h1{font-size:19px; margin:0 0 3px}
#fcPrintDoc .fpr-head p{margin:0; font-size:12px; color:#555}
#fcPrintDoc .fpr-verdict{display:flex; align-items:center; gap:9px; border:2px solid; border-radius:9px; padding:10px 13px; margin-bottom:14px; font-size:15px}
#fcPrintDoc .fpr-dot{width:12px; height:12px; border-radius:50%; flex:0 0 12px}
#fcPrintDoc .fpr-tbl{width:100%; border-collapse:collapse; font-size:12.5px; margin-bottom:14px}
#fcPrintDoc .fpr-tbl th{text-align:start; font-weight:600; color:#444; width:38%; padding:5px 8px; border-bottom:1px solid #e2e2e2; white-space:nowrap}
#fcPrintDoc .fpr-tbl td{padding:5px 8px; border-bottom:1px solid #e2e2e2}
#fcPrintDoc h2{font-size:14px; margin:0 0 7px}
#fcPrintDoc .fpr-why{margin:0 0 14px; padding-inline-start:17px; font-size:12px; line-height:1.62}
#fcPrintDoc .fpr-why li{margin-bottom:7px; break-inside:avoid}
#fcPrintDoc .fpr-why span{color:#444}
#fcPrintDoc .fpr-note{font-size:10.5px; color:#555; line-height:1.55; margin:0 0 7px}
#fcPrintDoc .fpr-foot{font-size:10px; color:#777; border-top:1px solid #ddd; padding-top:7px; margin-top:12px}
@media print{
/* عند الطباعة نُظهر التقرير وحده — لا نعتمد على إخفاء بقية الصفحة عنصراً عنصراً */
body.fpr-on > *{display:none!important}
body.fpr-on #fcPrintDoc{display:block!important; color:#000; background:#fff}
body.fpr-on{background:#fff!important}
@page{margin:14mm}
}
/* ================= صور الصفحات — page photos ================= */
.dphoto-wrap{
float:inline-end; width:min(38%,190px); margin:0 0 .7rem 1.1rem;
margin-inline-start:1.1rem; margin-inline-end:0;
shape-outside:margin-box; pointer-events:none;
}
.dphoto{
width:100%; height:auto; display:block;
filter:drop-shadow(0 7px 13px rgba(0,0,0,.34));
animation:dHover 4.6s ease-in-out infinite;
will-change:transform;
}
@keyframes dHover{0%,100%{translate:0 0}50%{translate:0 -8px}}
/* الشاشات بلا دورية (<1400px): دورة ٣٦٠° هادئة كل ١٨ ثانية تُري كل جوانب الدرون.
فوق 1400px الدوران يجري على الحاوية مزامناً مع الدورية، فلا نكرره على الصورة. */
@keyframes dYawIdle{
0%,42% { transform: perspective(800px) rotateY(0deg) }
58% { transform: perspective(800px) rotateY(360deg) }
100% { transform: perspective(800px) rotateY(360deg) }
}
@media (max-width:1399.98px){
.dphoto{ animation: dHover 4.6s ease-in-out infinite, dYawIdle 18s ease-in-out infinite }
}
/* تفاوت بسيط في التوقيت حتى لا تتنفّس كل الصور معاً */
#pg-parts .dphoto,#pg-eparts .dphoto{animation-duration:5.4s,18s}
#pg-heavy .dphoto,#pg-eheavy .dphoto{animation-duration:6.1s,18s}
#pg-cuas .dphoto,#pg-ecuas .dphoto{animation-duration:5.1s,18s}
#pg-build .dphoto,#pg-ebuild .dphoto{animation-duration:5.8s,18s}
@media (max-width:620px){
.dphoto-wrap{float:none; width:150px; margin:.2rem auto .9rem; }
}
@media (prefers-reduced-motion:reduce){ .dphoto{animation:none} }
@media print{ .dphoto-wrap{display:none!important} }
/* ================= شريط أعلام الدول — manufacturers ================= */
.flagstrip{margin:.9rem 0 1.4rem}
.flagstrip-t{font-size:.82rem;color:var(--mut,#98a0ae);margin-bottom:.6rem;font-weight:700}
.flagstrip-g{
display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
gap:.75rem .5rem;
}
.flagitem{display:flex;flex-direction:column;align-items:center;gap:.3rem;text-align:center}
.flagitem img{
width:48px;height:48px;display:block;border-radius:50%;
filter:drop-shadow(0 3px 6px rgba(0,0,0,.30));
transition:transform .22s cubic-bezier(.2,1.1,.4,1);
}
.flagitem:hover img{transform:translateY(-3px) scale(1.08)}
.flagitem b{font-size:.7rem;font-weight:600;line-height:1.25;opacity:.85}
@media (max-width:520px){
.flagstrip-g{grid-template-columns:repeat(auto-fill,minmax(68px,1fr))}
.flagitem img{width:40px;height:40px}
.flagitem b{font-size:.63rem}
}
@media (prefers-reduced-motion:reduce){.flagitem img{transition:none}}
/* ===== KHW postbuild: independence notice ===== */
/* 2026-09-19 — كانت الخلفية شبه شفافة rgba(220,138,0,.09) فتظهر المشاهد
خلف النص وتشوّشه. صارت رمادياً فاتحاً صافياً بارتفاع خفيف فوق الصفحة،
وألوان النص أُعيدت لتتباين على فاتح بدل الداكن. */
.duae-indep{max-width:1100px;margin:.35rem auto .9rem;padding:.72rem 1rem;border-radius:12px;
border:1px solid #D7D7DE;background:#EFEFF1;
box-shadow:0 2px 10px rgba(17,17,24,.10), 0 0 0 4px rgba(248,248,249,.85);
font-size:.85rem;line-height:1.65;color:var(--ink,#111118);display:flex;gap:.55rem;align-items:flex-start}
.duae-indep b{color:#9A5300;font-weight:800}
.duae-indep i{font-style:normal;flex:0 0 auto}
.duae-indep a{color:#0B5FA5;font-weight:700;text-decoration:underline;text-underline-offset:2px}
@media(max-width:720px){.duae-indep{margin:.35rem .8rem .7rem;font-size:.79rem}}
/* ===== KHW postbuild: result source strip ===== */
.duae-src{margin-top:1rem;padding:.7rem .85rem;border-radius:10px;
border:1px solid rgba(148,163,184,.28);background:rgba(148,163,184,.07);font-size:.82rem;line-height:1.65}
.duae-src dt{font-weight:700;opacity:.72;margin-top:.35rem}
.duae-src dd{margin:0 0 .1rem 0}
.duae-src .duae-src-not{margin-top:.55rem;padding-top:.5rem;border-top:1px dashed rgba(148,163,184,.3);font-weight:700;color:#f0a83a}
/* ===== KHW postbuild: homepage hierarchy ===== */
.duae-primary{max-width:1100px;margin:1.3rem auto .2rem;padding:0 1.2rem;text-align:center}
.duae-primary .eyebrow{display:block;margin-bottom:.5rem}
.duae-primary h1{font-size:clamp(1.5rem,4.4vw,2.3rem);line-height:1.35;margin:.1rem 0 .5rem}
.duae-primary p.duae-lede{color:var(--mut,#93a1b5);font-size:.95rem;max-width:46ch;margin:0 auto 1.15rem}
.duae-cta{display:inline-flex;align-items:center;gap:.6rem;padding:1rem 1.9rem;border-radius:14px;
background:linear-gradient(180deg,#e08c12,#c2740a);color:#14100a;font-weight:800;
font-size:clamp(1.05rem,3vw,1.32rem);text-decoration:none;border:1px solid rgba(255,255,255,.22);
box-shadow:0 10px 26px rgba(217,119,6,.3)}
.duae-cta:hover{filter:brightness(1.07)}
.duae-cta small{display:block;font-weight:600;font-size:.72rem;opacity:.78;margin-top:.15rem}
.duae-paths{max-width:1100px;margin:1.5rem auto 0;padding:0 1.2rem;
display:grid;gap:.8rem;grid-template-columns:repeat(3,1fr)}
.duae-path{display:block;padding:1rem;border-radius:12px;text-decoration:none;
border:1px solid rgba(148,163,184,.26);background:rgba(148,163,184,.07);color:inherit}
.duae-path:hover{border-color:rgba(217,119,6,.55);background:rgba(217,119,6,.09)}
.duae-path b{display:block;font-size:1.02rem;margin-bottom:.28rem}
.duae-path span{display:block;font-size:.84rem;color:var(--mut,#93a1b5);line-height:1.6}
.duae-libhead{max-width:1100px;margin:2.2rem auto .4rem;padding:0 1.2rem}
.duae-libhead h2{font-size:1.12rem;margin:0 0 .2rem}
.duae-libhead p{margin:0;font-size:.86rem;color:var(--mut,#93a1b5)}
@media(max-width:760px){.duae-paths{grid-template-columns:1fr}.duae-cta{width:100%;justify-content:center}}
/* the radial map is now a secondary navigation aid, not the primary action */
.radarwrap{margin-top:1.4rem}
/* ===== KHW postbuild: build compatibility checker ===== */
.bc-form{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin:1rem 0}
.bc-f label{display:block;font-size:.82rem;color:var(--mut,#93a1b5);margin-bottom:.28rem}
.bc-f input,.bc-f select{width:100%;padding:.55rem .6rem;border-radius:9px;
border:1px solid rgba(148,163,184,.32);background:rgba(15,23,42,.5);color:inherit;font-size:.95rem}
.bc-group{border:1px solid rgba(148,163,184,.22);border-radius:12px;padding:.9rem 1rem;margin-bottom:.9rem}
.bc-group>h4{margin:0 0 .2rem;font-size:.95rem}
.bc-issue{border-radius:10px;padding:.7rem .85rem;margin-bottom:.55rem;border-left:4px solid}
.bc-issue.err{border-color:#dc2626;background:rgba(220,38,38,.1)}
.bc-issue.warn{border-color:#d97706;background:rgba(217,119,6,.1)}
.bc-issue.ok{border-color:#0ea5e9;background:rgba(14,165,233,.08)}
.bc-issue b{display:block;margin-bottom:.2rem}
.bc-issue span{font-size:.86rem;line-height:1.65;color:var(--mut,#b6c2d2)}
.bc-nums{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:.9rem 0}
.bc-num{border:1px solid rgba(148,163,184,.22);border-radius:10px;padding:.6rem .7rem}
.bc-num i{display:block;font-style:normal;font-size:.76rem;color:var(--mut,#93a1b5)}
.bc-num b{font-size:1.08rem}
[dir=ltr] .bc-issue{border-left:0;border-right:4px solid}
/* ============================================================
KHW 2026-09-19 — الدرون المرافق
١) الألوان: اللمسات السماوية تتحوّل ذهبياً والأبيض يدفأ نحو
البيج، لتنسجم صورة الدرون مع لوحة الموقع (رمادي · ذهبي · بيج).
فلتر واحد يعمل على صور الصفحات الـ15 كلها.
٢) الشاشات ≥1400px: الدرون يخرج من داخل النص إلى الهامش الجانبي،
يثبت أثناء التمرير، ويستمر تموّجه (dHover على الصورة).
٣) دورية بطيئة (60 ثانية) محصورة في الهامشين:
الهامش الأيسر ↓ → عبور أفقي في الشريط السفلي → الهامش الأيمن ↑
→ تحليق في الأعلى → ↓ → عبور عائد → الهامش الأيسر ↑ وتتكرّر.
الدرون مرئيّ بالكامل في كل لحظة: لا يخرج من الشاشة، ولا يمرّ خلف
الترويسة، ولا خلف مساعد «سيف» (أقصى هبوط محسوب ليبقى فوقه).
ثمن ذلك: العبور الأفقي يمرّ فوق عمود المحتوى ~10 ثوانٍ من كل دورة،
والصورة شفافة الخلفية و pointer-events:none فلا تعترض أي نقرة.
الشاشات الأضيق: لا هامش، فيبقى داخل النص كما كان.
للتراجع: احذف هذه الكتلة.
============================================================ */
.dphoto{
filter: hue-rotate(215deg) saturate(.72) sepia(.14)
drop-shadow(0 7px 13px rgba(48,40,24,.28));
}
@media (min-width:1400px){
.dphoto-wrap{
--m: calc((100vw - 1100px) / 2); /* عرض الهامش الواحد */
--w: min(190px, calc(var(--m) - 24px)); /* عرض الدرون داخل الهامش */
position:fixed; top:250px;
left: calc((var(--m) - var(--w)) / 2); /* منتصف الهامش الأيسر */
width: var(--w);
float:none; margin:0; shape-outside:none; z-index:5;
will-change:transform;
animation: dPatrol 60s ease-in-out infinite, dYaw 60s ease-in-out infinite;
}
}
/* الإزاحة الأفقية بين منتصفَي الهامشين = 100vw − عرض الهامش = 50vw + 550px
أقصى هبوط = max(0, 100vh − 600px): يُبقي أسفل الدرون فوق مساعد «سيف»
الثابت أسفل اليمين، وداخل الشاشة تماماً، على كل الارتفاعات. */
@keyframes dPatrol{
0% { translate: 0 0 }
22% { translate: 0 max(0px, calc(100vh - 600px)) }
32% { translate: calc(50vw + 550px) max(0px, calc(100vh - 600px)) }
54% { translate: calc(50vw + 550px) 0 }
64% { translate: calc(50vw + 550px) 0 }
76% { translate: calc(50vw + 550px) max(0px, calc(100vh - 600px)) }
86% { translate: 0 max(0px, calc(100vh - 600px)) }
100% { translate: 0 0 }
}
/* 2026-09-22 — دوران ٣٦٠°: الدرون يستدير عند كل تغيير اتجاه فيُري جانبه الآخر،
ويؤدي دورة كاملة أثناء التحويم في الأعلى. مزامن مع dPatrol (٦٠ ث):
انعطاف عند العبور الأول (٢٢–٢٧٪)، دورة استعراضية كاملة أثناء التحويم
(٥٦–٦٣٪)، وانعطاف العودة (٧٦–٨١٪). 720° = 0° فتلتحم الدورة بلا قفزة. */
@keyframes dYaw{
0% { transform: perspective(900px) rotateY(0deg) rotateZ(2.5deg) }
20% { transform: perspective(900px) rotateY(0deg) rotateZ(0deg) }
27% { transform: perspective(900px) rotateY(180deg) rotateZ(-6deg) }
32% { transform: perspective(900px) rotateY(180deg) rotateZ(0deg) }
38% { transform: perspective(900px) rotateY(180deg) rotateZ(-2.5deg) }
54% { transform: perspective(900px) rotateY(180deg) rotateZ(0deg) }
56% { transform: perspective(900px) rotateY(180deg) rotateZ(0deg) }
63% { transform: perspective(900px) rotateY(540deg) rotateZ(0deg) }
76% { transform: perspective(900px) rotateY(540deg) rotateZ(0deg) }
81% { transform: perspective(900px) rotateY(720deg) rotateZ(6deg) }
86% { transform: perspective(900px) rotateY(720deg) rotateZ(0deg) }
100% { transform: perspective(900px) rotateY(720deg) rotateZ(2.5deg) }
}
@media (prefers-reduced-motion:reduce){ .dphoto-wrap{ animation:none } }
/* 2026-09-19 — سطر بطل الرئيسية: أسود عريض بدل البنفسجي */
.eyebrow--ink{ color:#111118; font-weight:900; letter-spacing:.14em; }
/* ============================================================
2026-09-19 — بطاقات أنواع الدرونز (/drone-types/)
صور منتجات حقيقية بدل رسوم SVG، على منصّة ضوئية بحلقات
كهرمانية، حبّتان (رمادية · كهرمانية)، وزر متدرّج بعرض البطاقة.
ديناميكية البطاقة الأصلية باقية (ارتفاع عند التحويم، go()).
============================================================ */
.tcard{
display:flex; flex-direction:column;
background:#FFFFFF; border:1px solid #E4E4EA; border-radius:22px;
padding:1rem 1.1rem 1.15rem;
box-shadow:0 10px 28px rgba(17,17,24,.07), 0 1px 0 rgba(255,255,255,.9) inset;
transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.tcard:hover{ transform:translateY(-4px); border-color:rgba(217,119,6,.45); box-shadow:0 18px 40px rgba(17,17,24,.12) }
/* المنصّة الضوئية خلف الطائرة */
.tcard-art{
position:relative; height:200px; margin:-.15rem -.2rem .85rem; border-radius:16px; overflow:hidden;
background:
radial-gradient(ellipse 48% 14% at 50% 84%, rgba(217,119,6,.20), rgba(217,119,6,0) 72%),
linear-gradient(120deg,#FFFFFF 0%,#F7F5F1 48%,#FBF6EE 100%);
}
.tcard-art::before,.tcard-art::after{ content:''; position:absolute; left:50%; transform:translateX(-50%); border-radius:50%; pointer-events:none }
.tcard-art::before{ bottom:11%; width:72%; height:44px; border:1.5px solid rgba(217,119,6,.32) } /* حلقة خارجية */
.tcard-art::after { bottom:15%; width:46%; height:26px; border:1.5px dashed rgba(217,119,6,.28) } /* حلقة داخلية */
.tcard-art img{
position:relative; z-index:1; display:block; width:88%; height:100%; margin:0 auto; object-fit:contain;
filter:drop-shadow(0 16px 18px rgba(17,17,24,.22));
transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.tcard:hover .tcard-art img{ transform:translateY(-7px) scale(1.035) }
/* الخط والعناوين */
.tcard h3{ font-family:"Cairo","Segoe UI","Tahoma","Noto Kufi Arabic",sans-serif; font-weight:800; font-size:1.22rem; letter-spacing:-.01em; color:#111118; margin:.1rem 0 .35rem }
.tcard p{ font-size:.92rem; line-height:1.75 }
/* الحبّات — رمادية وكهرمانية كالمرجع */
.tcard .pillrow{ gap:.45rem; margin:.35rem 0 .6rem }
.tcard .tag{ padding:.32rem .85rem; font-size:.78rem; font-weight:600; border-radius:999px; background:#EDEDF1; border:1px solid #DCDCE3; color:#4B5563; margin:0 }
.tcard .tag.a{ background:#FBEBD4; border-color:#F1CF9E; color:#8A4B00 }
.tcard .tag.c{ background:#F6EBD9; border-color:#E8D0A8; color:#7A5300 }
/* الزر — متدرّج كهرماني بعرض البطاقة */
.tcard .tcard-btn{
display:block; width:100%; margin-top:auto; padding:.82rem 1rem;
font-family:"Cairo","Segoe UI","Tahoma",sans-serif; font-weight:800; font-size:1rem; letter-spacing:.01em;
color:#FFFFFF; border:none; border-radius:14px; cursor:pointer;
background:linear-gradient(180deg,#F6A623 0%,#E0850F 48%,#C2660A 100%);
box-shadow:0 8px 18px rgba(217,119,6,.32), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(120,60,0,.25);
transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.tcard .tcard-btn:hover{ transform:translateY(-1px); filter:brightness(1.05); box-shadow:0 12px 22px rgba(217,119,6,.38), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(120,60,0,.25) }
.tcard .tcard-btn:active{ transform:translateY(0); filter:brightness(.97) }
.tcard .tcard-btn:focus-visible{ outline:3px solid rgba(217,119,6,.5); outline-offset:2px }
@media (max-width:620px){ .tcard-art{ height:170px } .tcard h3{ font-size:1.1rem } }
@media (prefers-reduced-motion:reduce){ .tcard, .tcard-art img, .tcard .tcard-btn{ transition:none } }
/* ============================================================
2026-09-19 — صفحات تفصيل الأنواع الست
صفّان: صورة الطائرة الحقيقية + مخطّط تقني من تصميمنا، في بطاقتين
بنفس لغة بطاقات /drone-types/ (حواف 22px، منصّة ضوئية، ظل ناعم).
============================================================ */
.tspec{
display:grid; grid-template-columns:1fr 1fr; gap:1rem;
margin:.9rem 0 1.1rem; align-items:stretch;
}
.tspec--solo{ grid-template-columns:1fr; max-width:640px; margin-inline:auto }
.tspec figure, .tspec .tspec-dg{
margin:0; background:#FFFFFF; border:1px solid #E4E4EA; border-radius:22px;
box-shadow:0 10px 28px rgba(17,17,24,.07), 0 1px 0 rgba(255,255,255,.9) inset;
overflow:hidden; display:flex; flex-direction:column;
}
/* الصورة على منصّة ضوئية بحلقات كهرمانية — نفس معالجة البطاقات */
.tspec-ph{
position:relative; flex:1; min-height:230px; display:flex; align-items:center; justify-content:center;
background:
radial-gradient(ellipse 48% 14% at 50% 84%, rgba(217,119,6,.20), rgba(217,119,6,0) 72%),
linear-gradient(120deg,#FFFFFF 0%,#F7F5F1 48%,#FBF6EE 100%);
}
.tspec-ph::before,.tspec-ph::after{ content:''; position:absolute; left:50%; transform:translateX(-50%); border-radius:50%; pointer-events:none }
.tspec-ph::before{ bottom:12%; width:70%; height:46px; border:1.5px solid rgba(217,119,6,.32) }
.tspec-ph::after { bottom:16%; width:44%; height:28px; border:1.5px dashed rgba(217,119,6,.28) }
.tspec-ph img{
position:relative; z-index:1; width:88%; max-height:250px; object-fit:contain; display:block;
filter:drop-shadow(0 16px 18px rgba(17,17,24,.22));
transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.tspec figure:hover .tspec-ph img{ transform:translateY(-6px) scale(1.03) }
.tspec figcaption{
font-family:"Cairo","Segoe UI","Tahoma",sans-serif; font-weight:700; font-size:.86rem;
color:#4B5563; text-align:center; padding:.6rem .9rem .85rem; border-top:1px solid #EFEFF1;
}
.tspec .tspec-dg{ padding:.55rem; direction:ltr }
.tspec .tdiagram{ width:100%; height:auto; display:block; border-radius:16px }
@media (max-width:760px){ .tspec{ grid-template-columns:1fr } .tspec-ph{ min-height:190px } }
@media (prefers-reduced-motion:reduce){ .tspec-ph img{ transition:none } }
/* ============================================================
2026-09-19 — فقرة التمهيد في صفحات تفصيل الأنواع
كانت p.mut رمادية (#65657A) فوق مشهد الخلفية، فتشوّش النص.
صارت: خط Cairo أثقل، لون أغمق، فوق لوح فاتح صافٍ يعزلها عن المشهد.
المحدّد .tspec + p.mut يصيب فقرة التمهيد وحدها في الصفحات الاثنتي عشرة.
============================================================ */
.tspec + p.mut{
font-family:"Cairo","Segoe UI","Tahoma","Noto Kufi Arabic",sans-serif;
font-size:1.02rem; font-weight:600; line-height:1.95; color:#24242E;
background:#FBFBFC; border:1px solid #E7E7EC; border-left:4px solid var(--amber,#D97706);
border-radius:14px; padding:.95rem 1.15rem; margin:.2rem 0 1rem;
box-shadow:0 2px 12px rgba(17,17,24,.06), 0 0 0 4px rgba(248,248,249,.8);
}
[dir="rtl"] .tspec + p.mut{ border-left:1px solid #E7E7EC; border-right:4px solid var(--amber,#D97706) }
@media (max-width:620px){ .tspec + p.mut{ font-size:.97rem; padding:.85rem .95rem } }
/* لوح تمهيد متعدّد الفقرات — نفس معالجة .tspec + p.mut لكن لأكثر من فقرة */
.tlede{
background:#FBFBFC; border:1px solid #E7E7EC; border-left:4px solid var(--amber,#D97706);
border-radius:14px; padding:1rem 1.2rem; margin:.2rem 0 1rem;
box-shadow:0 2px 12px rgba(17,17,24,.06), 0 0 0 4px rgba(248,248,249,.8);
}
[dir="rtl"] .tlede{ border-left:1px solid #E7E7EC; border-right:4px solid var(--amber,#D97706) }
.tlede p{
font-family:"Cairo","Segoe UI","Tahoma","Noto Kufi Arabic",sans-serif;
font-size:1.02rem; font-weight:600; line-height:1.95; color:#24242E; margin:0 0 .75rem;
}
.tlede p:last-child{ margin-bottom:0 }
.tlede b{ color:#111118; font-weight:800 }
@media (max-width:620px){ .tlede{ padding:.9rem 1rem } .tlede p{ font-size:.97rem } }
/* ============================================================
2026-09-19 — صفحة الدرونات الثقيلة
لافتة رقمية، جدول فئات مرتّب، وبطاقات طرازات بصور حقيقية.
============================================================ */
.hlbanner{ width:100%; max-width:760px; height:auto; display:block; margin:.9rem auto 1.1rem }
/* جدول الفئات — مرتّب تصاعدياً بالحجم، بشريط تدرّج يوضّح الترتيب */
.hltable{ width:100%; border-collapse:separate; border-spacing:0; margin:.6rem 0 .4rem;
background:#FFFFFF; border:1px solid #E4E4EA; border-radius:18px; overflow:hidden;
box-shadow:0 8px 24px rgba(17,17,24,.06); font-size:.9rem }
.hltable thead th{ background:#F4F4F6; color:#24242E; font-family:"Cairo","Segoe UI",sans-serif;
font-weight:800; font-size:.86rem; padding:.7rem .8rem; border-bottom:1px solid #E4E4EA; white-space:nowrap }
.hltable td{ padding:.72rem .8rem; border-bottom:1px solid #F0F0F3; color:#3A3A46; line-height:1.6 }
.hltable tbody tr:last-child td{ border-bottom:none }
.hltable tbody tr:hover{ background:#FCFBF9 }
.hltable .hl-rank{ display:inline-flex; align-items:center; gap:.45rem; font-family:"Cairo",sans-serif; font-weight:800; color:#24242E }
.hltable .hl-dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; background:var(--amber,#D97706) }
.hltable tbody tr:nth-child(1) .hl-dot{ opacity:.32 }
.hltable tbody tr:nth-child(2) .hl-dot{ opacity:.55 }
.hltable tbody tr:nth-child(3) .hl-dot{ opacity:.78 }
.hltable tbody tr:nth-child(4) .hl-dot{ opacity:1 }
.hltable b{ color:#111118 }
@media (max-width:720px){ .hltable{ font-size:.82rem } .hltable thead th,.hltable td{ padding:.55rem .5rem } }
/* بطاقات الطرازات */
.hlgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem; margin:.9rem 0 .4rem }
.hlcard{ display:flex; flex-direction:column; background:#FFFFFF; border:1px solid #E4E4EA; border-radius:22px;
overflow:hidden; box-shadow:0 10px 28px rgba(17,17,24,.07); transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease }
.hlcard:hover{ transform:translateY(-4px); border-color:rgba(217,119,6,.45); box-shadow:0 18px 40px rgba(17,17,24,.12) }
.hlcard-top{ padding:.9rem 1rem .2rem }
.hlcard-top h4{ font-family:"Cairo","Segoe UI",sans-serif; font-weight:800; font-size:1.05rem; color:#111118; margin:0 }
.hlcard-brand{ font-family:Consolas,monospace; font-size:.72rem; letter-spacing:.14em; color:#8A8A98; margin-top:.15rem }
.hlcard-art{ position:relative; height:172px; margin:.4rem .5rem .1rem; border-radius:16px; overflow:hidden;
background:radial-gradient(ellipse 48% 14% at 50% 84%, rgba(217,119,6,.18), rgba(217,119,6,0) 72%),
linear-gradient(120deg,#FFFFFF 0%,#F7F5F1 48%,#FBF6EE 100%) }
.hlcard-art::before{ content:''; position:absolute; left:50%; bottom:12%; transform:translateX(-50%);
width:66%; height:36px; border:1.5px solid rgba(217,119,6,.30); border-radius:50% }
.hlcard-art img{ position:relative; z-index:1; width:88%; height:100%; margin:0 auto; object-fit:contain; display:block;
filter:drop-shadow(0 14px 16px rgba(17,17,24,.22)); transition:transform .4s cubic-bezier(.2,.8,.2,1) }
.hlcard:hover .hlcard-art img{ transform:translateY(-6px) scale(1.03) }
.hlcard-desc{ padding:.55rem 1rem .2rem; font-size:.86rem; line-height:1.7; color:#4B5563; flex:1 }
.hlcard-specs{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; padding:.7rem 1rem 1rem }
.hlspec{ background:#F7F7F9; border:1px solid #EAEAEF; border-radius:12px; padding:.5rem .6rem; text-align:center }
.hlspec span{ display:block; font-size:.72rem; color:#6B6B7A; margin-bottom:.1rem }
.hlspec b{ font-family:"Cairo",sans-serif; font-weight:800; font-size:.94rem; color:var(--amber,#D97706) }
@media (prefers-reduced-motion:reduce){ .hlcard, .hlcard-art img{ transition:none } }
/* 2026-09-19: على الشاشات الضيقة كان عمود «أمثلة» يُقصّ — الجدول يمرّر داخل حاويته */
.hlscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:.6rem 0 .4rem; border-radius:18px }
.hlscroll .hltable{ margin:0; min-width:430px }
/* =====================================================================
2026-09-21 — الرادار الملاحي (scope) · إعادة بناء احترافية
يحل محل .radar/.orbit/.node/.sweep القديمة (حُذفت من هذا الملف).
===================================================================== */
.scope{ position:relative; display:block; width:min(600px,100%); aspect-ratio:1; margin:1rem auto 0;
container-type:inline-size; --sc-period:8s; --sc-r1:29.333cqi; --sc-r2:43.667cqi;
font-family:"Cairo","Segoe UI","Tahoma","Noto Kufi Arabic",sans-serif }
.sc-disc{ position:absolute; inset:0 }
.sc-bg{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible }
.sc-ring{ fill:none; stroke:rgba(17,17,24,.13); stroke-width:1 }
.sc-ring--node{ stroke:rgba(17,17,24,.20); stroke-dasharray:2 5 }
.sc-ring--edge{ stroke:rgba(122,68,5,.28); stroke-width:1.5 }
.sc-cross{ stroke:rgba(17,17,24,.09); stroke-width:1 }
.sc-tick{ stroke:rgba(17,17,24,.30) }
.sc-tick--maj{ stroke:rgba(122,68,5,.6) }
.sc-lbl{ font-family:Consolas,"SF Mono",monospace; font-size:10px; letter-spacing:.08em;
fill:#65657A; text-anchor:middle; dominant-baseline:middle }
.sc-sweep{ transform-origin:300px 300px; transform-box:view-box;
animation:scSpin var(--sc-period) linear infinite }
.sc-sweep-edge{ stroke:rgba(217,119,6,.65); stroke-width:1.5 }
@keyframes scSpin{ to{ transform:rotate(360deg) } }
/* ---- النواة: أداة الفحص الأول ---- */
.sc-core{ position:absolute; top:50%; left:50%; width:28cqi; height:28cqi; border-radius:50%;
transform:translate(-50%,-50%); box-sizing:border-box; z-index:3;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.18rem;
text-decoration:none; text-align:center; padding:6%;
background:radial-gradient(circle at 50% 35%, #FFFFFF 0%, #FBF6EC 70%, #F3E9D6 100%);
border:2px solid var(--amber); color:var(--ink);
box-shadow:0 0 0 6px rgba(255,255,255,.75), 0 0 0 7px rgba(217,119,6,.25),
0 14px 34px rgba(122,68,5,.20);
transition:transform .2s, box-shadow .2s }
.sc-core svg{ width:2rem; height:2rem; color:var(--amber) }
.sc-core b{ font-size:1rem; line-height:1.25; font-weight:800; white-space:nowrap }
.sc-core small{ font-size:.66rem; font-weight:700; color:#9A5300; letter-spacing:.01em; white-space:nowrap }
.sc-core:hover{ transform:translate(-50%,-50%) scale(1.045);
box-shadow:0 0 0 6px rgba(255,255,255,.85), 0 0 0 7px rgba(217,119,6,.45), 0 18px 40px rgba(122,68,5,.26) }
.sc-core:focus-visible{ outline:2px solid var(--amber); outline-offset:6px }
/* ---- العقد على الحلقتين ---- */
.sc-nodes{ position:absolute; inset:0; z-index:2 }
.sc-node{ position:absolute; top:50%; left:50%; --r:var(--sc-r1);
transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)));
display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .95rem .5rem .8rem;
border-radius:999px; background:rgba(255,255,255,.96); border:1px solid #D7D7DE;
color:var(--ink); text-decoration:none; white-space:nowrap;
box-shadow:0 2px 6px rgba(17,17,24,.08), 0 8px 20px rgba(17,17,24,.08);
transition:transform .2s, border-color .2s, box-shadow .2s;
animation:scPing var(--sc-period) linear infinite; animation-delay:var(--d,0s) }
.sc-node svg{ width:1.25rem; height:1.25rem; flex:0 0 auto; color:var(--slate) }
.sc-node span{ font-size:.86rem; font-weight:700; line-height:1.2 }
.sc-node.is-ref{ --r:var(--sc-r2) }
.sc-node.is-tool{ border-color:#E2CFA6; background:linear-gradient(180deg,#FFFFFF,#FDF8EE) }
.sc-node.is-tool svg{ color:var(--amber) }
.sc-node:hover,.sc-node:focus-visible{ border-color:var(--amber); z-index:4;
box-shadow:0 4px 10px rgba(17,17,24,.10), 0 14px 28px rgba(140,95,40,.20);
transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))) translateY(-3px) }
.sc-node:focus-visible{ outline:2px solid var(--amber); outline-offset:3px }
/* وميض متزامن مع مرور الشعاع: التأخير = الزاوية ÷ 45 (دورة 8 ث) */
@keyframes scPing{
0% { box-shadow:0 2px 6px rgba(17,17,24,.08), 0 8px 20px rgba(17,17,24,.08), 0 0 0 0 rgba(217,119,6,.55) }
9% { box-shadow:0 2px 6px rgba(17,17,24,.08), 0 8px 20px rgba(17,17,24,.08), 0 0 0 14px rgba(217,119,6,0) }
100% { box-shadow:0 2px 6px rgba(17,17,24,.08), 0 8px 20px rgba(17,17,24,.08), 0 0 0 14px rgba(217,119,6,0) } }
/* ---- مفتاح الرموز ---- */
.sc-key{ position:absolute; inset:auto 0 -2.1rem 0; display:flex; justify-content:center; gap:1.4rem;
font-size:.74rem; color:var(--mut); font-weight:600 }
.sc-key span{ display:inline-flex; align-items:center; gap:.4rem }
.sc-key i{ width:.62rem; height:.62rem; border-radius:50%; display:inline-block; box-sizing:border-box }
.sc-key .k-tool i{ background:var(--amber) }
.sc-key .k-ref i{ border:1.5px solid var(--slate) }
.radartop{ padding-bottom:2.4rem }
@media (prefers-reduced-motion:reduce){
.sc-sweep{ animation:none; transform:rotate(-20deg) }
.sc-node{ animation:none } }
/* ---- الجوال والتابلت: قرص مصغّر + شبكة عقد ---- */
@media (max-width:899px){
.scope{ width:100%; aspect-ratio:auto; margin-top:.4rem }
.sc-disc{ position:relative; width:min(236px,66%); aspect-ratio:1; margin:0 auto 1rem }
.sc-lbl{ display:none }
.sc-core{ width:60%; height:60% }
.sc-core svg{ width:1.45rem; height:1.45rem }
.sc-core b{ font-size:.86rem }
.sc-core small{ font-size:.58rem }
.sc-nodes{ position:static; display:grid; grid-template-columns:1fr 1fr; gap:.55rem }
.sc-node{ position:static; transform:none; animation:none; white-space:normal;
border-radius:14px; padding:.7rem .6rem; justify-content:flex-start; gap:.45rem }
.sc-node:hover,.sc-node:focus-visible{ transform:translateY(-2px) }
.sc-node span{ font-size:.87rem }
.sc-key{ position:static; margin-top:.8rem }
.radartop{ padding-bottom:0 } }
/* 2026-09-21 — حاوية تمرير لأي جدول أعرض من عموده (تُضاف تلقائياً من core.js) */
.tscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; margin:.7rem 0 .5rem;
border-radius:12px; scrollbar-width:thin }
.tscroll > table{ margin:0 }
@media (max-width:640px){ .tscroll > table{ min-width:430px } }
/* 2026-09-22 — صور الطائرات الحقيقية في بطاقات قاعدة البيانات
بنفس منصّة العرض المستعملة في بطاقات صفحة أنواع الدرون */
.dbsilo{ padding:0 }
.dbphoto,.dbdraw{ position:relative; height:132px; overflow:hidden;
background:
radial-gradient(ellipse 46% 15% at 50% 82%, rgba(217,119,6,.18), rgba(217,119,6,0) 72%),
linear-gradient(120deg,#FFFFFF 0%,#F7F5F1 48%,#FBF6EE 100%) }
.dbphoto::before,.dbphoto::after{ content:''; position:absolute; left:50%; transform:translateX(-50%);
border-radius:50%; pointer-events:none }
.dbphoto::before{ bottom:9%; width:70%; height:30px; border:1.4px solid rgba(217,119,6,.30) }
.dbphoto::after { bottom:14%; width:44%; height:18px; border:1.4px dashed rgba(217,119,6,.26) }
.dbphoto img{ position:relative; z-index:1; display:block; width:90%; height:100%; margin:0 auto;
object-fit:contain; filter:drop-shadow(0 10px 12px rgba(17,17,24,.20));
transition:transform .35s cubic-bezier(.2,.8,.2,1) }
.dbcard:hover .dbphoto img{ transform:translateY(-5px) scale(1.04) }
.dbdraw{ display:flex; align-items:center; justify-content:center; padding:.35rem }
.dbdraw svg{ width:100%; height:110px; display:block }
/* داخل لوحة التفاصيل وورقة الطباعة: مساحة أكبر */
.dbmodal .dbphoto,.dbmodal .dbdraw,.viz .dbphoto,.viz .dbdraw{ height:270px; border-radius:12px }
.dbmodal .dbdraw svg,.viz .dbdraw svg{ height:230px }
@media (prefers-reduced-motion:reduce){ .dbphoto img{ transition:none } .dbcard:hover .dbphoto img{ transform:none } }
/* K.Pilot character proportions */
.saifimg{height:auto;aspect-ratio:10/13;object-fit:contain}.chathead img{object-fit:cover;object-position:center}