/* ============================================================
   بالای صفحهٔ اصلی — بازطراحی ۲۰۲۶-۱۰-۱۹ (Claude Code)
   فایل جدا، فقط در index.html و بعد از style.css: هیچ خطی از style.css
   (و PROTECTED ZONE) ویرایش نشده. فونت ارث‌بری می‌شود (بدون font-family)؛
   letter-spacing فقط روی متن لاتین «SOHA LUXE».
   مارک‌آپ: index.html (#sohaHero)، رفتار: js/home-hero.js و js/globe-overlay.js.
   ============================================================ */

/* ---------- ۱. کادر لوگو: کوچک (هم‌قد ردیف آیکون‌ها)، برجسته، فرو رفتن با لمس ----------
   خود لوگو (عکس، ستاره، پچ) دست نخورده؛ کل جعبهٔ ۶۸px با transform کوچک می‌شود
   تا مختصات مطلق ستاره/پچ سر جایشان بمانند. margin منفی جای خالی transform را جبران می‌کند. */
.site-header .logo {
  --sh-logo-k: 0.941;            /* ۶۸ → ~۶۴px */
  transform: scale(var(--sh-logo-k));
  margin: -2px;
  transition: transform 0.14s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.site-header .logo::before {
  inset: 0;
  border-radius: 20px;
  box-shadow:
    -5px -5px 11px var(--nx-navy-sh-light, rgba(255, 255, 255, 0.08)),
    5px 5px 12px var(--nx-navy-sh-dark, rgba(0, 0, 0, 0.45));
  transition: box-shadow 0.14s ease;
}
.site-header .logo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  border: 2px solid #E0B183;
  opacity: 0;
  pointer-events: none;
}
.site-header .logo.is-pressed {
  transform: scale(calc(var(--sh-logo-k) * 0.93));
}
.site-header .logo.is-pressed::before {
  box-shadow:
    inset 4px 4px 8px var(--nx-navy-sh-dark, rgba(0, 0, 0, 0.5)),
    inset -4px -4px 8px var(--nx-navy-sh-light, rgba(255, 255, 255, 0.08));
}
.site-header .logo.is-ring::after {
  animation: sh-logo-ring 0.6s ease-out;
}
@keyframes sh-logo-ring {
  from { opacity: 0.95; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.38); }
}
@media (max-width: 700px) {
  .site-header .logo {
    --sh-logo-k: 0.794;          /* ۶۸ → ~۵۴px */
    margin: -7px;
  }
}

/* ---------- ۲. صفحهٔ «محاسبه قیمت»: نوار حذف شد؛ فقط وقتی باز است دیده می‌شود ---------- */
.luxi-calc-duo:not(.is-open) { display: none; }
body.calc-view-open .soha-hero { display: none !important; }

/* ---------- ۳. کارت شناور بنر ---------- */
.soha-hero {
  --sh-gold: #D8BC66;
  --sh-gold-lite: #F0DCA2;
  --sh-gold-deep: #A9873A;
  --sh-ivory: #F6F1E6;
  --sh-muted: #A9B8CC;
  max-width: var(--max, 1400px);
  margin: 0 auto;
  padding: 12px;
  box-sizing: border-box;
}
.sh-card {
  position: relative;
  border-radius: 26px;
  padding: 18px 14px 16px;
  text-align: center;
  color: var(--sh-ivory);
  background:
    radial-gradient(120% 85% at 28% 0%, #2B4A75 0%, #1B3050 38%, #12233D 68%, #0A1628 100%);
  border: 1px solid rgba(216, 188, 102, 0.62);
  box-shadow:
    0 2px 6px rgba(8, 18, 34, 0.25),
    0 22px 44px -14px rgba(8, 18, 34, 0.62);
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}
/* خط داخلی کم‌رنگ */
.sh-card::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 21px;
  border: 1px solid rgba(240, 220, 162, 0.16);
  pointer-events: none;
  z-index: -1;
}

