/* ==========================================================================
   زبان‌نگار — توکن‌های مشترک «آموزشگاه آلمانی» (سری de)
   منبع: بلوک :root یکسانِ ۱۶ فایل طرح لندینگ.
   اسکوپ: .de-scope — به بقیه‌ی سایت نشت نمی‌کند.
   ========================================================================== */

.de-scope {
  --zn-bg-deep: #EFE8DC; --zn-bg0: #FAF5EE; --zn-bg1: #FFFDF8; --zn-bg-img: #F1EAE0;
  --zn-glass-85: rgba(255, 252, 246, .85); --zn-glass-78: rgba(255, 252, 246, .78); --zn-glass-60: rgba(255, 252, 246, .6);
  --zn-fade: #FFFDF8; --zn-line: 178, 110, 120;
  --zn-t1: #26141A; --zn-t2: #45262E; --zn-t3: #573540; --zn-t4: #6A464F;
  --zn-t5: #755159; --zn-t6: #8A6A70; --zn-t7: #7E5F66; --zn-t8: #97797F;
  --zn-accent-soft: #C2244A; --zn-accent-soft2: #A81C3F; --zn-gold-soft: #8F6400; --zn-accent-head: #E11D48;
  --zn-glow1: rgba(225, 29, 72, .11); --zn-glow2: rgba(245, 179, 1, .18);
  --zn-grain-op: 0.07; --zn-nav: rgba(255, 252, 246, .82); --zn-ghost: rgba(150, 75, 90, .22);

  /* رنگ‌های ثابتِ برند که در طرح مستقیم به‌کار رفته‌اند */
  --zn-rose: #FF3B5C; --zn-rose2: #FF5C8A; --zn-crim: #E11D48; --zn-gold: #F5B301; --zn-gold2: #F97316;

  /* سایه‌های نرم (هم‌راستا با تصمیم سری zn) */
  --de-cardsh: 0 8px 22px rgba(150, 75, 90, .08), 0 1px 0 rgba(255, 255, 255, .7) inset;
  --de-cardsh-hover: 0 14px 32px rgba(150, 75, 90, .13);

  position: relative;
  direction: rtl;
  text-align: right;
  background: var(--zn-bg0);
  color: var(--zn-t1);
  font-family: 'Vazirmatn', IRANYekanX, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.de-scope *, .de-scope *::before, .de-scope *::after { box-sizing: border-box; }

/* اختصاصیت صفر تا کلاس‌های دکمه‌ای ویجت‌ها همیشه غالب باشند */
:where(.de-scope a) { color: var(--zn-accent-soft); text-decoration: none; transition: color .2s ease; }
:where(.de-scope a:hover) { color: var(--zn-accent-head); }

.de-scope input, .de-scope select, .de-scope button, .de-scope textarea { font-family: 'Vazirmatn', IRANYekanX, system-ui, sans-serif; }
.de-scope input::placeholder, .de-scope textarea::placeholder { color: var(--zn-t6); }
.de-scope input:focus, .de-scope select:focus, .de-scope textarea:focus { outline: 2px solid rgba(255, 59, 92, .26); outline-offset: 0; }
.de-scope select option { color: #0A1330; }
.de-scope summary::-webkit-details-marker { display: none; }
.de-scope [data-scrollhide]::-webkit-scrollbar { display: none; }

/* ---------- بافت کاغذی (grain) ---------- */
.de-scope .de-grain {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  opacity: var(--zn-grain-op);
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ---------- نوار رنگین‌کمانی بالای سکشن ---------- */
.de-scope .de-topline { height: 3px; background: linear-gradient(90deg, var(--zn-rose), var(--zn-rose2) 55%, var(--zn-gold)); }

/* ---------- انیمیشن‌های مشترک طرح ---------- */
@keyframes negar-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes negar-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes zn-reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes de-spin { to { transform: rotate(360deg); } }

/* ظاهرشدن هنگام اسکرول — فقط وقتی JS کلاس de-fx را افزوده باشد،
   تا بدون جاوااسکریپت محتوا هرگز پنهان نماند. */
.de-scope.de-fx [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1); }
.de-scope.de-fx [data-reveal].is-in { opacity: 1; transform: none; }
.de-scope [data-counter] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .de-scope.de-fx [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .de-scope [data-marquee] { animation: none !important; }
}

/* ---------- اسلایدر مشترک (Swiper طبق ساختار قالب) ---------- */
.de-scope .zbn-viewport { position: relative; }
.de-scope .zbn-grid { display: grid; grid-template-columns: repeat(var(--zbn-cols, 3), 1fr); gap: 18px; }
.de-scope .swiper { overflow: hidden; }
.de-scope .swiper-slide { height: auto; }
.de-scope .zbn-nav { position: absolute; top: 42%; transform: translateY(-50%); z-index: 6; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--zn-crim), var(--zn-rose)); display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 24px rgba(255, 59, 92, .28); transition: box-shadow .2s ease; }
.de-scope .zbn-nav:hover { box-shadow: 0 0 34px rgba(255, 59, 92, .42); }
.de-scope .zbn-prev { right: -16px; }
.de-scope .zbn-next { left: -16px; }
.de-scope .swiper-pagination { position: relative; margin-top: 18px; text-align: center; }
.de-scope .swiper-pagination-bullet { background: var(--zn-t6); opacity: .5; }
.de-scope .swiper-pagination-bullet-active { background: var(--zn-rose); opacity: 1; }

/* ---------- کمکی‌های عمومی ---------- */
.de-scope .de-container { max-width: 1260px; margin: 0 auto; padding-inline: clamp(18px, 5vw, 40px); }
.de-scope .de-img-ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px; background: var(--zn-bg-img); color: var(--zn-t6); font-size: 12.5px; font-weight: 700; }
.de-scope .de-chip { display: inline-flex; align-items: center; gap: 9px; background: rgba(255, 59, 92, .10); border: 1px solid rgba(255, 59, 92, .30); color: var(--zn-accent-soft); border-radius: 999px; padding: 8px 16px; font-size: 12.5px; font-weight: 800; }
.de-scope .de-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--zn-rose); box-shadow: 0 0 17px var(--zn-rose); }
.de-scope .de-ghost { position: absolute; font-weight: 900; color: transparent; -webkit-text-stroke: var(--ghost-stroke, 2px) var(--zn-ghost); line-height: 1; pointer-events: none; user-select: none; direction: ltr; }

@media (max-width: 980px) {
  .de-scope [data-split] { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .de-scope .de-ghost { font-size: 84px !important; }
}