/* ==========================================================================
   HOME TESTIMONIALS 2026 — بخش «نظرات کاربران» و فرم رنگی نظرخواهی صفحهٔ اصلی
   --------------------------------------------------------------------------
   • بعد از home-modern-2026.css بارگذاری می‌شود و از همان توکن‌های رنگی
     (--g600, --gold, --fire, --blue, --plum, --rose, --r-*, --sh*) استفاده می‌کند.
   • همهٔ کلاس‌ها با پیشوند ti- (Testimonials) هستند تا با بقیهٔ سایت تداخل نکنند.
   • موبایل‌اول: با clamp() سیال از ۳۲۰px تا دسکتاپ بزرگ.
   ========================================================================== */

.ti-sec{
  position:relative;
  padding-block:clamp(48px,8vw,84px);
  background:
    radial-gradient(1100px 480px at 12% -10%, rgba(216,166,64,.16), transparent 60%),
    radial-gradient(900px 420px at 100% 10%, rgba(122,63,143,.14), transparent 55%),
    radial-gradient(800px 500px at 50% 120%, rgba(15,138,134,.14), transparent 60%),
    linear-gradient(180deg,var(--g50),var(--bg) 40%);
  overflow:clip;
}
.ti-sec::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(circle,rgba(216,166,64,.35) 1.5px,transparent 1.6px);
  background-size:26px 26px; mask-image:linear-gradient(180deg,#000,transparent 70%);
}

/* ---------- دیوار نظرات ---------- */
.ti-wall{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
  gap:16px; padding:6px 2px 10px; margin:0 -2px 8px;
}
.ti-card[hidden]{display:none}
.ti-card.ti-reveal{animation:tiIn .45s var(--ease) both}
@keyframes tiIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ti-more-wrap{display:flex;justify-content:center;margin:6px 0 34px}
.ti-more-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:999px;font-weight:800;font-size:14.5px;cursor:pointer;
  border:1.5px solid var(--gold);background:#fff;color:var(--g900);box-shadow:var(--sh1);transition:transform .2s,box-shadow .2s,background .2s}
.ti-more-btn:hover{transform:translateY(-2px);background:var(--gold2);box-shadow:var(--sh2)}
.ti-more-left{font-weight:600;font-size:12.5px;opacity:.75}

