/* فرنټ اینډ (ویب سایټ + لاګین): د ډاشبورډ په څېر رنګ او ګلاس؛ ټول متغیرونه (--p, --p2, --accent, --r, --rb, --ri, --blur, --bg, --surf, --txt ...) له بیک اینډ نه راځي (site_head → frontend_css). */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{margin:0;min-height:100vh;min-height:100dvh;font-family:var(--font);color:var(--txt);background:radial-gradient(900px 560px at 10% 6%,var(--glow),transparent 66%),linear-gradient(165deg,var(--bg) 0%,var(--bg2) 58%,var(--cream,var(--bg2)) 100%) fixed;background-color:var(--bg);line-height:1.75;overflow-x:hidden;-webkit-font-smoothing:antialiased} html{--menu-bg:color-mix(in srgb,var(--bg2) 55%,#fff);--fx-a:#fff;--fx-b:#d8d0ff;--fx-c:#a8c6ff;--fx-edge:rgba(255,255,255,.75);--fx-sh:rgba(92,80,220,.42)} html[data-theme=dark]{--menu-bg:color-mix(in srgb,var(--bg2) 86%,#fff);--fx-a:rgba(255,255,255,.9);--fx-b:#7a6cff;--fx-c:#3f63e6;--fx-edge:rgba(190,180,255,.45);--fx-sh:rgba(10,8,40,.7)} a{color:inherit;text-decoration:none}img{max-width:100%} h1,h2,h3,p{margin:0} .wrap{width:min(1120px,100% - 40px);margin-inline:auto} i[data-lucide],svg.lucide{width:1.15em;height:1.15em;flex:none} .dirflip{transition:transform .2s}[dir=rtl] .dirflip{transform:scaleX(-1)} :focus-visible{outline:3px solid color-mix(in srgb,var(--p) 55%,transparent);outline-offset:2px} /* شالید: ثابت نرۍ رڼا (هېڅ نه خوځیږي) + ډېر نرۍ د الماس جال */ .bgfx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none} .bgfx i{position:absolute;border-radius:50%;filter:blur(110px);opacity:.34} .bgfx i:nth-child(1){width:46vmax;height:46vmax;background:var(--p);top:-20vmax;inset-inline-end:-14vmax} .bgfx i:nth-child(2){width:36vmax;height:36vmax;background:var(--accent);opacity:.16;bottom:-16vmax;inset-inline-start:-10vmax} .bgfx i:nth-child(3){display:none} .bgfx::after{content:"";position:absolute;inset:0;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none' stroke='%23808' stroke-opacity='.05'%3E%3Cpath d='M32 0 64 32 32 64 0 32Z'/%3E%3C/svg%3E");-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000,transparent);mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000,transparent)} html[data-theme=dark] .bgfx::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64' fill='none' stroke='%23fff' stroke-opacity='.045'%3E%3Cpath d='M32 0 64 32 32 64 0 32Z'/%3E%3C/svg%3E")} html[data-blobs="0"] .bgfx{display:none} /* ګلاس */ .glass{background:var(--surf);-webkit-backdrop-filter:blur(var(--blur)) saturate(140%);backdrop-filter:blur(var(--blur)) saturate(140%);border:1px solid var(--line);box-shadow:var(--sh);border-radius:var(--r)} html[data-hover="1"] .lift{transition:transform .25s,box-shadow .25s} html[data-hover="1"] .lift:hover{transform:translateY(-4px)} /* بټنې */ .btn-zr{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:1.5px solid transparent;border-radius:var(--rb);font:inherit;font-weight:700;cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--p),var(--p2));box-shadow:0 12px 26px -12px var(--p);transition:transform .2s,box-shadow .2s,background .2s} .btn-zr:hover{transform:translateY(-2px)}.btn-zr:active{transform:translateY(0)} .btn-zr.sm{padding:9px 18px;font-size:.92rem}.btn-zr.full{width:100%;padding:14px} html[data-btn=solid] .btn-zr{background:var(--p)} html[data-btn=outline] .btn-zr{background:transparent;color:var(--p);border-color:var(--p);box-shadow:none} html[data-btn=glass] .btn-zr{background:var(--surf);color:var(--txt);border-color:var(--line);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));box-shadow:var(--sh)} .btn-zr.alt{background:var(--surf);color:var(--txt);border-color:var(--line);box-shadow:none;-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur))} html[data-btn=outline] .btn-zr.alt{color:var(--txt)} /* سر برخه */ .top{position:sticky;top:0;z-index:30;padding:calc(14px + env(safe-area-inset-top)) 0 4px;transition:padding .35s ease} .top.scrolled{padding-top:calc(10px + env(safe-area-inset-top))} .bar{position:relative;display:flex;align-items:center;gap:14px;padding:12px 8px;width:min(1120px,100% - 40px);border-radius:999px;background:transparent;border:1px solid transparent;box-shadow:0 0 0 0 transparent;-webkit-backdrop-filter:blur(0) saturate(100%);backdrop-filter:blur(0) saturate(100%);transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease,padding .35s ease,width .35s ease,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease} .top.scrolled .bar{width:min(1040px,100% - 40px);padding:9px 12px;background:color-mix(in srgb,var(--surf2) 62%,transparent);border-color:var(--line);box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.35);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)} html[data-theme=dark] .top.scrolled .bar{background:color-mix(in srgb,var(--surf2) 55%,transparent);box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.08)} .brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;min-width:0} .brand>span.bn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .brand-logo{width:40px;height:40px;border-radius:12px;object-fit:contain;flex:none} .mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--p),var(--p2));flex:none} .mark.big{width:64px;height:64px;border-radius:20px;font-size:1.6rem} .nav{display:flex;gap:4px;margin-inline:auto} .nav a{padding:8px 16px;border-radius:var(--rb);font-weight:600;color:var(--mut);transition:color .2s,background .2s} .nav a:hover{color:var(--txt);background:color-mix(in srgb,var(--p) 10%,transparent)} .tools{display:flex;align-items:center;gap:10px} .top .bar>.tools{margin-inline-start:auto}.nav+.tools{margin-inline-start:0} .menu-btn{display:none;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--txt) 6%,transparent);color:var(--txt);cursor:pointer;flex:none} .menu-btn svg{width:20px;height:20px}.menu-btn .mb-close{display:none} .top.menu-open .menu-btn .mb-open{display:none}.top.menu-open .menu-btn .mb-close{display:block} /* ژبې ډراپ ډاون */ .lang-dd{position:relative} .lang-btn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--txt) 6%,transparent);color:var(--txt);font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;transition:background .2s,border-color .2s} .lang-btn:hover,.lang-dd.open .lang-btn{background:color-mix(in srgb,var(--p) 12%,transparent);border-color:color-mix(in srgb,var(--p) 40%,var(--line))} .lang-btn svg{width:16px;height:16px;flex:none}.lg-globe{color:var(--p)} .lang-cur{white-space:nowrap;line-height:1} .lg-chev{transition:transform .25s ease;color:var(--mut)}.lang-dd.open .lg-chev{transform:rotate(180deg)} .lang-menu{position:absolute;z-index:40;top:calc(100% + 10px);inset-inline-end:0;min-width:176px;margin:0;padding:6px;list-style:none;border-radius:18px;background:var(--menu-bg);border:1px solid var(--line);box-shadow:0 22px 50px -18px rgba(30,24,110,.45);animation:menu-in .18s ease-out} .lang-menu[hidden]{display:none} .lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;font-weight:700;font-size:.95rem;color:var(--txt);transition:background .15s} .lang-menu a:hover,.lang-menu a:focus-visible{background:color-mix(in srgb,var(--p) 12%,transparent);outline:0} .lang-menu a.on{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff} .lang-menu a .lg-tick{width:16px;height:16px;flex:none} @keyframes menu-in{from{opacity:0;transform:translateY(-6px) scale(.98)}} /* رڼا/تیاره سویچ: ریښتینی لمر او سپوږمۍ */ .tswitch{position:relative;width:58px;height:34px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--txt) 7%,transparent);cursor:pointer;padding:0;flex:none;display:block;color:var(--mut)} .ts-i{position:absolute;top:50%;transform:translateY(-50%);width:16px;height:16px;display:grid;place-items:center;z-index:1;transition:color .25s} .ts-i svg{width:16px;height:16px} .ts-sun{inset-inline-start:8px}.ts-moon{inset-inline-end:8px} .ts-knob{position:absolute;top:3px;inset-inline-start:3px;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--p),var(--p2));box-shadow:0 4px 12px -3px var(--p);transition:inset-inline-start .3s cubic-bezier(.3,1.3,.5,1)} html[data-theme=light] .ts-sun{color:#fff} html[data-theme=dark] .ts-moon{color:#fff} html[data-theme=dark] .ts-knob{inset-inline-start:calc(100% - 29px)} /* لومړۍ برخه */ .hero{position:relative;isolation:isolate;padding:clamp(36px,7vw,88px) 0 clamp(32px,6vw,72px);overflow-x:clip} .hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 46% 52% at 74% 40%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 100%),radial-gradient(ellipse 38% 40% at 78% 42%,color-mix(in srgb,var(--p) 20%,transparent),transparent 100%),radial-gradient(ellipse 30% 34% at 14% 58%,var(--glow),transparent 100%),radial-gradient(ellipse 28% 26% at 50% 22%,color-mix(in srgb,var(--fx-c) 22%,transparent),transparent 100%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent)} .hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,64px);align-items:center} .badge{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-weight:700;font-size:.86rem;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)} h1{font-size:clamp(2.2rem,5.4vw,3.8rem);line-height:1.2;font-weight:800;margin:20px 0 16px;letter-spacing:-.02em;text-wrap:balance} [dir=rtl] h1{letter-spacing:0;line-height:1.4} .lead{font-size:clamp(1rem,1.8vw,1.18rem);color:var(--mut);max-width:34em} .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .hero-vis{position:relative;display:grid;place-items:center;--mx:0;--my:0;padding:18px} .hv-frame{position:relative;width:100%;max-width:430px;aspect-ratio:4/5;border-radius:calc(var(--r) + 14px);padding:10px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 70%,#fff),color-mix(in srgb,var(--accent) 35%,transparent) 42%,color-mix(in srgb,var(--accent) 80%,#000));box-shadow:0 50px 90px -40px var(--fx-sh),0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent);transform:translate3d(calc(var(--mx)*-8px),calc(var(--my)*-8px),0) rotateY(calc(var(--mx)*5deg)) rotateX(calc(var(--my)*-5deg));transition:transform .25s ease-out;will-change:transform} .hero-img{position:relative;width:100%;height:100%;background-size:cover;background-position:center;border-radius:calc(var(--r) + 6px);overflow:hidden;background-color:var(--p2)} .hero-art svg{display:block;width:100%;height:100%} .hv-shine{position:absolute;inset:10px;border-radius:calc(var(--r) + 6px);pointer-events:none;background:linear-gradient(120deg,transparent 38%,rgba(255,255,255,.18) 50%,transparent 62%);mix-blend-mode:soft-light} .hv-card{position:absolute;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:calc(var(--r)*.75);background:color-mix(in srgb,var(--surf2) 86%,transparent);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);transition:transform .25s ease-out;will-change:transform,translate} [dir=rtl] .hv-card{padding:12px 12px 12px 18px} .hv-card b{display:block;font-weight:500;font-size:.95rem;line-height:1.3}.hv-card small{display:block;color:var(--mut);font-size:.78rem;line-height:1.3} .hv-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#7a4b00));flex:none} .hv-ic svg{width:20px;height:20px} .hv1{top:9%;inset-inline-start:-2%;transform:translate3d(calc(var(--mx)*16px),calc(var(--my)*14px),0)} .hv2{bottom:15%;inset-inline-end:-3%;transform:translate3d(calc(var(--mx)*22px),calc(var(--my)*18px),0)} .hv-karat{position:absolute;z-index:2;bottom:4%;inset-inline-start:6%;display:flex;align-items:baseline;gap:6px;padding:10px 20px;border-radius:999px;transform:translate3d(calc(var(--mx)*12px),calc(var(--my)*10px),0);transition:transform .25s ease-out} .hv-karat strong{font-size:1.7rem;line-height:1;font-weight:500;color:var(--accent)}.hv-karat small{color:var(--mut);font-size:.85rem} html[data-anim="1"] .hv1{animation:hv-bob 7s ease-in-out infinite} html[data-anim="1"] .hv2{animation:hv-bob 8.5s ease-in-out -2.5s infinite} html[data-anim="1"] .hv-karat{animation:hv-bob 9.5s ease-in-out -4s infinite} html[data-anim="1"] .hv-shine{animation:hv-shine 7s ease-in-out 1.2s infinite} @keyframes hv-bob{0%,100%{translate:0 0}50%{translate:0 -12px}} @keyframes hv-shine{0%{background-position:-160% 0}60%,100%{background-position:260% 0}} .hv-shine{background-size:220% 100%;background-repeat:no-repeat;background-image:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.3) 50%,transparent 60%)} html[data-hero=center] .hero-grid{grid-template-columns:1fr;text-align:center} html[data-hero=center] .lead{margin-inline:auto}html[data-hero=center] .cta{justify-content:center} /* برخې */ .sec{padding:clamp(20px,4vw,44px) 0} .sec-t{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;text-align:center;margin-bottom:26px} .sec-t::after{content:"";display:block;width:56px;height:4px;border-radius:4px;margin:10px auto 0;background:linear-gradient(90deg,var(--p),var(--accent))} .about{display:flex;gap:20px;align-items:flex-start;padding:clamp(22px,4vw,36px);max-width:860px;margin-inline:auto} .about h2{font-size:1.5rem;font-weight:800;margin-bottom:8px}.about p{color:var(--mut);font-size:1.05rem} .sec-ic,.svc .ic,.ct .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;color:#fff;background:linear-gradient(135deg,var(--p),var(--p2));flex:none;box-shadow:0 10px 22px -10px var(--p)} .grid{display:grid;gap:18px}.svcs{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.cts{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .svc{padding:26px 22px}.svc h3{font-size:1.1rem;font-weight:800;margin:16px 0 6px}.svc p{color:var(--mut);font-size:.95rem} .ct{display:flex;align-items:center;gap:14px;padding:18px} .ct small{display:block;color:var(--mut);font-size:.78rem;font-weight:600}.ct b{font-weight:700;overflow-wrap:anywhere} .rv .rev{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}.rv .rev.in{opacity:1;transform:none} html[data-anim="1"] .rise{animation:rise .8s both}html[data-anim="1"] .rise.d2{animation-delay:.15s} @keyframes rise{from{opacity:0;transform:translateY(24px)}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv .rev{opacity:1;transform:none}.hv1,.hv2,.hv-karat{translate:none!important}} /* وړوکی فوټر */ .foot{display:flex;flex-wrap:wrap;gap:4px 16px;justify-content:center;padding:22px 20px calc(22px + env(safe-area-inset-bottom));color:var(--mut);font-size:.8rem;text-align:center} /* لاګین پاڼه */ .page-login{display:flex} .auth{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top)} .auth-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 0} .backlink{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--mut);padding:8px 14px;border-radius:999px;background:var(--surf);border:1px solid var(--line)} .backlink:hover{color:var(--txt)} .auth-card{width:min(940px,100%);margin:auto;display:grid;grid-template-columns:1fr;overflow:hidden;border-radius:calc(var(--r) + 8px)} .auth-card.has-img,.auth-card{grid-template-columns:minmax(0,1fr)} .auth-vis{display:none;position:relative;background:linear-gradient(145deg,var(--p),var(--p2));background-size:cover;background-position:center;color:#fff;min-height:100%} .av-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,40,.1),rgba(10,10,40,.7))} .auth-card:not(.has-img) .av-shade{background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.25),transparent 50%)} .av-in{position:absolute;inset-inline:0;bottom:0;padding:34px;display:flex;flex-direction:column;gap:6px} .av-in h2{font-size:1.7rem;font-weight:800}.av-in p{opacity:.9} .av-logo{width:60px;height:60px;object-fit:contain;border-radius:16px;background:rgba(255,255,255,.18);padding:6px;margin-bottom:8px} .av-in .mark{background:rgba(255,255,255,.2);margin-bottom:8px} .auth-form{padding:clamp(24px,5vw,44px);display:flex;flex-direction:column;gap:16px} .lhead{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin-bottom:6px} .llogo{width:64px;height:64px;object-fit:contain;border-radius:18px} .lhead h1{font-size:1.7rem;margin:10px 0 0}.lhead p{color:var(--mut)} .fld{display:flex;flex-direction:column;gap:7px}.fld>span{font-weight:700;font-size:.9rem} .inp{display:flex;align-items:center;gap:10px;padding:0 14px;border-radius:var(--ri);border:1.5px solid transparent;background:color-mix(in srgb,var(--txt) 7%,transparent);transition:border-color .2s,box-shadow .2s,background .2s} .inp:focus-within{border-color:var(--p);box-shadow:0 0 0 4px color-mix(in srgb,var(--p) 20%,transparent)} html[data-in=outline] .inp{background:transparent;border-color:color-mix(in srgb,var(--txt) 22%,transparent)} .inp>i,.inp>svg{color:var(--mut)} .inp input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--txt);font:inherit;padding:14px 0;font-size:1rem} .eye{border:0;background:none;color:var(--mut);cursor:pointer;display:grid;place-items:center;padding:6px;border-radius:8px}.eye:hover{color:var(--txt)} .alert-zr{display:flex;gap:10px;align-items:center;padding:12px 14px;border-radius:var(--ri);background:color-mix(in srgb,#E5484D 14%,transparent);color:#E5484D;border:1px solid color-mix(in srgb,#E5484D 35%,transparent);font-weight:600} @media(min-width:900px){.auth-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.auth-vis{display:block;order:2}.auth-form{order:1}} [dir=ltr] .auth-vis{order:1}[dir=ltr] .auth-form{order:2} @media(max-width:900px){.hero-grid{grid-template-columns:1fr;text-align:center}.hero-tx{order:1}.hero-vis{order:2}.lead{margin-inline:auto}.cta{justify-content:center}.about{flex-direction:column;text-align:center;align-items:center} .menu-btn{display:grid} .bar{border-radius:26px}.top.scrolled .bar{border-radius:26px} .nav{position:absolute;inset-inline:0;top:calc(100% + 8px);margin:0;flex-direction:column;gap:2px;padding:8px;border-radius:20px;background:var(--menu-bg);border:1px solid var(--line);box-shadow:0 22px 50px -18px rgba(30,24,110,.45);opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;transition:opacity .22s,transform .22s,visibility .22s} .top.menu-open .nav{opacity:1;visibility:visible;transform:none;pointer-events:auto} .nav a{padding:12px 14px;font-size:1rem;color:var(--txt)} .hero-vis{margin-top:8px}} @media(max-width:640px){.wrap,.bar{width:calc(100% - 24px)}.top.scrolled .bar{width:calc(100% - 24px)}.bar{gap:6px;padding:8px 6px}.top.scrolled .bar{padding:7px 8px} .tools{gap:6px}.lang-btn{height:36px;padding:0 9px;gap:5px}.lang-btn .lg-globe{display:none} .btn-zr.sm span{display:none}.btn-zr.sm{padding:0;width:38px;min-width:38px;height:38px;border-radius:50%;flex:none} .brand{gap:8px}.brand-logo,.mark{width:36px;height:36px;border-radius:11px}.brand>span.bn{font-size:.95rem;max-width:30vw} .tswitch{width:50px;height:32px}.ts-i,.ts-i svg{width:14px;height:14px}.ts-sun{inset-inline-start:7px}.ts-moon{inset-inline-end:7px}.ts-knob{width:24px;height:24px}html[data-theme=dark] .ts-knob{inset-inline-start:calc(100% - 27px)} .menu-btn{width:38px;height:38px} .lang-menu{min-width:160px}} @media(max-width:380px){.brand>span.bn{display:none}.lang-cur{max-width:5.2em;overflow:hidden;text-overflow:ellipsis}} @media (hover:none),(pointer:coarse){*{scrollbar-width:none!important}::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}} @supports selector(::-webkit-scrollbar){::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-button{display:none}::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p) 55%,transparent);border:2px solid transparent;background-clip:padding-box;border-radius:999px}::-webkit-scrollbar-thumb:hover{border-width:0;background:color-mix(in srgb,var(--p) 62%,#fff)}} @media(min-width:900px){.auth-form .lhead .llogo,.auth-form .lhead .mark{display:none}} /* ===== سرلیکونه: په انګلیسي کې Cormorant (لوکس)، ټول سپک وزن ===== */ .sec-sub{text-align:center;color:var(--mut);max-width:34em;margin:-12px auto 30px;font-size:1.02rem} .sec{padding:clamp(28px,5vw,60px) 0} .sec-ic,.svc .ic,.ct .ic{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#7a4b00));box-shadow:0 10px 22px -10px var(--accent)} .svc .ic svg,.ct .ic svg{width:24px;height:24px}.ct .ic.wa{background:linear-gradient(135deg,#2fd46b,#128c4a);box-shadow:0 10px 22px -10px #16a34a} /* ===== رڼا / تیاره: د فوټر دوه برخیز انتخاب ===== */ .tseg{display:inline-flex;padding:4px;gap:2px;border-radius:999px;background:color-mix(in srgb,var(--txt) 7%,transparent);border:1px solid var(--line)} .tseg button{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--mut);font:inherit;font-weight:500;font-size:.9rem;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s} .tseg button svg{width:17px;height:17px} .tseg button:hover{color:var(--txt)} .tseg button[aria-pressed=true]{color:#fff;background:linear-gradient(135deg,var(--p),var(--p2));box-shadow:0 8px 20px -10px var(--p)} .ts-knob{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#7a4b00));box-shadow:0 4px 12px -3px var(--accent)} /* ===== فوټر ===== */ .sfoot{position:relative;margin-top:clamp(28px,5vw,60px);padding:clamp(40px,6vw,72px) 0 0;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--surf) 70%,transparent) 30%);border-top:1px solid var(--line)} .sfoot::before{content:"";position:absolute;top:-1px;inset-inline:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.7} .sf-grid{display:grid;grid-template-columns:1.3fr .8fr 1.2fr;gap:clamp(28px,5vw,64px);padding-bottom:clamp(28px,4vw,44px)} .sf-brand .brand{font-size:1.25rem;margin-bottom:12px} .sf-brand p{color:var(--mut);max-width:26em;margin-bottom:20px} .sf-theme{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.sf-theme small{color:var(--mut);font-size:.8rem} .sf-col h4{margin:0 0 16px;font-size:.82rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)} [dir=rtl] .sf-col h4{letter-spacing:0;font-size:.95rem;text-transform:none} .sf-col>a:not(.sf-row){display:block;padding:6px 0;color:var(--mut);transition:color .2s,padding .2s} .sf-col>a:not(.sf-row):hover{color:var(--txt);padding-inline-start:6px} .sf-contact{display:flex;flex-direction:column;gap:12px}.sf-contact h4{margin-bottom:6px} .sf-row{display:flex;align-items:center;gap:12px;color:var(--txt);overflow-wrap:anywhere} a.sf-row:hover .sf-ic{background:var(--accent);color:#fff;border-color:transparent} .sf-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;flex:none;color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);transition:background .2s,color .2s} .sf-ic svg{width:19px;height:19px}.sf-ic.wa{color:#1faa59;background:color-mix(in srgb,#25d366 14%,transparent);border-color:color-mix(in srgb,#25d366 34%,transparent)} a.sf-row:hover .sf-ic.wa{background:#25d366} .sf-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:18px 0 calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--line);color:var(--mut);font-size:.85rem} .sf-bottom .sf-top{margin-inline-start:auto;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--txt) 6%,transparent);color:var(--txt);transition:background .2s,color .2s,transform .2s} .sf-bottom .sf-top svg{width:18px;height:18px}.sf-bottom .sf-top:hover{background:var(--accent);color:#fff;transform:translateY(-2px)} /* ===== زموږ ټیم: وکاږئ، یو مخکې راځي، نور تیاره کیږي ===== */ .team{overflow-x:clip} .tc{position:relative;user-select:none;-webkit-user-select:none} .tc-stage{position:relative;height:clamp(380px,50vw,540px);direction:ltr;perspective:1300px;touch-action:pan-y;cursor:grab;outline:none;-webkit-tap-highlight-color:transparent} .tc-stage.drag{cursor:grabbing} .tc-stage::before{content:"";position:absolute;left:50%;top:50%;width:min(620px,92%);aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,transparent),transparent 68%);pointer-events:none} .tc-stage:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 45%,transparent);border-radius:var(--r)} .tc-card{--w:clamp(200px,26vw,290px);position:absolute;left:50%;top:50%;margin:0;width:var(--w);aspect-ratio:3/4;border-radius:calc(var(--r) + 4px);overflow:hidden;background:linear-gradient(150deg,var(--p),var(--p2));border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 34px 60px -28px var(--fx-sh);will-change:transform,filter,opacity;backface-visibility:hidden;touch-action:pan-y} .tc-card img,.tc-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none} .tc-ph{display:grid;place-items:end center;padding-top:14%}.tc-ph svg{width:84%;height:auto;display:block;opacity:.9} .tc-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(8,8,30,.5));transition:opacity .3s} .tc-card.on{border-color:var(--accent);box-shadow:0 44px 80px -30px var(--fx-sh),0 0 0 1px var(--accent)} .tc-info{position:relative;display:grid;margin-top:clamp(8px,2vw,20px);text-align:center;min-height:9.5rem} .tc-i{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease,visibility .45s;max-width:34em;margin-inline:auto} .tc-i.on{opacity:1;visibility:visible;transform:none} .tc-i h3{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;line-height:1.25} .tc-role{margin-top:4px;color:var(--accent);font-weight:500;font-size:.92rem;letter-spacing:.12em;text-transform:uppercase} [dir=rtl] .tc-role{letter-spacing:0;text-transform:none;font-size:1rem} .tc-bio{margin-top:12px;color:var(--mut)} .tc-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:8px} .tc-btn{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--surf2) 80%,transparent);color:var(--txt);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .2s,color .2s,transform .2s,opacity .2s} .tc-btn svg{width:20px;height:20px}.tc-btn:hover:not(:disabled){background:var(--accent);color:#fff;transform:translateY(-2px)}.tc-btn:disabled{opacity:.35;cursor:default} .tc-dots{display:flex;gap:8px;align-items:center;direction:ltr} .tc-dot{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:color-mix(in srgb,var(--txt) 24%,transparent);cursor:pointer;transition:width .3s,background .3s} .tc-dot.on{width:28px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 60%,#fff))} .tc-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:14px;color:var(--mut);font-size:.85rem}.tc-hint svg{width:18px;height:18px;color:var(--accent)} @media(max-width:900px){ .hero-vis{padding:10px}.hv-frame{max-width:340px}.hv1{inset-inline-start:0}.hv2{inset-inline-end:0} .sf-grid{grid-template-columns:1fr 1fr}.sf-brand{grid-column:1/-1} .tc-card{--w:clamp(190px,46vw,260px)}} @media(max-width:640px){ .hv-card{padding:9px 14px 9px 9px;gap:9px}.hv-ic{width:34px;height:34px}.hv-card b{font-size:.85rem}.hv-card small{font-size:.72rem} .hv-frame{max-width:290px}.hv1{top:5%}.hv2{bottom:12%} .sf-grid{grid-template-columns:1fr}.sf-bottom{flex-direction:column;align-items:flex-start}.sf-bottom .sf-top{margin-inline-start:0;position:absolute;inset-inline-end:0;top:-54px} .sf-bottom{position:relative} .tc-stage{height:clamp(340px,92vw,430px)}.tc-card{--w:clamp(180px,56vw,230px)}.tc-info{min-height:11rem}} [dir=ltr] .lhead h1,.lhead h1{font-size:clamp(1.8rem,3vw,2.3rem);line-height:1.2;margin-top:10px} /* ===== هیرو: ثابت، بلر شالید شکلونه (یو دوه) + ۳D کوږیدل د ماوس سره ===== */ .hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none} .hb{position:absolute;display:block} .hb1{width:clamp(280px,40vw,560px);aspect-ratio:1;border-radius:50%;top:2%;inset-inline-end:-4%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 85%,#fff),color-mix(in srgb,var(--accent) 60%,transparent) 55%,transparent 75%);filter:blur(46px);opacity:.5} .hb2{width:clamp(190px,26vw,360px);aspect-ratio:1;border-radius:22%;rotate:24deg;bottom:-6%;inset-inline-start:-3%;background:linear-gradient(135deg,color-mix(in srgb,var(--p) 80%,#fff),color-mix(in srgb,var(--p2) 70%,transparent));filter:blur(30px);opacity:.42} .hb3{width:clamp(90px,12vw,170px);aspect-ratio:1;border-radius:50%;top:14%;inset-inline-start:36%;background:linear-gradient(135deg,color-mix(in srgb,var(--fx-c) 70%,#fff),transparent 80%);filter:blur(18px);opacity:.55} html[data-theme=dark] .hb1{opacity:.3}html[data-theme=dark] .hb2{opacity:.5}html[data-theme=dark] .hb3{opacity:.4} html[data-blobs="0"] .hero-bg{display:none} .hero-vis{perspective:1100px;transform-style:preserve-3d} .hv-frame{transform-style:preserve-3d;transform:rotateY(calc(var(--mx)*16deg)) rotateX(calc(var(--my)*-13deg)) translate3d(calc(var(--mx)*-6px),calc(var(--my)*-6px),0);transition:transform .18s ease-out,box-shadow .3s} .hero-vis.on .hv-frame{box-shadow:0 60px 100px -36px var(--fx-sh),0 0 0 1px color-mix(in srgb,var(--accent) 60%,transparent),0 0 60px -10px color-mix(in srgb,var(--accent) 45%,transparent)} .hv-shine{animation:none!important;mix-blend-mode:normal;opacity:calc(.25 + (var(--mx)*var(--mx) + var(--my)*var(--my))*.4);background:radial-gradient(circle at calc(50% + var(--mx)*55%) calc(50% + var(--my)*55%),rgba(255,255,255,.55),transparent 52%)!important;transition:opacity .3s} .hv1{transform:translate3d(calc(var(--mx)*34px),calc(var(--my)*26px),70px)} .hv2{transform:translate3d(calc(var(--mx)*46px),calc(var(--my)*34px),90px)} .hv-karat{transform:translate3d(calc(var(--mx)*26px),calc(var(--my)*20px),60px)} .hv-card,.hv-karat{transition:transform .18s ease-out} .hero-vis{cursor:default} .foot-login{align-items:center;flex-direction:column;gap:12px} /* ===================================================================== v7: نوی ډیزاین — زرین مینو، ۳D الماس، هیرو، برخې، FAQ، نقشه، رڼا/تیاره ===================================================================== */ @property --bg{syntax:'';inherits:true;initial-value:#F1EDFF} @property --bg2{syntax:'';inherits:true;initial-value:#E2EEFF} @property --cream{syntax:'';inherits:true;initial-value:#FFF6E6} @property --glow{syntax:'';inherits:true;initial-value:rgba(255,226,170,.55)} @property --surf{syntax:'';inherits:true;initial-value:rgba(255,255,255,.72)} @property --surf2{syntax:'';inherits:true;initial-value:rgba(255,255,255,.88)} @property --txt{syntax:'';inherits:true;initial-value:#1B1D3A} @property --mut{syntax:'';inherits:true;initial-value:#6A6D96} @property --line{syntax:'';inherits:true;initial-value:rgba(60,64,140,.14)} @property --hc1{syntax:'';inherits:true;initial-value:#1B1D3A} /* رڼا↔تیاره: رنګونه نرم بدلیږي (ټول گرادیینټونه هم نرم تغیر کوي) */ html{transition:--bg .6s ease,--bg2 .6s ease,--cream .6s ease,--glow .6s ease,--surf .6s ease,--surf2 .6s ease,--txt .6s ease,--mut .6s ease,--line .6s ease,--hc1 .6s ease; --gold1:color-mix(in srgb,var(--accent) 52%,#fff);--gold2:var(--accent);--gold3:color-mix(in srgb,var(--accent) 60%,#4a2c00);--on-gold:#2B1A00;--wrapw:min(1120px,100% - 40px);scroll-padding-top:92px} .wrap{width:var(--wrapw)} section[id]{scroll-margin-top:92px} /* د نیلي ټک/کلیک رنګ ټول ویب سایټ کې لرې */ *{-webkit-tap-highlight-color:transparent} a,button,summary,[role=button],input,select,textarea,label{-webkit-tap-highlight-color:transparent} button,.btn-zr,.nav a,.tseg,.menu-btn,.fq-q,.po-img{-webkit-user-select:none;user-select:none} a:focus:not(:focus-visible),button:focus:not(:focus-visible),[tabindex]:focus:not(:focus-visible){outline:none} :focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 80%,transparent);outline-offset:3px} ::selection{background:color-mix(in srgb,var(--accent) 38%,transparent);color:inherit} /* ===== مینو (سر برخه) ===== */ .top{position:fixed;top:0;inset-inline:0;z-index:50;padding:calc(12px + env(safe-area-inset-top)) 0 4px} .top .bar,.top.scrolled .bar{width:var(--wrapw);margin-inline:auto} .brand{flex:0 1 auto;align-items:center;gap:11px} .brand>span.bn{display:block;overflow:visible;text-overflow:clip;white-space:normal;line-height:1.18;font-size:clamp(.8rem,2.6vw,1.05rem);max-width:min(14em,42vw);text-wrap:balance} .brand-logo,.mark{flex:none} .nav{gap:2px} .nav a{position:relative;padding:9px 15px;white-space:nowrap} .nav a::after{content:"";position:absolute;left:50%;bottom:3px;width:0;height:2.5px;border-radius:3px;translate:-50% 0;background:var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 70%,transparent);transition:width .45s cubic-bezier(.2,.8,.2,1)} .nav a:hover::after{width:28%} .nav a.active{color:var(--txt)} .nav a.active::after{width:calc(100% - 30px)} .nav-login{display:none} @media(max-width:1020px){ .menu-btn{display:grid} .bar,.top.scrolled .bar{border-radius:26px} .nav{position:absolute;inset-inline:0;top:calc(100% + 8px);margin:0;flex-direction:column;align-items:stretch;gap:2px;padding:8px;border-radius:22px;background:var(--menu-bg);border:1px solid var(--line);box-shadow:0 22px 50px -18px rgba(30,24,110,.45);opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;transition:opacity .25s,transform .25s,visibility .25s} .top.menu-open .nav{opacity:1;visibility:visible;transform:none;pointer-events:auto} .nav a{padding:13px 16px;font-size:1rem;color:var(--txt);text-align:start} .nav a::after{left:auto;inset-inline-start:16px;translate:0 0;bottom:7px} .nav a.active::after{width:34px} .nav a:hover::after{width:22px} .top .bar>.tools{margin-inline-start:auto} } @media(max-width:461px){ .login-bar{display:none!important} .nav-login{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px;border-radius:var(--rb);font-weight:700;color:#fff!important;background:linear-gradient(135deg,var(--p),var(--p2));box-shadow:0 12px 26px -12px var(--p)} .nav-login::after{display:none} .nav-login span{display:inline} } @media(max-width:640px){.brand .mark{--mk:36px}.brand-logo{width:36px;height:36px}:root{--wrapw:calc(100% - 24px)}html{--wrapw:calc(100% - 24px)}} @media(max-width:380px){.brand>span.bn{display:block}.lang-cur{max-width:4.4em}} /* ===== لوګو نښان: زرین چوکاټ + ۳D الماس ===== */ .mark{--mk:40px;position:relative;display:grid;place-items:center;width:var(--mk);height:var(--mk);border-radius:calc(var(--mk)*.3);overflow:hidden;color:#fff; background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--accent) 45%,#fff),transparent 55%),linear-gradient(145deg,var(--gold1),var(--gold2) 50%,var(--gold3)); box-shadow:0 10px 24px -10px var(--accent),inset 0 1px 0 rgba(255,255,255,.65),inset 0 -2px 6px rgba(90,50,0,.25)} .mark.big{--mk:64px}.mark.xs{--mk:42px;border-radius:50%} .mk-sp{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);translate:-130% 0;animation:mk-sheen 4.8s ease-in-out infinite} @keyframes mk-sheen{0%,55%{translate:-130% 0}100%{translate:130% 0}} .gem3d{--u:calc(var(--mk)*.34);position:relative;width:calc(var(--u)*2.2);height:calc(var(--u)*2.2);perspective:calc(var(--u)*13);filter:drop-shadow(0 calc(var(--u)*.18) calc(var(--u)*.22) rgba(70,40,0,.45))} .gem-tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:translateY(calc(var(--u)*-.22)) rotateX(-17deg)} .gem{position:absolute;inset:0;transform-style:preserve-3d;animation:gem-spin 7.5s linear infinite;will-change:transform} @keyframes gem-spin{to{transform:rotateY(360deg)}} .fw{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:rotateY(calc(var(--k)*60deg))} .fu,.fl{position:absolute;display:block;width:var(--u);left:calc(var(--u)*-.5);backface-visibility:hidden;-webkit-backface-visibility:hidden} .fu{height:var(--u);top:calc(var(--u)*-1);transform-origin:50% 100%;transform:translateZ(calc(var(--u)*.866)) rotateX(60deg);clip-path:polygon(50% 0,0 100%,100% 100%);background:linear-gradient(170deg,#fff,#dcebff 55%,#b9d2ff)} .fl{height:calc(var(--u)*1.323);top:0;transform-origin:50% 0;transform:translateZ(calc(var(--u)*.866)) rotateX(-40.9deg);clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(180deg,#eaf3ff,#a9c6ff 60%,#7f9fe6)} .fw:nth-child(2n) .fu{background:linear-gradient(170deg,#f3f8ff,#bcd4ff 60%,#93b3f2)} .fw:nth-child(2n) .fl{background:linear-gradient(180deg,#cfe0ff,#86a6ee 60%,#5e80d2)} .fw:nth-child(3n) .fu{background:linear-gradient(170deg,#ffffff,#fff3d6 50%,#d9e6ff)} /* ===== هیرو ===== */ .hero{min-height:100vh;min-height:100dvh;display:flex;align-items:center;padding:calc(96px + env(safe-area-inset-top)) 0 clamp(40px,6vw,72px);overflow:visible;overflow-x:clip} .hero-grid{width:var(--wrapw)} .hero::before{background:radial-gradient(ellipse 50% 56% at 72% 42%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 100%),radial-gradient(ellipse 42% 46% at 80% 46%,color-mix(in srgb,var(--p) 26%,transparent),transparent 100%),radial-gradient(ellipse 34% 38% at 12% 62%,var(--glow),transparent 100%),radial-gradient(ellipse 30% 28% at 48% 16%,color-mix(in srgb,var(--fx-c) 24%,transparent),transparent 100%),conic-gradient(from 200deg at 70% 42%,transparent 0,color-mix(in srgb,var(--accent) 11%,transparent) 11%,transparent 26%,color-mix(in srgb,var(--p) 8%,transparent) 40%,transparent 56%); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 56%,rgba(0,0,0,.92) 63%,rgba(0,0,0,.74) 70%,rgba(0,0,0,.52) 77%,rgba(0,0,0,.31) 84%,rgba(0,0,0,.14) 91%,rgba(0,0,0,.04) 96%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 56%,rgba(0,0,0,.92) 63%,rgba(0,0,0,.74) 70%,rgba(0,0,0,.52) 77%,rgba(0,0,0,.31) 84%,rgba(0,0,0,.14) 91%,rgba(0,0,0,.04) 96%,transparent 100%)} .hero-bg{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.92) 60%,rgba(0,0,0,.74) 68%,rgba(0,0,0,.52) 76%,rgba(0,0,0,.3) 84%,rgba(0,0,0,.13) 91%,rgba(0,0,0,.04) 96%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 52%,rgba(0,0,0,.92) 60%,rgba(0,0,0,.74) 68%,rgba(0,0,0,.52) 76%,rgba(0,0,0,.3) 84%,rgba(0,0,0,.13) 91%,rgba(0,0,0,.04) 96%,transparent 100%)} .hero h1{font-size:clamp(var(--h1m),5.6vw,var(--h1d));font-weight:var(--hfw);font-style:var(--hit);color:var(--hc1);line-height:1.3;margin:20px 0 16px} .hl{color:var(--hc2);box-decoration-break:clone;-webkit-box-decoration-break:clone} html[data-hl=gradient] .hl{background:linear-gradient(100deg,color-mix(in srgb,var(--hc2) 55%,#fff) 0,var(--hc2) 30%,color-mix(in srgb,var(--hc2) 70%,#5a3600) 62%,color-mix(in srgb,var(--hc2) 55%,#fff) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:hl-shine 7s ease-in-out infinite} html[data-hl=underline] .hl{background:linear-gradient(var(--hc2),var(--hc2)) 0 100%/100% 3px no-repeat;padding-bottom:4px} @keyframes hl-shine{0%,100%{background-position:0 0}50%{background-position:100% 0}} .hero-vis{padding:clamp(34px,5vw,44px) clamp(40px,6vw,56px);cursor:default} .hv-scale{width:100%;display:grid;place-items:center;transform:scale(var(--sc,1));transform-style:preserve-3d;transition:transform .3s ease-out;will-change:transform} .hv-frame{--cs:1} .hv-card{--tx:0%;--ty:0%;position:absolute;z-index:3;padding:calc(11px*var(--cs)) calc(18px*var(--cs)) calc(11px*var(--cs)) calc(11px*var(--cs));gap:calc(12px*var(--cs))} [dir=rtl] .hv-card{padding:calc(11px*var(--cs)) calc(11px*var(--cs)) calc(11px*var(--cs)) calc(18px*var(--cs))} .hv-card b{font-size:calc(.95rem*var(--cs))}.hv-card small{font-size:calc(.78rem*var(--cs))} .hv-ic{width:calc(40px*var(--cs));height:calc(40px*var(--cs))} .hv1,.hv2,.hv-karat{translate:0 0;transform:translate3d(calc(var(--tx) + var(--mx)*18px),calc(var(--ty) + var(--my)*14px),70px)} .hv1{top:14%;inset-inline-start:0;--tx:-50%;bottom:auto;inset-inline-end:auto} .hv2{bottom:20%;top:auto;inset-inline-end:0;inset-inline-start:auto;--tx:50%} [dir=rtl] .hv1{--tx:50%}[dir=rtl] .hv2{--tx:-50%} .hv-karat{bottom:0;top:auto;inset-inline-start:12%;inset-inline-end:auto;--ty:50%} html[data-anim="1"] .hv1{animation:hv-bob 7s ease-in-out infinite} html[data-anim="1"] .hv2{animation:hv-bob 8.5s ease-in-out -2.5s infinite} html[data-anim="1"] .hv-karat{animation:hv-bob 9.5s ease-in-out -4s infinite} .hv-karat strong{font-weight:800} @media(max-width:900px){.hv-frame{--cs:.92;max-width:360px}.hero-grid{gap:20px}.hero{padding-top:calc(88px + env(safe-area-inset-top))}} @media(max-width:640px){ .hv-frame{--cs:.84;max-width:300px} .hero-vis{padding:62px 12px 46px} .hv1{top:0;inset-inline-start:7%;--tx:0%;--ty:-50%}[dir=rtl] .hv1{--tx:0%} .hv-karat{top:0;bottom:auto;inset-inline-start:auto;inset-inline-end:7%;--ty:-50%} .hv2{bottom:0;inset-inline-end:7%;--tx:0%;--ty:50%}[dir=rtl] .hv2{--tx:0%} } /* ===== برخې ===== */ .sec{padding:clamp(34px,6vw,76px) 0} .sec-head{text-align:center;margin-bottom:clamp(24px,4vw,42px)} .sec-head .sec-t{margin-bottom:10px}.sec-head .sec-sub{margin:0 auto} .eyebrow{display:inline-block;margin-bottom:12px;padding:5px 15px;border-radius:99px;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)} [dir=rtl] .eyebrow{letter-spacing:0;text-transform:none;font-size:.88rem} .sec-t::after{background:linear-gradient(90deg,transparent,var(--accent),transparent);width:84px} /* ښکاره کیدل: له ښکته نرم راځي (translate، نو د hover سره نه ټکریږي) */ .rv .rev,.rv .rev.in{transform:none} .rv .rev{--d:calc(var(--i,0)*.1s);opacity:0;translate:0 34px;scale:.975;transition:opacity .9s ease var(--d),translate .9s cubic-bezier(.2,.7,.2,1) var(--d),scale .9s cubic-bezier(.2,.7,.2,1) var(--d)} .rv .rev.in{opacity:1;translate:0 0;scale:1} .rv .rev.lift{transition:opacity .9s ease var(--d),translate .9s cubic-bezier(.2,.7,.2,1) var(--d),scale .9s cubic-bezier(.2,.7,.2,1) var(--d),transform .3s ease,box-shadow .3s ease,border-color .3s ease} @media(prefers-reduced-motion:reduce){.rv .rev{opacity:1;translate:none;scale:1}} html[data-hover="1"] .lift:hover{box-shadow:var(--sh),0 24px 46px -22px color-mix(in srgb,var(--accent) 50%,transparent);border-color:color-mix(in srgb,var(--accent) 38%,var(--line))} /* زموږ په اړه */ .about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px} .about{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:none;margin:0;padding:clamp(26px,4vw,42px)} .about p{font-size:clamp(1rem,1.5vw,1.12rem);line-height:2;color:var(--mut)} .ab-ring{position:absolute;inset-inline-end:-70px;top:-70px;width:230px;height:230px;border-radius:50%;border:1px dashed color-mix(in srgb,var(--accent) 60%,transparent);animation:spin 46s linear infinite;pointer-events:none} .ab-ring::after{content:"";position:absolute;inset:26px;border-radius:50%;border:1px solid color-mix(in srgb,var(--accent) 32%,transparent)} @keyframes spin{to{rotate:360deg}} .ab-feat{display:grid;gap:14px;align-content:stretch} .ab-f{display:flex;align-items:center;gap:16px;padding:20px 22px} .ab-fi{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;flex:none;color:var(--on-gold);background:linear-gradient(135deg,var(--gold1),var(--gold2) 55%,var(--gold3));box-shadow:0 10px 22px -10px var(--accent);transition:transform .5s cubic-bezier(.2,.8,.2,1)} .ab-fi svg,.ab-fi i{width:24px;height:24px} .ab-f:hover .ab-fi{transform:rotate(-8deg) scale(1.08)} .ab-f b{display:block;font-weight:700;margin-bottom:2px}.ab-f small{display:block;color:var(--mut);font-size:.88rem;line-height:1.6} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:20px;overflow:hidden} .stat{position:relative;padding:28px 14px;text-align:center} .stat+.stat::before{content:"";position:absolute;inset-inline-start:0;top:24%;bottom:24%;width:1px;background:linear-gradient(180deg,transparent,var(--line),transparent)} .stat strong{display:inline-flex;align-items:baseline;gap:2px;direction:ltr;font-size:clamp(1.9rem,4.2vw,2.8rem);line-height:1.1;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent)} .stat em{font-style:normal;font-size:.62em} .stat small{display:block;margin-top:6px;color:var(--mut);font-size:.9rem} @media(max-width:900px){.about-grid{grid-template-columns:1fr}.about{align-items:center;text-align:center}.ab-ring{inset-inline-end:-90px}} @media(max-width:560px){.stat+.stat::before{display:none}} /* خدمتونه */ .svcs{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))} .svc{position:relative;overflow:hidden;padding:32px 24px 26px} .svc::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s;background:radial-gradient(360px 200px at 100% 0,color-mix(in srgb,var(--accent) 20%,transparent),transparent 62%)} .svc:hover::before{opacity:1} .svc::after{content:"";position:absolute;inset-inline:24px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,transparent,var(--accent),transparent);scale:0 1;transition:scale .5s cubic-bezier(.2,.8,.2,1)} .svc:hover::after{scale:1 1} .svc-n{position:absolute;left:20px;right:auto;top:14px;direction:ltr;font-size:2.4rem;font-weight:800;line-height:1;color:color-mix(in srgb,var(--accent) 24%,transparent);transition:color .4s} .svc:hover .svc-n{color:color-mix(in srgb,var(--accent) 60%,transparent)} .svc .ic{transition:transform .55s cubic-bezier(.2,.8,.2,1)}.svc:hover .ic{transform:rotate(-8deg) scale(1.1)} /* نشرات: په منځ کې د فیسبوک په څېر فید؛ لاندې لایک او لیکنه */ .posts{display:flex;flex-direction:column;align-items:center;gap:26px} .post{width:min(100%,560px);padding:0;overflow:hidden} .po-h{display:flex;align-items:center;gap:12px;padding:14px 18px} .po-av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;background:linear-gradient(135deg,var(--gold1),var(--gold3))} .po-av img{width:100%;height:100%;object-fit:cover} .po-h b{display:block;font-weight:700;line-height:1.3}.po-h small{display:block;color:var(--mut);font-size:.8rem} .po-img{display:grid;place-items:center;width:100%;padding:0;border:0;background:color-mix(in srgb,var(--txt) 7%,transparent);cursor:zoom-in;overflow:hidden} .po-img img{display:block;width:100%;height:auto;max-height:min(78vh,640px);object-fit:contain;margin-inline:auto;transition:transform .7s cubic-bezier(.2,.7,.2,1)} .po-img:hover img{transform:scale(1.03)} .po-act{display:flex;align-items:center;padding:8px 12px 2px;border-bottom:0} .po-like{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:0;border-radius:999px;background:transparent;color:var(--mut);font:inherit;font-weight:700;font-size:.95rem;cursor:pointer;transition:background .25s,color .25s} .po-like:hover{background:color-mix(in srgb,#ff3b5c 10%,transparent);color:#ff3b5c} .po-like svg{width:24px;height:24px;transition:transform .35s cubic-bezier(.3,1.6,.5,1),fill .2s} .po-like.on{color:#ff3b5c}.po-like.on svg{fill:#ff3b5c} .po-like.pop svg{animation:heart-pop .5s cubic-bezier(.3,1.6,.5,1)} @keyframes heart-pop{0%{transform:scale(1)}40%{transform:scale(1.5)}100%{transform:scale(1)}} .po-n{font-weight:800;font-variant-numeric:tabular-nums} .po-b{padding:6px 18px 20px} .po-t{color:var(--txt);font-size:1rem;line-height:1.9;overflow-wrap:anywhere} .po-t.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .po-more{margin-top:6px;padding:4px 0;border:0;background:none;color:var(--accent);font:inherit;font-weight:700;cursor:pointer} .lb{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(6,6,22,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .35s ease} .lb[hidden]{display:none}.lb.show{opacity:1} .lb img{max-width:min(94vw,1100px);max-height:86dvh;border-radius:18px;box-shadow:0 40px 90px -30px #000;transform:scale(.94);transition:transform .45s cubic-bezier(.2,.8,.2,1)} .lb.show img{transform:none} .lb-x{position:absolute;top:calc(14px + env(safe-area-inset-top));inset-inline-end:14px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;cursor:pointer;transition:background .2s,transform .2s} .lb-x:hover{background:var(--p);color:#fff;transform:rotate(90deg)}.lb-x svg{width:22px;height:22px} /* ویډیوګانې */ .vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:22px} .vid{padding:0;overflow:hidden} .vd-box{aspect-ratio:16/9;background:#06061a}.vd-box video{display:block;width:100%;height:100%;object-fit:contain;background:#000} .vd-box.bad::after{content:attr(data-err);position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;color:#fff;background:rgba(6,6,26,.82);font-weight:600}.vd-box{position:relative} .vd-b{padding:16px 20px 20px}.vd-b h3{font-size:1.1rem;font-weight:800}.vd-b p{margin-top:6px;color:var(--mut)} /* ډېر پوښتل شوې پوښتنې */ .faq{display:grid;gap:12px;max-width:860px;margin-inline:auto} .fq{padding:0;overflow:hidden} html[data-hover="1"] .fq.lift:hover{transform:translateY(-4px)} .fq.open{border-color:color-mix(in srgb,var(--accent) 50%,var(--line))} .fq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:19px 22px;border:0;background:none;color:var(--txt);font:inherit;font-weight:700;font-size:1.02rem;text-align:start;cursor:pointer} .fq-ic{position:relative;flex:none;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--accent) 16%,transparent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);transition:background .35s,transform .45s cubic-bezier(.3,1.3,.5,1)} .fq-ic b{position:absolute;left:50%;top:50%;width:13px;height:2.2px;border-radius:2px;background:var(--accent);translate:-50% -50%;transition:rotate .4s cubic-bezier(.3,1.3,.5,1),opacity .3s,background .3s} .fq-ic b+b{rotate:90deg} .fq.open .fq-ic{background:var(--accent);transform:rotate(180deg)} .fq.open .fq-ic b{background:#2B1A00}.fq.open .fq-ic b+b{rotate:0deg;opacity:0} .fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1)} .fq-a>div{overflow:hidden;min-height:0} .fq-a p{padding:0 22px 22px;color:var(--mut);line-height:1.95;opacity:0;translate:0 -6px;transition:opacity .4s ease .05s,translate .4s ease .05s} .fq.open .fq-a{grid-template-rows:1fr}.fq.open .fq-a p{opacity:1;translate:0 0} /* نقشه */ .mapbox{position:relative;overflow:hidden;width:100%;height:clamp(300px,38vw,460px);border-radius:calc(var(--r) + 6px)} .mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;transition:filter .6s ease} html[data-theme=dark] .mapbox.mapdark iframe{filter:invert(.92) hue-rotate(180deg) saturate(.75) brightness(.95) contrast(.92)} .map-open{position:absolute;inset-inline-start:14px;bottom:14px;z-index:2} .map-open span{display:inline!important}.btn-zr.sm.map-open{width:auto;min-width:0;height:auto;padding:10px 18px;border-radius:var(--rb)} @media(max-width:640px){.mapbox{height:340px}} /* ===== فوټر: رڼا/تیاره سلایډر ===== */ .tseg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;gap:0;padding:4px} .ts-pill{position:absolute;top:4px;bottom:4px;inset-inline-start:4px;width:calc(50% - 4px);border-radius:999px;background:linear-gradient(135deg,var(--p),var(--p2));box-shadow:0 8px 20px -10px var(--p);transition:transform .5s cubic-bezier(.3,1.15,.4,1)} html[data-theme=dark] .ts-pill{transform:translateX(100%)} html[dir=rtl][data-theme=dark] .ts-pill{transform:translateX(-100%)} .tseg button{position:relative;z-index:1;justify-content:center;background:transparent!important;box-shadow:none!important;color:var(--mut)} .tseg button[aria-pressed=true]{color:#fff} .sfoot{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--surf) 78%,transparent) 30%)} html[data-theme=dark] .glass{border-color:rgba(255,255,255,.1);box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.07)} html[data-theme=dark] .hero::before{filter:saturate(1.15)} @media(prefers-reduced-motion:reduce){.gem{animation:none}.mk-sp{animation:none}.hl{animation:none!important}} html[dir=ltr] .svc-n{left:auto;right:20px} /* ===== v7.1: ګرادیینټونه نور هم نرم او لوکس (ډېر پړاوه نرم کنارې + نرۍ دانه چې بانډینګ نه ښکاري) ===== */ body{background:radial-gradient(ellipse 70% 55% at 6% 4%,color-mix(in srgb,var(--accent) 20.0%,transparent) 0%,color-mix(in srgb,var(--accent) 19.5%,transparent) 8%,color-mix(in srgb,var(--accent) 18.1%,transparent) 17%,color-mix(in srgb,var(--accent) 15.9%,transparent) 25%,color-mix(in srgb,var(--accent) 13.3%,transparent) 33%,color-mix(in srgb,var(--accent) 10.6%,transparent) 42%,color-mix(in srgb,var(--accent) 8.0%,transparent) 50%,color-mix(in srgb,var(--accent) 5.8%,transparent) 58%,color-mix(in srgb,var(--accent) 4.0%,transparent) 67%,color-mix(in srgb,var(--accent) 2.6%,transparent) 75%,color-mix(in srgb,var(--accent) 1.6%,transparent) 83%,color-mix(in srgb,var(--accent) 0.9%,transparent) 92%,color-mix(in srgb,var(--accent) 0.0%,transparent) 100%),radial-gradient(ellipse 60% 50% at 100% 38%,color-mix(in srgb,var(--p) 16.0%,transparent) 0%,color-mix(in srgb,var(--p) 15.6%,transparent) 8%,color-mix(in srgb,var(--p) 14.5%,transparent) 17%,color-mix(in srgb,var(--p) 12.7%,transparent) 25%,color-mix(in srgb,var(--p) 10.7%,transparent) 33%,color-mix(in srgb,var(--p) 8.5%,transparent) 42%,color-mix(in srgb,var(--p) 6.4%,transparent) 50%,color-mix(in srgb,var(--p) 4.6%,transparent) 58%,color-mix(in srgb,var(--p) 3.2%,transparent) 67%,color-mix(in srgb,var(--p) 2.1%,transparent) 75%,color-mix(in srgb,var(--p) 1.3%,transparent) 83%,color-mix(in srgb,var(--p) 0.7%,transparent) 92%,color-mix(in srgb,var(--p) 0.0%,transparent) 100%),radial-gradient(ellipse 70% 55% at 0% 100%,color-mix(in srgb,var(--p) 12.0%,transparent) 0%,color-mix(in srgb,var(--p) 11.7%,transparent) 8%,color-mix(in srgb,var(--p) 10.8%,transparent) 17%,color-mix(in srgb,var(--p) 9.6%,transparent) 25%,color-mix(in srgb,var(--p) 8.0%,transparent) 33%,color-mix(in srgb,var(--p) 6.4%,transparent) 42%,color-mix(in srgb,var(--p) 4.8%,transparent) 50%,color-mix(in srgb,var(--p) 3.5%,transparent) 58%,color-mix(in srgb,var(--p) 2.4%,transparent) 67%,color-mix(in srgb,var(--p) 1.5%,transparent) 75%,color-mix(in srgb,var(--p) 1.0%,transparent) 83%,color-mix(in srgb,var(--p) 0.6%,transparent) 92%,color-mix(in srgb,var(--p) 0.0%,transparent) 100%),radial-gradient(ellipse 60% 50% at 100% 100%,color-mix(in srgb,var(--accent) 16.0%,transparent) 0%,color-mix(in srgb,var(--accent) 15.6%,transparent) 8%,color-mix(in srgb,var(--accent) 14.5%,transparent) 17%,color-mix(in srgb,var(--accent) 12.7%,transparent) 25%,color-mix(in srgb,var(--accent) 10.7%,transparent) 33%,color-mix(in srgb,var(--accent) 8.5%,transparent) 42%,color-mix(in srgb,var(--accent) 6.4%,transparent) 50%,color-mix(in srgb,var(--accent) 4.6%,transparent) 58%,color-mix(in srgb,var(--accent) 3.2%,transparent) 67%,color-mix(in srgb,var(--accent) 2.1%,transparent) 75%,color-mix(in srgb,var(--accent) 1.3%,transparent) 83%,color-mix(in srgb,var(--accent) 0.7%,transparent) 92%,color-mix(in srgb,var(--accent) 0.0%,transparent) 100%),linear-gradient(165deg,var(--bg) 0%,var(--bg2) 58%,var(--cream,var(--bg2)) 100%) fixed;background-color:var(--bg)} .hero::before{background:radial-gradient(ellipse 52% 58% at 72% 40%,color-mix(in srgb,var(--accent) 30.0%,transparent) 0%,color-mix(in srgb,var(--accent) 29.3%,transparent) 8%,color-mix(in srgb,var(--accent) 27.1%,transparent) 17%,color-mix(in srgb,var(--accent) 23.9%,transparent) 25%,color-mix(in srgb,var(--accent) 20.0%,transparent) 33%,color-mix(in srgb,var(--accent) 15.9%,transparent) 42%,color-mix(in srgb,var(--accent) 12.1%,transparent) 50%,color-mix(in srgb,var(--accent) 8.7%,transparent) 58%,color-mix(in srgb,var(--accent) 5.9%,transparent) 67%,color-mix(in srgb,var(--accent) 3.9%,transparent) 75%,color-mix(in srgb,var(--accent) 2.4%,transparent) 83%,color-mix(in srgb,var(--accent) 1.4%,transparent) 92%,color-mix(in srgb,var(--accent) 0.0%,transparent) 100%),radial-gradient(ellipse 46% 52% at 82% 52%,color-mix(in srgb,var(--p) 34.0%,transparent) 0%,color-mix(in srgb,var(--p) 33.2%,transparent) 8%,color-mix(in srgb,var(--p) 30.7%,transparent) 17%,color-mix(in srgb,var(--p) 27.1%,transparent) 25%,color-mix(in srgb,var(--p) 22.7%,transparent) 33%,color-mix(in srgb,var(--p) 18.1%,transparent) 42%,color-mix(in srgb,var(--p) 13.7%,transparent) 50%,color-mix(in srgb,var(--p) 9.8%,transparent) 58%,color-mix(in srgb,var(--p) 6.7%,transparent) 67%,color-mix(in srgb,var(--p) 4.4%,transparent) 75%,color-mix(in srgb,var(--p) 2.7%,transparent) 83%,color-mix(in srgb,var(--p) 1.6%,transparent) 92%,color-mix(in srgb,var(--p) 0.0%,transparent) 100%),radial-gradient(ellipse 40% 44% at 8% 60%,color-mix(in srgb,var(--accent) 20.0%,transparent) 0%,color-mix(in srgb,var(--accent) 19.5%,transparent) 8%,color-mix(in srgb,var(--accent) 18.1%,transparent) 17%,color-mix(in srgb,var(--accent) 15.9%,transparent) 25%,color-mix(in srgb,var(--accent) 13.3%,transparent) 33%,color-mix(in srgb,var(--accent) 10.6%,transparent) 42%,color-mix(in srgb,var(--accent) 8.0%,transparent) 50%,color-mix(in srgb,var(--accent) 5.8%,transparent) 58%,color-mix(in srgb,var(--accent) 4.0%,transparent) 67%,color-mix(in srgb,var(--accent) 2.6%,transparent) 75%,color-mix(in srgb,var(--accent) 1.6%,transparent) 83%,color-mix(in srgb,var(--accent) 0.9%,transparent) 92%,color-mix(in srgb,var(--accent) 0.0%,transparent) 100%),radial-gradient(ellipse 36% 36% at 46% 12%,color-mix(in srgb,var(--fx-c) 26.0%,transparent) 0%,color-mix(in srgb,var(--fx-c) 25.4%,transparent) 8%,color-mix(in srgb,var(--fx-c) 23.5%,transparent) 17%,color-mix(in srgb,var(--fx-c) 20.7%,transparent) 25%,color-mix(in srgb,var(--fx-c) 17.3%,transparent) 33%,color-mix(in srgb,var(--fx-c) 13.8%,transparent) 42%,color-mix(in srgb,var(--fx-c) 10.5%,transparent) 50%,color-mix(in srgb,var(--fx-c) 7.5%,transparent) 58%,color-mix(in srgb,var(--fx-c) 5.1%,transparent) 67%,color-mix(in srgb,var(--fx-c) 3.3%,transparent) 75%,color-mix(in srgb,var(--fx-c) 2.1%,transparent) 83%,color-mix(in srgb,var(--fx-c) 1.2%,transparent) 92%,color-mix(in srgb,var(--fx-c) 0.0%,transparent) 100%),radial-gradient(ellipse 60% 40% at 50% 100%,color-mix(in srgb,var(--p) 12.0%,transparent) 0%,color-mix(in srgb,var(--p) 11.7%,transparent) 8%,color-mix(in srgb,var(--p) 10.8%,transparent) 17%,color-mix(in srgb,var(--p) 9.6%,transparent) 25%,color-mix(in srgb,var(--p) 8.0%,transparent) 33%,color-mix(in srgb,var(--p) 6.4%,transparent) 42%,color-mix(in srgb,var(--p) 4.8%,transparent) 50%,color-mix(in srgb,var(--p) 3.5%,transparent) 58%,color-mix(in srgb,var(--p) 2.4%,transparent) 67%,color-mix(in srgb,var(--p) 1.5%,transparent) 75%,color-mix(in srgb,var(--p) 1.0%,transparent) 83%,color-mix(in srgb,var(--p) 0.6%,transparent) 92%,color-mix(in srgb,var(--p) 0.0%,transparent) 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 50%,rgba(0,0,0,0.971) 54%,rgba(0,0,0,0.890) 58%,rgba(0,0,0,0.769) 62%,rgba(0,0,0,0.627) 67%,rgba(0,0,0,0.482) 71%,rgba(0,0,0,0.350) 75%,rgba(0,0,0,0.239) 79%,rgba(0,0,0,0.154) 83%,rgba(0,0,0,0.094) 88%,rgba(0,0,0,0.054) 92%,rgba(0,0,0,0.029) 96%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 50%,rgba(0,0,0,0.971) 54%,rgba(0,0,0,0.890) 58%,rgba(0,0,0,0.769) 62%,rgba(0,0,0,0.627) 67%,rgba(0,0,0,0.482) 71%,rgba(0,0,0,0.350) 75%,rgba(0,0,0,0.239) 79%,rgba(0,0,0,0.154) 83%,rgba(0,0,0,0.094) 88%,rgba(0,0,0,0.054) 92%,rgba(0,0,0,0.029) 96%,transparent 100%)} .hero-bg{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 50%,rgba(0,0,0,0.971) 54%,rgba(0,0,0,0.890) 58%,rgba(0,0,0,0.769) 62%,rgba(0,0,0,0.627) 67%,rgba(0,0,0,0.482) 71%,rgba(0,0,0,0.350) 75%,rgba(0,0,0,0.239) 79%,rgba(0,0,0,0.154) 83%,rgba(0,0,0,0.094) 88%,rgba(0,0,0,0.054) 92%,rgba(0,0,0,0.029) 96%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 50%,rgba(0,0,0,0.971) 54%,rgba(0,0,0,0.890) 58%,rgba(0,0,0,0.769) 62%,rgba(0,0,0,0.627) 67%,rgba(0,0,0,0.482) 71%,rgba(0,0,0,0.350) 75%,rgba(0,0,0,0.239) 79%,rgba(0,0,0,0.154) 83%,rgba(0,0,0,0.094) 88%,rgba(0,0,0,0.054) 92%,rgba(0,0,0,0.029) 96%,transparent 100%)} .bgfx::after{content:"";position:absolute;inset:0;opacity:.06;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml;utf8,");pointer-events:none} html[data-theme=dark] .bgfx::after{opacity:.09} .sec{position:relative} .hero::before{opacity:.85} /* ===== v7.2: لوکس کارتونه (عکس + ویډیو یو ډول) او د سرلیک نوی ښکلی نخښه ===== */ .sec-t{position:relative;padding-bottom:30px;margin-bottom:12px} .sec-t::after{content:"";display:block;position:absolute;left:50%;bottom:9px;width:min(240px,64%);height:2px;margin:0;border-radius:2px;translate:-50% 0;transform-origin:center; background:linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--accent) 85%,transparent) 28%,transparent 45%,transparent 55%,color-mix(in srgb,var(--accent) 85%,transparent) 72%,transparent 100%); transition:scale 1.1s cubic-bezier(.2,.8,.2,1) .25s} .sec-t::before{content:"";position:absolute;left:50%;bottom:4px;width:11px;height:11px;border-radius:2.5px;translate:-50% 0;rotate:45deg; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 50%,#fff),var(--accent) 55%,color-mix(in srgb,var(--accent) 60%,#4a2c00)); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent),0 0 18px color-mix(in srgb,var(--accent) 65%,transparent); transition:scale .8s cubic-bezier(.3,1.5,.5,1) .55s} .rv .rev .sec-t::after{scale:0 1}.rv .rev .sec-t::before{scale:0} .rv .rev.in .sec-t::after{scale:1 1}.rv .rev.in .sec-t::before{scale:1;animation:orn 5s ease-in-out 1.6s infinite} @keyframes orn{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent),0 0 14px color-mix(in srgb,var(--accent) 55%,transparent)}50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 6%,transparent),0 0 26px color-mix(in srgb,var(--accent) 85%,transparent)}} @media(prefers-reduced-motion:reduce){.rv .rev .sec-t::after{scale:1 1}.rv .rev .sec-t::before{scale:1}} .posts{gap:34px} .post{width:min(100%,540px);border-radius:calc(var(--r) + 8px);padding-bottom:4px;box-shadow:var(--sh),0 34px 70px -40px color-mix(in srgb,var(--accent) 45%,transparent);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s} .post:hover{transform:translateY(-6px);box-shadow:var(--sh),0 44px 80px -36px color-mix(in srgb,var(--accent) 60%,transparent)} .post::before{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1.4px;pointer-events:none; background:linear-gradient(150deg,color-mix(in srgb,var(--accent) 80%,transparent),transparent 30%,transparent 68%,color-mix(in srgb,var(--accent) 55%,transparent)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)} .po-h{padding:16px 20px 14px} .po-av{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 60%,transparent),0 8px 18px -8px var(--accent)} .po-img,.vd-box{position:relative;display:block;width:calc(100% - 28px);margin:0 14px;aspect-ratio:1/1;border-radius:calc(var(--r) - 2px);overflow:hidden;background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--accent) 25%,#14122e),#0a0a1c);box-shadow:0 22px 40px -24px rgba(20,16,60,.6)} .po-img img{width:100%;height:100%;max-height:none;object-fit:cover;scale:1.14;transition:scale 1.6s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)} .post.in .po-img img{scale:1} .po-img:hover img{transform:scale(1.05)} .po-img::before{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(180deg,transparent,rgba(10,8,30,.34));pointer-events:none;z-index:1} .po-img::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.38) 50%,transparent 62%);translate:-130% 0;transition:translate 1s ease} .po-img:hover::after{translate:130% 0} .vd-box video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent} .vd-box::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);pointer-events:none} .vd-box.bad::after{content:attr(data-err);inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:#fff;background:rgba(6,6,26,.85);font-weight:600;box-shadow:none} .po-act{padding:10px 16px 0} .po-like{padding:9px 16px;background:color-mix(in srgb,var(--txt) 5%,transparent)} .po-b{padding:8px 22px 22px} .vd-t{font-size:1.1rem;font-weight:800;margin-bottom:4px} .post.rev{--d:.05s} @media(max-width:560px){.post{width:100%}.po-img,.vd-box{width:calc(100% - 20px);margin:0 10px}.po-h{padding:14px 16px 12px}} /* ===================================================================== v7.3 (فرنټ اینډ ترمیمات) ===================================================================== */ /* 1) د مینو لاندې کرښه: کلیک/فعال کې یوازې ۵۰٪ (نیمه) */ .nav a.active::after{width:50%} .nav a:hover::after{width:30%} @media(max-width:1020px){ .nav a.active::after{width:34px} .nav a:hover::after{width:22px} } /* 2) تیاره بڼه: شاته ابي/تیز ګرادیینټ او رڼا لرې (پاک، آرام شالید) */ html[data-theme=dark] body{background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%) fixed;background-color:var(--bg)} html[data-theme=dark] .hero::before{display:none} html[data-theme=dark] .hero-bg,html[data-theme=dark] .bgfx i{display:none} html[data-theme=dark] .bgfx::after{opacity:.05} html[data-theme=dark] .hv-frame{box-shadow:0 40px 70px -40px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent)} html[data-theme=dark] .hero-vis.on .hv-frame{box-shadow:0 50px 80px -40px rgba(0,0,0,.75),0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent)} html[data-theme=dark] .tc-stage::before{display:none} /* 3) رڼا بڼه: د لوی سرلیک رنګونه لږ تیاره (زیړ برخه هم تیاره، پاتې برخه نور تور) */ html[data-theme=light] .hero h1{color:color-mix(in srgb,var(--hc1) 62%,#000)} html[data-theme=light] .hl{color:color-mix(in srgb,var(--hc2) 74%,#2a1700)} html[data-theme=light][data-hl=gradient] .hl{background-image:linear-gradient(100deg,color-mix(in srgb,var(--hc2) 78%,#6b4400) 0,color-mix(in srgb,var(--hc2) 70%,#2a1700) 34%,color-mix(in srgb,var(--hc2) 58%,#1c0f00) 66%,color-mix(in srgb,var(--hc2) 78%,#6b4400) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} html[data-theme=light][data-hl=underline] .hl{background:linear-gradient(var(--hc2),var(--hc2)) 0 100%/100% 3px no-repeat;color:color-mix(in srgb,var(--hc2) 74%,#2a1700)} /* 5) د عکس/ویډیو عمودي اندازه کمه (مخکې مربع ۱:۱ وه) */ .po-img,.vd-box{aspect-ratio:4/3} .vd-box{aspect-ratio:16/10} .po-img img{object-position:center} @media(max-width:560px){.po-img{aspect-ratio:4/3}.vd-box{aspect-ratio:16/10}} /* 6) د چټکو لینکونو (فوټر) غشی: پوینټر راشي، غشی څرګندیږي */ .sf-col>a:not(.sf-row){position:relative;display:flex;align-items:center;gap:0} .sf-col>a:not(.sf-row)::before{content:"";flex:none;width:0;height:14px;opacity:0;margin-inline-end:0;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:width .3s cubic-bezier(.2,.8,.2,1),opacity .25s,margin .3s} [dir=rtl] .sf-col>a:not(.sf-row)::before{transform:scaleX(-1)} .sf-col>a:not(.sf-row):hover::before,.sf-col>a:not(.sf-row):focus-visible::before{width:16px;opacity:1;margin-inline-end:8px} .sf-col>a:not(.sf-row):hover{padding-inline-start:0;color:var(--txt)} /* 4) د هیرو شیپونه (کارټونه): په موبایل او وړو سکرینونو کې پر انځور لږ ښکته/پورته ننوځي، او «۲۴ قیراط» تل د لاندې کارټ څخه لږ پورته پاتې کیږي (نه سر ته ځي) */ @media(max-width:900px) and (min-width:641px){ .hv-karat{bottom:7%;--ty:0%} .hv2{bottom:2%;--ty:35%} .hv1{top:9%} } @media(max-width:640px){ .hero-vis{padding:34px 12px 34px} .hv1{top:5%;inset-inline-start:5%;--tx:0%;--ty:0%}[dir=rtl] .hv1{--tx:0%} .hv-karat{top:auto;bottom:23%;inset-inline-start:5%;inset-inline-end:auto;--tx:0%;--ty:0%} .hv2{top:auto;bottom:6%;inset-inline-end:5%;inset-inline-start:auto;--tx:0%;--ty:0%}[dir=rtl] .hv2{--tx:0%} } @media(max-width:380px){ .hv-frame{--cs:.78} .hv-karat{bottom:25%} } /* ===================================================================== v7.4 ===================================================================== */ /* --- نیوبار: په انګلیسي کې هم نه خرابیږي --- */ .btn-zr,.lang-btn,.nav a{white-space:nowrap} .login-bar,.tools,.menu-btn{flex:none} .brand{flex:0 1 auto;min-width:0} .brand>span.bn{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;white-space:normal;max-width:min(13em,34vw);font-size:clamp(.8rem,1.15vw,.98rem);line-height:1.25;padding-block:2px;text-wrap:balance} @media(min-width:1101px) and (max-width:1260px){ .nav a{padding:9px clamp(8px,.85vw,12px);font-size:.93rem} .bar{gap:10px} .brand>span.bn{max-width:11.5em} } @media(max-width:1100px){ .menu-btn{display:grid} .bar,.top.scrolled .bar{border-radius:26px} .nav{position:absolute;inset-inline:0;top:calc(100% + 8px);margin:0;flex-direction:column;align-items:stretch;gap:2px;padding:8px;border-radius:22px;background:var(--menu-bg);border:1px solid var(--line);box-shadow:0 22px 50px -18px rgba(30,24,110,.45);opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;transition:opacity .25s,transform .25s,visibility .25s} .top.menu-open .nav{opacity:1;visibility:visible;transform:none;pointer-events:auto} .nav a{padding:13px 16px;font-size:1rem;color:var(--txt);text-align:start} .nav a::after{left:auto;inset-inline-start:16px;translate:0 0;bottom:7px} .nav a.active::after{width:34px} .nav a:hover::after{width:22px} .top .bar>.tools{margin-inline-start:auto} .brand>span.bn{max-width:min(16em,46vw)} } @media(max-width:640px){ .brand{flex:1 1 0;gap:8px} .brand>span.bn{max-width:none;font-size:clamp(.68rem,3.3vw,.84rem);line-height:1.25} } /* د ژبې بټن: په موبایل کې لیکنه نه پرې کیږي */ .lang-btn{height:auto;min-height:38px;padding-block:4px} .lang-cur{line-height:1.7;padding-block:2px;overflow:visible;max-width:none} @media(max-width:640px){.lang-btn{min-height:36px}} @media(max-width:380px){.lang-cur{max-width:5.6em;overflow:hidden;text-overflow:ellipsis}} /* د مینو «ننوتل» بټن: hover/click کې نه خړیږي */ .nav a.nav-login:hover,.nav a.nav-login:focus,.nav a.nav-login:active,.nav a.nav-login.active{background:linear-gradient(135deg,var(--p),var(--p2));color:#fff!important} .nav a.nav-login:hover,.nav a.nav-login:active{filter:brightness(1.07)} .btn-zr:hover,.btn-zr:focus,.btn-zr:active{color:#fff} .btn-zr.alt:hover,.btn-zr.alt:focus,.btn-zr.alt:active{color:var(--txt)} html[data-btn=outline] .btn-zr:hover{color:var(--p)} /* رڼا بڼه: د سرلیک پاتې برخه نوره تور */ html[data-theme=light] .hero h1{color:color-mix(in srgb,var(--hc1) 22%,#000)} /* هیرو: شیپونه له سکرین سره نه نښلي */ @media(max-width:900px){ .hero-vis{padding-inline:clamp(26px,7vw,48px)} .hv1{--tx:-8%;inset-inline-start:3%}[dir=rtl] .hv1{--tx:8%} .hv2{--tx:8%;inset-inline-end:3%}[dir=rtl] .hv2{--tx:-8%} } @media(max-width:640px){ .hero-vis{padding-inline:30px} .hv1{--tx:0%}[dir=rtl] .hv1{--tx:0%} .hv2{--tx:0%}[dir=rtl] .hv2{--tx:0%} } /* تیاره بڼه: لاندې دوه کونجونه زرین رڼا + شاته خوځیدونکي زرین آیکنونه (یوازې لینډینګ پاڼه) */ html[data-theme=dark] body.page-landing{background:radial-gradient(ellipse 62% 46% at 0% 100%,color-mix(in srgb,var(--accent) 15.00%,transparent) 0%,color-mix(in srgb,var(--accent) 12.39%,transparent) 8%,color-mix(in srgb,var(--accent) 10.04%,transparent) 17%,color-mix(in srgb,var(--accent) 7.97%,transparent) 25%,color-mix(in srgb,var(--accent) 6.15%,transparent) 33%,color-mix(in srgb,var(--accent) 4.58%,transparent) 42%,color-mix(in srgb,var(--accent) 3.26%,transparent) 50%,color-mix(in srgb,var(--accent) 2.19%,transparent) 58%,color-mix(in srgb,var(--accent) 1.34%,transparent) 67%,color-mix(in srgb,var(--accent) 0.71%,transparent) 75%,color-mix(in srgb,var(--accent) 0.29%,transparent) 83%,color-mix(in srgb,var(--accent) 0.06%,transparent) 92%,color-mix(in srgb,var(--accent) 0.00%,transparent) 100%),radial-gradient(ellipse 62% 46% at 100% 100%,color-mix(in srgb,var(--accent) 15.00%,transparent) 0%,color-mix(in srgb,var(--accent) 12.39%,transparent) 8%,color-mix(in srgb,var(--accent) 10.04%,transparent) 17%,color-mix(in srgb,var(--accent) 7.97%,transparent) 25%,color-mix(in srgb,var(--accent) 6.15%,transparent) 33%,color-mix(in srgb,var(--accent) 4.58%,transparent) 42%,color-mix(in srgb,var(--accent) 3.26%,transparent) 50%,color-mix(in srgb,var(--accent) 2.19%,transparent) 58%,color-mix(in srgb,var(--accent) 1.34%,transparent) 67%,color-mix(in srgb,var(--accent) 0.71%,transparent) 75%,color-mix(in srgb,var(--accent) 0.29%,transparent) 83%,color-mix(in srgb,var(--accent) 0.06%,transparent) 92%,color-mix(in srgb,var(--accent) 0.00%,transparent) 100%),linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%) fixed;background-color:var(--bg)} .gfx{display:none;position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none} html[data-theme=dark] .gfx{display:block} .gfx span{position:absolute;width:var(--sz);height:var(--sz);color:var(--accent);opacity:.26;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 55%,transparent));animation:gfx-f var(--du) ease-in-out var(--dl) infinite} .gfx svg{display:block;width:100%;height:100%;stroke-width:1.5} @keyframes gfx-f{0%,100%{transform:translate3d(0,0,0) rotate(-6deg)}50%{transform:translate3d(10px,-28px,0) rotate(8deg)}} html[data-anim="0"] .gfx span{animation:none} @media(prefers-reduced-motion:reduce){.gfx span{animation:none}} /* نشرات: عکس/ویډیو په ثابت چوکاټ کې، بشپړ ښکاري (نه پرې کیږي) */ .po-img{background:#0a0a1c} .po-bg{position:absolute;inset:-24px;background-size:cover;background-position:center;filter:blur(22px) saturate(1.15) brightness(.75);scale:1.1;z-index:0} .po-img img{position:relative;z-index:1;object-fit:contain;scale:1;transition:transform .8s cubic-bezier(.2,.7,.2,1)} .post.in .po-img img{scale:1} .po-img::before{z-index:2} .vd-box{background:#000} /* لایک + زړه */ .po-act{gap:8px;justify-content:flex-start} .po-like svg{width:22px;height:22px} .po-thumb:hover{background:color-mix(in srgb,#1877f2 12%,transparent);color:#1877f2} .po-thumb.on{color:#1877f2}.po-thumb.on svg{fill:#1877f2} .po-thumb.pop svg{animation:thumb-pop .5s cubic-bezier(.3,1.6,.5,1)} @keyframes thumb-pop{0%{transform:scale(1) rotate(0)}35%{transform:scale(1.45) rotate(-18deg)}100%{transform:scale(1) rotate(0)}} /* لایټ بکس: د بندولو علامه د ژبې لوري ته (پښتو/دری: ښي، انګلیسي: چپ) */ .lb-x{inset-inline-end:auto;inset-inline-start:14px} /* نقشه: زرین چوکاټ لکه د هیرو انځور، کوچنی بټن په ښکته منځ کې */ .mapbox{padding:10px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 70%,#fff),color-mix(in srgb,var(--accent) 35%,transparent) 42%,color-mix(in srgb,var(--accent) 80%,#000));box-shadow:0 50px 90px -40px var(--fx-sh),0 0 0 1px color-mix(in srgb,var(--accent) 40%,transparent);border:0} .mapbox iframe{inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);border-radius:calc(var(--r) + 2px)} .mapbox::after{content:"";position:absolute;inset:10px;border-radius:calc(var(--r) + 2px);pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 30px rgba(0,0,0,.08)} .btn-zr.sm.map-open{left:50%;right:auto;inset-inline-start:auto;translate:-50% 0;bottom:24px;height:auto;padding:6px 14px;font-size:.8rem;gap:6px;white-space:nowrap;z-index:3} .map-open svg{width:15px;height:15px} .btn-zr.sm.map-open:hover{transform:translateY(-1px)} /* فوټر: «ټول حقوق خوندي دي» په منځ کې */ .sf-bottom{position:relative;justify-content:center;text-align:center} .sf-bottom .sf-top{position:absolute;inset-inline-end:0;top:50%;margin:0;translate:0 -50%} @media(max-width:640px){ .sf-bottom{flex-direction:column;align-items:center;padding-top:62px} .sf-bottom .sf-top{inset-inline-end:auto;left:50%;top:14px;translate:-50% 0} } /* ===================================================================== v7.5 ===================================================================== */ /* آیکنونه: ۶ دانې (۳ چپ + ۳ ښي)، یوازې د منځپانګې په څنډو کې؛ تر ۷۵۰px لاندې نه ښکاري؛ رڼا او تیاره دواړو کې */ .gfx,html[data-theme=light] .gfx,html[data-theme=dark] .gfx{display:block;--g:calc((100% - min(1120px,100% - 40px))/2)} .gfx span{--w:min(var(--sz),max(14px,calc(var(--g) - 10px)));width:var(--w);height:auto;aspect-ratio:1;opacity:.3;animation:gfx-g var(--du) ease-in-out var(--dl) infinite;color:color-mix(in srgb,var(--accent) 82%,#6b4400);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 45%,transparent))} .gfx span.l{left:calc(var(--g)/2 - var(--w)/2)} .gfx span.r{right:calc(var(--g)/2 - var(--w)/2)} html[data-theme=dark] .gfx span{color:var(--accent);opacity:.28} @keyframes gfx-g{0%,100%{transform:translate3d(0,0,0) rotate(-6deg)}50%{transform:translate3d(2px,-24px,0) rotate(8deg)}} @media(max-width:750px){.gfx,html[data-theme=light] .gfx,html[data-theme=dark] .gfx{display:none}} /* د هیرو شیپونه: په پراخو سکرینونو کې هم له سکرین سره نه نښلي */ @media(min-width:901px){ .hero-vis{padding-inline:clamp(52px,6vw,66px)} .hv1{--tx:-34px}[dir=rtl] .hv1{--tx:34px} .hv2{--tx:34px}[dir=rtl] .hv2{--tx:-34px} } .hv-card{max-width:calc(100% - 12px)} /* د ننوتل بټن: ډېر ګرد (پیل) */ .btn-zr.login-bar,.nav a.nav-login{border-radius:999px} .btn-zr.login-bar{padding-inline:22px} @media(max-width:1100px){.bar,.top.scrolled .bar{border-radius:34px}} /* د نقشې زیړ بټن: تل د چوکاټ په ښکته منځ کې (په هر سکرین کې ثابت) */ .btn-zr.sm.map-open{left:0;right:0;inset-inline-start:0;inset-inline-end:0;margin-inline:auto;translate:none;width:max-content;max-width:calc(100% - 40px);min-width:0;height:auto;bottom:24px;position:absolute} @media(max-width:640px){.btn-zr.sm.map-open{bottom:20px;padding:6px 14px;height:auto;border-radius:999px}} /* د مشتریانو نظریې */ .rv-sum{display:inline-flex;align-items:center;gap:10px;margin-top:6px;padding:8px 18px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)} .rv-sum strong{font-size:1.25rem;font-weight:800;color:var(--accent);line-height:1} .rv-sum small{color:var(--mut);font-size:.88rem} .rv-stars{display:inline-flex;gap:3px;direction:ltr} .rv-stars i{display:grid;place-items:center;color:color-mix(in srgb,var(--txt) 22%,transparent)} .rv-stars i.f{color:var(--accent)} .rv-stars svg{width:18px;height:18px;fill:currentColor;stroke:currentColor;stroke-width:1.2} .rv-sum .rv-stars svg{width:16px;height:16px} .rv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:20px} .rv-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px 24px 22px;overflow:hidden} .rv-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s;background:radial-gradient(340px 190px at 100% 0,color-mix(in srgb,var(--accent) 18%,transparent),transparent 62%)} .rv-card:hover::before{opacity:1} .rv-q{position:absolute;top:18px;inset-inline-end:20px;width:46px;height:46px;color:color-mix(in srgb,var(--accent) 24%,transparent)} .rv-q svg{width:100%;height:100%;fill:currentColor;stroke:none} [dir=rtl] .rv-q{transform:scaleX(-1)} .rv-t{position:relative;flex:1;color:var(--txt);line-height:1.95;font-size:1rem;overflow-wrap:anywhere} .rv-f{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line)} .rv-av{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;overflow:hidden;flex:none;font-weight:800;font-size:1.1rem;color:var(--on-gold);background:linear-gradient(135deg,var(--gold1),var(--gold2) 55%,var(--gold3));box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent),0 8px 18px -8px var(--accent)} .rv-av img{width:100%;height:100%;object-fit:cover} .rv-f b{display:block;font-weight:700;line-height:1.35} .rv-f small{display:block;color:var(--mut);font-size:.82rem;line-height:1.4} /* ===================================================================== v7.6 ===================================================================== */ /* آیکنونه: یوازې په لومړۍ برخه (هیرو) کې، له سکرول سره ورک کیږي */ .gfx,html[data-theme=light] .gfx,html[data-theme=dark] .gfx{position:absolute;inset:0;z-index:0} .hero-grid{z-index:2} /* ننوتل او ژبې بټن: یو شان اوږدوالی (عمودي وړوکی) په هره ژبه کې */ .lang-btn,.btn-zr.sm.login-bar{height:40px;min-height:0;padding-block:0;line-height:1;box-sizing:border-box} .btn-zr.sm.login-bar{padding-inline:20px;font-size:.9rem} @media(max-width:640px){ .lang-btn,.btn-zr.sm.login-bar{height:38px} .btn-zr.sm.login-bar{width:38px;padding:0} } /* هیرو کارټونه: په موبایل کې د سکرین سره سم وړوکي */ .hv-karat{padding:calc(9px*var(--cs)) calc(20px*var(--cs))} .hv-karat strong{font-size:calc(1.7rem*var(--cs))}.hv-karat small{font-size:calc(.85rem*var(--cs))} @media(max-width:640px){ .hv-frame{--cs:.66;max-width:280px} .hv-ic{border-radius:9px}.hv-ic svg{width:calc(20px*var(--cs));height:calc(20px*var(--cs))} .hv-card{border-radius:14px} } @media(max-width:400px){.hv-frame{--cs:.58;max-width:250px}} /* د مشتریانو نظریې: نوی ښکلی ډیزاین */ .rv-sum{display:inline-flex;align-items:center;gap:16px;margin-top:10px;padding:12px 26px;border-radius:999px;background:var(--surf);border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line))} .rv-sum strong{font-size:2.3rem;font-weight:800;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums} .rv-sm{display:flex;flex-direction:column;align-items:flex-start;gap:3px} .rv-sum .rv-stars svg{width:18px;height:18px} .rv-sum small{font-size:.84rem} .rv-grid{gap:24px;align-items:stretch} .rv-card{padding:34px 26px 24px;border-radius:calc(var(--r) + 6px);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .3s} .rv-card::after{content:"";position:absolute;inset-inline:26px;top:0;height:3px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,transparent,var(--accent),transparent)} .rv-q{top:22px;width:54px;height:54px;color:color-mix(in srgb,var(--accent) 20%,transparent)} .rv-stars svg{width:19px;height:19px} .rv-t{font-size:1.04rem;line-height:2;color:var(--txt)} .rv-f{gap:14px;padding-top:18px;border-top:1px dashed color-mix(in srgb,var(--accent) 35%,var(--line))} .rv-av{width:52px;height:52px;font-size:1.2rem} .rv-f b{display:flex;align-items:center;gap:6px;font-size:1.02rem} .rv-ok{display:inline-grid;color:#2bb673}.rv-ok svg{width:17px;height:17px} @media(min-width:900px){.rv-grid>.rv-card:nth-child(3n+2){transform:translateY(-12px)} html[data-hover="1"] .rv-grid>.rv-card:nth-child(3n+2):hover{transform:translateY(-16px)}} html[data-hover="1"] .rv-card:hover{box-shadow:var(--sh),0 30px 56px -26px color-mix(in srgb,var(--accent) 55%,transparent)} @media(max-width:640px){ .rv-grid{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 12px 22px;margin-inline:-12px;-webkit-overflow-scrolling:touch} .rv-card{flex:0 0 84%;scroll-snap-align:center} .rv-sum{padding:10px 20px}.rv-sum strong{font-size:2rem} } /* ===================================================================== v7.7 ===================================================================== */ /* (د v7.7 هیرو کارټونو ځای بدلون لرې شو — لکه پخوا په څنګ کې) */ /* موبایل: نږدې، کوچني او لوکس */ @media(max-width:640px){ .hv-card{background:color-mix(in srgb,var(--surf2) 78%,transparent);border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:0 14px 30px -16px rgba(20,16,60,.5)} .hv-karat{border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line))} } /* د مشتریانو نظریې: لوکس سلایډر */ .rv-sum{box-shadow:var(--sh),0 20px 44px -26px color-mix(in srgb,var(--accent) 55%,transparent)} .rv-wrap{--cw:min(560px,86vw);position:relative;margin-inline:calc(50% - 50vw);width:100vw;max-width:100vw} .rv-wrap::before{content:"";position:absolute;inset:6% 0 14%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 52% 60% at 50% 50%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%)} .rv-track{display:flex;gap:26px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:34px calc(50% - var(--cw)/2) 40px;scrollbar-width:none;outline:none} .rv-track::-webkit-scrollbar{display:none} .rv-track:focus-visible{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--accent) 60%,transparent)} .rv-card{flex:0 0 var(--cw);scroll-snap-align:center;padding:42px clamp(24px,4vw,44px) 28px;gap:18px;transform:scale(.9);filter:saturate(.7) brightness(.97);transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .5s,box-shadow .6s,border-color .4s} html[data-theme=dark] .rv-card{filter:saturate(.7) brightness(.8)} .rv-card.on{transform:none;filter:none;border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:var(--sh),0 44px 80px -34px color-mix(in srgb,var(--accent) 60%,transparent)} .rv-card::before{opacity:1;background:radial-gradient(420px 230px at 100% 0,color-mix(in srgb,var(--accent) 16%,transparent),transparent 65%),radial-gradient(300px 200px at 0 100%,color-mix(in srgb,var(--p) 10%,transparent),transparent 70%)} .rv-q{top:26px;width:68px;height:68px;color:color-mix(in srgb,var(--accent) 22%,transparent)} .rv-stars svg{width:21px;height:21px} .rv-card .rv-stars{filter:drop-shadow(0 2px 6px color-mix(in srgb,var(--accent) 45%,transparent))} .rv-t{font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:2.05;min-height:7.5em} .rv-av{width:58px;height:58px;font-size:1.35rem} .rv-f b{font-size:1.08rem} .rv-f small{font-size:.88rem} .rv-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:-6px} [dir=rtl] .rv-b svg{transform:scaleX(-1)} @media(max-width:640px){ .rv-wrap{--cw:86vw} .rv-track{gap:14px;padding-block:24px 30px} .rv-card{padding:36px 22px 22px;transform:scale(.94)} .rv-t{min-height:0} .rv-card .rv-q{width:54px;height:54px} } /* ===================================================================== v7.8 ===================================================================== */ /* آیکنونه: یو د بل پاس مستقیم نه، لږ اخوا دې خوا */ .gfx span{--w:min(var(--sz),max(12px,calc(var(--g)*.62)))} .gfx span.l{left:calc(var(--g)/2 - var(--w)/2 + var(--g)*var(--o,0))} .gfx span.r{right:calc(var(--g)/2 - var(--w)/2 + var(--g)*var(--o,0))} /* د برخو سرلیکونه: لږ واړه */ .sec-t{font-size:clamp(1.2rem,2.3vw,1.55rem);font-weight:700;margin-bottom:8px} .sec-sub{font-size:.95rem} .eyebrow{font-size:.72rem;padding:4px 13px} [dir=rtl] .eyebrow{font-size:.82rem} .sec-head .sec-sub{margin-top:2px} /* د مشتریانو نظریې: د مینو په اندازه فریم، کوچني کارتونه، بې د نقل نښې */ .rv-q{display:none} .rv-wrap{--cw:360px;width:var(--wrapw);max-width:none;margin-inline:auto;padding:8px 0 22px;border-radius:calc(var(--r) + 14px);overflow:hidden; background:linear-gradient(180deg,color-mix(in srgb,var(--surf) 88%,transparent),color-mix(in srgb,var(--surf) 55%,transparent)); border:1px solid color-mix(in srgb,var(--accent) 38%,var(--line)); box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.35),0 40px 80px -48px color-mix(in srgb,var(--accent) 55%,transparent); -webkit-backdrop-filter:blur(var(--blur)) saturate(140%);backdrop-filter:blur(var(--blur)) saturate(140%)} .rv-wrap::before{inset:0;z-index:0;background:radial-gradient(ellipse 60% 70% at 50% 0,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%)} .rv-wrap::after{content:"";position:absolute;top:0;left:12%;right:12%;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.8;pointer-events:none} html[data-theme=dark] .rv-wrap{box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.07),0 40px 80px -50px color-mix(in srgb,var(--accent) 40%,transparent)} .rv-track{position:relative;z-index:1;gap:18px;padding:28px calc(50% - var(--cw)/2) 26px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .rv-card{padding:28px 24px 20px;gap:13px;border-radius:calc(var(--r) + 2px);transform:scale(.92)} .rv-card.on{transform:none} .rv-card::after{inset-inline:22px} .rv-stars svg{width:17px;height:17px} .rv-t{font-size:.98rem;line-height:1.95;min-height:0} .rv-f{gap:12px;padding-top:14px} .rv-av{width:48px;height:48px;font-size:1.1rem} .rv-f b{font-size:1rem}.rv-f small{font-size:.82rem} .rv-nav{position:relative;z-index:1;margin-top:0} .rv-nav .tc-btn{width:40px;height:40px} @media(max-width:900px){.rv-wrap{--cw:min(360px,72vw)}} @media(max-width:640px){ .rv-wrap{--cw:78vw;border-radius:calc(var(--r) + 6px);padding-bottom:18px} .rv-track{gap:12px;padding-block:20px 18px;-webkit-mask-image:none;mask-image:none} .rv-card{padding:24px 18px 18px;transform:scale(.95)} .rv-card.on{transform:none} } .rv-sum{margin-bottom:22px} /* ===================================================================== v7.9 ===================================================================== */ /* هیرو انځور: په وړو سکرینونو کې دومره نه کوچنی کیږي */ @media(max-width:900px){.hero-vis{padding-inline:14px}.hv-frame{max-width:min(100%,430px)}} @media(max-width:640px){.hero-vis{padding-inline:12px}.hv-frame{max-width:min(100%,360px)}} @media(max-width:400px){.hv-frame{max-width:min(100%,336px)}} /* د مشتریانو نظریې: یو کارت، لوکس، بې د نقل نښې او بې د پروفایل شکل */ .rv-wrap{padding:clamp(30px,5vw,52px) clamp(18px,4vw,48px) 26px;text-align:center} .rv-wrap::before{background:radial-gradient(ellipse 55% 60% at 50% 0,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%),radial-gradient(ellipse 40% 50% at 50% 110%,color-mix(in srgb,var(--p) 10%,transparent),transparent 70%)} .rv-track{display:grid;overflow:visible;gap:0;padding:0;margin:0;-webkit-mask-image:none;mask-image:none;scroll-snap-type:none;touch-action:pan-y} .rv-card,html[data-theme=dark] .rv-card{grid-area:1/1;display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;max-width:780px;margin-inline:auto;padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;filter:none; opacity:0;visibility:hidden;pointer-events:none;transform:translateY(16px) scale(.985);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1),visibility .7s} .rv-card::before,.rv-card::after{display:none} .rv-card.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;box-shadow:none;border:0} .rv-card.from-p:not(.on){transform:translateY(16px) scale(.985)} .rv-card .rv-stars{gap:5px;filter:drop-shadow(0 3px 10px color-mix(in srgb,var(--accent) 55%,transparent))} .rv-stars svg{width:22px;height:22px} .rv-t{font-size:clamp(1.05rem,1.9vw,1.32rem);line-height:2.1;color:var(--txt);text-wrap:balance;max-width:34em;font-weight:500} .rv-orn{position:relative;display:block;width:150px;height:12px} .rv-orn::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--accent) 70%,transparent)} .rv-orn::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;translate:-50% -50%;rotate:45deg;border-radius:2px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 50%,#fff),var(--accent) 55%,color-mix(in srgb,var(--accent) 60%,#4a2c00));box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent),0 0 14px color-mix(in srgb,var(--accent) 60%,transparent)} .rv-f{flex-direction:column;align-items:center;gap:3px;padding:0;border:0} .rv-f b{display:flex;align-items:center;justify-content:center;gap:7px;font-size:1.12rem;font-weight:800} .rv-f small{color:var(--accent);font-size:.9rem;font-weight:600;letter-spacing:.04em} [dir=rtl] .rv-f small{letter-spacing:0} .rv-nav{margin-top:26px;gap:20px} .rv-nav .tc-btn{width:46px;height:46px;background:color-mix(in srgb,var(--surf2) 85%,transparent)} @media(max-width:640px){ .rv-wrap{padding:30px 16px 22px} .rv-card{gap:13px} .rv-stars svg{width:19px;height:19px} .rv-t{font-size:1rem;line-height:2} } /* ===== v8.0 — مشتریان: بې چوکاټه ریټینګ، د پروفایل انځور، hover سیوری ===== */ .rv-sum,.rv-sum.glass{display:inline-flex;align-items:center;justify-content:center;gap:14px;margin:12px 0 22px;padding:0;background:none;border:0;border-radius:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} .rv-sum strong{font-size:2.2rem} .rv-sum .rv-sm{flex-direction:row;align-items:center;gap:12px} .rv-sum .rv-stars{gap:4px} .rv-sum .rv-stars svg{width:20px;height:20px} .rv-sum small{font-size:.92rem;color:var(--mut)} .rv-card{overflow:visible} .rv-card .rv-av{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 2px;border-radius:50%;overflow:hidden;flex:none;font-size:2rem;font-weight:800;color:var(--on-gold);background:linear-gradient(135deg,var(--gold1),var(--gold2) 55%,var(--gold3)); box-shadow:0 0 0 3px var(--surf),0 0 0 5px color-mix(in srgb,var(--accent) 65%,transparent),0 14px 28px -12px color-mix(in srgb,var(--accent) 70%,transparent);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s} .rv-card .rv-av img{display:block;width:100%;height:100%;object-fit:cover} .rv-card .rv-av b{font-weight:800;line-height:1} .rv-wrap{transition:box-shadow .5s ease,border-color .4s ease,transform .5s cubic-bezier(.2,.8,.2,1)} .rv-wrap:hover{border-color:color-mix(in srgb,var(--accent) 62%,var(--line));box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.3),0 46px 90px -34px color-mix(in srgb,var(--accent) 78%,transparent),0 16px 38px -18px rgba(0,0,0,.35)} html[data-hover="1"] .rv-wrap:hover{transform:translateY(-4px)} .rv-wrap:hover .rv-card.on .rv-av{transform:translateY(-3px) scale(1.05);box-shadow:0 0 0 3px var(--surf),0 0 0 5px var(--accent),0 22px 38px -12px color-mix(in srgb,var(--accent) 85%,transparent)} @media (max-width:560px){.rv-card .rv-av{width:72px;height:72px;font-size:1.7rem}.rv-sum strong{font-size:1.9rem}.rv-sum .rv-stars svg{width:17px;height:17px}} /* ===== v8.0 — فوټر: ټولنیزې رسنۍ (د رڼا/تیارې بټن پاس) ===== */ .sf-social{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:20px} .sf-social small{color:var(--mut);font-size:.8rem} .sf-soc-row{display:flex;flex-wrap:wrap;gap:10px} .sf-soc{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--txt) 6%,transparent);color:var(--txt);transition:transform .25s,background .25s,color .25s,box-shadow .25s,border-color .25s} .sf-soc svg{width:20px;height:20px} .sf-soc:hover,.sf-soc:focus-visible{transform:translateY(-3px);color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--p),var(--p2));box-shadow:0 12px 24px -12px var(--p)} .sf-soc-facebook:hover{background:#1877F2}.sf-soc-instagram:hover{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF)}.sf-soc-telegram:hover{background:#229ED9} .sf-soc-whatsapp:hover{background:#25D366}.sf-soc-youtube:hover{background:#E00000}.sf-soc-tiktok:hover,.sf-soc-x:hover{background:#111}.sf-soc-linkedin:hover{background:#0A66C2} /* ===== v8.0 — د «ایپ نصب کړئ» پیغام ===== */ .pwa-bar{position:fixed;z-index:90;inset-inline:12px;bottom:calc(12px + env(safe-area-inset-bottom));max-width:520px;margin-inline:auto;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:20px;background:var(--surf);-webkit-backdrop-filter:blur(var(--blur)) saturate(140%);backdrop-filter:blur(var(--blur)) saturate(140%);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:var(--sh),0 24px 50px -24px color-mix(in srgb,var(--accent) 55%,transparent);animation:pwaIn .5s cubic-bezier(.2,.8,.2,1) both} .pwa-bar[hidden]{display:none} .pwa-ic{width:46px;height:46px;border-radius:12px;flex:none;object-fit:cover} .pwa-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .pwa-tx b{font-size:.98rem} .pwa-tx small{color:var(--mut);font-size:.82rem;line-height:1.5} .pwa-x{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;border:0;background:transparent;color:var(--mut);cursor:pointer} .pwa-x svg{width:18px;height:18px} .pwa-bar.ios #pwaInstall{display:none} @keyframes pwaIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* ===== v8.1 — د مشتریانو نظریې: په تیاره بڼه کې ښکاره، بې حرکت او بې سیوری هوور ===== */ html[data-theme=dark] .rv-card.on{opacity:1;visibility:visible;pointer-events:auto;transform:none;filter:none} .rv-card.on,.rv-card.on:hover,html[data-hover="1"] .rv-card:hover,html[data-hover="1"] .rv-card.on:hover{box-shadow:none;transform:none;border:0;filter:none} .rv-wrap,.rv-wrap:hover,html[data-hover="1"] .rv-wrap:hover{transform:none;transition:none;border-color:color-mix(in srgb,var(--accent) 38%,var(--line)); box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.35),0 40px 80px -48px color-mix(in srgb,var(--accent) 55%,transparent)} html[data-theme=dark] .rv-wrap,html[data-theme=dark] .rv-wrap:hover,html[data-theme=dark][data-hover="1"] .rv-wrap:hover{box-shadow:var(--sh),inset 0 1px 0 rgba(255,255,255,.07),0 40px 80px -50px color-mix(in srgb,var(--accent) 40%,transparent)} .rv-wrap:hover .rv-card.on .rv-av,.rv-card .rv-av{transform:none;transition:none;box-shadow:0 0 0 3px var(--surf),0 0 0 5px color-mix(in srgb,var(--accent) 65%,transparent)} .rv-sum{display:none} /* ===== v8.1 — نشرات: ټول انځور (۱:۱، د ۲۰۰۰×۲۰۰۰ پوسټر)، پرې نه کیږي؛ ویډیو د خپل اندازې په چوکاټ کې ===== */ .post .po-img{aspect-ratio:1/1} .post .po-img img{width:100%;height:100%;object-fit:contain;scale:1;transform:none} .post .po-img:hover img{transform:none;scale:1} .post .po-img::before{display:none} .post .vd-box{aspect-ratio:var(--vr,16/9);max-height:min(82dvh,720px)} .post .vd-box video{object-fit:contain;background:#000} @media(max-width:560px){.post .po-img{aspect-ratio:1/1}.post .vd-box{aspect-ratio:var(--vr,16/9)}} /* ===== v8.1 — ټولې بټنې او کلیک کیدونکي: pointer ===== */ button:not(:disabled),[role=button],[role=switch],[role=tab],a[href],summary,select,label[for],input[type=checkbox],input[type=radio],input[type=submit]{cursor:pointer} button:disabled{cursor:not-allowed} .tc-stage{cursor:grab}.tc-stage.drag{cursor:grabbing} @supports not selector(::-webkit-scrollbar){html{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--p) 55%,transparent) transparent}} ::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent} /* ===== v8.2 — د مشتریانو چوکاټ: د نیوبار په څېر پلنوالی (د .wrap په اندازه) ===== */ .rv-wrap{width:100%;max-width:100%;margin-inline:0} /* ===== v8.2 — نیوبار: مینو یوازې هغه وخت راټولیږي چې ځای واقعاً کم شي (JS یې .compact ټاکي) ===== */ @media(min-width:901px){ .top:not(.compact) .menu-btn{display:none} .top:not(.compact) .nav{position:static;inset:auto;flex-direction:row;align-items:center;gap:2px;margin:0 auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;opacity:1;visibility:visible;transform:none;pointer-events:auto} .top:not(.compact) .nav a{padding:9px clamp(8px,1.1vw,15px);font-size:.95rem;color:var(--mut);text-align:center} .top:not(.compact) .nav a:hover,.top:not(.compact) .nav a.active{color:var(--txt)} .top:not(.compact) .nav a::after{left:0;right:0;inset-inline:0;margin-inline:auto;translate:0 0;bottom:3px} .top:not(.compact) .nav a.active::after{width:50%}.top:not(.compact) .nav a:hover::after{width:30%} .top:not(.compact) .bar,.top.scrolled:not(.compact) .bar{border-radius:999px} .top:not(.compact) .nav-login{display:none} .top:not(.compact) .login-bar{display:inline-flex!important} .top:not(.compact) .brand>span.bn{font-size:clamp(.8rem,1.15vw,1rem);max-width:min(13em,34vw)} /* راټول شوی حالت: لوګو او نوم بیرته خپل نورمال اندازې ته */ .top.compact .menu-btn{display:grid} .top.compact .bar,.top.compact.scrolled .bar{border-radius:34px} .top.compact .nav{position:absolute;inset-inline:0;top:calc(100% + 8px);margin:0;flex-direction:column;align-items:stretch;gap:2px;padding:8px;border-radius:22px;background:var(--menu-bg);border:1px solid var(--line);box-shadow:0 22px 50px -18px rgba(30,24,110,.45);opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;transition:opacity .25s,transform .25s,visibility .25s} .top.compact.menu-open .nav{opacity:1;visibility:visible;transform:none;pointer-events:auto} .top.compact .nav a{padding:13px 16px;font-size:1rem;color:var(--txt);text-align:start} .top.compact .brand>span.bn{font-size:1.05rem;max-width:min(16em,46vw)} .top.compact .brand-logo,.top.compact .mark{width:40px;height:40px} } @media(max-width:900px){.top .brand>span.bn{font-size:clamp(.8rem,2.6vw,1.05rem)}} /* ===== v8.3 — د لوګو نوم: زیړ برخه + برقیدونکي ستوري ===== */ .bhl{background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 80%,#6b4400),color-mix(in srgb,var(--accent) 66%,#2a1700) 50%,color-mix(in srgb,var(--accent) 82%,#6b4400));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;box-decoration-break:clone;-webkit-box-decoration-break:clone} html[data-theme=dark] .bhl{background-image:linear-gradient(100deg,#FFE7B0,#F2C969 45%,#D9A94A);-webkit-background-clip:text;background-clip:text} .brand{position:relative} .bstars{position:absolute;inset:-9px -10px;pointer-events:none;transition:opacity .35s ease,visibility .35s} .bs{position:absolute;display:block;width:11px;height:11px;color:color-mix(in srgb,var(--accent) 88%,#7a4d00);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--accent) 70%,transparent));animation:bs-tw 3.2s ease-in-out infinite} html[data-theme=dark] .bs{color:#FFD978} .bs svg{width:100%;height:100%;fill:currentColor;stroke:none;display:block} .bs1{top:0;inset-inline-start:2px;animation-delay:0s}.bs2{top:-2px;inset-inline-start:42%;width:9px;height:9px;animation-delay:-.9s} .bs3{bottom:0;inset-inline-start:16%;width:9px;height:9px;animation-delay:-1.7s}.bs4{bottom:-1px;inset-inline-end:26%;animation-delay:-2.4s} .bs5{top:2px;inset-inline-end:0;width:8px;height:8px;animation-delay:-1.3s}.bs6{bottom:3px;inset-inline-start:0;width:7px;height:7px;animation-delay:-.4s} @keyframes bs-tw{0%,100%{opacity:.12;transform:scale(.45) rotate(0)}50%{opacity:1;transform:scale(1.15) rotate(28deg)}} html[data-anim="0"] .bs{animation:none;opacity:.85} @media(prefers-reduced-motion:reduce){.bs{animation:none;opacity:.85}} html[data-bstars="0"] .bstars{display:none} .top.scrolled .bstars{opacity:0;visibility:hidden} .sf-brand .brand{margin-bottom:16px;width:max-content;max-width:100%} .sf-brand .brand .bstars{inset:-10px -10px} /* ===== v8.3 — لیندینګ: په رڼا بڼه کې نور لیکنې تور (لوکس) ===== */ html[data-theme=light] .hero .lead{color:color-mix(in srgb,var(--txt) 78%,#000)} html[data-theme=light] .hero h1{color:color-mix(in srgb,var(--hc1) 18%,#000)} /* ===== v8.3 — پوښتنې: وړوکي، د فوکس/کلیک کرښه نه پرې کیږي ===== */ .fq-q{padding:15px 18px;font-size:.95rem;gap:12px;outline:none;-webkit-tap-highlight-color:transparent} .fq-q:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 80%,transparent);outline-offset:-4px;border-radius:inherit} .fq-q span{min-width:0;overflow-wrap:anywhere} .fq-ic{width:28px;height:28px}.fq-ic b{width:11px} .fq-a p{padding:0 18px 18px;font-size:.93rem} .fq,.fq.open{overflow:visible}.fq-a>div{overflow:hidden} /* ===== v8.3 — فوټر: ټول حقوق د ژبې په کونج کې (موبایل: منځ) ===== */ @media(min-width:641px){.sf-bottom{justify-content:flex-start;text-align:start;padding-inline-end:56px}}