/* ============================================================
   Amlakedar (املاک دار) — Premium RTL Real-Estate Design System
   ============================================================ */

/* 1. FONT-FACE — Vazirmatn Variable (Self-Hosted)
   ============================================================ */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Vazirmatn-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/Vazirmatn-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* 2. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Palette */
  --c-white: #ffffff;
  --c-emerald: #1B6B45;
  --c-emerald-dark: #154f33;
  --c-emerald-light: #e8f5ee;
  --c-gold: #C9A84C;
  --c-gold-light: #f9f2e0;
  --c-charcoal: #1E2A22;
  --c-gray: #6b7280;
  --c-gray-light: #f5f5f5;
  --c-cream: #FAF8F4;

  /* Semantic */
  --c-text: #1E2A22;
  --c-text-muted: #6b7280;

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.07);
  --shadow-hover: 0 12px 40px rgba(27, 107, 69, 0.15);

  /* Shape */
  --radius: 12px;
  --radius-lg: 20px;

  /* Motion */
  --transition: 0.3s ease;
}

/* 3. RESET + BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  direction: rtl;
  scroll-behavior: smooth;
}

body {
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  color: var(--c-text);
  line-height: 1.8;
  background: #fff;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}

ul {
  list-style: none;
}

/* 4. UTILITIES
   ============================================================ */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 5%, 60px);
}

.section {
  padding: 80px 0;
}

.section-eyebrow {
  display: inline-block;
  color: var(--c-emerald);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.section-title {
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 800;
  color: var(--c-charcoal);
  margin-bottom: 1rem;
}

.section-subtitle {
  color: var(--c-text-muted);
  max-width: 600px;
  margin-bottom: 3rem;
}

.text-center {
  text-align: center;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
}

.btn-primary {
  background: var(--c-emerald);
  color: #fff;
}

.btn-primary:hover {
  background: var(--c-gold);
  color: var(--c-charcoal);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(27, 107, 69, 0.3);
}

.btn-gold {
  background: var(--c-gold);
  color: var(--c-charcoal);
}

.btn-gold:hover {
  background: #b8943e;
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--c-emerald);
  border: 2px solid var(--c-emerald);
}

.btn-outline:hover {
  background: var(--c-emerald);
  color: #fff;
}

.btn-outline-white {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

.btn-outline-white:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Grids */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  align-items: center;
}

/* Reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* 5. NAVBAR
   ============================================================ */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  transition: background 0.3s, box-shadow 0.3s;
}

.navbar.scrolled {
  background: #fff;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--c-emerald);
  flex-shrink: 0;
  white-space: nowrap;
}

.navbar-brand svg {
  flex-shrink: 0;
}

.navbar-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  min-width: 0;
}

.nav-link {
  padding: 7px 9px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--c-charcoal);
  white-space: nowrap;
}

.nav-link:hover,
.nav-link.active {
  color: var(--c-emerald);
  background: var(--c-emerald-light);
}

.navbar-phone {
  direction: ltr;
  background: var(--c-gold);
  color: var(--c-charcoal);
  font-weight: 700;
  padding: 8px 13px;
  border-radius: 50px;
  border: 1.5px solid var(--c-gold);
  margin-right: 6px;
}

/* Transparent state (above fold) */
.navbar:not(.scrolled) { background: rgba(17,24,20,.34); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.navbar:not(.scrolled) .navbar-brand {
  color: #fff;
}

.navbar:not(.scrolled) .nav-link {
  color: #fff;
}

.navbar:not(.scrolled) .nav-link:hover,
.navbar:not(.scrolled) .nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
}

.navbar:not(.scrolled) .navbar-phone {
  background: var(--c-gold);
  color: var(--c-charcoal);
  border-color: var(--c-gold);
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  background: transparent;
  border: none;
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: var(--transition);
  color: var(--c-charcoal);
}

.navbar:not(.scrolled) .hamburger span {
  color: #fff;
  background: #fff;
}

/* 6. HERO
   ============================================================ */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  direction: rtl;
}

.hero-media {
  position: relative;
  overflow: hidden;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 8vw, 100px) clamp(32px, 6vw, 80px);
  background: #fff;
  position: relative;
}

.hero-content::before {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 4px;
  background: var(--c-emerald);
  border-radius: 2px;
}

.hero-eyebrow {
  color: var(--c-emerald);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.hero-title {
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 900;
  color: var(--c-charcoal);
  line-height: 1.3;
  margin-bottom: 1.25rem;
}

.hero-sub {
  color: var(--c-text-muted);
  font-size: 1.05rem;
  line-height: 1.9;
  margin-bottom: 2rem;
  max-width: 480px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}

.hero-stats {
  display: flex;
  gap: 32px;
  padding-top: 2rem;
  border-top: 1px solid var(--c-gray-light);
}

.stat-item {
  text-align: center;
}

.stat-num {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--c-emerald);
  display: block;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--c-text-muted);
}

/* 7. PATH SELECTOR
   ============================================================ */
.path-selector {
  position: relative;
  z-index: 10;
  margin-top: -20px;
  padding: 0 0 20px;
}

.path-selector .container {
  /* no transform — margin-top handles the overlap */
}

.path-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 32px 28px;
  border-top: 3px solid var(--c-gold);
  transition: var(--transition);
  cursor: pointer;
  text-align: center;
}

.path-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}

.path-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--c-emerald-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--c-emerald);
}

.path-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-charcoal);
  margin-bottom: 0.5rem;
}

.path-card p {
  font-size: 0.875rem;
  color: var(--c-text-muted);
}

/* 8. ABOUT
   ============================================================ */
.about-section {
  background: var(--c-cream);
}

.about-photo-wrap {
  position: relative;
  display: inline-block;
}

.about-photo {
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 8px var(--c-gold), 0 20px 60px rgba(0, 0, 0, 0.15);
}

.value-chips {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 1.5rem 0 2rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-emerald-light);
  color: var(--c-emerald);
  border-radius: 50px;
  padding: 8px 18px;
  font-size: 0.875rem;
  font-weight: 600;
}

.chip svg {
  color: var(--c-gold);
}

/* About bio — mobile "بیشتر" toggle */
.about-bio-more {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 0.25rem;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--c-emerald);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.about-bio-more-icon {
  transition: transform 0.2s ease;
}

.about-bio-more.is-expanded .about-bio-more-icon {
  transform: rotate(180deg);
}

.about-bio-more[hidden] {
  display: none;
}

@media (max-width: 768px) {
  .about-bio.is-collapsed {
    position: relative;
    max-height: 12.5em;
    overflow: hidden;
  }

  .about-bio.is-collapsed::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 3em;
    background: linear-gradient(to bottom, rgba(250, 248, 244, 0), var(--c-cream));
    pointer-events: none;
  }

  .about-bio-more.is-ready {
    display: inline-flex;
  }
}

/* 9. SERVICES
   ============================================================ */
.services-section {
  background: #fff;
}

.service-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: var(--transition);
  position: relative;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.service-card-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.service-icon-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 44px;
  height: 44px;
  background: var(--c-emerald);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.service-card-body {
  padding: 24px;
}

.service-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-charcoal);
  margin-bottom: 0.5rem;
}

.service-price {
  font-size: 0.875rem;
  color: var(--c-text-muted);
  margin-bottom: 1rem;
}

.service-link {
  color: var(--c-gold);
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.service-link:hover {
  color: var(--c-emerald);
}

.services-more-wrap {
  text-align: center;
}

.services-more-btn {
  display: none;
}

@media (min-width: 1025px) {
  .services-more-wrap {
    margin-top: 2.5rem;
  }

  .services-more-btn {
    display: inline-flex;
  }

  .services-more-btn.is-hidden {
    display: none;
  }

  .services-carousel .service-card-extra {
    display: none;
  }

  .services-carousel.expanded .service-card-extra {
    display: block;
  }
}

/* 10. PROCESS
   ============================================================ */
.process-section {
  background: var(--c-gray-light);
}

.process-timeline {
  display: flex;
  align-items: flex-start;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 16px;
}

.process-step {
  flex: 1;
  min-width: 120px;
  text-align: center;
  position: relative;
  padding: 0 8px;
}

.process-step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 0;
  width: 100%;
  height: 2px;
  background: none;
  border-top: 2px dashed var(--c-emerald);
  z-index: 0;
}

.step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--c-gold);
  color: var(--c-gold);
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  background: #fff;
  position: relative;
  z-index: 1;
}

.step-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--c-charcoal);
  margin-bottom: 0.25rem;
}

.step-desc {
  font-size: 0.75rem;
  color: var(--c-text-muted);
  line-height: 1.6;
}

/* 11. PROPERTIES
   ============================================================ */
.properties-section {
  background: #fff;
}

.prop-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: var(--transition);
}

.prop-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.prop-card-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.prop-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.prop-card:hover .prop-card-img-wrap img {
  transform: scale(1.05);
}

.prop-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--c-emerald);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 50px;
}

.prop-card-body {
  padding: 20px;
}

.prop-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.prop-specs {
  display: flex;
  gap: 16px;
  font-size: 0.8rem;
  color: var(--c-text-muted);
  margin-bottom: 1rem;
}

.prop-spec {
  display: flex;
  align-items: center;
  gap: 4px;
}

.prop-price {
  font-size: 0.9rem;
  color: var(--c-emerald);
  font-weight: 700;
  margin-bottom: 1rem;
}

/* رهن/اجاره: zwei getrennte Zeilen, je als dezente Pille (Kundenwunsch) */
.price-split {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
  background: var(--c-emerald-light);
  border-radius: 10px;
  border: 1px solid rgba(27, 107, 69, 0.12);
}
.price-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--c-text-muted);
}
.price-val {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--c-emerald);
}

/* 12. TESTIMONIALS
   ============================================================ */
.testimonials-section {
  background: var(--c-cream);
}

.testimonial-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 28px;
  position: relative;
}

.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: -8px;
  right: 24px;
  font-size: 5rem;
  color: var(--c-gold);
  line-height: 1;
  font-family: Georgia, serif;
  opacity: 0.3;
}

.testi-stars {
  color: var(--c-gold);
  font-size: 1.1rem;
  margin-bottom: 1rem;
  letter-spacing: 2px;
}

.testi-quote {
  font-style: italic;
  color: var(--c-text-muted);
  margin-bottom: 1.5rem;
  line-height: 1.9;
}

.testi-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testi-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--c-gold);
}

.testi-name {
  font-weight: 700;
  font-size: 0.9rem;
}

/* 13. CTA BANNER
   ============================================================ */
.cta-banner {
  background: linear-gradient(135deg, var(--c-emerald) 0%, var(--c-emerald-dark) 100%);
  padding: 80px 0;
  text-align: center;
  color: #fff;
}

.cta-banner h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 800;
  margin-bottom: 1rem;
}

.cta-banner p {
  opacity: 0.85;
  margin-bottom: 2rem;
}

.cta-phone {
  font-size: 2rem;
  font-weight: 800;
  color: var(--c-gold);
  display: block;
  margin-bottom: 1.5rem;
  direction: ltr;
}

.cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 14. BLOG
   ============================================================ */
.blog-section {
  background: #fff;
}

.blog-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: var(--transition);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}

.blog-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.4s;
}

.blog-card:hover .blog-card-img {
  transform: scale(1.05);
}

.blog-card-body {
  padding: 24px;
}

.blog-date {
  font-size: 0.75rem;
  color: var(--c-text-muted);
  margin-bottom: 0.5rem;
}

.blog-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--c-charcoal);
}

.blog-excerpt {
  font-size: 0.875rem;
  color: var(--c-text-muted);
  margin-bottom: 1rem;
}

.blog-read-more {
  color: var(--c-emerald);
  font-size: 0.875rem;
  font-weight: 600;
}

.blog-read-more:hover {
  color: var(--c-gold);
}

/* 15. CONTACT
   ============================================================ */
