/* =========================================================================
   AROOSYAR • front.css  (v3.1)
   مکمل aroosyar-theme.css — مخصوص صفحهٔ اصلی
   شامل: هیرو ویژه، وکتورهای شناور پس‌زمینه، فیلتر بلاگ، نظرات جدید،
         بخش «نمایش بیشتر/کمتر»
   ترتیب لود: bootstrap.rtl → aroosyar-theme.css → aroosyar-front.css
   ========================================================================= */

/* ------------------------- 0) وکتورهای شناور ---------------------------- */
.deco{position:absolute;pointer-events:none;z-index:0;color:var(--sky);opacity:.5;}
.deco svg{display:block;width:100%;height:100%;}
.deco-ring{width:180px;height:180px;opacity:.35;}
.deco-dots{width:150px;height:150px;color:var(--sky-400);opacity:.35;}
.deco-wave{width:260px;height:80px;color:var(--gold-2);opacity:.5;}
.deco-leaf{width:120px;height:120px;color:var(--sky-400);opacity:.45;}
.float-a{animation:floatA 9s ease-in-out infinite;}
.float-b{animation:floatB 12s ease-in-out infinite;}
.float-c{animation:spinSlow 26s linear infinite;}
@keyframes floatA{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(6deg)}}
@keyframes floatB{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,18px)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.float-a,.float-b,.float-c{animation:none}}
@media (max-width:768px){.deco{display:none}.deco.keep-m{display:block;transform:scale(.6)}}

/* گرید و هالهٔ پس‌زمینه سکشن‌ها */
.bg-grid::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 100%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 100%);
  opacity:.7;
}
.bg-grid > *{position:relative;z-index:1;}

/* ----------------------------- 1) HERO ---------------------------------- */
.hero-x{
  position:relative;overflow:hidden;padding:64px 0 84px;
  background:
    radial-gradient(1000px 460px at 88% -8%, #FFF6E7 0%, transparent 62%),
    radial-gradient(900px 520px at 4% 8%, #E7F0F6 0%, transparent 60%),
    var(--sky-50);
}
.hero-x::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:90px;z-index:1;
  background:linear-gradient(to top,var(--sky-50),transparent);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;position:relative;z-index:2;}
@media (max-width:991px){.hero-grid{grid-template-columns:1fr;gap:34px}}

.hero-title{font-size:clamp(2rem,4.6vw,3.35rem);line-height:1.35;margin:18px 0 16px;}
.hero-title .word{position:relative;display:inline-block;}
.hero-title .word::after{
  content:"";position:absolute;right:-4px;left:-4px;bottom:.06em;height:.36em;z-index:-1;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));opacity:.6;border-radius:var(--r-pill);
  transform:scaleX(0);transform-origin:right;animation:hlIn 1s .5s forwards cubic-bezier(.22,.75,.3,1);
}
@keyframes hlIn{to{transform:scaleX(1)}}
.hero-lead{font-size:1.03rem;max-width:520px;}

/* نوار اعتماد زیر هیرو */
.hero-trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.trust-pill{
  display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.78);
  backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:9px 15px;font-size:.82rem;font-weight:700;color:var(--ink-2);box-shadow:var(--sh-1);
}
.trust-pill svg{width:16px;height:16px;color:var(--sky-600);}

/* آواتارهای روی هم */
.stack-av{display:flex;align-items:center;gap:12px;margin-top:24px;}
.stack-av .avs{display:flex;}
.stack-av img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2.5px solid #fff;margin-right:-12px;box-shadow:var(--sh-1);}
.stack-av .more{
  width:38px;height:38px;border-radius:50%;background:var(--sky);color:var(--ink);
  display:grid;place-items:center;font-size:.72rem;font-weight:800;border:2.5px solid #fff;margin-right:-12px;
}