.sh-eyebrow {
  margin: 0 0 6px;
  color: var(--sh-gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.55em;
  padding-left: 0.55em; /* جبران فاصلهٔ حرف آخر تا متن وسط بماند */
}
.sh-title {
  margin: 0;
  font-size: clamp(22px, 6.4vw, 34px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--sh-ivory);
}
.sh-from {
  margin: 6px 0 0;
  color: var(--sh-muted);
  font-size: 14px;
  line-height: 1.7;
}
.sh-country {
  display: inline-grid;
  min-width: 4.6em;
  height: 1.7em;
  overflow: hidden;
  vertical-align: bottom;
  text-align: start;
}
.sh-country-word {
  grid-area: 1 / 1;
  color: var(--sh-gold-lite);
  font-weight: 700;
  white-space: nowrap;
}
.sh-country-word.is-entering { animation: sh-word-in 0.6s cubic-bezier(0.22, 0.8, 0.28, 1) both; }
.sh-country-word.is-leaving { animation: sh-word-out 0.6s cubic-bezier(0.6, 0, 0.4, 1) both; }
@keyframes sh-word-in {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes sh-word-out {
  from { transform: none; opacity: 1; }
  to   { transform: translateY(-100%); opacity: 0; }
}

/* ---------- ۴. کره ---------- */
.sh-globe-wrap {
  height: 310px;
  margin: 0 -6px 0;
  display: flex;
  justify-content: center;
}
.sh-globe {
  display: block;
  height: 100%;
}
/* ویدیوی کرهٔ پارچه‌ای (globe-overlay.js): پایه‌ی .soha-globe اینجاست چون CSP اجازهٔ <style> inline نمی‌دهد.
   لبه‌ها با mask نرم می‌شوند تا کادر مستطیلی ویدیو در پس‌زمینهٔ سرمه‌ای دیده نشود. */
.soha-globe { position: relative; width: 100%; aspect-ratio: 720 / 1056; }
.soha-globe > img, .soha-globe > video, .soha-globe > svg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.soha-globe > video { opacity: 0; transition: opacity 0.4s; }
.soha-globe > video.ready { opacity: 1; }
.sh-globe.soha-globe {
  width: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 24%, #000 76%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-composite: intersect;
}
@keyframes sohaFlow { to { stroke-dashoffset: -18; } }
@keyframes sohaPulse { 0% { r: 20; opacity: 0.8; } 100% { r: 36; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .soha-globe path, .soha-globe circle { animation: none !important; }
}

/* ---------- ۵. پایهٔ سه‌بعدی + کادر لینک ---------- */
.sh-plinth {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: 14px 12px 10px;
  border-radius: 18px;
  background: linear-gradient(180deg, #1E3758 0%, #142844 55%, #0E1C33 100%);
  border-top: 1.5px solid #EED48A;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 3px 0 #0A1426,
    0 16px 26px -12px rgba(0, 0, 0, 0.7);
}
/* براقی لبهٔ بالا */
.sh-plinth::before {
  content: '';
  position: absolute;
  top: -1.5px;
  inset-inline: 14%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #FFF4CC, transparent);
  pointer-events: none;
}
.sh-link {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.sh-input {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 46px;
  padding: 0 12px;
  border-radius: 13px;
  background: #0A1527;
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.65),
    inset -1px -1px 3px rgba(255, 255, 255, 0.07);
  color: var(--sh-gold);
  cursor: text;
}
.sh-input-icon { flex: none; }
.sh-input input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  color: var(--sh-ivory);
  font: inherit;
  font-size: 16px; /* زیر ۱۶px آیفون موقع فوکوس زوم می‌کند */
}
.sh-input input::placeholder { color: rgba(246, 241, 230, 0.5); font-size: 14px; }
.sh-input input:not(:placeholder-shown) { direction: ltr; text-align: left; }
.sh-input:focus-within {
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.65),
    inset -1px -1px 3px rgba(255, 255, 255, 0.07),
    0 0 0 1.5px rgba(216, 188, 102, 0.7);
}

.sh-go,
.sh-continue {
  flex: none;
  height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 13px;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  color: #241A05;
  background: linear-gradient(180deg, #F7E6AE 0%, #DFC273 50%, #B9973F 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 4px 0 #7A5D1D,
    0 9px 16px -6px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.2s;
}
.sh-go:active,
.sh-continue:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 1px 0 #7A5D1D,
    0 4px 8px -4px rgba(0, 0, 0, 0.6);
}
.sh-go:disabled { filter: saturate(0.6) brightness(0.9); cursor: progress; }
@media (hover: hover) {
  .sh-go:hover:not(:disabled),
  .sh-continue:hover { filter: brightness(1.06); }
}

.sh-sites {
  margin: 11px 0 0;
  color: #EED48A;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.6;
}
.sh-ask {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 7px auto 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #C9D3E2;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sh-ask img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--sh-gold);
  object-fit: cover;
}
.sh-ask span {
  text-decoration: underline;
  text-decoration-color: rgba(216, 188, 102, 0.55);
  text-underline-offset: 4px;
}
.sh-ask:active { transform: scale(0.97); }

/* ---------- ۶. آکاردئون نتیجه ---------- */
.sh-acc {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.22, 0.8, 0.28, 1);
}
.sh-acc.is-open { grid-template-rows: 1fr; }
.sh-acc-clip {
  min-height: 0;
  overflow: hidden;
  overflow: clip;
}
.sh-acc-body { padding: 16px 2px 4px; }

.sh-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  color: #EED48A;
  font-size: 14px;
  font-weight: 700;
}
.sh-dots { display: inline-flex; gap: 5px; }
.sh-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sh-gold);
  animation: sh-dot 1s ease-in-out infinite;
}
.sh-dots i:nth-child(2) { animation-delay: 0.15s; }
.sh-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes sh-dot {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.45; }
  40% { transform: translateY(-6px); opacity: 1; }
}