.contact-section {
  background: var(--c-cream);
}

.contact-form {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 40px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.9rem;
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  direction: rtl;
  transition: var(--transition);
  background: #fff;
  color: var(--c-text);
}

.form-control:focus {
  outline: none;
  border-color: var(--c-emerald);
  box-shadow: 0 0 0 3px rgba(27, 107, 69, 0.1);
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

.contact-info {
  padding: 40px;
}

.contact-info h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.contact-item svg {
  color: var(--c-emerald);
  flex-shrink: 0;
}

/* 16. FOOTER
   ============================================================ */
.footer {
  background: var(--c-charcoal);
  color: #fff;
  padding: 64px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand .footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.footer-tagline {
  color: var(--c-gold);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.footer-desc {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.875rem;
  line-height: 1.8;
}

.footer-col h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  color: var(--c-gold);
}

.footer-col ul li {
  margin-bottom: 0.75rem;
}

.footer-col ul li a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
}

.footer-col ul li a:hover {
  color: var(--c-gold);
}

.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 1.5rem;
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  transition: var(--transition);
}

.social-link:hover {
  border-color: var(--c-gold);
  color: var(--c-gold);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}

/* 17. RESPONSIVE BREAKPOINTS
   ============================================================ */

/* ── 768px and below ── */
@media (max-width: 768px) {
  /* Navbar mobile menu */
  .navbar-menu {
    display: none;
    position: fixed;
    top: 70px;
    right: 0;
    left: 0;
    background: #fff;
    flex-direction: column;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    gap: 4px;
  }

  .navbar-menu.open {
    display: flex;
  }

  .nav-link {
    color: var(--c-charcoal) !important;
    width: 100%;
    text-align: right;
  }

  .navbar-phone {
    margin-right: 0;
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .hamburger {
    display: flex;
  }

  /* Hero */
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-media {
    height: auto;
    max-height: none;
    aspect-ratio: 4 / 5;
  }

  .hero-media img {
    object-position: center;
  }

  .hero-content {
    padding: 48px 24px;
  }

  .hero-content::before {
    display: none;
  }

  /* Grids */
  .grid-3 {
    grid-template-columns: 1fr;
  }

  /* Services carousel on mobile */
  .services-carousel {
    display: flex;
    gap: 16px;
    margin-inline: calc(-1 * clamp(16px, 5%, 60px));
    padding-inline: clamp(16px, 5%, 60px);
    padding-block: 4px 24px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(16px, 5%, 60px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .services-carousel::-webkit-scrollbar {
    display: none;
  }

  .services-carousel > .service-card {
    flex: 0 0 84%;
    max-width: 84%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .services-carousel > .service-card.reveal {
    opacity: 1;
    transform: none;
  }

  /* Testimonials carousel on mobile */
  .testimonials-carousel {
    display: flex;
    gap: 16px;
    margin-inline: calc(-1 * clamp(16px, 5%, 60px));
    padding-inline: clamp(16px, 5%, 60px);
    padding-block: 4px 24px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(16px, 5%, 60px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .testimonials-carousel::-webkit-scrollbar {
    display: none;
  }

  .testimonials-carousel > .testimonial-card {
    flex: 0 0 84%;
    max-width: 84%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .testimonials-carousel > .testimonial-card.reveal {
    opacity: 1;
    transform: none;
  }

  /* Blog carousel on mobile */
  .blog-carousel {
    display: flex;
    gap: 16px;
    margin-inline: calc(-1 * clamp(16px, 5%, 60px));
    padding-inline: clamp(16px, 5%, 60px);
    padding-block: 4px 24px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(16px, 5%, 60px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .blog-carousel::-webkit-scrollbar {
    display: none;
  }

  .blog-carousel > .blog-card {
    flex: 0 0 86%;
    max-width: 86%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .blog-carousel > .blog-card.reveal {
    opacity: 1;
    transform: none;
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  /* Path selector overlap removed on mobile */
  .path-selector {
    margin-top: 0;
    padding: 40px 0 20px;
  }

  /* Footer grid */
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  /* Process timeline keeps horizontal scroll */
  .process-timeline {
    gap: 0;
  }

  /* Contact */
  .contact-form,
  .contact-info {
    padding: 28px 24px;
  }
}

/* ── 640px and below ── */
@media (max-width: 640px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-stats {
    flex-direction: column;
    gap: 16px;
  }

  .cta-phone {
    font-size: 1.5rem;
  }

  /* Path selector single column on smallest screens */
  .path-selector .container .grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ── 480px and below ── */
@media (max-width: 480px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .cta-actions .btn {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
}

/* ── 1024px (tablet landscape) ── */
@media (max-width: 1024px) and (min-width: 769px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 18. PAGE HEADER (inner pages)
   ============================================================ */
.page-header {
  background: linear-gradient(135deg, var(--c-emerald-dark) 0%, var(--c-charcoal) 100%);
  padding: 120px 0 56px;
  text-align: center;
  color: #fff;
}

.page-header h1 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 900;
  margin-bottom: 0.5rem;
}

.page-header p {
  color: rgba(255, 255, 255, 0.72);
  max-width: 520px;
  margin: 0 auto;
}

.page-breadcrumb {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1rem;
}

.page-breadcrumb a {
  color: rgba(255, 255, 255, 0.5);
}

.page-breadcrumb a:hover {
  color: var(--c-gold);
}

/* 19. FILTER BAR
   ============================================================ */
.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2.5rem;
}

.filter-pill {
  padding: 8px 22px;
  border-radius: 50px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  color: var(--c-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}

.filter-pill:hover,
.filter-pill.active {
  background: var(--c-emerald);
  color: #fff;
  border-color: var(--c-emerald);
}

/* #CR -- دکمه «فیلتر» و سربرگ پاپ‌آپ فقط روی موبایل؛ روی دسکتاپ پنهان‌اند */
.filter-trigger-bar { display: none; }
.filter-adv-head { display: none; }

.filter-trigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1.5px solid var(--c-emerald);
  border-radius: 10px;
  background: var(--c-emerald);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.filter-trigger-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 50px;
  background: var(--c-gold);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

.filter-adv-head {
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.filter-adv-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-text);
}

.filter-adv-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: #f3f4f6;
  color: var(--c-text-muted);
  cursor: pointer;
}

/* «انتخاب مشاورین املاک و بنگاه‌ها» — کارت کاروسلی انتخاب بنگاه بالای نوار فیلتر */
.agency-picker {
  background: var(--c-white);
  border: 1px solid #eef0ee;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.25rem 1.4rem;
  margin-bottom: 1.5rem;
}

.agency-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.agency-picker-intro {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.agency-picker-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--c-gold-light);
  color: var(--c-gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.agency-picker-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--c-emerald-dark);
  margin: 0;
}

.agency-picker-sub {
  font-size: 0.82rem;
  color: var(--c-text-muted);
  margin: 0.15rem 0 0;
}

.agency-picker-nav {
  display: flex;
  gap: 0.4rem;
  flex: 0 0 auto;
}

.agency-nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: var(--c-emerald-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

.agency-nav-btn:hover {
  background: var(--c-emerald);
  border-color: var(--c-emerald);
  color: #fff;
}

.agency-track {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  padding-bottom: 0.4rem;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

.agency-card {
  position: relative;
  flex: 0 0 auto;
  width: 170px;
  text-align: right;
  background: #fff;
  border: 1.5px solid #ececec;
  border-radius: 14px;
  padding: 1.6rem 0.9rem 0.9rem;
  cursor: pointer;
  font-family: inherit;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.agency-card:hover {
  border-color: var(--c-gold);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}

.agency-card-tag {
  position: absolute;
  top: 0.55rem;
  inset-inline-start: 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.12rem 0.55rem;
  border-radius: 50px;
  background: var(--c-emerald-light);
  color: var(--c-emerald);
  max-width: 72%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agency-card-logo {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--c-gray-light);
  color: var(--c-emerald);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 0.3rem;
}

.agency-card-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.agency-card-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.4;
}

.agency-card-meta {
  font-size: 0.72rem;
  color: var(--c-text-muted);
}

.agency-card-count {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-gold);
  margin-top: auto;
}

.agency-card.active {
  background: var(--c-emerald);
  border-color: var(--c-emerald);
}

.agency-card.active .agency-card-name {
  color: #fff;
}

.agency-card.active .agency-card-meta {
  color: rgba(255, 255, 255, 0.8);
}

.agency-card.active .agency-card-count {
  color: var(--c-gold-light);
}

.agency-card.active .agency-card-logo {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.agency-card.active .agency-card-tag {
  background: var(--c-gold);
  color: #fff;
}

@media (max-width: 768px) {
  .agency-picker {
    padding: 1rem 0.85rem 1.1rem;
  }
  .agency-picker-nav {
    display: none;
  }
  .agency-picker-title {
    font-size: 0.95rem;
  }
  .agency-card {
    width: 150px;
  }
}

/* #CR -- موبایل: کل بخش فیلتر و جستجو جمع می‌شود پشت دکمه «فیلتر»؛ با کلیک روی دکمه،
   پاپ‌آپ تمام‌صفحه با همهٔ کنترل‌ها باز می‌شود (مطابق تصویر دوم). */
@media (max-width: 768px) {
  .filter-trigger-bar {
    display: flex;
    justify-content: flex-start;
    margin: 12px 0 4px;
  }
  .filter-trigger-btn { width: 100%; justify-content: center; }
  .filter-adv-head { display: flex; }

  /* تا باز نشدن کاملاً پنهان است (نه فقط جابه‌جا) */
  .filter-adv {
    display: none !important;
    position: fixed;
    inset: 0;
    z-index: 1200;
    margin: 0 !important;
    flex-direction: column;
    align-items: stretch;
    gap: 10px !important;
    padding: 16px;
    background: #fff;
    overflow-y: auto;
    box-sizing: border-box;
  }
  .filter-adv.open { display: flex !important; }
  .filter-adv > #propDeal,
  .filter-adv > #propLoc,
  .filter-adv > #propRooms,
  .filter-adv > #propSort,
  .filter-adv > #propMin,
  .filter-adv > #propMax {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .filter-adv > #propApply,
  .filter-adv > #propReset {
    flex: 0 0 auto;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  .filter-adv > #propCount {
    width: 100% !important;
    text-align: center;
    margin-inline-start: 0 !important;
  }
}

/* 20. ABOUT PAGE STATS
   ============================================================ */
.about-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 3rem;
}

.about-stat-card {
  text-align: center;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 28px 16px;
}

.about-stat-num {
  font-size: 2.25rem;
  font-weight: 900;
  color: var(--c-emerald);
  display: block;
  margin-bottom: 4px;
}

.about-stat-label {
  font-size: 0.875rem;
  color: var(--c-text-muted);
}

/* 21. PRODUCT GALLERY
   ============================================================ */
.gallery-main-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 12px;
  cursor: pointer;
}

.gallery-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.gallery-thumb {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  flex-shrink: 0;
  transition: var(--transition);
}

.gallery-thumb.active,
.gallery-thumb:hover {
  border-color: var(--c-gold);
}

/* Virtueller Rundgang: erstes Element der Galerie (vor den Objektfotos) */
.gallery-stage {
  position: relative;
  margin-bottom: 12px;
}

/* das globale "img { display:block }" wuerde das hidden-Attribut aushebeln */
.gallery-stage [hidden] {
  display: none;
}

.gallery-stage .gallery-main-img {
  margin-bottom: 0;
}

.gallery-tour {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: #0b0f14;
}

.gallery-tour iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.gallery-tour-open {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(11, 15, 20, 0.78);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: var(--transition);
}

.gallery-tour-open:hover {
  background: var(--c-emerald);
}

.gallery-thumb--tour {
  width: 80px;
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  background: var(--c-emerald);
  color: #fff;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
}

.gallery-thumb--tour.active,
.gallery-thumb--tour:hover {
  border-color: var(--c-gold);
}

/* 22. QUANTITY SELECTOR
   ============================================================ */
.qty-selector {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.qty-btn {
  width: 40px;
  height: 40px;
  background: var(--c-gray-light);
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  font-family: inherit;
  color: var(--c-charcoal);
  transition: var(--transition);
}

.qty-btn:hover {
  background: var(--c-emerald-light);
  color: var(--c-emerald);
}

.qty-input {
  width: 56px;
  text-align: center;
  border: none;
  border-right: 1.5px solid #e5e7eb;
  border-left: 1.5px solid #e5e7eb;
  font-size: 1rem;
  font-family: inherit;
  padding: 8px 0;
  color: var(--c-charcoal);
}

.qty-input:focus {
  outline: none;
}

/* 23. CART
   ============================================================ */
.cart-wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
}

.cart-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.cart-table th {
  text-align: right;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--c-text-muted);
  padding: 14px 20px;
  background: var(--c-gray-light);
  border-bottom: 1px solid #e5e7eb;
}

.cart-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
  font-size: 0.9rem;
}

.cart-table tr:last-child td {
  border-bottom: none;
}

.cart-item-img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.cart-item-name {
  font-weight: 600;
  color: var(--c-charcoal);
}

.cart-item-price {
  color: var(--c-emerald);
  font-weight: 700;
}

.cart-summary-card {
  background: var(--c-cream);
  border-radius: var(--radius);
  padding: 28px;
  position: sticky;
  top: 90px;
  box-shadow: var(--shadow-card);
}

.cart-summary-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
}

.cart-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 0.9rem;
}

.cart-summary-row.total {
  border-top: 2px solid #e5e7eb;
  margin-top: 10px;
  padding-top: 16px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-emerald);
}

/* 24. CHECKOUT
   ============================================================ */
.checkout-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: start;
}

/* 25. AUTH / ACCOUNT
   ============================================================ */
.auth-wrap {
  max-width: 520px;
  margin: 0 auto;
}

.auth-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.tab-nav {
  display: flex;
  border-bottom: 2px solid #f0f0f0;
}

.tab-btn {
  flex: 1;
  padding: 18px;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  background: transparent;
  border: none;
  font-family: inherit;
  color: var(--c-text-muted);
  transition: var(--transition);
}

.tab-btn.active {
  color: var(--c-emerald);
  box-shadow: inset 0 -2px 0 var(--c-emerald);
}

.tab-pane {
  display: none;
  padding: 36px;
}

.tab-pane.active {
  display: block;
}

.profile-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 40px;
  max-width: 640px;
  margin: 0 auto;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--c-emerald-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-emerald);
  font-size: 2rem;
  font-weight: 800;
  margin: 0 auto 1.5rem;
}

.profile-username {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.profile-role {
  text-align: center;
  font-size: 0.875rem;
  color: var(--c-emerald);
  margin-bottom: 2rem;
}

/* 26. PROPERTY DETAIL
   ============================================================ */
.property-detail-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: start;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 1.5rem 0;
}

/* قیمت داخل کادر آبی: در دسکتاپ پنهان (قیمت در ستون کناری است)، و فقط در ابعاد گوشی
   داخل همان کادر آبی نمایش داده می‌شود (درخواست کاربر) */
.blue-box-price { display: none; }
@media (max-width: 768px) {
  .blue-box-price {
    margin-top: .9rem;
    padding-top: .8rem;
    border-top: 1px solid #cddafc;
    display: block;
  }
  .blue-box-price-label { font-size: .8rem; color: #4b6bb0; }
  .blue-box-price-val { font-size: 1.35rem; font-weight: 800; color: #2563eb; }
  .blue-box-price-pm2 { font-size: .85rem; font-weight: 600; color: #4b6bb0; margin-top: .3rem; }
  /* روی گوشی قیمت داخل کادر آبی نمایش داده می‌شود، پس نسخهٔ سبزِ ستون کناری تکراری نشود */
  .prop-price-box { display: none; }
}

/* بخش «مشخصات اصلی» (آبی): ۳ مورد در هر ردیف در حالت دسکتاپ به‌جای ۲ */
@media (min-width: 769px) {
  .spec-grid--main {
    grid-template-columns: repeat(3, 1fr);
  }
}

.spec-item {
  background: var(--c-gray-light);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* «لوکیشن» یک ردیف کامل — تمام عرض شبکه‌ی مشخصات فنی را می‌گیرد */
.spec-item--full {
  grid-column: 1 / -1;
}

/* «مشخصات فنی» به‌صورت باکس: عنوان در خط بالا (آیکن + برچسب) و مقدار در خط پایین
   (درخواست کاربر: «متراژ» و در خط پایین «۱۰۰ متر») */
.spec-grid--tech .spec-item {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.spec-grid--tech .spec-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.spec-ico {
  color: var(--c-emerald);
  line-height: 0;
  flex-shrink: 0;
}

.spec-ico svg {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
}

.spec-label {
  font-size: 0.9rem;
  color: var(--c-text-muted);
}

.spec-value {
  font-weight: 700;
  color: var(--c-charcoal);
  font-size: 0.95rem;
}

/* 27. BLOG POST
   ============================================================ */
.post-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}

.post-meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--c-text-muted);
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.post-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.post-body {
  line-height: 2;
  color: var(--c-text);
}

.post-body p {
  margin-bottom: 1.25rem;
}

.post-body h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 2rem 0 1rem;
  color: var(--c-charcoal);
}

/* 28. PROCESS PAGE
   ============================================================ */
.process-page-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 760px;
  margin: 0 auto;
}

.process-page-step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.process-page-num {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c-emerald);
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.process-page-content {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 22px 28px;
  flex: 1;
  border-right: 4px solid var(--c-gold);
}

.process-page-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--c-charcoal);
  margin-bottom: 0.4rem;
}

