:root{ --bg:#F8F8F9; --panel:#EFEFF1; --panel2:#E3E3E7; --line:#C4C4CC; --ink:#111118; --mut:#65657A; --amber:#D97706; --cyan:#7C3AED; --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(124,58,237,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(124,58,237,.04) 1px, transparent 1px); background-size:44px 44px; } .eyebrow{font-family:Consolas,monospace;letter-spacing:.16em;font-size:.78rem;font-weight:700;color:#7C3AED;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(124,58,237,.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(124,58,237,.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(124,58,237,.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(124,58,237,.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(124,58,237,.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(124,58,237,.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(124,58,237,.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(124,58,237,.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,rgba(248,113,113,.10),rgba(124,58,237,.05)); 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(124,58,237,.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(124,58,237,.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) صندوق الكابتن سيف قابل للسحب والتحريك 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) سحب صندوق الكابتن سيف ---------- */ .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,#7c3aed);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(124,58,237,.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(124,58,237,.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(124,58,237,.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(124,58,237,.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(124,58,237,.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{position:relative;width:min(520px,100%);aspect-ratio:1;margin:0 auto; display:grid;place-items:center;container-type:inline-size} .radar-rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none} .ring{position:absolute;border:1px dashed var(--line);border-radius:50%;opacity:.7} .ring.r1{width:42%;height:42%} .ring.r2{width:76%;height:76%} .sweep{position:absolute;width:76%;height:76%;border-radius:50%; background:conic-gradient(from 0deg,rgba(217,119,6,.18),rgba(217,119,6,0) 30%,rgba(217,119,6,0) 100%); animation:radarsweep 9s linear infinite} @keyframes radarsweep{to{transform:rotate(360deg)}} .radar-core{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:.1rem;width:30%;aspect-ratio:1;border-radius:50%; background:var(--panel);border:2px solid var(--amber);text-decoration:none; box-shadow:0 10px 30px rgba(217,119,6,.20);transition:.2s} .radar-core:hover{transform:scale(1.05);box-shadow:0 14px 36px rgba(217,119,6,.30)} .radar-core:focus-visible{outline:2px solid var(--amber);outline-offset:4px} .radar-core i{font-style:normal;font-size:clamp(1.2rem,4.4cqi,1.85rem);line-height:1} .radar-core b{font-size:clamp(.76rem,2.5cqi,1.02rem);color:var(--ink);line-height:1.2;text-align:center} .radar-core small{font-size:clamp(.58rem,1.75cqi,.74rem);color:var(--amber);font-weight:700} .orbit{position:absolute;inset:0;pointer-events:none} .node{position:absolute;top:50%;left:50%;pointer-events:auto;text-decoration:none; display:flex;flex-direction:column;align-items:center;gap:.12rem;text-align:center; padding:.45rem .55rem;border-radius:13px;background:var(--panel);border:1px solid var(--line); box-shadow:0 3px 12px rgba(0,0,0,.07);transition:transform .18s,border-color .18s,box-shadow .18s; transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)))} .node i{font-style:normal;font-size:clamp(.85rem,2.5cqi,1.15rem);line-height:1} .node span{font-size:clamp(.6rem,1.85cqi,.8rem);font-weight:700;color:var(--ink);line-height:1.25} .node:hover{border-color:var(--amber);box-shadow:0 8px 20px rgba(217,119,6,.20); transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))) scale(1.07)} .node:focus-visible{outline:2px solid var(--amber);outline-offset:3px} .o-in .node{--r:21cqi;width:22cqi;border-color:rgba(217,119,6,.5)} .o-mid .node{--r:36.5cqi;width:20cqi} .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} /* ===== Radar orbit hero — mobile/tablet parity ===== Replaces the old @media (max-width:760px) grid fallback. Keeps the radial "radar" layout down to phone widths. */ /* ---- 1. Tablet + phone: keep the circle, collapse to ONE evenly-spaced ring ---- */ @media (max-width:760px){ .radar{aspect-ratio:1;display:grid;place-items:center;width:min(520px,100%)} .radar-rings{display:block} .radar-core{box-sizing:border-box;width:33%;aspect-ratio:1;border-radius:50%; flex-direction:column;gap:.05rem;padding:0;margin:0;max-width:none; box-shadow:0 8px 24px rgba(217,119,6,.22)} .radar-core i{font-size:clamp(1.15rem,5.4cqi,1.85rem)} .radar-core b{font-size:clamp(.72rem,3.2cqi,1.02rem)} .radar-core small{font-size:clamp(.54rem,2.2cqi,.74rem)} .ring.r1{width:40%;height:40%} .ring.r2{width:74%;height:74%} .sweep{width:74%;height:74%} .orbit{position:absolute;inset:0;display:block;gap:0;margin-bottom:0} /* 10 nodes, 36deg apart, all on one radius */ .o-in .node,.o-mid .node{--r:37cqi;width:21cqi} .o-in .node:nth-of-type(1){--a:0deg!important} .o-in .node:nth-of-type(2){--a:36deg!important} .o-in .node:nth-of-type(3){--a:144deg!important} .o-in .node:nth-of-type(4){--a:216deg!important} .o-mid .node:nth-of-type(1){--a:252deg!important} .o-mid .node:nth-of-type(2){--a:288deg!important} .o-mid .node:nth-of-type(3){--a:324deg!important} .o-mid .node:nth-of-type(4){--a:72deg!important} .o-mid .node:nth-of-type(5){--a:108deg!important} .o-mid .node:nth-of-type(6){--a:180deg!important} .node{box-sizing:border-box;position:absolute;top:50%;left:50%; flex-direction:column;justify-content:center;text-align:center; padding:.38rem .3rem;border-radius:12px;gap:.1rem; transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)))} .node:hover{transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a)))} .node i{font-size:clamp(.9rem,3.8cqi,1.15rem)} .node span{font-size:clamp(.56rem,2.6cqi,.8rem);line-height:1.2;overflow-wrap:anywhere} } /* ---- 2. Phone: go full-bleed so the circle gets every pixel ---- */ @media (max-width:560px){ .radar{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)} .sweep{background:conic-gradient(from 0deg, rgba(217,119,6,.28),rgba(217,119,6,.10) 16%,rgba(217,119,6,0) 32%,rgba(217,119,6,0) 100%)} .radarlede{font-size:.88rem} .radar-rest{font-size:.78rem;gap:.3rem .7rem} } /* ---- 3. Ultra-narrow (<340px): the old grid is genuinely better ---- */ @media (max-width:339px){ .radar{aspect-ratio:auto;display:block;width:100%;margin-left:0;margin-right:0} .radar-rings{display:none} .radar-core{width:auto;aspect-ratio:auto;border-radius:16px;flex-direction:row; gap:.55rem;padding:.8rem 1.1rem;margin:0 auto .8rem;max-width:340px;align-items:center} .radar-core i{font-size:1.5rem} .radar-core b{font-size:1rem} .radar-core small{font-size:.72rem} .orbit{position:static;display:grid;gap:.5rem;margin-bottom:.5rem; grid-template-columns:repeat(auto-fit,minmax(140px,1fr))} .node{position:static;transform:none;width:auto!important;flex-direction:row; justify-content:flex-start;gap:.5rem;padding:.7rem .8rem;text-align:start} .node:hover{transform:none} .node i,.node span{font-size:.9rem} } /* ---- 4. Safety net: no container-query support -> keep the grid ---- */ @supports not (container-type:inline-size){ @media (max-width:760px){ .radar{aspect-ratio:auto;display:block;width:100%;margin-left:0;margin-right:0} .radar-rings{display:none} .radar-core{width:auto;aspect-ratio:auto;border-radius:16px;flex-direction:row; gap:.55rem;padding:.8rem 1.1rem;margin:0 auto .8rem;max-width:340px;align-items:center} .orbit{position:static;display:grid;gap:.5rem;margin-bottom:.5rem; grid-template-columns:repeat(auto-fit,minmax(140px,1fr))} .node{position:static;transform:none;width:auto!important;flex-direction:row; justify-content:flex-start;gap:.5rem;padding:.7rem .8rem;text-align:start} } } @media (prefers-reduced-motion:reduce){.sweep{animation:none;opacity:.3}} /* ===== 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,ENAR"); --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(124,58,237,.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(124,58,237,.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%{transform:translateY(0)}50%{transform:translateY(-8px)}} /* تفاوت بسيط في التوقيت حتى لا تتنفّس كل الصور معاً */ #pg-parts .dphoto,#pg-eparts .dphoto{animation-duration:5.4s} #pg-heavy .dphoto,#pg-eheavy .dphoto{animation-duration:6.1s} #pg-cuas .dphoto,#pg-ecuas .dphoto{animation-duration:5.1s} #pg-build .dphoto,#pg-ebuild .dphoto{animation-duration:5.8s} @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 ===== */ .duae-indep{max-width:1100px;margin:.7rem auto 0;padding:.62rem .9rem;border-radius:10px; border:1px solid rgba(220,138,0,.38);background:rgba(220,138,0,.09); font-size:.83rem;line-height:1.6;color:var(--ink,#e8eef6);display:flex;gap:.55rem;align-items:flex-start} .duae-indep b{color:#f0a83a} .duae-indep i{font-style:normal;flex:0 0 auto} .duae-indep a{color:#7dd3fc;text-decoration:underline} @media(max-width:720px){.duae-indep{margin:.55rem .8rem 0;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} .radar-core{pointer-events:none;opacity:.85} /* ===== 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}