.sh-error {
  padding: 4px 6px;
  color: var(--sh-ivory);
  font-size: 14px;
  line-height: 1.8;
}
.sh-error p { margin: 0 0 10px; }
.sh-retry,
.sh-again {
  height: 40px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid rgba(216, 188, 102, 0.7);
  background: rgba(10, 21, 39, 0.5);
  color: #EED48A;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sh-retry:active,
.sh-again:active { transform: translateY(1px); }

/* کارت ویترینی نتیجه — همان کلاس‌های کارت محصول (vitrine-cards.css)؛ فقط اندازه و جای آن */
.sh-result { text-align: center; }
.soha-hero .sh-vcard {
  width: 74%;
  max-width: 300px;
  margin: 0 auto;
  text-align: start;
}
.sh-r-name {
  margin: 12px auto 2px;
  max-width: 34em;
  color: var(--sh-ivory);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.sh-r-compare {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  margin: 2px 0 0;
  font-size: 13px;
}
.sh-r-compare s {
  color: rgba(246, 241, 230, 0.62);
  text-decoration-color: rgba(226, 58, 58, 0.95);
}
.sh-r-compare span { color: #FF8C8C; font-weight: 800; }
.sh-r-note {
  margin: 6px 0 12px;
  color: var(--sh-muted);
  font-size: 12.5px;
}
.sh-r-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.sh-continue { width: min(100%, 320px); }
.sh-again { width: min(100%, 320px); }

/* ---------- دسکتاپ: کره کنار متن و کادر لینک ---------- */
@media (min-width: 900px) {
  .soha-hero { padding: 16px 24px; }
  .sh-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'head globe'
      'plinth globe'
      'acc acc';
    align-items: center;
    column-gap: 24px;
    padding: 26px 30px 22px;
  }
  .sh-head { grid-area: head; align-self: end; }
  .sh-globe-wrap { grid-area: globe; height: 390px; margin: 0; }
  .sh-plinth { grid-area: plinth; align-self: start; width: 100%; margin-top: 16px; }
  .sh-acc { grid-area: acc; }
  .soha-hero .sh-vcard { width: 260px; }
}

/* ---------- حرکت کمتر ---------- */
@media (prefers-reduced-motion: reduce) {
  .site-header .logo,
  .site-header .logo::before { transition: none; }
  .site-header .logo.is-ring::after { animation: none; }
  .sh-country-word.is-entering,
  .sh-country-word.is-leaving { animation: none; }
  .sh-acc { transition: none; }
  .sh-dots i { animation: none; opacity: 0.8; }
}