.process-page-desc {
  color: var(--c-text-muted);
  font-size: 0.875rem;
}

/* 29. SUCCESS BOX
   ============================================================ */
.success-box {
  text-align: center;
  padding: 48px 24px;
  background: var(--c-emerald-light);
  border-radius: var(--radius);
  border: 1.5px solid rgba(27, 107, 69, 0.15);
}

.success-box h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--c-emerald);
  margin: 1rem 0 0.5rem;
}

.success-box p {
  color: var(--c-text-muted);
}

/* 30. CART BADGE IN NAVBAR
   ============================================================ */
.cart-nav-link {
  position: relative;
}

.cart-badge {
  position: absolute;
  top: 2px;
  left: 2px;
  background: var(--c-gold);
  color: var(--c-charcoal);
  font-size: 0.6rem;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* 31. GALLERY GRID
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  transition: transform 0.3s;
  cursor: pointer;
}

.gallery-grid img:hover {
  transform: scale(1.03);
}

/* 32. RESPONSIVE ADDITIONS
   ============================================================ */
@media (max-width: 768px) {
  .about-stats-grid {
    grid-template-columns: 1fr;
  }

  .cart-wrap {
    grid-template-columns: 1fr;
  }

  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .property-detail-grid {
    grid-template-columns: 1fr;
  }

  .post-layout {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .about-stats-grid {
    grid-template-columns: 1fr;
  }

  /* نمای موبایل: در هر ردیف دو مورد کنار هم نمایش داده شود (درخواست کاربر) — پیش‌تر
     در این بازه به یک ستون تبدیل می‌شد که یک مورد در هر ردیف نشان می‌داد */
  .spec-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* ivos-qa101: dashed line symmetric — extend it past the last step (۷) like it extends past the first (۱) */
.process-step:last-child::after{ content:''; position:absolute; top:22px; left:0; width:100%; height:2px; border-top:2px dashed var(--c-emerald); z-index:0; }

/* ivos-qa102: process timeline stacks vertically on mobile (7 steps overflowed + horizontal scroll unusable) */
@media(max-width:768px){
  .process-timeline{ flex-direction:column !important; overflow:visible !important; gap:24px; align-items:center; }
  .process-step{ min-width:0 !important; width:100%; max-width:320px; padding:0; }
  .process-step::after{ display:none !important; }
}

/* ivos-qa104b: slightly smaller hero title on mobile so it doesn't extend past the paragraph below */
@media(max-width:768px){ .hero-title{ font-size:clamp(1.3rem, 5vw, 1.65rem) !important; } }

/* ivos-qa104c: smaller hero title on desktop too (reviewer: برای دسکتاپ هم) */
.hero-title{ font-size:clamp(1.75rem, 3vw, 2.6rem) !important; }

/* ivos-hero-2: Hero als Vollbild-Fotobühne — Bild läuft hinter der ganzen Sektion,
   links weicher heller Verlauf für die Lesbarkeit (Kundenvorlage bild-2). */
.hero {
  position: relative;
  display: block;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: #101b14;
}

.hero .hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero .hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 32%;
  filter: saturate(1.06) contrast(1.03);
}

/* sanfte Tiefe im Foto, damit der Übergang zum hellen Textfeld ruhiger wirkt */
.hero .hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(13, 24, 17, 0.24) 0%, rgba(13, 24, 17, 0.08) 20%, rgba(13, 24, 17, 0) 42%),
    linear-gradient(90deg, rgba(250, 246, 238, 0.30) 0%, rgba(250, 246, 238, 0.10) 30%, rgba(250, 246, 238, 0) 52%);
}

/* heller Schleier: deckt den Textbereich sanft ab, bleibt leicht durchscheinend
   und läuft ohne harte Kante sehr weich ins Foto aus (Kundenvorlage bild-1) */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(58% 72% at 10% 44%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 74%),
    linear-gradient(90deg,
      rgba(250, 246, 238, 0.94) 0,
      rgba(250, 246, 238, 0.92) 420px,
      rgba(250, 246, 238, 0.88) 560px,
      rgba(250, 246, 238, 0.78) 660px,
      rgba(250, 246, 238, 0.55) 780px,
      rgba(250, 246, 238, 0.30) 900px,
      rgba(250, 246, 238, 0.10) 1020px,
      rgba(250, 246, 238, 0) 1140px);
}

.hero .hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  padding-top: 112px;
  padding-bottom: 132px;
  padding-inline-end: clamp(16px, 2.5vw, 40px);
}

.hero .hero-content {
  background: none;
  padding: 0;
  width: 100%;
  max-width: 580px;
  text-align: right;
}

.hero .hero-content::before {
  display: none;
}

.hero-rule {
  display: block;
  width: 54px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.18), var(--c-gold));
  margin-bottom: 18px;
}

.hero-eyebrow {
  display: block;
  color: var(--c-emerald);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0;
  margin-bottom: 0.6rem;
}

.hero .hero-title {
  font-size: clamp(2rem, 3.4vw, 3rem) !important;
  line-height: 1.32;
  color: var(--c-charcoal);
  margin-bottom: 1.15rem;
}

.hero-title-accent {
  color: #b78e2e;
}

.hero .hero-sub {
  color: #4d5b52;
  font-size: 1rem;
  line-height: 1.95;
  margin-bottom: 1.85rem;
  max-width: 500px;
}

/* Buttons: 2 x 2 mit Icons */
.hero .hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 430px;
  margin-bottom: 1.9rem;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.hero-btn svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.hero-btn-outline {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(27, 107, 69, 0.30);
  color: var(--c-emerald);
  box-shadow: 0 2px 10px rgba(20, 35, 25, 0.07);
}

.hero-btn-outline:hover {
  background: var(--c-emerald-light);
  border-color: var(--c-emerald);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20, 35, 25, 0.12);
}

