/* =========================================================================
   zn-hero — ویجت «هیرو زبان‌نگار» (zbn-zn-hero) · طرح: 03-zn-hero.dc.html
   وابسته به: zn-base.css (توکن‌های سه تم)
   ========================================================================= */

.znhr{position:relative;overflow:hidden;background:radial-gradient(1100px 640px at 78% -6%,var(--zn-glow1),transparent 58%),radial-gradient(760px 520px at 2% 92%,var(--zn-glow2),transparent 60%),var(--zn-bg0);}
.znhr-ghost{position:absolute;top:20px;left:-24px;font-size:190px;font-weight:900;color:transparent;-webkit-text-stroke:2px var(--zn-ghost);line-height:1;letter-spacing:4px;pointer-events:none;user-select:none;will-change:transform;direction:ltr;}
.znhr-gridbg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,150,175,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,150,175,.04) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(900px 640px at 64% 16%,#000,transparent 74%);mask-image:radial-gradient(900px 640px at 64% 16%,#000,transparent 74%);pointer-events:none;}

.znhr-wrap{position:relative;max-width:1280px;margin:0 auto;padding:clamp(40px,5vw,74px) clamp(18px,5vw,64px) clamp(30px,3vw,44px);display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(30px,4vw,64px);align-items:center;}
.znhr-txt{position:relative;}
.znhr-slides{position:relative;display:grid;}
.znhr-slide{grid-area:1/1;transition:opacity .6s ease,transform .6s ease;}
.znhr-slide.is-off{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px);}

.znhr-chip{display:inline-flex;align-items:center;gap:9px;border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:800;}
.znhr-chip .dot{width:8px;height:8px;border-radius:50%;}
.znhr-chip.is-rose{background:rgba(255,59,92,.1);border:1px solid rgba(255,59,92,.3);color:var(--zn-soft);}
.znhr-chip.is-rose .dot{background:var(--zn-rose);box-shadow:0 0 16px var(--zn-rose);}
.znhr-chip.is-gold{background:rgba(245,179,1,.1);border:1px solid rgba(245,179,1,.34);color:var(--zn-goldsoft);}
.znhr-chip.is-gold .dot{background:var(--zn-gold);box-shadow:0 0 16px var(--zn-gold);}
.znhr-chip.is-rose2{background:rgba(255,92,138,.1);border:1px solid rgba(255,92,138,.32);color:var(--zn-soft2);}
.znhr-chip.is-rose2 .dot{background:var(--zn-rose2);box-shadow:0 0 16px var(--zn-rose2);}

