/* ====== Base / صفحه پورتفولیو ====== */
body.single-portfolio{
  background:#0f0f10 !important; color:#e9e9e9;
}
body.single-portfolio .site,
body.single-portfolio #page,
body.single-portfolio .site-main,
body.single-portfolio .site-content,
body.single-portfolio .content-area,
body.single-portfolio .content,
body.single-portfolio .container,
body.single-portfolio .wrap,
body.single-portfolio .entry,
body.single-portfolio .entry-header,
body.single-portfolio .entry-content,
body.single-portfolio .elementor,
body.single-portfolio .elementor-section,
body.single-portfolio .elementor-container,
body.single-portfolio .elementor-widget-wrap{
  background: transparent !important; box-shadow:none !important; border:0 !important;
}
body.single-portfolio .site-footer{ background:#0f0f10 !important; color:#e9e9e9; }

.naam-portfolio{
  font-family:"Peyda","Vazirmatn","IRANSansX","Segoe UI",Tahoma,Arial,sans-serif;
}
.naam-portfolio[data-lang="fa"]{ direction:rtl; }
.naam-portfolio[data-lang="en"]{
  font-family:"Avian","Helvetica Neue","Inter","Segoe UI",Arial,sans-serif;
}
.naam-portfolio{
  font-family:"Vazirmatn","IRANSansX","Estedad","Segoe UI",Tahoma,Arial,sans-serif;
}
.naam-portfolio[data-lang="en"]{
  font-family:"Avian","Helvetica Neue","Inter","Segoe UI",Arial,sans-serif;
}

/* ====== زبان ====== */
.lang-pills{
  position:absolute; z-index:10000; top:12px; display:flex; gap:8px; pointer-events:auto;
}
.naam-portfolio[data-lang="fa"] .lang-pills{ left:12px; right:auto; }
.naam-portfolio[data-lang="en"] .lang-pills{ right:12px; left:auto; }
.pill{
  appearance:none; border:1px solid rgba(255,255,255,.35); background:transparent; color:#e9e9e9;
  padding:8px 14px; border-radius:8px; font-weight:700; letter-spacing:.4px; cursor:pointer;
  transition: background .2s, color .2s, border-color .2s, transform .15s;
}
.pill:hover{ background:rgba(255,255,255,.10); transform:translateY(-1px); }
.pill.is-active{ background:#e49503; color:#111; border-color:#e49503; }
.pill:disabled{ opacity:.35; cursor:not-allowed; }

/* ====== Swiper Stage ====== */
.naam-portfolio__swiper{
  width:100%;
  height:78vh;
  min-height:560px;
  overflow:hidden;
  position:relative;
  border-radius:0;
  box-shadow:0 16px 44px rgba(0,0,0,.10);
  background:#0d0d0d;
  isolation:isolate;
  direction:ltr;

  /* فضاهای تیره خارج از تصویر (بدون تغییر اندازه‌ی خود اسلایدر) */
  margin-top:100px;   /* بالا 100px */
  margin-bottom:200px;/* پایین 200px */
}

.swiper-slide{ width:100%; height:100%; position:relative; z-index:2; }

/* Poster */
.slide--poster .poster-img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.06); animation:kenburns 16s ease-in-out both; }
@keyframes kenburns{ 0%{transform:scale(1.08);} 100%{transform:scale(1);} }
.poster-gradient{ position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,0) 52%, rgba(0,0,0,.78) 98%), radial-gradient(60% 60% at 50% 60%, rgba(0,0,0,0), rgba(0,0,0,.5) 70%, rgba(0,0,0,.65) 100%); }
.poster-title{ position:absolute; bottom:26px; left:26px; right:26px; z-index:4; }
.naam-portfolio[data-lang="fa"] .poster-title{ text-align:right; }
.naam-portfolio[data-lang="en"] .poster-title{ text-align:left; }
/* عنوان پوستر با گرادینت سفید/زرد/نارنجی و انیمیشن کندتر */
.poster-title .title{
  margin:0;
  font-size:clamp(24px,4.1vw,44px);
  line-height:1.06;
  font-weight:800;
  letter-spacing:.1px;

  /* گرادینت هماهنگ با استایل کلی: سفید → زرد → نارنجی */
  background: linear-gradient(
    to right,
    #ffffff 0%,
    #ffcc00 55%,
    #e49503 100%
  );
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  /* حرکت آرام‌تر رنگ */
  animation: naamTitleSlide 8s ease-in-out infinite;
  /* کمی سایه برای خوانایی روی بک‌گراند تیره */
  text-shadow: 0 8px 22px rgba(0,0,0,.35);
}
/* فونت‌های اختصاصی هر زبان روی تیتر */
.naam-portfolio[data-lang="fa"] .poster-title .title{ font-family:"Peyda","Vazirmatn",sans-serif; }
.naam-portfolio[data-lang="en"] .poster-title .title{ font-family:"Avian","Inter",sans-serif; }