.hero-btn-green {
  background: linear-gradient(135deg, #1f7549 0%, var(--c-emerald) 55%, #175739 100%);
  border-color: rgba(21, 79, 51, 0.9);
  color: #fff;
  box-shadow: 0 6px 18px rgba(27, 107, 69, 0.26);
}

.hero-btn-green:hover {
  background: linear-gradient(135deg, #1b6440 0%, var(--c-emerald-dark) 55%, #12432c 100%);
  border-color: var(--c-emerald-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(27, 107, 69, 0.32);
}

.hero-btn-gold {
  background: linear-gradient(135deg, #d7b862 0%, var(--c-gold) 55%, #b8943e 100%);
  border-color: rgba(184, 148, 62, 0.9);
  color: #241c07;
  box-shadow: 0 6px 18px rgba(201, 168, 76, 0.32);
}

.hero-btn-gold:hover {
  background: linear-gradient(135deg, #cbac55 0%, #be9c43 55%, #a9862f 100%);
  border-color: #a9862f;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(201, 168, 76, 0.36);
}

/* Vorteile mit dünn gold umrandeten Kreis-Icons */
.hero .hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(201, 168, 76, 0.30);
  width: 100%;
  max-width: 580px;
}

.hero-feature {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 76, 0.68);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 12px rgba(94, 79, 45, 0.08);
  color: var(--c-gold);
}

.hero-feature-icon svg {
  width: 21px;
  height: 21px;
}

.hero-feature-text {
  display: block;
}

.hero-feature-title {
  display: block;
  font-size: 0.855rem;
  font-weight: 800;
  color: var(--c-charcoal);
  line-height: 1.6;
}

.hero-feature-desc {
  display: block;
  font-size: 0.735rem;
  color: #6b7a71;
  line-height: 1.6;
}

/* Tablet quer: Textblock etwas schmaler, Schleier endet direkt hinter dem Text */
@media (max-width: 1150px) and (min-width: 901px) {
  .hero::after {
    background:
      radial-gradient(58% 72% at 10% 44%, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 74%),
      linear-gradient(90deg,
        rgba(250, 246, 238, 0.94) 0,
        rgba(250, 246, 238, 0.91) 360px,
        rgba(250, 246, 238, 0.86) 470px,
        rgba(250, 246, 238, 0.72) 570px,
        rgba(250, 246, 238, 0.46) 680px,
        rgba(250, 246, 238, 0.22) 790px,
        rgba(250, 246, 238, 0.06) 890px,
        rgba(250, 246, 238, 0) 990px);
  }

  .hero .hero-content {
    max-width: 520px;
  }
}

/* Mobil/Tablet hoch: Bild oben, Text darunter auf ruhigem Grund */
@media (max-width: 900px) {
  .hero {
    min-height: 0;
    background: var(--c-cream);
  }

  .hero::after {
    display: none;
  }

  .hero .hero-media {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: 70vh;
  }

  /* Mobil: rechte Bildseite zeigen (Kundenwunsch) statt der linken. */
  .hero .hero-media img {
    object-position: right 30%;
  }

  .hero .hero-media::after {
    background: linear-gradient(0deg, rgba(13, 24, 17, 0.26) 0%, rgba(13, 24, 17, 0) 42%);
  }

  .hero .hero-inner {
    display: block;
    min-height: 0;
    padding-top: 34px;
    padding-bottom: 88px;
    padding-inline-end: clamp(16px, 5%, 60px);
    background: var(--c-cream);
  }

  .hero .hero-content {
    max-width: 620px;
  }

  .hero .hero-title {
    font-size: clamp(1.5rem, 5.4vw, 2rem) !important;
    line-height: 1.4;
  }

  .hero .hero-sub {
    font-size: 0.95rem;
    line-height: 1.85;
  }
}

@media (max-width: 560px) {
  .hero .hero-actions {
    max-width: none;
  }

  .hero-btn {
    padding: 10px 12px;
    font-size: 0.82rem;
  }

  .hero .hero-features {
    flex-direction: column;
    gap: 14px;
  }
}

@media (max-width: 400px) {
  .hero .hero-actions {
    grid-template-columns: 1fr;
  }

  .hero-btn {
    white-space: normal;
  }
}

/* Properties carousel on mobile */
@media (max-width: 768px) {
  .properties-carousel {
    display: flex;
    gap: 16px;
    margin-inline: calc(-1 * clamp(16px, 5%, 60px));
    padding-inline: clamp(16px, 5%, 60px);
    padding-block: 4px 24px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(16px, 5%, 60px);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .properties-carousel::-webkit-scrollbar {
    display: none;
  }

  .properties-carousel > .prop-card {
    flex: 0 0 84%;
    max-width: 84%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .properties-carousel > .prop-card.reveal {
    opacity: 1;
    transform: none;
  }
}

/* About section — horizontal carousel on mobile */
@media (max-width: 768px) {
  .about-carousel {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
  }

  .about-carousel::-webkit-scrollbar {
    display: none;
  }

  .about-carousel > .about-photo-side,
  .about-carousel > .about-text {
    flex: 0 0 88%;
    max-width: 88%;
    scroll-snap-align: start;
    min-width: 0;
  }

  .about-carousel > .about-photo-side.reveal,
  .about-carousel > .about-text.reveal {
    opacity: 1;
    transform: none;
  }
}

/* Fix: About Me mobile — vertical stack instead of broken horizontal carousel */
@media (max-width: 768px) {
  .about-carousel {
    display: grid !important;
    grid-template-columns: 1fr;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }

  .about-carousel > .about-photo-side,
  .about-carousel > .about-text {
    flex: none;
    max-width: 100%;
    scroll-snap-align: none;
  }
}

/* ivos-mob-hero-v2: Mobile homepage — compact hero (no image) + horizontal features + path carousel */

/* Path view button — hidden on desktop, shown on mobile via media query below */
.path-view-btn {
  display: none;
  align-items: center;
  gap: 6px;
  margin-top: 1rem;
  padding: 9px 22px;
  border-radius: 50px;
  background: var(--c-gold);
  color: var(--c-charcoal);
  font-size: 0.875rem;
  font-weight: 700;
  transition: var(--transition);
  text-decoration: none;
}
.path-view-btn:hover { background: #b8943e; color: var(--c-charcoal); }
.path-view-btn svg { flex-shrink: 0; }

/* Path carousel pagination dots — hidden on desktop */
.path-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  padding: 4px 0 16px;
}
.path-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d1d5db;
  transition: background 0.25s ease;
  display: inline-block;
}
.path-dot.path-dot-active {
  background: var(--c-emerald);
  transform: scale(1.2);
}

@media (max-width: 768px) {

  /* 1. Hero: hide background image and descriptive text */
  .hero .hero-media { display: none !important; }
  .hero-rule,
  .hero-eyebrow,
  .hero .hero-title,
  .hero .hero-sub { display: none !important; }

  /* 2. Hero becomes a compact white action panel */
  .hero { min-height: 0 !important; background: #fff !important; }
  .hero::after { display: none !important; }
  .hero .hero-inner {
    min-height: 0 !important;
    padding-top: 70px !important;
    padding-bottom: 0 !important;
    padding-inline: clamp(16px, 5%, 60px) !important;
    background: #fff !important;
    display: block !important;
  }
  .hero .hero-content {
    max-width: 100% !important;
    padding: 14px 0 0 !important;
    background: none !important;
  }

  /* 3. Action buttons: single full-width column */
  .hero .hero-actions {
    grid-template-columns: 1fr !important;
    max-width: none !important;
    gap: 10px !important;
    margin-bottom: 0 !important;
  }
  .hero-btn {
    width: 100% !important;
    justify-content: flex-start !important;
    font-size: 0.9rem !important;
    padding: 13px 18px !important;
    border-radius: 12px !important;
    white-space: normal !important;
    gap: 10px !important;
  }

  /* 4. Features strip: horizontal 3-column, cream background */
  .hero .hero-features {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    gap: 0 !important;
    max-width: none !important;
    margin-top: 16px !important;
    margin-inline: calc(-1 * clamp(16px, 5%, 60px)) !important;
    padding: 14px clamp(16px, 5%, 60px) !important;
    background: var(--c-cream) !important;
    border-top: 1px solid rgba(201, 168, 76, 0.22) !important;
    border-bottom: 1px solid rgba(201, 168, 76, 0.22) !important;
  }
  .hero-feature {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 6px !important;
    padding: 4px 4px !important;
  }
  .hero-feature:not(:last-child) {
    border-inline-start: 1px solid rgba(201, 168, 76, 0.28) !important;
  }
  .hero-feature-icon { width: 36px !important; height: 36px !important; }
  .hero-feature-icon svg { width: 17px !important; height: 17px !important; }
  .hero-feature-title { font-size: 0.75rem !important; }
  .hero-feature-desc { font-size: 0.67rem !important; }

  /* 5. Path selector: horizontal swipe carousel */
  .path-selector { margin-top: 0 !important; padding: 0 0 4px !important; }
  .path-selector .grid-3 {
    display: flex !important;
    grid-template-columns: unset !important;
    gap: 14px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    overscroll-behavior-x: contain !important;
    margin-inline: calc(-1 * clamp(16px, 5%, 60px)) !important;
    padding-inline: clamp(16px, 5%, 60px) !important;
    padding-block: 20px !important;
    scroll-padding-inline: clamp(16px, 5%, 60px) !important;
  }
  .path-selector .grid-3::-webkit-scrollbar { display: none !important; }
  .path-selector .grid-3 .path-card {
    flex: 0 0 82% !important;
    max-width: 82% !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
  }
  .path-selector .grid-3 .path-card.reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .path-card .path-icon { width: 72px !important; height: 72px !important; }
  .path-card .path-icon svg { width: 32px !important; height: 32px !important; }

  /* Show "مشاهده" button and pagination dots on mobile */
  .path-view-btn { display: inline-flex !important; }
  .path-dots { display: flex !important; }
}

/* ivos-mob-hero-v3: Hero-Bild auf dem Handy wieder anzeigen und die Ausrichtung
   des Hero-Panels wieder symmetrisch machen (Kundenwunsch). */
@media (max-width: 768px) {
  /* Das Hero-Bild wurde zuvor auf Mobilgeräten ausgeblendet — wieder einblenden. */
  .hero .hero-media {
    display: block !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    max-height: 60vh !important;
    overflow: hidden !important;
  }
  .hero .hero-media img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: right 30% !important;
  }

  /* Panel unter dem Bild: gleiche Abstände links und rechts, kein Leerraum oben. */
  .hero .hero-inner {
    display: block !important;
    min-height: 0 !important;
    padding: 22px clamp(16px, 5vw, 60px) 24px !important;
    background: #fff !important;
  }
  .hero .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    text-align: right !important;
  }
  .hero .hero-actions {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0 !important;
  }

  /* Feature-Streifen: exakt randlos, links und rechts gleich breit. */
  .hero .hero-features {
    width: 100% !important;
    max-width: none !important;
    margin: 16px calc(-1 * clamp(16px, 5vw, 60px)) 0 !important;
    padding: 14px clamp(16px, 5vw, 60px) !important;
    background: var(--c-cream) !important;
  }
}

/* mob-hero-panel: white intro card overlapping hero image + 2x2 button grid (Bild-2 layout) */
@media (max-width: 768px) {
  /* Re-show intro text that earlier rules hid on mobile */
  .hero-eyebrow,
  .hero .hero-title,
  .hero .hero-sub {
    display: block !important;
  }

  /* Pull the inner panel up to overlap the bottom of the hero image */
  .hero .hero-inner {
    margin-top: -44px !important;
    padding-top: 24px !important;
    padding-bottom: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.12) !important;
    position: relative !important;
    z-index: 3 !important;
  }

  /* Center all intro text in the panel */
  .hero .hero-content {
    text-align: center !important;
  }

  .hero-eyebrow {
    font-size: 0.78rem !important;
    margin-bottom: 8px !important;
  }

  .hero .hero-title {
    font-size: 1.45rem !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
  }

  .hero .hero-sub {
    font-size: 0.82rem !important;
    color: var(--c-gray) !important;
    line-height: 1.8 !important;
    margin-bottom: 20px !important;
  }

  /* 2x2 grid for the four action buttons */
  .hero .hero-actions {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
  }

  .hero-btn {
    justify-content: center !important;
  }
}

/* Mobil: Feature-Streifen in RTL exakt zu beiden Bildschirmrändern ausrichten */
@media (max-width: 768px) {
  .hero .hero-features {
    width: auto !important;
    margin-inline: calc(-1 * clamp(16px, 5vw, 60px)) !important;
  }
}

/* #CR-FILTER -- موبایل: دکمه «فیلتر» هنگام اسکرول پایین صفحه همراه کاربر می‌ماند
   و بخش «انتخاب مشاورین املاک و بنگاه‌ها» داخل پاپ‌آپ فیلتر هم نمایش داده می‌شود. */
@media (max-width: 768px) {
  .filter-trigger-bar {
    position: fixed;
    left: 74px;
    right: 14px;
    bottom: 14px;
    z-index: 940;
    display: flex;
    margin: 0;
  }

  .filter-trigger-btn {
    width: 100%;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
  }

  .properties-section {
    padding-bottom: 104px;
  }

  /* فضای امن پایین صفحه تا دکمهٔ شناور روی متن فوتر نیفتد */
  body:has(.filter-trigger-bar) .footer {
    padding-bottom: 64px;
  }

  .filter-adv > .agency-picker {
    flex: 0 0 auto;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 4px;
    padding: 0;
    border: 0;
    box-shadow: none;
  }

  .filter-adv > .agency-picker .agency-picker-head {
    margin-bottom: 0.6rem;
  }

  .filter-adv > .agency-picker .agency-picker-icon {
    width: 38px;
    height: 38px;
  }

  .filter-adv > .agency-picker .agency-picker-sub {
    font-size: 0.76rem;
  }
}

/* hero-white-card: بخش محتوای هیرو در یک کارت سفید با سایه (جایگزین overlay شفاف) */
@media (min-width: 901px) {
  /* حذف overlay سفید/شفاف که پشت متن قرار داشت */
  .hero::after {
    display: none;
  }

  /* کارت سفید با گوشه‌های گرد و سایه نرم */
  .hero .hero-content {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 44px 36px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.07);
    max-width: 560px;
  }

  /* فاصله‌ی بیشتر کارت از لبه‌ی صفحه */
  .hero .hero-inner {
    padding-inline-end: clamp(40px, 5vw, 80px);
  }

  /* بکگراند آیکون‌های feature روی پس‌زمینه‌ی سفید کارت */
  .hero-feature-icon {
    background: rgba(251, 249, 244, 0.95);
  }
}

/* ── حالت شفافیت (opacity) برای محتوای هیرو ── */
@media (min-width: 901px) {
  .hero .hero-content.hero-content--opacity {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
  }
  .hero .hero-content.hero-content--opacity .hero-feature-icon {
    background: rgba(255, 255, 255, 0.55);
  }
}

/* ── حالت بدون باکس (none) برای محتوای هیرو ── */
@media (min-width: 901px) {
  .hero .hero-content.hero-content--none {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .hero .hero-content.hero-content--none .hero-eyebrow {
    color: var(--c-gold);
  }
  .hero .hero-content.hero-content--none .hero-title {
    color: #fff;
  }
  .hero .hero-content.hero-content--none .hero-sub {
    color: rgba(255, 255, 255, 0.88);
  }
  .hero .hero-content.hero-content--none .hero-feature-title {
    color: #fff;
  }
  .hero .hero-content.hero-content--none .hero-feature-desc {
    color: rgba(255, 255, 255, 0.72);
  }
  .hero .hero-content.hero-content--none .hero-feature-icon {
    background: rgba(0, 0, 0, 0.28);
  }
  .hero .hero-content.hero-content--none .hero-features {
    border-top-color: rgba(201, 168, 76, 0.50);
  }
}

/* ── حالت بدون باکس: متن تیره برای خوانایی روی تصویر روشن (مطابق screenshot 3) ── */
@media (min-width: 901px) {
  .hero .hero-content.hero-content--none .hero-title {
    color: var(--c-gold);
  }
  .hero .hero-content.hero-content--none .hero-title .hero-title-accent {
    color: var(--c-charcoal);
  }
  .hero .hero-content.hero-content--none .hero-sub {
    color: #2d3b33;
  }
  .hero .hero-content.hero-content--none .hero-feature-title {
    color: var(--c-charcoal);
  }
  .hero .hero-content.hero-content--none .hero-feature-desc {
    color: #6b7280;
  }
  .hero .hero-content.hero-content--none .hero-feature-icon {
    background: rgba(201, 168, 76, 0.15);
  }
}

/* ── حالت پانل کامل (fullpanel) — overlay سفید روی سمت چپ هیرو (مطابق تصویر مشتری) ── */
@media (min-width: 901px) {
  .hero.hero--fullpanel::after {
    display: block;
    background:
      linear-gradient(90deg,
        rgba(255, 255, 255, 0.96) 0,
        rgba(255, 255, 255, 0.95) 380px,
        rgba(255, 255, 255, 0.92) 520px,
        rgba(255, 255, 255, 0.80) 650px,
        rgba(255, 255, 255, 0.50) 780px,
        rgba(255, 255, 255, 0.20) 900px,
        rgba(255, 255, 255, 0.06) 1020px,
        rgba(255, 255, 255, 0.00) 1140px);
  }
  .hero .hero-content.hero-content--fullpanel {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  .hero .hero-content.hero-content--fullpanel .hero-feature-icon {
    background: rgba(201, 168, 76, 0.12);
  }
}

/* آیکون برچسب بالای هیرو (فقط در حالت مورب درج می‌شود) */
.hero-eyebrow-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  vertical-align: -2px;
  color: #b78e2e;
}

/* برچسب موقعیت پایین پانل فقط در حالت مورب دسکتاپ نمایش داده می‌شود */
.hero-location {
  display: none;
}

/* ── حالت مورب (oblique) — پانل سفید با لبه مورب از بالا تا پایین هیرو (دسکتاپ) ── */
@media (min-width: 901px) {
  /* حذف overlay شفاف پیش‌فرض */
  .hero.hero--oblique::after {
    display: none;
  }

  /* پانل سفید شناور با لبه‌ی مورب، گوشه‌های گرد و بافت خطوط توپوگرافی */
  .hero.hero--oblique::before {
    content: '';
    position: absolute;
    top: clamp(14px, 2vw, 24px);
    bottom: clamp(14px, 2vw, 24px);
    left: clamp(14px, 2vw, 24px);
    width: 64%;
    z-index: 1;
    pointer-events: none;
    border-radius: clamp(18px, 2.2vw, 30px);
    background-color: #fffdf9;
    background-image:
      repeating-radial-gradient(ellipse 130% 105% at 4% 0%,
        rgba(201, 168, 76, 0.09) 0,
        rgba(201, 168, 76, 0.09) 1px,
        rgba(201, 168, 76, 0) 1px,
        rgba(201, 168, 76, 0) 32px),
      repeating-radial-gradient(ellipse 95% 85% at 100% 100%,
        rgba(27, 107, 69, 0.06) 0,
        rgba(27, 107, 69, 0.06) 1px,
        rgba(27, 107, 69, 0) 1px,
        rgba(27, 107, 69, 0) 46px),
      linear-gradient(155deg, #ffffff 0%, #fdfaf4 46%, #f7f1e6 100%);
    clip-path: polygon(0 0, 66% 0, 91% 100%, 0 100%);
    filter: drop-shadow(0 24px 50px rgba(15, 30, 21, 0.22));
  }

  /* فاصله‌ی کافی محتوا از لبه‌ی چپ */
  .hero.hero--oblique .hero-inner {
    padding-inline-end: clamp(64px, 7vw, 112px);
  }

  /* محتوا روی پانل مورب — بدون کارت، شفاف و کمی جمع‌وجورتر */
  .hero .hero-content.hero-content--oblique {
    position: relative;
    z-index: 2;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    max-width: min(40%, 540px);
    text-align: right;
  }

  /* خط طلایی بالای متن در این حالت حذف و برچسب به شکل قرص سفید نمایش داده می‌شود */
  .hero.hero--oblique .hero-rule {
    display: none;
  }

  .hero.hero--oblique .hero-eyebrow {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    margin-bottom: 16px;
    border-radius: 999px;
    border: 1px solid rgba(30, 42, 34, 0.14);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 14px rgba(20, 35, 25, 0.06);
    color: #3d4b43;
    font-size: 0.8rem;
    font-weight: 700;
  }

  .hero.hero--oblique .hero-eyebrow-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: #b78e2e;
  }

  .hero.hero--oblique .hero-title {
    font-size: clamp(1.95rem, 3.1vw, 2.85rem) !important;
    font-weight: 900;
    line-height: 1.38;
    color: #1e2a22;
    margin-bottom: 0.9rem;
  }

  .hero.hero--oblique .hero-title-accent {
    display: block;
    color: #b78e2e;
  }

  .hero.hero--oblique .hero-sub {
    color: #5b6a61;
    font-size: 0.95rem;
    line-height: 1.95;
    max-width: 470px;
    margin-bottom: 1.5rem;
  }

  .hero.hero--oblique .hero-actions {
    gap: 10px;
    max-width: 100%;
    margin-bottom: 1.5rem;
  }

  /* همه‌ی دکمه‌ها به شکل کارت روشن و یکدست درمی‌آیند */
  .hero.hero--oblique .hero-actions .hero-btn {
    position: relative;
    justify-content: flex-start;
    gap: 9px;
    min-height: 52px;
    padding: 11px 14px 11px 42px;
    border-radius: 14px;
    border: 1px solid rgba(30, 42, 34, 0.12);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 18px rgba(20, 35, 25, 0.05);
    color: #26332b;
    font-size: 0.83rem;
    font-weight: 700;
  }

  .hero.hero--oblique .hero-actions .hero-btn svg {
    width: 19px;
    height: 19px;
    color: #b78e2e;
  }

  .hero.hero--oblique .hero-actions .hero-btn:hover {
    background: #ffffff;
    border-color: rgba(201, 168, 76, 0.55);
    color: #1f5c3c;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(20, 35, 25, 0.10);
  }

  /* فلش دایره‌ای کوچک در انتهای هر دکمه */
  .hero.hero--oblique .hero-actions .hero-btn::after {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    width: 23px;
    height: 23px;
    margin-top: -11.5px;
    border-radius: 50%;
    border: 1px solid rgba(201, 168, 76, 0.45);
    background-color: rgba(201, 168, 76, 0.10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9862f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    transition: background-color 0.22s ease, border-color 0.22s ease;
  }

  .hero.hero--oblique .hero-actions .hero-btn:hover::after {
    border-color: rgba(201, 168, 76, 0.75);
    background-color: rgba(201, 168, 76, 0.18);
  }

  /* ردیف مزیت‌ها: ظریف‌تر و هم‌راستا با پانل */
  .hero.hero--oblique .hero-features {
    gap: 14px 22px;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(30, 42, 34, 0.10);
    max-width: 100%;
  }

  .hero.hero--oblique .hero-feature {
    gap: 9px;
  }

  .hero.hero--oblique .hero-feature-icon {
    width: 38px;
    height: 38px;
    border-color: rgba(201, 168, 76, 0.5);
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(94, 79, 45, 0.07);
  }

  .hero.hero--oblique .hero-feature-icon svg {
    width: 18px;
    height: 18px;
  }

  .hero.hero--oblique .hero-feature-title {
    font-size: 0.8rem;
    color: #24312a;
  }

  .hero.hero--oblique .hero-feature-desc {
    font-size: 0.7rem;
    color: #73827a;
  }

  /* برچسب موقعیت مکانی در پایین پانل */
  .hero.hero--oblique .hero-location {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    color: #6f7f75;
    font-size: 0.74rem;
    font-weight: 600;
  }

  .hero.hero--oblique .hero-location svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: #b78e2e;
  }
}

/* ریزتنظیم حالت مورب برای نمایشگرهای باریک‌تر دسکتاپ */
@media (min-width: 901px) and (max-width: 1150px) {
  .hero.hero--oblique .hero-inner {
    padding-inline-end: clamp(50px, 6vw, 84px);
  }

  .hero.hero--oblique .hero-actions .hero-btn {
    gap: 7px;
    padding: 10px 12px 10px 34px;
    font-size: 0.75rem;
  }

  .hero.hero--oblique .hero-actions .hero-btn svg {
    width: 17px;
    height: 17px;
  }

  .hero.hero--oblique .hero-actions .hero-btn::after {
    left: 9px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background-size: 10px 10px;
  }
}

/* ── سمت نمایش باکس هیرو (تنظیم از پنل ادمین) ── */
@media (min-width: 901px) {
  /* سمت راست: کل باکس/محتوا در راست هیرو */
  .hero.hero--side-right .hero-inner {
    justify-content: flex-start;
    padding-inline-start: clamp(40px, 5vw, 80px);
    padding-inline-end: clamp(16px, 2.5vw, 40px);
  }

  /* آینه‌کردن سایه‌ی روشن پس‌زمینه برای خوانایی در سمت راست */
  .hero.hero--side-right .hero-media::after {
    background:
      linear-gradient(0deg, rgba(13, 24, 17, 0.24) 0%, rgba(13, 24, 17, 0.08) 20%, rgba(13, 24, 17, 0) 42%),
      linear-gradient(270deg, rgba(250, 246, 238, 0.30) 0%, rgba(250, 246, 238, 0.10) 30%, rgba(250, 246, 238, 0) 52%);
  }

  /* پانل کامل: overlay سفید آینه‌شده در سمت راست */
  .hero.hero--fullpanel.hero--side-right::after {
    display: block;
    background:
      linear-gradient(270deg,
        rgba(255, 255, 255, 0.96) 0,
        rgba(255, 255, 255, 0.95) 380px,
        rgba(255, 255, 255, 0.92) 520px,
        rgba(255, 255, 255, 0.80) 650px,
        rgba(255, 255, 255, 0.50) 780px,
        rgba(255, 255, 255, 0.20) 900px,
        rgba(255, 255, 255, 0.06) 1020px,
        rgba(255, 255, 255, 0.00) 1140px);
  }

  /* پانل مورب: لبه‌ی مورب آینه‌شده در سمت راست */
  .hero.hero--oblique.hero--side-right::before {
    left: auto;
    right: clamp(14px, 2vw, 24px);
    clip-path: polygon(34% 0, 100% 0, 100% 100%, 9% 100%);
  }

  .hero.hero--oblique.hero--side-right .hero-inner {
    padding-inline-start: clamp(64px, 7vw, 112px);
    padding-inline-end: clamp(16px, 2.5vw, 40px);
  }
}

/* ── حالت کارتی (cards) — متن سفید/طلایی روی تصویر با چهار کارت گزینه (مطابق پیوست مشتری) ── */
@media (min-width: 901px) {
  .hero.hero--cards::after {
    display: none;
  }

  /* سایه‌ی تیره‌ی مایل روی سمت محتوا برای خوانایی متن سفید */
  .hero.hero--cards .hero-media::after {
    background:
      linear-gradient(0deg, rgba(13, 24, 17, 0.42) 0%, rgba(13, 24, 17, 0.10) 32%, rgba(13, 24, 17, 0) 55%),
      linear-gradient(90deg,
        rgba(13, 24, 17, 0.82) 0,
        rgba(13, 24, 17, 0.74) 300px,
        rgba(13, 24, 17, 0.62) 460px,
        rgba(13, 24, 17, 0.44) 600px,
        rgba(13, 24, 17, 0.24) 730px,
        rgba(13, 24, 17, 0.08) 860px,
        rgba(13, 24, 17, 0) 980px);
  }

  .hero.hero--cards .hero-inner {
    padding-inline-end: clamp(40px, 5vw, 80px);
  }

  .hero.hero--cards .hero-content {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    max-width: 660px;
  }

  /* حذف خط طلایی بالای متن و نوار مزیت‌ها — فقط چهار گزینه‌ی پیوست */
  .hero.hero--cards .hero-rule,
  .hero.hero--cards .hero-features {
    display: none !important;
  }

  .hero.hero--cards .hero-eyebrow {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
    padding: 8px 15px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(250, 246, 238, 0.94);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    color: #3d4b43;
    font-size: 0.8rem;
    font-weight: 700;
  }

  .hero.hero--cards .hero-eyebrow-icon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: #b78e2e;
  }

  .hero.hero--cards .hero-title {
    font-size: clamp(2.05rem, 3.5vw, 3rem) !important;
    font-weight: 900;
    line-height: 1.32;
    color: #ffffff;
    margin-bottom: 1rem;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  }

  .hero.hero--cards .hero-title-accent {
    display: block;
    color: #e0b64f;
  }

  .hero.hero--cards .hero-sub {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    line-height: 1.95;
    max-width: 540px;
    margin-bottom: 1.6rem;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
  }

  /* ردیف چهار کارت سفید گزینه‌ها (چیدمان تصویر: ثبت ملک سمت چپ) */
  .hero.hero--cards .hero-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    direction: ltr;
    width: 100%;
    max-width: 100%;
    margin-bottom: 1.15rem;
  }

  .hero.hero--cards .hero-actions .hero-btn {
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    min-height: 138px;
    padding: 18px 8px 38px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.55);
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.20);
    color: #25342b;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.55;
    white-space: normal;
    text-align: center;
    direction: rtl;
  }

  .hero.hero--cards .hero-actions .hero-btn svg {
    width: 30px;
    height: 30px;
    color: #2b3a31;
  }

  .hero.hero--cards .hero-actions .hero-btn:first-child svg {
    color: #c9a84c;
  }

  .hero.hero--cards .hero-actions .hero-btn:hover {
    background: #ffffff;
    border-color: rgba(224, 182, 79, 0.85);
    color: #1f5c3c;
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
  }

  /* فلش دایره‌ای کوچک در پایین هر کارت */
  .hero.hero--cards .hero-actions .hero-btn::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 10px;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    border-radius: 50%;
    border: 1px solid rgba(201, 168, 76, 0.55);
    background-color: rgba(201, 168, 76, 0.10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9862f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 11px;
    transition: background-color 0.22s ease, border-color 0.22s ease;
  }

  .hero.hero--cards .hero-actions .hero-btn:hover::after {
    border-color: rgba(201, 168, 76, 0.85);
    background-color: rgba(201, 168, 76, 0.20);
  }

  /* قرص موقعیت مکانی پایین کارت‌ها */
  .hero.hero--cards .hero-location {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    background: rgba(16, 27, 20, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #f2ece0;
    font-size: 0.78rem;
    font-weight: 600;
    direction: ltr;
  }

  .hero.hero--cards .hero-location svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: #e0b64f;
  }

  /* آینه‌کردن پرده‌ی تیره و فاصله‌ها وقتی محتوا در سمت راست است */
  .hero.hero--cards.hero--side-right .hero-media::after {
    background:
      linear-gradient(0deg, rgba(13, 24, 17, 0.42) 0%, rgba(13, 24, 17, 0.10) 32%, rgba(13, 24, 17, 0) 55%),
      linear-gradient(270deg,
        rgba(13, 24, 17, 0.82) 0,
        rgba(13, 24, 17, 0.74) 300px,
        rgba(13, 24, 17, 0.62) 460px,
        rgba(13, 24, 17, 0.44) 600px,
        rgba(13, 24, 17, 0.24) 730px,
        rgba(13, 24, 17, 0.08) 860px,
        rgba(13, 24, 17, 0) 980px);
  }

  .hero.hero--cards.hero--side-right .hero-inner {
    padding-inline-start: clamp(40px, 5vw, 80px);
    padding-inline-end: clamp(16px, 2.5vw, 40px);
  }
}

