/* =====================================================================
   آگاه — بخش شبکه‌های اجتماعی   (front-end)
   Namespaced under .asm-social. Colours come from inline --asm-green /
   --asm-accent set by the shortcode; shades are derived with color-mix.
   Fonts use the theme's own "gramophone" (title) and "iransans" (text).
   ===================================================================== */

.asm-social,
.asm-social *,
.asm-social *::before,
.asm-social *::after { box-sizing: border-box; }

.asm-social{
  --asm-green:#576B50;
  --asm-green-2:#2F423E;
  --asm-accent:#A96045;

  --asm-bg-3:color-mix(in srgb, var(--asm-green) 78%, #000000);
  --asm-accent-soft:color-mix(in srgb, var(--asm-accent) 52%, #ffffff);

  --asm-text:#ffffff;
  --asm-muted:rgba(255,255,255,.68);
  --asm-faint:rgba(255,255,255,.12);
  --asm-card:rgba(255,255,255,.05);
  --asm-card-hover:rgba(255,255,255,.085);
  --asm-card-border:rgba(255,255,255,.14);
  --asm-radius:20px;
  --asm-ease:cubic-bezier(.16,1,.3,1);

  position:relative;
  isolation:isolate;
  overflow:hidden;
  direction:rtl;
  color:var(--asm-text);
  padding:clamp(34px,5vw,72px) clamp(16px,4vw,60px);
  font-family:"iransans","IRANSans","Vazirmatn",Tahoma,sans-serif;
  line-height:1.7;
  background:var(--asm-green);
  background:
    radial-gradient(500px at 20% 20%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(135deg, var(--asm-green), var(--asm-green-2));
}

/* --- Decorative background -------------------------------------------- */
.asm-social__bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.asm-social__blob{ position:absolute; border-radius:50%; filter:blur(70px); opacity:.5; will-change:transform; }
.asm-social__blob--1{
  width:440px; height:440px; top:-150px; left:-110px;
  background:radial-gradient(circle, color-mix(in srgb, var(--asm-accent) 30%, transparent), transparent 68%);
  animation:asm-drift 22s var(--asm-ease) infinite alternate;
}
.asm-social__blob--2{
  width:400px; height:400px; bottom:-160px; right:-90px;
  background:radial-gradient(circle, color-mix(in srgb, var(--asm-green) 55%, #cfe0bd), transparent 70%);
  opacity:.35;
  animation:asm-drift 26s var(--asm-ease) infinite alternate-reverse;
}
.asm-social__grid-tex{
  position:absolute; inset:0; opacity:.4;
  background-image:
    linear-gradient(rgba(245,239,227,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,239,227,.045) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
          mask-image:radial-gradient(120% 100% at 50% 0%, #000 20%, transparent 78%);
}

/* --- Layout ----------------------------------------------------------- */
.asm-social__inner{
  position:relative; z-index:1;
  max-width:1120px; margin-inline:auto;
  display:grid;
  grid-template-columns:1.12fr .88fr;
  align-items:center;
  gap:clamp(24px,4vw,60px);
}

/* ===================== CONTENT ======================================= */
.asm-social__title{
  margin:0 0 8px;
  font-family:"gramophone","iransans","Vazirmatn",serif;
  font-size:clamp(24px,3.2vw,40px);
  font-weight:700; line-height:1.3; letter-spacing:0;
}
.asm-social__title .accent{ color:#fff; }
.asm-social__subtitle{
  margin:0 0 22px; max-width:44ch;
  color:var(--asm-muted); font-size:clamp(13px,1.4vw,15px); font-weight:400;
}

/* --- Stat / coming-soon grid ----------------------------------------- */
.asm-social__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(11px,1.4vw,16px); }
.asm-card{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(15px,1.8vw,22px);
  border-radius:var(--asm-radius);
  background:var(--asm-card);
  border:1px solid var(--asm-card-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 14px 32px -22px rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform .5s var(--asm-ease), background .4s var(--asm-ease), border-color .4s var(--asm-ease);
}
.asm-card:hover{ transform:translateY(-5px); background:var(--asm-card-hover); border-color:rgba(245,239,227,.24); }

.asm-card__spot{
  position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(200px 200px at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--asm-accent) 22%, transparent), transparent 62%);
}
.asm-card:hover .asm-card__spot{ opacity:1; }

.asm-card__icon{
  display:grid; place-items:center;
  width:40px; height:40px; border-radius:12px; margin-bottom:13px;
  background:rgba(255,255,255,.1);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
}
.asm-card__icon svg{ width:20px; height:20px; }

.asm-card__value{
  display:flex; align-items:baseline; gap:2px; flex-wrap:wrap;
  direction:ltr; justify-content:flex-end;
  font-family:"iransans","IRANSans","Vazirmatn",Tahoma,sans-serif;
  font-size:clamp(24px,3vw,36px); font-weight:700; line-height:1; color:#fff;
}
.asm-card__value .plus{ color:#fff; }
.asm-card__value .unit{ font-size:.62em; font-weight:700; color:#fff; }
.asm-card__label{ margin-top:7px; color:#fff; font-size:13px; font-weight:500; }

/* ---- COMING-SOON variant ------------------------------------------- */
.asm-card--soon{
  border-style:dashed; border-color:rgba(245,239,227,.22);
  background:
    repeating-linear-gradient(135deg, rgba(245,239,227,.03) 0 12px, transparent 12px 24px),
    rgba(255,255,255,.02);
}
.asm-card--soon .asm-card__icon{ background:rgba(255,255,255,.09); color:#fff; border-color:var(--asm-faint); }
.asm-card--soon .asm-card__title{ font-size:clamp(16px,1.9vw,20px); font-weight:700; line-height:1.35; color:#fff; }
.asm-card__soon{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px;
  font-size:12.5px; font-weight:600; color:#fff;
}
.asm-card__soon svg{ width:13px; height:13px; }

.asm-card__watermark{
  position:absolute; left:-16px; bottom:-24px; z-index:-1;
  color:rgba(255,255,255,.08); transform:rotate(-8deg); pointer-events:none;
}
.asm-card__watermark svg{ width:112px; height:112px; }

.asm-card--soon::after{
  content:""; position:absolute; top:0; bottom:0; width:55%;
  background:linear-gradient(100deg, transparent, rgba(245,239,227,.09), transparent);
  transform:translateX(-160%) skewX(-18deg);
  animation:asm-shimmer 4.5s ease-in-out infinite; pointer-events:none;
}

/* --- Divider + actions ----------------------------------------------- */
.asm-social__divider{
  height:1px; margin:clamp(18px,2.4vw,28px) 4px;
  background:linear-gradient(90deg, transparent, var(--asm-card-border), transparent);
}
.asm-social__actions{ display:flex; flex-wrap:wrap; gap:12px; }

.asm-btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 26px; border-radius:100px;
  font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
  text-decoration:none; border:1px solid transparent;
  transition:transform .35s var(--asm-ease), box-shadow .35s var(--asm-ease), background .3s ease;
  will-change:transform;
}
.asm-btn svg{ width:18px; height:18px; flex:none; }
.asm-btn:active{ transform:translateY(1px) scale(.98); }
.asm-btn--primary{ background:var(--asm-text); color:var(--asm-bg-3); box-shadow:0 12px 26px -12px rgba(0,0,0,.5); }
.asm-btn--primary:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -14px rgba(0,0,0,.6); }
.asm-btn--ghost{ background:var(--asm-card); color:var(--asm-text); border-color:var(--asm-card-border); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.asm-btn--ghost:hover{ transform:translateY(-3px); background:var(--asm-card-hover); border-color:rgba(245,239,227,.3); }
.asm-btn__ripple{
  position:absolute; border-radius:50%; transform:translate(-50%,-50%) scale(0);
  background:currentColor; opacity:.28; pointer-events:none; animation:asm-ripple .6s ease-out forwards;
}

/* ===================== PHONE (real screenshot) ======================= */
.asm-social__visual{ display:flex; justify-content:center; align-items:center; position:relative; }
.asm-social__glow{
  position:absolute; width:72%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--asm-accent) 28%, transparent), transparent 62%);
  filter:blur(46px); z-index:0;
}
.asm-phone{
  position:relative; z-index:1;
  width:min(205px,54vw); aspect-ratio:300/620;
  border-radius:38px; padding:9px;
  background:linear-gradient(145deg,#1c1f19,#39413400);
  background-color:#1d211a;
  box-shadow:0 34px 64px -28px rgba(0,0,0,.7), inset 0 0 0 2px rgba(245,239,227,.06);
  transform:rotate(-4deg);
  transition:transform .7s var(--asm-ease);
  animation:asm-float 7s ease-in-out infinite;
}
.asm-phone:hover{ transform:rotate(0deg); }
.asm-phone__screen{
  position:relative; height:100%; border-radius:30px; overflow:hidden;
  background:#e9e4d8; display:flex;
}
.asm-phone__img{
  width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
}
.asm-phone__ph{
  margin:auto; display:flex; flex-direction:column; align-items:center; gap:10px;
  color:#8a8676; text-align:center; padding:20px; font-size:12px; line-height:1.7;
}
.asm-phone__ph svg{ width:34px; height:34px; }

/* ===================== REVEAL ======================================= */
.asm-reveal{ opacity:0; transform:translateY(24px); }
.asm-reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--asm-ease), transform .8s var(--asm-ease);
  transition-delay:var(--d,0ms);
}

/* ===================== KEYFRAMES ==================================== */
@keyframes asm-float{ 0%,100%{ transform:rotate(-4deg) translateY(0); } 50%{ transform:rotate(-4deg) translateY(-12px); } }
@keyframes asm-drift{ 0%{ transform:translate(0,0) scale(1); } 100%{ transform:translate(46px,36px) scale(1.14); } }
@keyframes asm-shimmer{ 0%{ transform:translateX(-160%) skewX(-18deg); } 55%,100%{ transform:translateX(320%) skewX(-18deg); } }
@keyframes asm-ripple{ to{ transform:translate(-50%,-50%) scale(26); opacity:0; } }

/* ===================== RESPONSIVE =================================== */
@media (max-width:860px){
  .asm-social__inner{ grid-template-columns:1fr; gap:28px; }
  .asm-social__visual{ order:-1; }
  .asm-phone{ width:min(185px,44vw); animation-duration:8s; }
}
@media (max-width:480px){
  .asm-social{ padding:30px 16px; }
  .asm-social__title{ font-size:22px; }
  .asm-card{ padding:14px; }
  .asm-card__value{ font-size:24px; }
  .asm-card__icon{ width:36px; height:36px; margin-bottom:10px; }
  .asm-card--soon .asm-card__title{ font-size:15px; }
  .asm-phone{ width:min(170px,50vw); }
  .asm-social__actions{ gap:10px; }
  .asm-btn{ flex:1; justify-content:center; padding:12px 18px; font-size:13px; }
}

@media (prefers-reduced-motion:reduce){
  .asm-phone, .asm-social__blob, .asm-card--soon::after{ animation:none !important; }
  .asm-reveal{ opacity:1 !important; transform:none !important; }
}