/* گالری هیرو */
.hero-gal{
  position:relative;display:grid;
  grid-template-columns:100px 1fr;
  grid-template-areas:"thumbs main";
  gap:14px;direction:rtl;
}
.hero-thumbs{grid-area:thumbs;display:flex;flex-direction:column;gap:12px;height:100%;}
.hero-thumb{
  border:0;padding:0;background:none;border-radius:18px;overflow:hidden;position:relative;
  flex:1 1 0;min-height:0;width:100%;box-shadow:var(--sh-1);opacity:.62;transition:var(--t);cursor:pointer;
}
.hero-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.hero-thumb::after{content:"";position:absolute;inset:0;border-radius:18px;border:2px solid transparent;transition:var(--t);}
.hero-thumb:hover{opacity:.9;}
.hero-thumb.active{opacity:1;transform: scale(1.06);}
.hero-thumb.active::after{border-color:var(--sky-400);}
.hero-main{
  grid-area:main;position:relative;border-radius:30px;overflow:hidden;height:430px;
  box-shadow:var(--sh-3);background:var(--sky-100);
}
.hero-main img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  opacity:0;transform:scale(1.06);transition:opacity .6s,transform 1.2s;}
.hero-main img.active{opacity:1;transform:scale(1);}
.hero-main::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,21,51,.55),transparent 52%);pointer-events:none;}

@media (max-width:767px){
  .hero-gal{
    grid-template-columns:1fr;
    grid-template-areas:"main" "thumbs";
    gap:10px;
  }
  .hero-main{height:280px;}
  .hero-thumbs{flex-direction:row;height:auto;gap:8px;}
  .hero-thumb{flex:1 1 0;height:72px;}
}

/* کارت‌های شناور روی گالری */
.hero-chip{
  position:absolute;z-index:3;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.7);border-radius:18px;padding:12px 14px;
  box-shadow:var(--sh-3);display:flex;align-items:center;gap:10px;
}
.hero-chip b{font-size:.9rem;display:block;line-height:1.6;}
.hero-chip span{font-size:.72rem;color:var(--muted);}
.hero-chip.c1{top:22px;left:-14px;}
.hero-chip.c2{bottom:26px;right:-18px;}
.hero-chip.c3{bottom:96px;left:-22px;}
@media (max-width:1199px){.hero-chip.c1{left:8px}.hero-chip.c2{right:8px}.hero-chip.c3{display:none}}
@media (max-width:575px){.hero-chip{padding:9px 11px;border-radius:14px}.hero-chip b{font-size:.78rem}}

/* شمارش معکوس شناور */
.hero-cd{display:flex;gap:6px;}
.hero-cd i{
  font-style:normal;min-width:36px;text-align:center;background:var(--ink);color:#fff;
  border-radius:10px;padding:5px 4px;font-weight:800;font-size:.85rem;
}

/* --------------------- 2) نوار جستجوی هوشمند ---------------------------- */
.search-x{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:30px;box-shadow:var(--sh-3);position:relative;z-index:3;
}
.search-x .row-in{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:10px;}
@media (max-width:991px){.search-x .row-in{grid-template-columns:1fr 1fr}}
@media (max-width:575px){.search-x .row-in{grid-template-columns:1fr}}
.search-tag{
  display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--ink-2);
  background:var(--sky-50);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 13px;transition:var(--t);
}
.search-tag:hover{background:var(--sky-100);border-color:var(--sky-400);color:var(--ink);}

/* --------------------------- 3) دسته‌بندی ------------------------------- */
.cat-x{
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--pad) 12px;transition:var(--t);height:100%;position:relative;overflow:hidden;
}
.cat-x::before{
  content:"";position:absolute;inset:auto -30% -70% -30%;height:120px;background:var(--sky-100);
  border-radius:50%;transform:translateY(30px);transition:var(--t);opacity:0;
}
.cat-x:hover{transform:translateY(-6px);box-shadow:var(--sh-2);border-color:var(--sky-200);}
.cat-x:hover::before{opacity:1;transform:translateY(0);}
.cat-x > *{position:relative;z-index:1;}
.cat-x b{font-size:.92rem;}
.cat-x span{font-size:.74rem;color:var(--muted);}