/* حالت کارتی روی نمایشگرهای باریک‌تر دسکتاپ */
@media (min-width: 901px) and (max-width: 1150px) {
  .hero.hero--cards .hero-actions {
    gap: 10px;
  }

  .hero.hero--cards .hero-actions .hero-btn {
    min-height: 126px;
    padding: 15px 6px 35px;
    font-size: 0.72rem;
  }

  .hero.hero--cards .hero-actions .hero-btn svg {
    width: 26px;
    height: 26px;
  }
}

/* =========================================================
   DAR-V3 — Premium Two-Column Homepage Redesign
   ========================================================= */

/* 33. HEADER — ALWAYS DARK EMERALD */
.navbar { background: #0f2318 !important; border-bottom: 1px solid rgba(201,168,76,.22) !important; }
.navbar.scrolled { background: #0f2318 !important; box-shadow: 0 2px 24px rgba(0,0,0,.35) !important; }
.navbar-brand, .navbar:not(.scrolled) .navbar-brand { color: #fff !important; }
.navbar .nav-link, .navbar:not(.scrolled) .nav-link { color: rgba(255,255,255,.85) !important; }
.navbar .nav-link:hover, .navbar .nav-link.active,
.navbar:not(.scrolled) .nav-link:hover, .navbar:not(.scrolled) .nav-link.active {
  color: #fff !important; background: rgba(255,255,255,.12) !important;
}
.navbar .hamburger span, .navbar:not(.scrolled) .hamburger span { background: #fff !important; }
.navbar .navbar-phone, .navbar:not(.scrolled) .navbar-phone {
  background: transparent !important; color: var(--c-gold) !important;
  border: 1.5px solid rgba(201,168,76,.7) !important;
}
.navbar .navbar-phone:hover { background: var(--c-gold) !important; color: #1a1200 !important; }
.navbar-whatsapp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: #25D366; color: #fff;
  margin-inline-start: 6px; flex-shrink: 0;
  transition: var(--transition); text-decoration: none;
}
.navbar-whatsapp:hover { background: #1da855; transform: scale(1.08); }
.navbar-whatsapp svg { width: 18px; height: 18px; }
@media (max-width: 768px) {
  .navbar-menu { background: #0f2318 !important; }
  .navbar-menu .nav-link { color: rgba(255,255,255,.85) !important; }
  .navbar-whatsapp { display: none; }
}

/* 34. HERO V3 — TWO-COLUMN LAYOUT */
.hero.hero--dar3 {
  position: relative !important; display: block !important;
  min-height: 0 !important; overflow: visible !important;
  background: var(--c-cream) !important;
  isolation: auto !important;
}
.hero.hero--dar3::after, .hero.hero--dar3::before { display: none !important; }
.hero.hero--dar3 .hero-media { display: none !important; }
.hero.hero--dar3 .hero-inner { display: none !important; }

.hero-dar3-inner {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 48px;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 72px;
  width: 100%;
}

/* Content Column (right in RTL = first grid child) */
.hcontent-col { display: flex; flex-direction: column; }
.hcontent-eyebrow-wrap {
  display: flex; align-items: center; gap: 10px; margin-bottom: 1rem;
}
.hcontent-gold-line {
  display: block; width: 36px; height: 2px;
  background: var(--c-gold); border-radius: 2px; flex-shrink: 0;
}
.hcontent-eyebrow { color: var(--c-emerald); font-size: .82rem; font-weight: 700; }
.hcontent-title {
  font-size: clamp(1.9rem,3.2vw,3rem) !important;
  font-weight: 900 !important; color: var(--c-emerald) !important;
  line-height: 1.3 !important; margin-bottom: .6rem !important;
}
.hcontent-gold { color: #b78e2e; }
.hcontent-title-line { width: 160px; margin-bottom: 1.2rem; }
.hcontent-title-line svg { width: 100%; height: auto; display: block; }
.hcontent-sub {
  color: #4d5b52; font-size: .95rem; line-height: 1.9;
  margin-bottom: 1.6rem; max-width: 420px;
}
.hcontent-actions {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  max-width: 400px !important; margin-bottom: 1.8rem !important; gap: 10px !important;
}

/* Advisor glass card */
.advisor-glass-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: rgba(250,248,244,.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201,168,76,.35); border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,.07); max-width: 360px;
}
.advisor-glass-info { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.advisor-glass-name { font-size: .95rem; font-weight: 800; color: var(--c-charcoal); }
.advisor-glass-role { font-size: .75rem; color: var(--c-text-muted); line-height: 1.5; }
.advisor-glass-portrait {
  width: 60px !important; height: 60px !important; border-radius: 50% !important;
  object-fit: cover !important; object-position: top center !important;
  border: 2.5px solid var(--c-gold) !important; flex-shrink: 0 !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.15) !important; display: block !important;
}

/* Tour Preview Panel (left in RTL = second grid child) */
.htour-panel { position: relative; }
.htour-card {
  background: #fff; border-radius: 24px;
  border: 1.5px solid rgba(201,168,76,.4);
  box-shadow: 0 12px 48px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  overflow: hidden;
}
.htour-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: #0f2318;
}
.htour-badge {
  display: inline-flex; align-items: center; gap: 7px;
  color: #fff; font-size: .78rem; font-weight: 700;
}
.htour-fullscreen {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,.12); color: #fff; transition: var(--transition);
  text-decoration: none;
}
.htour-fullscreen:hover { background: rgba(255,255,255,.22); }
.htour-mainwrap {
  position: relative; aspect-ratio: 16/10;
  overflow: hidden; background: #101b14; cursor: pointer;
}
.htour-mainwrap > img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s ease; display: block;
}
.htour-360btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; width: 72px; height: 72px; border-radius: 50%;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; text-decoration: none; font-size: .7rem; font-weight: 800;
  border: 2px solid rgba(201,168,76,.8);
  transition: var(--transition); box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
.htour-360btn:hover { background: rgba(201,168,76,.75); border-color: var(--c-gold); transform: translate(-50%,-50%) scale(1.08); }
.htour-360btn svg { flex-shrink: 0; }
.htour-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.88); backdrop-filter: blur(4px);
  border: none; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  color: var(--c-emerald); box-shadow: 0 2px 12px rgba(0,0,0,.18);
  transition: var(--transition); z-index: 5;
}
.htour-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.1); box-shadow: 0 4px 18px rgba(0,0,0,.24); }
.htour-prev { right: 12px; }
.htour-next { left: 12px; }
.htour-thumbs {
  display: flex; gap: 8px; padding: 10px 12px;
  background: #0a1a0e; overflow-x: auto; scrollbar-width: none;
}
.htour-thumbs::-webkit-scrollbar { display: none; }
.htour-thumb {
  flex: 0 0 calc(25% - 6px); aspect-ratio: 4/3;
  border-radius: 8px; overflow: hidden;
  border: 2px solid transparent; cursor: pointer;
  padding: 0; background: none; transition: border-color .2s ease;
}
.htour-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.htour-thumb.is-active, .htour-thumb:hover { border-color: var(--c-gold); }

