/* ============================================================
   ZIRA TRADE — Hero Logo block
   این فایل را جداگانه لینک کنید یا به انتهای styles.css اضافه کنید
   ============================================================ */

/* بخش لوگوی بالای صفحه */
.brand-hero {
  width: 100%;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,106,26,.06), transparent 60%),
    #0A1124;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 56px 20px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* خط نور نارنجی بالای بخش */
.brand-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 180px; height: 3px;
  background: linear-gradient(90deg, transparent, #FF6A1A, transparent);
  box-shadow: 0 0 18px rgba(255,106,26,.7);
}

/* خود تصویر لوگو — هیچ‌وقت بریده نمی‌شود */
.brand-hero img {
  width: 100%;
  max-width: 620px;       /* اندازه‌ی بیشینه روی دسکتاپ */
  height: auto;            /* نسبت حفظ می‌شود، برش نمی‌خورد */
  object-fit: contain;     /* تصویر کامل دیده می‌شود */
  display: block;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,.5));
  animation: brandFadeIn 1s ease both;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ظاهرشدن نرم هنگام بارگذاری */
@keyframes brandFadeIn {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* زیرنویس اختیاری زیر لوگو */
.brand-hero .brand-hero-sub {
  margin-top: 22px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #B8A98A;
  text-align: center;
}

/* موبایل */
@media (max-width: 680px) {
  .brand-hero { padding: 38px 16px 32px; }
  .brand-hero img { max-width: 92%; }
  .brand-hero .brand-hero-sub { font-size: 10px; letter-spacing: 3px; }
}

/* ============================================================
   اصلاح نمایش عکس‌ها — جلوگیری از برش بالا و پایین
   ============================================================ */

/* پوستر افغانستان: عکس‌ها متناسب شوند نه بریده */
.amap-panel img {
  object-fit: cover;          /* همان حالت پوستر می‌ماند */
  object-position: center 30%;/* نقطه‌ی مهم عکس (سوژه) بالاتر دیده شود */
}