/* ------------------------ 4) ویجت‌های ایونت ----------------------------- */
.feat-x{display:flex;gap:14px;align-items:flex-start;}
.mini-bar{height:8px;border-radius:var(--r-pill);background:var(--sky-100);overflow:hidden;}
.mini-bar i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--sky-400),var(--sky));}
.budget-legend{display:flex;flex-wrap:wrap;gap:10px;font-size:.76rem;color:var(--ink-2);font-weight:600;}
.budget-legend em{width:10px;height:10px;border-radius:4px;display:inline-block;margin-left:6px;}
.donut{width:132px;height:132px;transform:rotate(-90deg);}
.donut circle{fill:none;stroke-width:14;stroke-linecap:round;}

/* ---------------------- 9) فیلتر دسته‌بندی بلاگ ------------------------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.f-btn{
  border:1.5px solid var(--line);background:var(--surface);color:var(--ink-2);
  font-weight:700;font-size:.84rem;padding:9px 18px;border-radius:var(--r-pill);
  transition:var(--t);display:inline-flex;align-items:center;gap:7px;
}
.f-btn svg{width:15px;height:15px;}
.f-btn:hover{border-color:var(--sky-400);color:var(--ink);}
.f-btn.active{background:var(--sky);border-color:var(--sky);color:var(--ink);box-shadow:var(--sh-sky);}
.f-btn .n{font-size:.7rem;background:var(--sky-100);color:var(--sky-600);border-radius:var(--r-pill);padding:1px 7px;}
.f-btn.active .n{background:rgba(255,255,255,.6);color:var(--ink);}
.filter-grid > [data-cat]{transition:opacity .3s,transform .3s;}
.filter-grid > [data-cat].hide{display:none;}

/* ------------------------- 10) نظرات کاربران ---------------------------- */
.marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
         mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;gap:18px;width:max-content;animation:mq 46s linear infinite;}
.marquee.rev .marquee-track{animation-direction:reverse;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes mq{to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}

.testi-x{
  width:340px;flex:0 0 340px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--pad);box-shadow:var(--sh-1);transition:var(--t);
}
@media (max-width:575px){.testi-x{width:280px;flex-basis:280px}}
.testi-x:hover{box-shadow:var(--sh-2);border-color:var(--sky-200);transform:translateY(-4px);}
.testi-x .q{width:30px;height:30px;color:var(--sky-200);}
.testi-x p{font-size:.9rem;line-height:2.1;margin:10px 0 16px;}
.testi-x .who{display:flex;align-items:center;gap:10px;border-top:1px dashed var(--line);padding-top:14px;}
.testi-x .who img{width:42px;height:42px;border-radius:50%;object-fit:cover;}
.testi-x .who b{font-size:.88rem;display:block;}
.testi-x .who span{font-size:.74rem;color:var(--muted);}
.testi-x .tag{margin-right:auto;font-size:.7rem;font-weight:700;color:var(--sky-600);background:var(--sky-50);
              border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 10px;}

/* ------------------- 13) بخش نمایش بیشتر / کمتر -------------------------- */
.more-wrap{position:relative;}
.more-wrap[data-collapsed="true"] .more-item.extra{display:none;}
.more-fade{
  position:absolute;left:0;right:0;bottom:56px;height:120px;pointer-events:none;
  background:linear-gradient(to top,var(--sky-50),transparent);opacity:0;transition:var(--t);
}
.more-wrap[data-collapsed="true"] .more-fade{opacity:1;}
.more-btn{margin:26px auto 0;display:flex;}
.more-btn svg{transition:transform var(--t);}
.more-wrap[data-collapsed="false"] .more-btn svg{transform:rotate(180deg);}

/* ----------------------------- کمکی‌ها ---------------------------------- */
.kpi{display:flex;flex-direction:column;gap:4px;}
.kpi b{font-size:clamp(1.4rem,3vw,2rem);}
.kpi span{font-size:.8rem;color:var(--muted);}
.ratio-16{aspect-ratio:16/10;object-fit:cover;width:100%;}
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.75,.3,1),transform .7s cubic-bezier(.22,.75,.3,1);}
[data-reveal].in{opacity:1;transform:none;}