/* 35. HERO SEARCH BAR */
.hero-search-bar { background: var(--c-cream); padding: 0 0 48px; }
.hsearch-form {
  display: flex; align-items: center;
  background: #fff; border: 1.5px solid rgba(201,168,76,.5);
  border-radius: 60px; padding: 6px 6px 6px 6px;
  box-shadow: 0 6px 32px rgba(0,0,0,.09); gap: 0;
}
.hsearch-field {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 18px; flex: 1; min-width: 0;
}
.hsearch-field svg { flex-shrink: 0; color: var(--c-emerald); }
.hsearch-field select {
  border: none; background: transparent; font-family: inherit;
  font-size: .88rem; color: var(--c-text); appearance: none;
  -webkit-appearance: none; width: 100%; cursor: pointer; outline: none; direction: rtl;
}
.hsearch-divider {
  display: block; width: 1px; height: 34px;
  background: rgba(0,0,0,.1); flex-shrink: 0;
}
.hsearch-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 50px;
  background: var(--c-gold); color: #1a1200;
  border: none; font-family: inherit; font-size: .88rem; font-weight: 700;
  cursor: pointer; transition: var(--transition); white-space: nowrap; flex-shrink: 0;
}
.hsearch-btn:hover { background: #b8943e; transform: translateY(-1px); }
.hsearch-btn svg { flex-shrink: 0; }

/* 36. FEATURED PROPERTIES — SPLIT HEADER */
.sec-header-split {
  display: flex; align-items: flex-end;
  justify-content: space-between; gap: 24px; margin-bottom: 3rem;
}
.sec-header-text { flex: 1; }
.sec-gold-accent {
  display: block; width: 44px; height: 3px;
  background: var(--c-gold); border-radius: 2px; margin-bottom: 8px;
}
.sec-header-sub { font-size: .875rem; color: var(--c-text-muted); margin-top: .4rem; }
.sec-header-action { flex-shrink: 0; padding-bottom: 4px; }

/* 37. RESPONSIVE — DAR-V3 */
@media (max-width: 1024px) {
  .hero-dar3-inner { grid-template-columns: 44% 1fr; gap: 32px; }
}
@media (max-width: 900px) {
  .hero.hero--dar3 { background: var(--c-cream) !important; }
  .hero-dar3-inner {
    grid-template-columns: 1fr !important; gap: 24px !important;
    padding-top: 88px !important; padding-bottom: 36px !important;
  }
  .hcontent-col { order: 1; }
  .htour-panel { order: 2; }
  .hcontent-actions { max-width: none !important; }
  .hcontent-sub { max-width: none; }
  .advisor-glass-card { max-width: 100%; }
  .hero-search-bar { padding: 0 0 32px; }
  .hsearch-form { flex-wrap: wrap; border-radius: 16px; padding: 12px; gap: 8px; }
  .hsearch-field { flex: 0 0 calc(50% - 4px); padding: 6px 10px; }
  .hsearch-divider { display: none; }
  .hsearch-btn { flex: 1 1 100%; border-radius: 12px; justify-content: center; }
  .sec-header-split { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 480px) {
  .hero-dar3-inner { gap: 16px !important; }
  .hsearch-field { flex: 1 1 100%; }
  .hcontent-title { font-size: clamp(1.6rem,6vw,2rem) !important; }
  .hcontent-actions { grid-template-columns: 1fr !important; }
}

/* حالت کارتی در موبایل/تبلت: پنل روشن زیر تصویر و کارت‌ها در دو ستون */
@media (max-width: 900px) {
  .hero.hero--cards .hero-media::after {
    background: linear-gradient(0deg, rgba(13, 24, 17, 0.55) 0%, rgba(13, 24, 17, 0.10) 38%, rgba(13, 24, 17, 0) 60%);
  }

  .hero.hero--cards .hero-rule,
  .hero.hero--cards .hero-features {
    display: none !important;
  }

  .hero.hero--cards .hero-eyebrow {
    display: flex !important;
    width: fit-content;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    margin: 0 auto 14px;
    border-radius: 999px;
    border: 1px solid rgba(30, 42, 34, 0.14);
    background: #fbf9f4;
    box-shadow: 0 4px 14px rgba(20, 35, 25, 0.06);
    color: #3d4b43;
    font-size: 0.76rem;
    font-weight: 700;
  }

  .hero.hero--cards .hero-eyebrow-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: #b78e2e;
  }

  .hero.hero--cards .hero-title {
    color: var(--c-charcoal);
    text-shadow: none;
  }

  .hero.hero--cards .hero-title-accent {
    display: block;
    color: #b78e2e;
  }

  .hero.hero--cards .hero-sub {
    color: #4d5b52;
    max-width: none;
    margin-inline: auto;
    text-shadow: none;
  }

  .hero.hero--cards .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    direction: ltr;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 14px !important;
  }

  .hero.hero--cards .hero-actions .hero-btn {
    position: relative;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    min-height: 116px;
    padding: 14px 8px 34px !important;
    border-radius: 14px;
    border: 1px solid rgba(30, 42, 34, 0.12);
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(20, 35, 25, 0.07);
    color: #25342b;
    font-size: 0.76rem !important;
    font-weight: 800;
    white-space: normal;
    text-align: center;
    direction: rtl;
  }

  .hero.hero--cards .hero-actions .hero-btn svg {
    width: 26px;
    height: 26px;
    color: #2b3a31;
  }

  .hero.hero--cards .hero-actions .hero-btn:first-child svg {
    color: #c9a84c;
  }

  .hero.hero--cards .hero-actions .hero-btn::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 21px;
    height: 21px;
    margin-left: -10.5px;
    border-radius: 50%;
    border: 1px solid rgba(201, 168, 76, 0.55);
    background-color: rgba(201, 168, 76, 0.10);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9862f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
  }

  .hero.hero--cards .hero-location {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
    margin: 0 auto;
    padding: 8px 15px;
    border-radius: 999px;
    border: 1px solid rgba(30, 42, 34, 0.14);
    background: #fbf9f4;
    color: #4d5b52;
    font-size: 0.75rem;
    font-weight: 600;
  }

  .hero.hero--cards .hero-location svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: #b78e2e;
  }
}