.znhr-h1{margin:24px 0 0;font-weight:900;line-height:1.32;letter-spacing:-.01em;}
.znhr-h1 .l1,.znhr-h1 .l2{display:block;font-size:clamp(34px,5.4vw,60px);}
.znhr-h1 .l1{color:var(--zn-t1);}
.znhr-h1 .l2{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.znhr-slide.is-rose .znhr-h1 .l2{background-image:linear-gradient(115deg,var(--zn-rose),var(--zn-rose2) 62%,var(--zn-gold));-webkit-background-clip:text;background-clip:text;}
.znhr-slide.is-gold .znhr-h1 .l2{background-image:linear-gradient(115deg,var(--zn-gold),var(--zn-gold2) 70%,var(--zn-rose));-webkit-background-clip:text;background-clip:text;}
.znhr-slide.is-rose2 .znhr-h1 .l2{background-image:linear-gradient(115deg,var(--zn-rose2),var(--zn-rose) 60%,var(--zn-gold));-webkit-background-clip:text;background-clip:text;}
.znhr-p{margin:22px 0 0;font-size:clamp(14.5px,1.2vw,16.5px);line-height:2.2;color:var(--zn-t4);max-width:50ch;}
.znhr-p p{margin:0 0 10px;color:inherit;font-size:inherit;line-height:inherit;}
.znhr-p :last-child{margin-bottom:0;}
.znhr-p audio,.znhr-p video,.znhr-p iframe,.znhr-p img{max-width:100%;}

.znhr-acts{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin:34px 0 0;}
.zn-scope .znhr-btn-pri{display:inline-flex;align-items:center;gap:10px;color:#fff;font-size:15.5px;font-weight:900;padding:17px 30px;border-radius:15px;background:linear-gradient(135deg,var(--zn-crim),var(--zn-rose));box-shadow:0 12px 34px rgba(255,59,92,.16),0 0 46px rgba(255,59,92,.3);transition:transform .15s,box-shadow .15s;}
.zn-scope .znhr-btn-pri:hover{transform:translateY(-2px);color:#fff;}
.zn-scope .znhr-slide.is-gold .znhr-btn-pri{background:linear-gradient(135deg,var(--zn-gold),var(--zn-gold2));color:#1A1204;box-shadow:0 12px 34px rgba(245,179,1,.18),0 0 46px rgba(245,179,1,.32);}
.zn-scope .znhr-slide.is-gold .znhr-btn-pri:hover{color:#1A1204;}
.zn-scope .znhr-btn-ghost{display:inline-flex;align-items:center;gap:10px;background:var(--zn-fill2);color:var(--zn-t1);font-size:15px;font-weight:800;padding:17px 26px;border-radius:15px;border:1px solid rgba(var(--zn-line),.26);transition:border-color .15s;}
.zn-scope .znhr-btn-ghost:hover{border-color:var(--zn-rose);color:var(--zn-t1);}
.zn-scope .znhr-slide.is-gold .znhr-btn-ghost:hover{border-color:var(--zn-gold);}

.znhr-stats{display:flex;align-items:center;gap:clamp(16px,2vw,30px);flex-wrap:wrap;margin-top:clamp(28px,3vw,44px);}
.znhr-stat .num{font-size:clamp(22px,2.2vw,26px);font-weight:900;color:var(--zn-t1);}
.znhr-stat.is-grad .num{background:linear-gradient(120deg,var(--zn-rose),var(--zn-rose2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.znhr-stat.is-gold .num{color:var(--zn-gold);}
.znhr-stat .lbl{font-size:11.5px;color:var(--zn-t6);font-weight:600;margin-top:2px;}
.znhr-sep{width:1px;height:38px;background:rgba(var(--zn-line),.18);}

/* ---------- ستون تصویر ---------- */
.znhr-visual{position:relative;height:min(560px,64vw);}
.znhr-backplate{position:absolute;top:52px;right:-6px;left:58px;height:78%;border-radius:30px;background:linear-gradient(135deg,rgba(225,29,72,.4),rgba(255,92,138,.12));transform:rotate(5deg);border:1px solid rgba(var(--zn-line),.2);will-change:transform;}
.znhr-imgwrap{position:absolute;top:20px;right:32px;left:14px;bottom:34px;will-change:transform;}
.znhr-imgframe{width:100%;height:100%;border-radius:28px;padding:2px;background:linear-gradient(135deg,var(--zn-crim),var(--zn-rose2) 60%,var(--zn-gold));box-shadow:0 34px 90px rgba(0,0,0,.55),0 0 100px rgba(225,29,72,.32);transform:rotate(-2.4deg);}
.znhr-imginner{position:relative;width:100%;height:100%;border-radius:26px;overflow:hidden;background:var(--zn-img);}
.znhr-img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s ease;}
.znhr-img.is-on{opacity:1;}
.znhr-img img{width:100%;height:100%;object-fit:cover;display:block;}
.znhr-img .zn-img-ph{width:100%;height:100%;}

.znhr-float{position:absolute;z-index:3;will-change:transform;}
.znhr-f1{top:-2px;left:-4px;}
.znhr-f2{top:110px;right:-12px;}
.znhr-f3{bottom:20px;left:0;}
.znhr-f4{bottom:70px;right:18px;}
.znhr-pill{display:flex;align-items:center;gap:8px;background:var(--zn-glass-85);backdrop-filter:blur(10px);border:1px solid rgba(255,59,92,.34);color:var(--zn-t1);font-size:12px;font-weight:800;padding:10px 15px;border-radius:999px;box-shadow:0 0 26px rgba(255,59,92,.14);animation:zn-float 5s ease-in-out infinite;}
.znhr-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--zn-rose);box-shadow:0 0 14px var(--zn-rose);}
.znhr-goldbadge{background:linear-gradient(135deg,var(--zn-gold),var(--zn-gold2));color:#1A1204;font-size:12.5px;font-weight:900;padding:9px 15px;border-radius:12px;box-shadow:0 0 28px rgba(245,179,1,.55);animation:zn-float 6s ease-in-out infinite;direction:ltr;}
.znhr-checkcard{background:var(--zn-glass-85);backdrop-filter:blur(10px);border:1px solid rgba(var(--zn-line),.24);border-radius:16px;padding:13px 17px;box-shadow:0 18px 44px rgba(0,0,0,.5);animation:zn-float 7s ease-in-out infinite;}
.znhr-checkcard .row{display:flex;align-items:center;gap:10px;}
.znhr-checkcard .ic{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--zn-crim),var(--zn-rose));display:grid;place-items:center;font-size:15px;font-weight:900;color:#fff;box-shadow:0 0 18px rgba(255,59,92,.4);}
.znhr-checkcard .t1{font-size:13px;font-weight:900;color:var(--zn-t1);}
.znhr-checkcard .t2{font-size:10.5px;color:var(--zn-t5);font-weight:600;}
.znhr-hallo{background:var(--zn-glass-85);border:1px solid rgba(255,92,138,.3);color:var(--zn-soft2);font-size:11px;font-weight:900;padding:8px 13px;border-radius:999px;letter-spacing:.5px;animation:zn-float 5.5s ease-in-out infinite;direction:ltr;}

/* ---------- ناوبری اسلایدر ---------- */
.znhr-nav{display:flex;align-items:center;gap:14px;max-width:1280px;margin:0 auto;padding:0 clamp(18px,5vw,64px) clamp(28px,3vw,40px);}
.znhr-navbtn{width:42px;height:42px;border:1px solid rgba(var(--zn-line),.22);border-radius:12px;background:var(--zn-fill2);color:var(--zn-t1);cursor:pointer;display:grid;place-items:center;transition:border-color .15s;}
.znhr-navbtn:hover{border-color:var(--zn-rose);}
.znhr-dots{display:flex;gap:7px;margin-inline-start:6px;}
.znhr-dot{width:12px;height:5px;border-radius:3px;border:0;padding:0;cursor:pointer;background:rgba(var(--zn-line),.3);transition:background .3s,width .3s;}
.znhr-dot.is-on{width:26px;background:var(--zn-rose);}

@media (prefers-reduced-motion:reduce){
  .znhr-pill,.znhr-goldbadge,.znhr-checkcard,.znhr-hallo{animation:none;}
}

/* =========================================================================
   واکنش‌گرا — ستون تصویر و کارت‌های شناور در تبلت/موبایل هم دیده می‌شوند
   ========================================================================= */
@media (max-width:980px){
  .znhr-wrap{grid-template-columns:1fr;gap:clamp(24px,5vw,40px);}
  .znhr-visual{height:min(440px,84vw);margin-top:6px;}
  .znhr-imgwrap{top:16px;right:16px;left:16px;bottom:26px;}
  .znhr-backplate{top:40px;right:0;left:38px;height:76%;}
  .znhr-f1{top:-8px;left:0;}
  .znhr-f2{top:76px;right:-6px;}
  .znhr-f3{bottom:10px;left:0;}
  .znhr-f4{bottom:58px;right:8px;}
}

@media (max-width:640px){
  .znhr-visual{height:min(380px,96vw);}
  .znhr-imgframe{transform:rotate(-1.4deg);}
  .znhr-backplate{transform:rotate(3deg);}
  .znhr-pill,.znhr-hallo{font-size:10.5px;padding:8px 12px;}
  .znhr-pill .dot{width:7px;height:7px;}
  .znhr-goldbadge{font-size:11px;padding:7px 12px;}
  .znhr-checkcard{padding:10px 13px;}
  .znhr-checkcard .ic{width:28px;height:28px;font-size:13px;}
  .znhr-checkcard .t1{font-size:11.5px;}
  .znhr-checkcard .t2{font-size:9.5px;}
  .znhr-stats{gap:14px;}
  .znhr-sep{height:32px;}
  .znhr-acts{gap:10px;}
  .zn-scope .znhr-btn-pri,.zn-scope .znhr-btn-ghost{flex:1 1 100%;justify-content:center;}
}

/* تمام‌عرض‌شدن دکمه‌ها در موبایل (کنترل‌شونده از المنتور) */
.znhr-fullbtn-yes .znhr-acts{gap:10px;}
@media (max-width:767px){
  .znhr-fullbtn-yes .znhr-btn-pri,.znhr-fullbtn-yes .znhr-btn-ghost{flex:1 1 100%;justify-content:center;}
}