@keyframes naamTitleSlide{
  0%   { background-position:   0% center; }
  50%  { background-position: 100% center; }
  100% { background-position:   0% center; }
}

.title--fa,.title--en{ display:none; }
.naam-portfolio[data-lang="fa"] .title--fa{ display:block; }
.naam-portfolio[data-lang="en"] .title--en{ display:block; }

/* Content slide */
/* Content slide */
.slide--content{ width:100%; height:100%; overflow:hidden; background:#0f0f10; }

/* پیش‌فرض: NO STRETCH — تصویر کامل و وسط با نوارهای تیره (برای مربع/پرتره عالیه) */
.slide--content .bg-image{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: contain;            /* پیش‌فرض جدید: بدون کراپ و بدون کشیدگی */
  object-position: center;
  display:block;
  background:#0f0f10;             /* پشت PNG شفاف */
  transform:none;
  transition: filter .4s ease;
  filter: saturate(1.02) contrast(1.02);
  box-shadow:none;
  border-radius:0 !important;
}

/* عکس قبل در حالت عادی مخفی باشد */
.slide--content .before-image{
  display: none;
}

/* حالت نمایش فقط عکس قبل */
.slide--content.showing-before .bg-image{
  display: none !important;
}

.slide--content.showing-before .before-image{
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  position: absolute;
  inset: 0;
}

/* وقتی نسبت تصویر به نسبت استیج نزدیک بود → تمام‌صفحه و بدون نوار */
.slide--content.fit-cover .bg-image{ object-fit: cover; }

/* هاور ملایم‌تر */
.slide--content:hover .bg-image{ filter:saturate(1.04) contrast(1.03); }

/* Glow: برای contain ملایم‌تر و برای cover قوی‌تر */
.slide--content::after{
  content:""; position:absolute; left:8%; right:8%; bottom:-18px; height:80px; pointer-events:none; z-index:1; border-radius:0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.26) 0%, rgba(255,255,255,.12) 40%, rgba(255,255,255,0) 70%);
  filter: blur(3px); opacity:.45; mix-blend-mode: screen;
}
.slide--content.fit-cover::after{ opacity:.9; }



/* متن کناری */
.overlay-text{
  position:absolute; z-index:5; top:20px; bottom:20px; width:var(--txtW,12%); padding:0; display:flex; align-items:stretch; transform:none; transition: transform .35s ease;
}
.naam-portfolio[data-lang="fa"] .overlay-text{ right:20px; left:auto; }
.naam-portfolio[data-lang="en"] .overlay-text{ left:20px; right:auto; }
.glass{
  height:100%; width:100%; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; overflow:auto;
  background: rgba(255,255,255,.46); backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);
  border:0; border-radius:0; padding:20px; box-shadow:0 24px 60px rgba(0,0,0,.16); color:#0b0b0b;
  opacity:0; transform: translateY(8px); animation: reveal .5s ease forwards .1s;
}
@keyframes reveal{ to{ opacity:1; transform:translateY(0);} }