/* Homepage featured properties — carousel on all screens */
.properties-carousel-wrap {
  position: relative;
}

.properties-carousel {
  display: flex;
  flex-wrap: nowrap;
  gap: 28px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 4px 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.properties-carousel::-webkit-scrollbar {
  display: none;
}

.properties-carousel > .prop-card {
  flex: 0 0 calc((100% - 56px) / 3);
  max-width: calc((100% - 56px) / 3);
  min-width: 0;
  scroll-snap-align: start;
}

.properties-carousel > .prop-card.reveal {
  opacity: 1;
  transform: none;
}

.properties-carousel > .prop-card.reveal:hover {
  transform: translateY(-4px);
}

.prop-carousel-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  border: 1px solid rgba(27, 107, 69, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: var(--c-emerald);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  transition: var(--transition);
}

.prop-carousel-nav:hover {
  background: var(--c-emerald);
  border-color: var(--c-emerald);
  color: #fff;
}

.prop-carousel-nav:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.prop-carousel-prev {
  right: -10px;
}

.prop-carousel-next {
  left: -10px;
}

.prop-carousel-nav[hidden] {
  display: none;
}

@media (max-width: 1024px) {
  .properties-carousel {
    gap: 20px;
  }

  .properties-carousel > .prop-card {
    flex-basis: calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }
}

@media (max-width: 768px) {
  .properties-carousel {
    gap: 16px;
    margin-inline: calc(-1 * clamp(16px, 5%, 60px));
    padding-inline: clamp(16px, 5%, 60px);
    padding-block: 4px 24px;
    overscroll-behavior-x: contain;
    scroll-padding-inline: clamp(16px, 5%, 60px);
    scroll-snap-type: x mandatory;
  }

  .properties-carousel > .prop-card {
    flex: 0 0 84%;
    max-width: 84%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .prop-carousel-nav {
    width: 38px;
    height: 38px;
    margin-top: -19px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  }

  .prop-carousel-prev {
    right: 2px;
  }

  .prop-carousel-next {
    left: 2px;
  }
}

/* ── Featured properties carousel: clearer frame, dots, swipe hint ── */
.properties-carousel-wrap {
  padding: 22px 14px 10px;
  border: 1px solid rgba(27, 107, 69, 0.14);
  border-radius: 28px;
  background: linear-gradient(180deg, #f8faf7 0%, #f1f5f0 100%);
}

.properties-carousel {
  overscroll-behavior-x: contain;
}

.properties-carousel > .prop-card {
  box-shadow: 0 6px 22px rgba(27, 43, 33, 0.09);
}

.properties-carousel-wrap > .prop-carousel-nav {
  top: calc(50% - 30px);
  width: 50px;
  height: 50px;
  margin-top: -25px;
  border: 2px solid #fff;
  background: var(--c-emerald);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(27, 107, 69, 0.18), 0 8px 22px rgba(27, 107, 69, 0.32);
}

.properties-carousel-wrap > .prop-carousel-nav:hover {
  background: var(--c-emerald-dark);
  border-color: #fff;
  color: #fff;
}

.properties-carousel-wrap > .prop-carousel-nav svg {
  width: 24px;
  height: 24px;
}

.properties-carousel-wrap > .prop-carousel-prev {
  right: 6px;
}

.properties-carousel-wrap > .prop-carousel-next {
  left: 6px;
}

.prop-carousel-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 10px 4px;
}

.prop-carousel-footer[hidden] {
  display: none;
}

.prop-carousel-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 12px;
}

.prop-carousel-dots[hidden] {
  display: none;
}

.prop-carousel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(27, 107, 69, 0.25);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}