.ti-card{
  scroll-snap-align:start; position:relative;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-l);
  padding:22px 20px 18px; box-shadow:var(--sh1);
  display:flex; flex-direction:column; gap:10px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.ti-card::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:5px;border-radius:var(--r-l) var(--r-l) 0 0;
  background:linear-gradient(90deg,var(--gold2),var(--fire) 45%,var(--plum) 75%,var(--teal));
}
.ti-card:hover{transform:translateY(-6px);box-shadow:var(--sh2)}
.ti-quote{position:absolute;top:10px;left:16px;font-size:40px;line-height:1;color:var(--gold2);opacity:.55;font-family:Georgia,serif}
.ti-stars{display:flex;gap:2px;margin-top:14px}
.ti-stars .ti-star{width:16px;height:16px;fill:#e3e2df;flex:0 0 auto}
.ti-stars .ti-star.on{fill:var(--gold)}
.ti-body{font-size:14px;line-height:1.95;color:var(--ink2);min-height:60px}
.ti-who{display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:8px;border-top:1px dashed var(--line)}
.ti-avatar{
  width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:14px;
  background:linear-gradient(135deg,var(--g600),var(--teal));
}
.ti-who b{font-size:13.5px;color:var(--ink)}

/* ---------- فرم نظرخواهی ---------- */
.ti-form-wrap{display:flex;justify-content:center}
.ti-form-card{
  position:relative; width:min(720px,100%);
  background:linear-gradient(155deg,var(--g900),var(--g800) 55%,var(--g950));
  border-radius:var(--r-l); padding:clamp(24px,4.4vw,42px);
  box-shadow:var(--sh3); overflow:clip; isolation:isolate;
}
.ti-form-blob{position:absolute;border-radius:50%;filter:blur(46px);opacity:.55;z-index:0;pointer-events:none}
.ti-blob-1{width:260px;height:260px;background:radial-gradient(circle,var(--gold),transparent 70%);top:-90px;inset-inline-end:-70px}
.ti-blob-2{width:220px;height:220px;background:radial-gradient(circle,var(--plum),transparent 70%);bottom:-80px;inset-inline-start:-60px}

.ti-form-head{position:relative;z-index:1;display:flex;align-items:flex-start;gap:14px;margin-bottom:22px}
.ti-form-ico{
  flex:0 0 auto;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:26px;
  background:linear-gradient(135deg,var(--gold2),var(--gold)); box-shadow:0 10px 22px -8px rgba(216,166,64,.7);
}
.ti-form-head h3{color:#fff;font-size:clamp(19px,3vw,23px);margin:0 0 4px}
.ti-form-head p{color:#cfe6dc;font-size:13.5px;line-height:1.8;margin:0}

.ti-form{position:relative;z-index:1;display:grid;gap:16px}
.ti-field{display:grid;gap:7px}
.ti-field label{color:#e7f3ec;font-size:13px;font-weight:700;display:flex;gap:4px}
.ti-field label em{color:var(--gold2);font-style:normal}
.ti-input{
  width:100%; border:1.5px solid rgba(255,255,255,.18); background:rgba(255,255,255,.08);
  color:#fff; border-radius:14px; padding:12px 14px; font:inherit; font-size:14.5px;
  transition:border-color .2s,background .2s,box-shadow .2s; resize:vertical;
}
.ti-input::placeholder{color:rgba(255,255,255,.45)}
.ti-input:focus{outline:0;border-color:var(--gold2);background:rgba(255,255,255,.13);box-shadow:0 0 0 4px rgba(239,199,103,.18)}

/* ---------- ستاره‌های تعاملی امتیازدهی ---------- */
.ti-rate{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}
.ti-star-btn{
  width:38px;height:38px;display:grid;place-items:center;border-radius:10px;
  transition:transform .15s var(--ease),background .15s;
}
.ti-star-btn svg{width:26px;height:26px;fill:rgba(255,255,255,.22);transition:fill .15s,filter .15s}
.ti-star-btn:hover svg,.ti-star-btn:hover ~ .ti-star-btn svg{fill:var(--gold2)}
.ti-star-btn.is-on svg{fill:var(--gold);filter:drop-shadow(0 0 6px rgba(239,199,103,.7))}
.ti-star-btn:hover{transform:scale(1.14)}
.ti-star-btn:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.ti-rate-hint{color:rgba(255,255,255,.55);font-size:11.5px}
.ti-rate.is-set .ti-rate-hint{color:var(--gold2);font-weight:700}

.ti-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:52px;border-radius:999px;font-weight:800;font-size:15.5px;
  background:linear-gradient(135deg,var(--gold2),var(--gold)); color:var(--g950);
  box-shadow:0 14px 28px -10px rgba(216,166,64,.75);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),opacity .2s;
}
.ti-submit .hm-i{width:1.1em;height:1.1em}
.ti-submit:hover{transform:translateY(-2px);box-shadow:0 18px 34px -10px rgba(216,166,64,.9)}
.ti-submit:active{transform:translateY(0)}
.ti-submit-spin{display:none;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(15,36,28,.28);border-top-color:var(--g950);animation:ti-spin .7s linear infinite}
.ti-form.is-busy .ti-submit{opacity:.85;pointer-events:none}
.ti-form.is-busy .ti-submit-txt{display:none}
.ti-form.is-busy .ti-submit-spin{display:inline-block}
@keyframes ti-spin{to{transform:rotate(360deg)}}

.ti-msg{
  font-size:13.5px; font-weight:700; border-radius:13px; padding:10px 14px;
  display:none; align-items:center; gap:8px; line-height:1.8;
}
.ti-msg.show{display:flex}
.ti-msg.ok{background:rgba(34,160,113,.18);color:#bdf4d9;border:1px solid rgba(34,160,113,.4)}
.ti-msg.bad{background:rgba(192,64,95,.18);color:#ffd3dc;border:1px solid rgba(192,64,95,.45)}

/* ---------- ریسپانسیو ---------- */
@media(max-width:720px){
  .ti-form-card{border-radius:22px}
  .ti-rate{justify-content:flex-start;flex-direction:row-reverse}
  .ti-star-btn{width:34px;height:34px}
  .ti-star-btn svg{width:23px;height:23px}
}
@media(max-width:480px){
  .ti-wall{grid-template-columns:1fr}
  .ti-form-head{flex-direction:column;align-items:flex-start}
}

/* کاهش حرکت برای کاربرانی که آن را در سیستم‌عامل خاموش کرده‌اند */
@media (prefers-reduced-motion:reduce){
  .ti-card,.ti-star-btn,.ti-submit{transition:none}
  .ti-submit-spin{animation:none}
}