.text-fa,.text-en{ display:none; }
.naam-portfolio[data-lang="fa"] .text-fa{ display:block; text-align:justify; text-justify:inter-word; direction:rtl; unicode-bidi:plaintext; }
.naam-portfolio[data-lang="en"] .text-en{ display:block; text-align:justify; text-justify:inter-word; direction:ltr; unicode-bidi:plaintext; font-family:"Avian","Helvetica Neue","Inter","Segoe UI",Arial,sans-serif; hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; }

.glass p{ margin:0 0 10px; line-height:1.85; font-size:clamp(10px,1vw,12px); letter-spacing:.1px; }
.glass p:last-child{ margin-bottom:0; }

.slide--content:hover .bg-image{ transform:none; filter:saturate(1.04) contrast(1.03); }


/* ====== فلش‌ها ====== */
.nav-arrow{
  position:absolute; top:0; bottom:0; width:35px; height:auto; display:flex; align-items:center; justify-content:center;
  cursor:pointer; user-select:none; z-index:999; background:rgba(0,0,0,0.10); border:none; box-shadow:none;
  transition: background .25s ease, transform .25s ease, opacity .25s ease;
}
.nav-arrow.prev{ left:0; }
.nav-arrow.next{ right:0; }
.nav-arrow::after{ content:""; width:14px; height:14px; border:2px solid #e49503; border-top:0; border-right:0; }
.nav-arrow.prev::after{ transform: rotate(45deg) !important; }
.nav-arrow.next::after{ transform: rotate(225deg) !important; }
.nav-arrow:hover{ background: rgba(0,0,0,0.28); }
.nav-arrow:hover::after{ border-color:#ffcc00; }
.tiny-counter{ display:none !important; }

/* ====== Project Info FAB + Dropup ====== */
.project-info{ position:absolute; bottom:26px; z-index:9999; pointer-events:none; }
.naam-portfolio[data-lang="fa"] .project-info{ left:26px; right:auto; }
.naam-portfolio[data-lang="en"] .project-info{ right:26px; left:auto; }

/* دکمه: دایره‌ای و کوچک‌تر */
.info-fab{
  pointer-events:auto; position:relative; width:42px; height:42px;
  border:0; border-radius:999px !important;
  display:flex; align-items:center; justify-content:center; line-height:0;

  /* سفید → زرد → نارنجی */
  background: radial-gradient(100% 100% at 50% 0%,
              #ffffff 0%,
              #ffcc00 45%,
              #e49503 100%);
  color:#111;

  box-shadow:
    0 12px 28px rgba(0,0,0,.35),
    0 0 0 6px rgba(255,204,0,.18) inset;
  cursor:pointer;

  /* کندتر شدن ترنزیشن‌ها */
  transition:
    transform .24s ease,
    box-shadow .40s ease,
    filter .40s ease;
  isolation:isolate;
}
.info-fab:hover{
  transform: translateY(-2px) scale(1.04);
  filter: brightness(1.04) saturate(1.03);
  box-shadow:
    0 16px 36px rgba(0,0,0,.45),
    0 0 0 8px rgba(255,204,0,.20) inset;
}
.info-fab::before{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  /* هاله روشن با سفید/زرد */
  background: radial-gradient(60% 60% at 50% 50%,
              rgba(255,255,255,.35),
              rgba(255,255,255,0));
  filter: blur(8px); opacity:.8;
  animation: infoPulse 3.2s ease-in-out infinite; /* کندتر */
  z-index:-1;
}
@keyframes infoPulse{
  0%,100%{ transform:scale(.95); opacity:.6; }
  50%    { transform:scale(1.05); opacity:1; }
}


.info-fab__hint{
  position:absolute; bottom:100%; white-space:nowrap; margin-bottom:8px; padding:5px 8px; border-radius:8px; font-size:11px; font-weight:800; letter-spacing:.2px;
  color:#111; background:#ffdc6a; box-shadow:0 8px 18px rgba(0,0,0,.25);
  opacity:0; transform:translateY(6px); transition:.2s; pointer-events:none;
}
.naam-portfolio[data-lang="fa"] .info-fab__hint{ left:50%; transform:translate(-50%,6px); }
.naam-portfolio[data-lang="en"] .info-fab__hint{ right:50%; transform:translate(50%,6px); }
.project-info:not(.is-open) .info-fab:hover .info-fab__hint{ opacity:1; transform:translateY(0); }
.info-fab__hint--fa,.info-fab__hint--en{ display:none; }
.naam-portfolio[data-lang="fa"] .info-fab__hint--fa{ display:inline-block; }
.naam-portfolio[data-lang="en"] .info-fab__hint--en{ display:inline-block; }

/* کارت اطلاعات */
.info-card{
  pointer-events:auto; position:absolute; bottom:56px; min-width:260px; max-width:min(82vw,520px);
  max-height:0; overflow:hidden; opacity:0; transform:translateY(8px) scale(.98);
  transition: opacity .22s, transform .22s, max-height .35s;
  background: linear-gradient(180deg, rgba(24,24,24,.82), rgba(16,16,16,.86));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border:1px solid rgba(255,255,255,.14); border-radius:16px;
  box-shadow:0 22px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.project-info.is-open .info-card{ opacity:1; transform:translateY(-4px) scale(1); max-height:70vh; }

/* پیکان به سمت دکمه */
.info-card::after{
  content:""; position:absolute; bottom:-8px; width:16px; height:16px; background:inherit; border:inherit; border-left:none; border-top:none; transform:rotate(45deg); filter:drop-shadow(0 8px 24px rgba(0,0,0,.3));
}
.naam-portfolio[data-lang="fa"] .info-card{ left:0; }
.naam-portfolio[data-lang="fa"] .info-card::after{ left:14px; }
.naam-portfolio[data-lang="en"] .info-card{ right:0; }
.naam-portfolio[data-lang="en"] .info-card::after{ right:14px; }

/* هدِ کارت — ترازبندی */
.info-card__head{
  display:flex; align-items:center; padding:12px 16px 6px; border-bottom:1px dashed rgba(255,255,255,.12);
  color:#ffdc6a; font-weight:900; letter-spacing:.4px; text-transform:uppercase;
}
.lbl{ display:none; font-size:12px; line-height:1; }
.naam-portfolio[data-lang="fa"] .info-card__head{ justify-content:flex-end; text-align:right; }
.naam-portfolio[data-lang="en"] .info-card__head{ justify-content:flex-start; text-align:left; }
.naam-portfolio[data-lang="fa"] .lbl--fa{ display:inline; }
.naam-portfolio[data-lang="en"] .lbl--en{ display:inline; }

/* بدنه‌ی کارت */
.info-card__body{ padding:10px 14px 14px; }
.info-list{ list-style:none; margin:0; padding:0; display:none; }
.naam-portfolio[data-lang="fa"] .info-list.info-fa{ display:block; direction:rtl; }
.naam-portfolio[data-lang="en"] .info-list.info-en{ display:block; direction:ltr; }

/* چیدمان ردیف‌ها: label | value */
.info-list li{
  display:grid; grid-template-columns:auto 1fr; gap:10px; padding:9px 6px; align-items:center;
  border-bottom:1px dashed rgba(255,255,255,.08);
}
.info-list li:last-child{ border-bottom:none; }
.info-list .k{ color:#cfcfcf; font-size:12px; opacity:.9; }
/* استایل پایه‌ی مقدار */
.info-list .v{
  color:#fff; font-weight:800; font-size:13px; letter-spacing:.2px;
  padding:4px 8px; border-radius:8px;
}

/* جهت گرادینت طوری که سمت "کلیدها" پررنگ‌تر باشد */
.naam-portfolio[data-lang="en"] .info-list .v{
  /* EN: کلیدها سمت چپ → لبه‌ی چپ مقدار باید پررنگ شود */
  background: linear-gradient(270deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  
}
.naam-portfolio[data-lang="fa"] .info-list .v{
  /* FA: کلیدها سمت راست → لبه‌ی راست مقدار باید پررنگ شود */
 
   background: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,0));
}

/* ترازبندی تیتر/مقدار در هر زبان */
.naam-portfolio[data-lang="en"] .info-list.info-en .k{ text-align:left;  }
.naam-portfolio[data-lang="en"] .info-list.info-en .v{ text-align:right; }
.naam-portfolio[data-lang="fa"] .info-list.info-fa .k{ text-align:right; }
.naam-portfolio[data-lang="fa"] .info-list.info-fa .v{ text-align:left;  }

/* تیتر پنل: راست در فارسی / چپ در انگلیسی */
.naam-portfolio[data-lang="fa"] .info-card__head{ justify-content:flex-end; text-align:right; }
.naam-portfolio[data-lang="en"] .info-card__head{ justify-content:flex-start; text-align:left; }



/* ریسپانسیو */
@media (max-width:980px){
  .naam-portfolio__swiper{ height:72vh; min-height:480px; }
  .overlay-text{ top:16px; bottom:16px; right:auto; left:50%!important; transform:translateX(-50%); width:min(92%,560px); }
  .info-fab{ width:38px; height:38px; }
}

.naam-portfolio[data-lang="fa"] .info-summary.info-fa{
  display:block; direction:rtl; text-align:justify;
}
.naam-portfolio[data-lang="en"] .info-summary.info-en{
  display:block; direction:ltr; text-align:justify;
}

/* --- Summary: فقط زبان فعال نمایش داده شود (۳ خطه) --- */
.info-summary{
  display: none;
  margin: 10px 6px 0;
  font-size: 12px;
  line-height: 1.8;
  color: #d8d8d8;
  opacity: .92;

  /* سه‌خطه کردن متن */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
}

/* فقط فارسی در حالت fa */
.naam-portfolio[data-lang="fa"] .info-summary.info-fa{
  display: -webkit-box;
  direction: rtl;
  text-align: justify;
}

/* فقط انگلیسی در حالت en */
.naam-portfolio[data-lang="en"] .info-summary.info-en{
  display: -webkit-box;
  direction: ltr;
  text-align: justify; /* اگر دوست داری EN چپ‌چین باشه: text-align:left; */
}

/* ====== دکمه عکس قبل/بعد ====== */
.before-after-toggle{
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 8px 16px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.before-after-toggle:hover{
  background: rgba(0,0,0,0.85);
  border-color: rgba(255,255,255,0.4);
  transform: translateX(-50%) translateY(-1px);
}

.before-after-toggle:active{
  transform: translateX(-50%) translateY(0);
}

/* توضیح هاور زیبا */
.before-after-toggle::before{
  content: "تغییر حالت نمایش عکس";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.9);
  color: #fff;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  margin-top: 8px;
  z-index: 20;
}

.naam-portfolio[data-lang="en"] .before-after-toggle::before{
  content: "Change image display mode";
}

.before-after-toggle:hover::before{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(2px);
}

.toggle-text{
  display: none;
}

.naam-portfolio[data-lang="fa"] .toggle-text--fa{
  display: inline;
}

.naam-portfolio[data-lang="en"] .toggle-text--en{
  display: inline;
}

/* حالت فعال (نمایش کنار هم) */
.before-after-toggle.active{
  background: rgba(228, 149, 3, 0.9);
  border-color: rgba(228, 149, 3, 0.5);
}

/* حالت نمایش کنار هم (قبل و بعد) */
.slide--content.showing-both{
  display: flex;
  flex-direction: row;
}

.slide--content.showing-both .bg-image{
  width: 50%;
  height: 100%;
  object-fit: cover;
  display: block !important;
  position: relative;
  order: 1;
}

.slide--content.showing-both .before-image{
  width: 50%;
  height: 100%;
  object-fit: cover;
  display: block !important;
  position: relative;
  order: 2;
}


/* برچسب "قبل" در حالت کنار هم */
.slide--content.showing-both::after{
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  z-index: 15;
  content: "قبل";
}

.naam-portfolio[data-lang="en"] .slide--content.showing-both::after{
  content: "Before";
}

/* ریسپانسیو برای دکمه */
@media (max-width: 980px){
  .before-after-toggle{
    top: 16px;
    padding: 6px 12px;
    font-size: 11px;
  }
}