.prop-carousel-dot:hover {
  background: rgba(27, 107, 69, 0.55);
}

.prop-carousel-dot.is-active {
  width: 26px;
  background: var(--c-emerald);
}

.prop-carousel-dot:focus-visible {
  outline: 2px solid var(--c-emerald);
  outline-offset: 2px;
}

.prop-carousel-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  color: #5b6b60;
  font-size: 0.8rem;
  line-height: 1.9;
  text-align: center;
}

.prop-carousel-hint svg {
  flex: 0 0 auto;
  color: var(--c-emerald);
}

@media (max-width: 768px) {
  .properties-carousel-wrap {
    padding: 16px 10px 6px;
    border-radius: 22px;
  }

  .properties-carousel-wrap .properties-carousel {
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
  }

  .properties-carousel > .prop-card {
    flex-basis: 82%;
    max-width: 82%;
    scroll-snap-stop: normal;
  }

  .properties-carousel-wrap > .prop-carousel-nav {
    top: calc(50% - 34px);
    width: 42px;
    height: 42px;
    margin-top: -21px;
  }

  .properties-carousel-wrap > .prop-carousel-nav svg {
    width: 20px;
    height: 20px;
  }

  .properties-carousel-wrap > .prop-carousel-prev {
    right: 4px;
  }

  .properties-carousel-wrap > .prop-carousel-next {
    left: 4px;
  }

  .prop-carousel-hint {
    font-size: 0.76rem;
  }
}

/* Mouse drag panning for the homepage properties carousel */
.properties-carousel {
  cursor: grab;
}

.properties-carousel.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
  -webkit-user-select: none;
  user-select: none;
}

.properties-carousel img {
  -webkit-user-drag: none;
}

/* Mouse dragging: keep the cards still and the grabbing cursor everywhere on the track */
.properties-carousel.is-dragging * {
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}

.properties-carousel.is-dragging > .prop-card,
.properties-carousel.is-dragging > .prop-card.reveal:hover {
  transform: none;
}

/* ============================================================
   DEAL STATUS BADGE ON PROPERTY CARDS (فروش / رهن و اجاره)
   ============================================================ */
.prop-deal-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 12px;
  border-radius: 50px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
  background: linear-gradient(135deg, #2f9c69 0%, #154f33 100%);
  box-shadow: 0 6px 16px rgba(15, 42, 30, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.prop-deal-badge svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  opacity: 0.9;
}

.prop-deal-badge.prop-deal-sale {
  color: #2b2110;
  text-shadow: none;
  background: linear-gradient(135deg, #f0d98a 0%, #c9a84c 55%, #b8912f 100%);
  box-shadow: 0 6px 16px rgba(120, 90, 20, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.prop-card:hover .prop-deal-badge {
  transform: translateY(-1px);
  transition: transform 0.3s ease;
}

@media (max-width: 480px) {
  .prop-deal-badge {
    top: 10px;
    left: 10px;
    padding: 4px 9px;
    font-size: 0.68rem;
  }

  .prop-deal-badge svg {
    width: 12px;
    height: 12px;
  }
}

/* #CR-CARDLINK -- کل کارت فایل ملکی به صفحه جزئیات همان ملک لینک شده است */
#propGrid .prop-card {
  position: relative;
  cursor: pointer;
}

#propGrid .prop-card .prop-card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  font-size: 0;
  color: transparent;
  text-decoration: none;
}

#propGrid .prop-card .prop-card-link:focus-visible {
  outline: 2px solid var(--c-gold, #c9a84c);
  outline-offset: -3px;
}

#propGrid .prop-card .prop-card-body .btn {
  position: relative;
  z-index: 2;
}

/* #CR-DEAL-INLINE -- نشان «فروش / رهن و اجاره» از روی عکس به ناحیه متن کارت و
   زیر عنوان منتقل شد تا روی تصویر خوانا نباشد/گم نشود. */
.prop-card-body > .prop-deal-badge {
  position: static;
  margin: 0 0 0.7rem;
  padding: 3px 10px;
  font-size: 0.72rem;
  border: 1px solid rgba(201, 168, 76, 0.5);
  box-shadow: none;
}

.prop-card-body > .prop-deal-badge.prop-deal-rent {
  border-color: rgba(21, 79, 51, 0.35);
}

.prop-card:hover .prop-card-body > .prop-deal-badge {
  transform: none;
}

@media (max-width: 480px) {
  .prop-card-body > .prop-deal-badge {
    margin-bottom: 0.6rem;
    padding: 3px 9px;
    font-size: 0.7rem;
  }
}

/* #CR-HEROTEXT -- متن‌های سمت چپ هیرو (حالت باکس) زیباتر: کارت کاغذی با حاشیه و
   خط طلایی، تیتر درشت‌تر با هایلایت طلایی، متن با نشانه‌ی طلایی و سه ویژگی کارتی. */
.hero .hero-content.hero-content--box .hero-rule {
  width: 62px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.12) 0%, var(--c-gold) 70%, #e6cd85 100%);
  box-shadow: 0 2px 7px rgba(201, 168, 76, 0.28);
  margin-bottom: 16px;
}

.hero .hero-content.hero-content--box .hero-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 15px;
  border-radius: 999px;
  border: 1px solid rgba(201, 168, 76, 0.42);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(246, 232, 195, 0.72) 100%);
  box-shadow: 0 3px 10px rgba(120, 96, 40, 0.08);
  color: #14563a;
  font-weight: 800;
}

.hero .hero-content.hero-content--box .hero-eyebrow::before {
  content: '';
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-gold);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
}

.hero .hero-content.hero-content--box .hero-title-accent {
  color: #a97f1f;
  padding-inline: 2px;
  background-image: linear-gradient(180deg,
    rgba(201, 168, 76, 0) 58%,
    rgba(201, 168, 76, 0.34) 58%,
    rgba(201, 168, 76, 0.34) 95%,
    rgba(201, 168, 76, 0) 95%);
}

@media (min-width: 769px) {
  .hero .hero-content.hero-content--box {
    position: relative;
    padding: clamp(26px, 2.6vw, 40px) clamp(26px, 2.4vw, 38px);
    border-radius: 24px;
    border: 1px solid rgba(201, 168, 76, 0.34);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.91) 0%, rgba(252, 248, 239, 0.83) 100%);
    box-shadow:
      0 26px 64px rgba(18, 32, 23, 0.16),
      0 1px 0 rgba(255, 255, 255, 0.9) inset;
    -webkit-backdrop-filter: blur(8px) saturate(1.05);
    backdrop-filter: blur(8px) saturate(1.05);
  }

  /* خط طلایی نازک روی لبه بالای کارت */
  .hero .hero-content.hero-content--box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 16%;
    right: 16%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg,
      rgba(201, 168, 76, 0) 0%,
      var(--c-gold) 25%,
      #edd79b 50%,
      var(--c-gold) 75%,
      rgba(201, 168, 76, 0) 100%);
    pointer-events: none;
  }

  .hero .hero-content.hero-content--box .hero-title {
    font-size: clamp(2.05rem, 3.5vw, 3.05rem) !important;
    line-height: 1.45;
    margin-bottom: 1.1rem;
    color: #16211b;
  }

  .hero .hero-content.hero-content--box .hero-sub {
    max-width: 470px;
    padding-inline-start: 15px;
    border-inline-start: 3px solid rgba(201, 168, 76, 0.55);
    color: #3d4a42;
    font-size: 1.02rem;
    line-height: 2.05;
    margin-bottom: 1.7rem;
  }

  .hero .hero-content.hero-content--box .hero-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    max-width: none;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(201, 168, 76, 0.28);
  }

  .hero .hero-content.hero-content--box .hero-feature {
    align-items: flex-start;
    gap: 8px;
    padding: 11px 10px;
    border-radius: 14px;
    border: 1px solid rgba(201, 168, 76, 0.22);
    background: rgba(255, 255, 255, 0.62);
    box-shadow: 0 2px 8px rgba(24, 40, 30, 0.04);
  }

  .hero .hero-content.hero-content--box .hero-feature-icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
  }

  .hero .hero-content.hero-content--box .hero-feature-icon svg {
    width: 18px;
    height: 18px;
  }

  .hero .hero-content.hero-content--box .hero-feature-title {
    font-size: 0.8rem;
  }

  .hero .hero-content.hero-content--box .hero-feature-desc {
    font-size: 0.72rem;
  }
}

/* Tour-Kacheln sind Links zur jeweiligen Objektseite (drei Objekte pro Reihe) */
.htour-thumbs a.htour-thumb { display: block; text-decoration: none; flex: 0 0 calc(33.333% - 6px); }
.htour-thumbs a.htour-thumb:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.htour-mainwrap { cursor: pointer; }

/* Kacheln schalten nur das Vorschaubild um (kein Sprung zur Objektseite) */
.htour-thumbs button.htour-thumb {
  flex: 0 0 calc(33.333% - 6px);
  display: block;
  -webkit-appearance: none; appearance: none;
  font: inherit; color: inherit;
}
.htour-thumbs button.htour-thumb:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }

/* Gesamtes Hauptfoto inkl. 360-Kreis fuehrt zur Objektseite */
.htour-mainlink { position: absolute; inset: 0; z-index: 2; display: block; text-decoration: none; }
.htour-mainlink:focus-visible { outline: 2px solid var(--c-gold); outline-offset: -4px; }
.htour-mainlink:hover .htour-360btn {
  background: rgba(201,168,76,.75);
  border-color: var(--c-gold);
  transform: translate(-50%,-50%) scale(1.08);
}

/* Profilkarte des Beraters: gleiche Breite wie die Button-Gruppe und klickbar (führt zu „درباره ما“) */
.hcontent-actions { margin-bottom: 12px !important; }
a.advisor-glass-card {
  width: 100%;
  max-width: 400px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
a.advisor-glass-card:hover {
  border-color: rgba(201,168,76,.75);
  box-shadow: 0 8px 26px rgba(0,0,0,.12);
  transform: translateY(-2px);
}
a.advisor-glass-card:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
  border-color: rgba(201,168,76,.75);
}
@media (max-width: 900px) {
  a.advisor-glass-card { max-width: 100%; }
}

/* ── نشان «پین شده» روی کارت ملک در صفحه اصلی (ملک‌های پین‌شده از پنل) ── */
.prop-card-img-wrap .prop-pin-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(201, 168, 76, .96);
  color: #1E2A22;
  font-size: .72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.prop-card-img-wrap .prop-pin-badge svg {
  width: 12px;
  height: 12px;
  flex: none;
}

/* موبایل: پنل تور مجازی بالای ستون محتوا */
@media (max-width: 900px) {
  .hcontent-col { order: 2; }
  .htour-panel { order: 1; }
}

/* موبایل: نوار جستجوی اصلی در ابعاد گوشی نمایش داده نشود */
@media (max-width: 768px) {
  .hero-search-bar { display: none !important; }
}