@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Manrope:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ==========================================================================
   EstateFlow — BASE REFINE 3.0
   Shtresa e fundit e dizajnit. Ngarkohet pas theme-final.css dhe nuk prek
   asnjë atribut data-ef-*, prandaj sinkronizimi me EstateFlow mbetet i njëjtë.
   ========================================================================== */

/* ------------------------------------------------------------------ tokenët */

.tpl-base {
  /* Brandi vjen nga SaaS-i (--base-green / --base-gold). Këtu ndërtohet
     paleta e plotë mbi to, që faqja të mbetet e bukur me çdo ngjyrë. */
  --rf-brand: var(--base-green, #172823);
  --rf-gold: var(--base-gold, #b9935a);
  --rf-ink: #101a16;
  --rf-body: #5a6862;
  --rf-muted: #869089;
  --rf-line: color-mix(in srgb, var(--rf-brand) 11%, #e6ebe8);
  --rf-line-soft: color-mix(in srgb, var(--rf-brand) 6%, #eef2f0);
  --rf-surface: #ffffff;
  --rf-page: #faf9f6;
  --rf-tint: color-mix(in srgb, var(--rf-brand) 5%, #ffffff);
  --rf-deep: color-mix(in srgb, var(--rf-brand) 88%, #04100c);

  --rf-r-sm: 12px;
  --rf-r: 18px;
  --rf-r-lg: 26px;
  --rf-r-xl: 34px;

  --rf-sh-1: 0 1px 2px color-mix(in srgb, var(--rf-brand) 8%, transparent);
  --rf-sh-2: 0 10px 30px -12px color-mix(in srgb, var(--rf-brand) 26%, transparent);
  --rf-sh-3: 0 26px 60px -24px color-mix(in srgb, var(--rf-brand) 34%, transparent);
  --rf-sh-4: 0 40px 90px -30px color-mix(in srgb, var(--rf-brand) 42%, transparent);

  --rf-ease: cubic-bezier(.22, .61, .36, 1);
  --rf-display: 'Fraunces', 'Manrope', Georgia, serif;
  --rf-ui: 'Manrope', 'DM Sans', system-ui, sans-serif;

  background: var(--rf-page);
  color: var(--rf-ink);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

/* ------------------------------------------------------------- tipografia */

.tpl-base h1,
.tpl-base h2 {
  font-family: var(--rf-display);
  font-weight: 400;
  letter-spacing: -.025em;
  font-optical-sizing: auto;
}

.tpl-base h3,
.tpl-base h4,
.tpl-base .base-brand b,
.tpl-base .base-card-price,
.tpl-base .base-stats b {
  font-family: var(--rf-ui);
  letter-spacing: -.02em;
}

.tpl-base .ef-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--rf-ui);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .2em;
  color: color-mix(in srgb, var(--rf-gold) 82%, #6b5a38);
}

.tpl-base .ef-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.tpl-base .base-contact .ef-eyebrow,
.tpl-base .base-hero .ef-eyebrow {
  color: color-mix(in srgb, var(--rf-gold) 72%, #ffffff);
}

.tpl-base .ef-container {
  width: min(1280px, calc(100% - 56px));
}

/* ---------------------------------------------------------------- header */

.tpl-base .base-top {
  height: 40px;
  background: var(--rf-deep);
  color: color-mix(in srgb, #ffffff 74%, var(--rf-brand));
  font-size: 12px;
}

.tpl-base .base-top a {
  opacity: .85;
  transition: opacity .2s;
}

.tpl-base .base-top a:hover { opacity: 1; }

.tpl-base .base-header {
  background: color-mix(in srgb, #ffffff 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s, border-color .25s, background .25s;
}

.tpl-base .base-header.scrolled {
  background: color-mix(in srgb, #ffffff 92%, transparent);
  border-bottom-color: var(--rf-line-soft);
  box-shadow: 0 14px 40px -28px color-mix(in srgb, var(--rf-brand) 60%, transparent);
}

.tpl-base .base-nav { height: 84px; }

.tpl-base .base-brand > span {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--rf-gold), color-mix(in srgb, var(--rf-gold) 60%, var(--rf-brand)));
  font: 800 14px var(--rf-ui);
  letter-spacing: .04em;
  box-shadow: var(--rf-sh-2);
}

.tpl-base .base-brand b {
  font: 700 18px/1.15 var(--rf-ui);
  letter-spacing: -.03em;
}

.tpl-base .base-nav nav { gap: 34px; }

.tpl-base .base-nav nav > a:not(.nav-phone) {
  color: color-mix(in srgb, var(--rf-ink) 78%, #ffffff);
  font-family: var(--rf-ui);
  font-size: 14px;
  font-weight: 600;
  transition: color .2s;
}

.tpl-base .base-nav nav > a:not(.nav-phone):hover { color: var(--rf-brand); }

.tpl-base .base-nav nav > a:not(.nav-phone)::after {
  bottom: -7px;
  height: 2px;
  border-radius: 2px;
  background: var(--rf-gold);
}

.tpl-base .base-nav nav .nav-phone {
  font-family: var(--rf-ui);
  font-size: 13.5px;
  font-weight: 700;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--rf-brand);
  color: #fff;
  box-shadow: var(--rf-sh-2);
  transition: transform .2s var(--rf-ease), box-shadow .2s;
}

.tpl-base .base-nav nav .nav-phone:hover {
  transform: translateY(-2px);
  box-shadow: var(--rf-sh-3);
}

/* ------------------------------------------------------------------ hero */

.tpl-base .base-hero {
  min-height: min(820px, 92vh);
  border-radius: 0 0 var(--rf-r-xl) var(--rf-r-xl);
}

.tpl-base .base-hero-shade {
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--rf-deep) 92%, transparent) 0%,
      color-mix(in srgb, var(--rf-deep) 62%, transparent) 48%,
      color-mix(in srgb, var(--rf-deep) 12%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--rf-deep) 55%, transparent), transparent 42%);
}

.tpl-base .base-hero-content { padding-block: 118px 84px; }

.tpl-base .base-hero h1 {
  font-family: var(--rf-display);
  font-weight: 400;
  font-size: clamp(46px, 5.6vw, 80px);
  line-height: 1.02;
  letter-spacing: -.03em;
  max-width: 16ch;
  margin: 22px 0 24px;
}

.tpl-base .base-hero .hero-lead {
  font-size: 17.5px;
  line-height: 1.7;
  color: color-mix(in srgb, #ffffff 82%, var(--rf-brand));
  max-width: 56ch;
}

/* kërkimi */

.tpl-base .base-search {
  margin-top: 54px;
  border-radius: var(--rf-r-lg);
  border: 1px solid color-mix(in srgb, #ffffff 34%, transparent);
  background: color-mix(in srgb, #ffffff 96%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 40px 90px -32px color-mix(in srgb, #05100c 88%, transparent);
}

.tpl-base .base-search-tabs {
  height: 56px;
  padding-inline: 22px;
  border-bottom: 1px solid var(--rf-line-soft);
  gap: 4px;
}

.tpl-base .base-search-tabs button {
  height: 56px;
  padding-inline: 16px;
  font: 700 13px var(--rf-ui);
  color: var(--rf-muted);
  border-bottom-width: 2.5px;
  transition: color .2s;
}

.tpl-base .base-search-tabs button.active {
  color: var(--rf-brand);
  border-color: var(--rf-gold);
}

.tpl-base .base-search-fields { padding: 20px; gap: 14px; }

.tpl-base .base-search-fields label span {
  font: 800 9.5px var(--rf-ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rf-muted);
  margin-bottom: 8px;
}

.tpl-base .base-search-fields input,
.tpl-base .base-search-fields select {
  height: 52px;
  border: 1px solid var(--rf-line);
  border-radius: 13px;
  background: var(--rf-tint);
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.tpl-base .base-search-fields input:focus,
.tpl-base .base-search-fields select:focus {
  background: #fff;
  border-color: var(--rf-gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rf-gold) 20%, transparent);
}

.tpl-base .base-search-fields > button {
  height: 52px;
  min-width: 172px;
  border-radius: 13px;
  font: 800 13.5px var(--rf-ui);
  background: linear-gradient(145deg, var(--rf-gold), color-mix(in srgb, var(--rf-gold) 78%, #7a5c2c));
  box-shadow: var(--rf-sh-2);
}

.tpl-base .base-search-fields > button:hover {
  filter: none;
  transform: translateY(-2px);
  box-shadow: var(--rf-sh-3);
}

/* ----------------------------------------------------- kokat e seksioneve */

.tpl-base .base-section-head { margin-bottom: 40px; gap: 32px; }

.tpl-base .base-intro h2,
.tpl-base .base-section-head h2,
.tpl-base .base-value h2,
.tpl-base .base-contact h2,
.tpl-base .rf-section h2 {
  font-family: var(--rf-display);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin: 14px 0 0;
}

.tpl-base .base-section-head span,
.tpl-base .base-section-head > p {
  color: var(--rf-body);
  font-size: 14.5px;
}

.tpl-base .base-section-head > div > span { display: block; margin-top: 12px; }

.tpl-base .base-premium .base-section-head > a,
.tpl-base .base-properties .base-section-head a,
.tpl-base .base-similar .base-section-head > a,
.tpl-base .base-agent-listings .base-section-head > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid var(--rf-line);
  border-radius: 999px;
  font: 700 12.5px var(--rf-ui);
  color: var(--rf-brand);
  background: var(--rf-surface);
  white-space: nowrap;
  transition: background .2s, border-color .2s, transform .2s, color .2s;
}

.tpl-base .base-premium .base-section-head > a:hover,
.tpl-base .base-properties .base-section-head a:hover,
.tpl-base .base-similar .base-section-head > a:hover,
.tpl-base .base-agent-listings .base-section-head > a:hover {
  background: var(--rf-brand);
  border-color: var(--rf-brand);
  color: #fff;
  transform: translateY(-2px);
}

/* filtrat */

.tpl-base .base-filters { gap: 9px; }

.tpl-base .base-filters button,
.tpl-base .base-filters select {
  height: 44px;
  padding-inline: 19px;
  border: 1px solid var(--rf-line);
  border-radius: 999px;
  background: var(--rf-surface);
  font: 700 12.5px var(--rf-ui);
  color: color-mix(in srgb, var(--rf-ink) 72%, #fff);
  transition: background .2s, border-color .2s, color .2s, box-shadow .2s;
}

.tpl-base .base-filters button:hover {
  border-color: var(--rf-brand);
  color: var(--rf-brand);
}

.tpl-base .base-filters button.active {
  background: var(--rf-brand);
  border-color: var(--rf-brand);
  color: #fff;
  box-shadow: var(--rf-sh-2);
}

/* -------------------------------------------------------- kartat e pronave */

.tpl-base .base-premium {
  padding: 92px 0 40px;
  background: linear-gradient(180deg, var(--rf-tint), transparent 70%);
}

.tpl-base .base-properties { padding: 78px 0 110px; }

.tpl-base .base-properties .base-section-head {
  padding-bottom: 26px;
  border-bottom: 1px solid var(--rf-line-soft);
}

.tpl-base .base-properties > .ef-container > .base-grid { gap: 28px; }

.tpl-base .base-card,
.tpl-base .base-properties .base-card {
  border: 1px solid var(--rf-line-soft);
  border-radius: var(--rf-r-lg);
  background: var(--rf-surface);
  box-shadow: var(--rf-sh-1);
  transition: transform .32s var(--rf-ease), box-shadow .32s var(--rf-ease), border-color .32s;
}

.tpl-base .base-card:hover,
.tpl-base .base-properties .base-card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--rf-gold) 40%, #fff);
  box-shadow: var(--rf-sh-3);
}

.tpl-base .base-card-media {
  position: relative;
  overflow: hidden;
  background-color: var(--rf-tint);
}

.tpl-base .base-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--rf-deep) 52%, transparent));
  pointer-events: none;
}

.tpl-base .base-properties .base-card-media { aspect-ratio: 1.32; }

.tpl-base .base-card-media .base-tag {
  z-index: 2;
  left: 15px;
  top: 15px;
  border-radius: 999px;
  font: 800 9.5px var(--rf-ui);
  letter-spacing: .13em;
  padding: 8px 13px;
}

.tpl-base .base-card-media .base-photo-count {
  z-index: 2;
  right: 15px;
  bottom: 15px;
  border-radius: 999px;
  padding: 7px 12px;
  font: 700 10px var(--rf-ui);
  letter-spacing: .06em;
  background: color-mix(in srgb, #06110d 55%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, #fff 22%, transparent);
}

.tpl-base .base-card-body { padding: 22px 22px 24px; }

.tpl-base .base-card h3 {
  font-family: var(--rf-ui);
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -.025em;
  color: var(--rf-ink);
}

.tpl-base .base-properties .base-card h3 { min-height: 49px; }

.tpl-base .base-card-price {
  font: 800 21px/1.1 var(--rf-ui);
  letter-spacing: -.03em;
  color: var(--rf-brand);
}

.tpl-base .base-properties .base-card-specs {
  margin-top: 14px;
  padding-top: 15px;
  border-top: 1px solid var(--rf-line-soft);
  border-bottom: 0;
  gap: 14px;
  font-size: 12.5px;
  color: var(--rf-body);
}

.tpl-base .base-properties .base-card-specs > span:not(:last-child)::after { display: none; }

.tpl-base .base-card-specs .base-spec-transaction {
  margin-left: auto;
  padding: 5px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--rf-gold) 15%, #fff);
  color: color-mix(in srgb, var(--rf-gold) 70%, #4a3c22);
  font: 800 10px var(--rf-ui);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ikona reale në vend të karaktereve tipografike */

.tpl-base .base-spec-icon {
  width: 15px;
  height: 15px;
  opacity: 1;
  background: currentColor;
  color: color-mix(in srgb, var(--rf-brand) 62%, #fff);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.tpl-base .base-spec-icon::before { content: "" !important; }

.tpl-base .base-spec-icon.is-bed {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18V7M3 12h18v6M7 12V9h5v3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18V7M3 12h18v6M7 12V9h5v3'/%3E%3C/svg%3E");
}

.tpl-base .base-spec-icon.is-bath {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16v3a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4zM6 12V6a2 2 0 0 1 4 0'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16v3a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4zM6 12V6a2 2 0 0 1 4 0'/%3E%3C/svg%3E");
}

.tpl-base .base-spec-icon.is-area {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M9 4v4H4M15 20v-4h5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M9 4v4H4M15 20v-4h5'/%3E%3C/svg%3E");
}

/* karuseli i pronave premium */

.tpl-base .base-property-slider .base-property-slide { height: 392px; border-radius: var(--rf-r-lg); }
.tpl-base .base-property-slider .base-property-slide .base-card-media { height: 62%; flex-basis: 62%; }
.tpl-base .base-property-slider .base-property-slide .base-card-body { height: 38%; flex-basis: 38%; padding: 16px 17px 15px; }
.tpl-base .base-property-slider .base-property-slide h3 { font-size: 15.5px; line-height: 1.25; }
.tpl-base .base-property-slider .base-property-slide .base-card-price { font-size: 17px; }
.tpl-base .base-property-slider .base-property-slide .base-card-specs { font-size: 11.5px; color: var(--rf-body); }

/* --------------------------------------------------- seksionet e reja (rf) */

.rf-section { padding: 104px 0; }

.rf-section-head {
  max-width: 720px;
  margin: 0 auto 54px;
  text-align: center;
}

.rf-section-head .ef-eyebrow { justify-content: center; }

.rf-section-head .ef-eyebrow::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.rf-section-head p {
  margin-top: 16px;
  color: var(--rf-body);
  font-size: 15.5px;
  line-height: 1.75;
}

/* Pse ne */

.rf-why { background: var(--rf-surface); }

.rf-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.rf-why-grid article {
  padding: 38px 32px 34px;
  border: 1px solid var(--rf-line-soft);
  border-radius: var(--rf-r-lg);
  background: linear-gradient(180deg, var(--rf-tint), var(--rf-surface) 62%);
  transition: transform .3s var(--rf-ease), box-shadow .3s var(--rf-ease), border-color .3s;
}

.rf-why-grid article:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--rf-gold) 42%, #fff);
  box-shadow: var(--rf-sh-3);
}

.rf-why-grid i {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--rf-brand);
  color: #fff;
  box-shadow: var(--rf-sh-2);
}

.rf-why-grid svg { width: 23px; height: 23px; }

.rf-why-grid h3 {
  margin: 24px 0 10px;
  font: 700 20px var(--rf-ui);
  letter-spacing: -.03em;
}

.rf-why-grid p {
  color: var(--rf-body);
  font-size: 14.5px;
  line-height: 1.72;
}

/* Si funksionon */

.rf-steps { background: var(--rf-page); }

.rf-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  counter-reset: rf-step;
}

.rf-steps-grid article {
  position: relative;
  padding: 34px 30px;
  background: var(--rf-surface);
  border-radius: var(--rf-r-lg);
  border: 1px solid var(--rf-line-soft);
}

.rf-steps-grid article::before {
  counter-increment: rf-step;
  content: "0" counter(rf-step);
  display: block;
  font: 400 44px var(--rf-display);
  line-height: 1;
  color: color-mix(in srgb, var(--rf-gold) 55%, #fff);
  margin-bottom: 18px;
}

.rf-steps-grid h3 {
  font: 700 18.5px var(--rf-ui);
  letter-spacing: -.03em;
  margin-bottom: 9px;
}

.rf-steps-grid p { color: var(--rf-body); font-size: 14.5px; line-height: 1.7; }

/* Banda CTA */

.rf-cta { padding: 0 0 104px; }

.rf-cta .ef-container {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.3fr auto;
  align-items: center;
  gap: 44px;
  padding: 58px 56px;
  border-radius: var(--rf-r-xl);
  background:
    radial-gradient(120% 140% at 88% 8%, color-mix(in srgb, var(--rf-gold) 42%, transparent), transparent 58%),
    linear-gradient(135deg, var(--rf-brand), var(--rf-deep));
  color: #fff;
  box-shadow: var(--rf-sh-4);
}

.rf-cta h2 {
  font-family: var(--rf-display);
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 14px 0 12px;
}

.rf-cta p {
  color: color-mix(in srgb, #fff 78%, var(--rf-brand));
  font-size: 15.5px;
  max-width: 54ch;
}

.rf-cta .ef-eyebrow { color: color-mix(in srgb, var(--rf-gold) 60%, #fff); }

.rf-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.rf-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 999px;
  font: 800 13.5px var(--rf-ui);
  white-space: nowrap;
  transition: transform .2s var(--rf-ease), box-shadow .2s, background .2s;
}

.rf-btn-gold { background: var(--rf-gold); color: #fff; box-shadow: var(--rf-sh-2); }
.rf-btn-gold:hover { transform: translateY(-2px); box-shadow: var(--rf-sh-3); }

.rf-btn-outline {
  border: 1px solid color-mix(in srgb, #fff 34%, transparent);
  color: #fff;
}

.rf-btn-outline:hover {
  background: color-mix(in srgb, #fff 12%, transparent);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------- rreth nesh */

.tpl-base .base-value {
  background: var(--rf-surface);
  border: 1px solid var(--rf-line-soft);
  border-radius: var(--rf-r-xl);
  margin-inline: 24px;
  padding: 96px 0;
}

.tpl-base .base-value > .ef-container { gap: 84px; align-items: center; }

.tpl-base .base-value-image {
  min-height: 580px;
  border-radius: var(--rf-r-lg);
  background:
    radial-gradient(90% 90% at 20% 12%, color-mix(in srgb, var(--rf-gold) 55%, transparent), transparent 62%),
    linear-gradient(150deg, var(--rf-brand), var(--rf-deep));
  box-shadow: var(--rf-sh-4);
}

.tpl-base .base-value-image::after {
  right: -18px;
  bottom: 44px;
  font: 400 66px var(--rf-display);
  color: color-mix(in srgb, #fff 22%, transparent);
  letter-spacing: .08em;
}

.tpl-base .base-value p:not(.ef-eyebrow) {
  color: var(--rf-body);
  font-size: 15.5px;
  line-height: 1.8;
  margin-top: 18px;
}

.tpl-base .base-stats {
  border-block: 1px solid var(--rf-line);
  margin: 38px 0;
}

.tpl-base .base-stats span + span { border-left: 1px solid var(--rf-line); }

.tpl-base .base-stats b {
  font: 400 40px var(--rf-display);
  letter-spacing: -.02em;
  color: var(--rf-brand);
}

.tpl-base .base-stats small {
  font: 700 10.5px var(--rf-ui);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rf-muted);
  margin-top: 8px;
}

.tpl-base .base-value a {
  gap: 14px;
  padding: 15px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--rf-brand);
  color: #fff;
  font: 800 13.5px var(--rf-ui);
  box-shadow: var(--rf-sh-2);
  transition: transform .2s var(--rf-ease), box-shadow .2s;
}

.tpl-base .base-value a:hover { transform: translateY(-2px); box-shadow: var(--rf-sh-3); }
.tpl-base .base-value a i { font-style: normal; transition: transform .2s; }
.tpl-base .base-value a:hover i { transform: translateX(4px); }

/* -------------------------------------------------------------------- ekipi */

.tpl-base .base-team { padding: 104px 0; }
.tpl-base .base-team-grid { gap: 24px; }

.tpl-base .base-agent-card {
  border: 1px solid var(--rf-line-soft) !important;
  border-radius: var(--rf-r-lg) !important;
  box-shadow: var(--rf-sh-1) !important;
  transition: transform .3s var(--rf-ease), box-shadow .3s var(--rf-ease), border-color .3s;
}

.tpl-base .base-agent-card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--rf-gold) 42%, #fff);
  box-shadow: var(--rf-sh-3) !important;
}

.tpl-base .base-agent-card .base-agent-avatar {
  height: 300px;
  background:
    radial-gradient(80% 80% at 30% 15%, color-mix(in srgb, var(--rf-gold) 60%, transparent), transparent 60%),
    linear-gradient(140deg, var(--rf-brand), var(--rf-deep));
  font: 400 56px var(--rf-display);
}

.tpl-base .base-agent-info { padding: 24px 24px 26px; }

.tpl-base .base-agent-info b {
  font: 700 21px/1.15 var(--rf-ui) !important;
  letter-spacing: -.035em;
}

.tpl-base .base-agent-info small {
  background: color-mix(in srgb, var(--rf-gold) 14%, #fff);
  color: color-mix(in srgb, var(--rf-gold) 72%, #4a3c22) !important;
  font-size: 10px;
  letter-spacing: .12em;
}

.tpl-base .base-agent-info em { color: var(--rf-body); font-size: 14px; }
.tpl-base .base-agent-meta { border-top: 1px solid var(--rf-line-soft); }
.tpl-base .base-agent-meta span { color: var(--rf-body) !important; }

/* ----------------------------------------------------------------- kontakti */

.tpl-base .base-contact {
  padding: 104px 0;
  border-radius: var(--rf-r-xl) var(--rf-r-xl) 0 0;
  background:
    radial-gradient(90% 120% at 82% 0%, color-mix(in srgb, var(--rf-gold) 26%, transparent), transparent 55%),
    linear-gradient(160deg, var(--rf-brand), var(--rf-deep));
}

.tpl-base .base-contact p:not(.ef-eyebrow) {
  color: color-mix(in srgb, #fff 74%, var(--rf-brand));
  font-size: 15.5px;
  margin-top: 18px;
}

.tpl-base .base-contact li small {
  font: 800 9.5px var(--rf-ui);
  letter-spacing: .16em;
  color: color-mix(in srgb, #fff 58%, var(--rf-brand));
}

.tpl-base .base-contact li a {
  font: 700 18px var(--rf-ui);
  letter-spacing: -.02em;
  margin-top: 7px;
}

.tpl-base .base-contact form {
  padding: 38px;
  border-radius: var(--rf-r-lg);
  box-shadow: var(--rf-sh-4);
}

.tpl-base .base-contact label {
  font: 800 10px var(--rf-ui);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rf-muted);
  margin-bottom: 16px;
}

.tpl-base .base-contact input,
.tpl-base .base-contact textarea {
  border: 1px solid var(--rf-line);
  border-radius: 13px;
  padding: 14px;
  background: var(--rf-tint);
  font-size: 14px;
  color: var(--rf-ink);
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.tpl-base .base-contact input:focus,
.tpl-base .base-contact textarea:focus {
  background: #fff;
  border-color: var(--rf-gold);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--rf-gold) 18%, transparent);
}

.tpl-base .base-contact button {
  height: 54px;
  width: 100%;
  border-radius: 13px;
  font: 800 13.5px var(--rf-ui);
  background: linear-gradient(145deg, var(--rf-gold), color-mix(in srgb, var(--rf-gold) 76%, #7a5c2c));
  box-shadow: var(--rf-sh-2);
  transition: transform .2s var(--rf-ease), box-shadow .2s;
}

.tpl-base .base-contact button:hover { transform: translateY(-2px); box-shadow: var(--rf-sh-3); }

/* ------------------------------------------------------------------- footer */

.tpl-base .base-footer {
  background: var(--rf-deep);
  padding: 84px 0 28px;
}

.tpl-base .base-footer > .ef-container { gap: 80px; }
.tpl-base .base-footer .base-brand > span { box-shadow: none; }
.tpl-base .base-footer .base-brand b { color: #fff; }

.tpl-base .base-footer p {
  color: color-mix(in srgb, #fff 58%, var(--rf-brand));
  margin-top: 18px;
  font-size: 14px;
}

.tpl-base .base-footer nav b,
.tpl-base .base-footer > .ef-container > div:last-child b {
  font: 800 10.5px var(--rf-ui);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--rf-gold) 78%, #fff);
  margin-bottom: 14px;
}

.tpl-base .base-footer a,
.tpl-base .base-footer span {
  font-size: 13.5px;
  color: color-mix(in srgb, #fff 62%, var(--rf-brand));
  transition: color .2s;
}

.tpl-base .base-footer a:hover { color: #fff; }

.tpl-base .base-footer > small {
  width: min(1280px, calc(100% - 56px));
  border-top: 1px solid color-mix(in srgb, #fff 10%, transparent);
  padding-top: 26px;
  font-size: 12.5px;
  color: color-mix(in srgb, #fff 44%, var(--rf-brand));
}

/* --------------------------------------------------------- koka e nënfaqeve */

.rf-pagehead { padding: 22px 0 0; }

.rf-pagehead .ef-container {
  padding: 34px 0 32px;
  border-bottom: 1px solid var(--rf-line-soft);
}

.rf-pagehead nav {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--rf-muted);
}

.rf-pagehead nav a { color: var(--rf-muted); transition: color .2s; }
.rf-pagehead nav a:hover { color: var(--rf-brand); }
.rf-pagehead nav b { color: var(--rf-brand); font-weight: 700; }

.rf-pagehead h1 {
  font-family: var(--rf-display);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.05;
  letter-spacing: -.03em;
  margin: 16px 0 0;
}

.rf-pagehead p {
  margin-top: 14px;
  max-width: 62ch;
  color: var(--rf-body);
  font-size: 15.5px;
}

body[data-ef-page] main > .rf-pagehead { display: block !important; }
body[data-ef-page] main { padding-top: 96px !important; }
body[data-ef-page="property"] main > .rf-pagehead,
body[data-ef-page="agent"] main > .rf-pagehead { display: none !important; }
body[data-ef-page="properties"] .base-properties,
body[data-ef-page="agents"] .base-team,
body[data-ef-page="contact"] .base-contact { padding-top: 54px; }
body[data-ef-page="about"] .base-value { margin-top: 34px; }

@media (max-width: 720px) {
  body[data-ef-page] main { padding-top: 74px !important; }
}

/* ------------------------------------------------------------ faqja e pronës */

.tpl-base .base-property-page { padding-bottom: 110px; }

.tpl-base .base-property-title h1 {
  font-family: var(--rf-display);
  font-weight: 400;
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.06;
  letter-spacing: -.03em;
}

.tpl-base .base-property-title strong {
  font: 800 30px var(--rf-ui);
  letter-spacing: -.035em;
  color: var(--rf-brand);
}

.tpl-base .base-gallery { border-radius: var(--rf-r-lg); gap: 10px; }
.tpl-base .base-gallery figure { background-color: var(--rf-tint); }

.tpl-base .base-quick-facts {
  border: 1px solid var(--rf-line-soft);
  border-radius: var(--rf-r);
  box-shadow: var(--rf-sh-2);
  overflow: hidden;
}

.tpl-base .base-quick-facts span { border-right-color: var(--rf-line-soft); padding: 22px 24px; }
.tpl-base .base-quick-facts small { color: var(--rf-muted); letter-spacing: .14em; font-weight: 700; }
.tpl-base .base-quick-facts b { font: 700 15px var(--rf-ui); }

.tpl-base .base-detail-main section {
  border-bottom-color: var(--rf-line-soft);
  padding-bottom: 40px;
  margin-bottom: 40px;
}

.tpl-base .base-detail-main h2 {
  font-family: var(--rf-display);
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -.03em;
}

.tpl-base .base-detail-main p { color: var(--rf-body); font-size: 15.5px; }

.tpl-base .base-detail-specs span {
  border: 1px solid var(--rf-line-soft);
  border-radius: var(--rf-r-sm);
  padding: 18px;
  background: var(--rf-surface);
}

.tpl-base .base-detail-specs small { color: var(--rf-muted); letter-spacing: .13em; font-weight: 700; }
.tpl-base .base-detail-specs b { font: 700 14.5px var(--rf-ui); margin-top: 8px; }

.tpl-base .base-features li {
  border: 1px solid var(--rf-line-soft);
  border-radius: var(--rf-r-sm);
  background: var(--rf-surface);
  padding: 15px 16px;
  font-size: 13.5px;
}

.tpl-base .base-features i { color: var(--rf-gold); }

.tpl-base .base-location-card,
.tpl-base .base-location-fallback {
  background: var(--rf-tint);
  border: 1px solid var(--rf-line-soft);
  border-radius: var(--rf-r);
  padding: 24px;
}

.tpl-base .base-agent-box {
  border: 1px solid var(--rf-line-soft);
  border-radius: var(--rf-r-lg);
  padding: 30px;
  box-shadow: var(--rf-sh-2);
}

.tpl-base .base-agent-box a { border-radius: 13px; font-family: var(--rf-ui); font-size: 13.5px; }
.tpl-base .base-agent-box .base-call { background: var(--rf-brand); }
.tpl-base .base-agent-identity > span { border-radius: 16px; font: 700 18px var(--rf-ui); }
.tpl-base .base-map { border-radius: var(--rf-r); border-color: var(--rf-line-soft); }

/* -------------------------------------------------------- profili i agjentit */

.tpl-base .base-agent-hero {
  border-radius: var(--rf-r-xl);
  border: 1px solid var(--rf-line-soft);
  box-shadow: var(--rf-sh-2);
  padding: 46px;
}

.tpl-base .base-agent-hero h1 {
  font-family: var(--rf-display);
  font-weight: 400;
  letter-spacing: -.03em;
}

.tpl-base .base-agent-hero h2 {
  font: 700 clamp(21px, 2.6vw, 30px) var(--rf-ui);
  letter-spacing: -.03em;
}

.tpl-base .base-agent-photo { border-radius: var(--rf-r-lg); }
.tpl-base .base-agent-bio { color: var(--rf-body); }

/* --------------------------------------------------------------- modali & UI */

.tpl-base .ef-modal-panel,
.tpl-base .ef-modal-content { border-radius: var(--rf-r-lg); }

.tpl-base .ef-btn-primary,
.tpl-base .ef-btn-ghost {
  border-radius: 999px;
  font-family: var(--rf-ui);
  font-weight: 800;
}

.tpl-base .ef-empty {
  border-radius: var(--rf-r-lg);
  border: 1px dashed var(--rf-line);
  background: var(--rf-surface);
  padding: 72px 24px;
}

.tpl-base .ef-empty h3 { font: 700 22px var(--rf-ui); letter-spacing: -.03em; }
.tpl-base .ef-empty p { color: var(--rf-body); margin-top: 8px; }

.tpl-base .ef-empty button {
  margin-top: 22px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--rf-brand);
  color: #fff;
  font: 800 13px var(--rf-ui);
}

.tpl-base .floating-whatsapp {
  padding: 14px 20px;
  font: 800 13px var(--rf-ui);
  box-shadow: 0 18px 45px -14px color-mix(in srgb, #0d6b3f 70%, transparent);
  transition: transform .2s var(--rf-ease);
}

.tpl-base .floating-whatsapp:hover { transform: translateY(-3px); }

/* Etiketat e transaksionit mbi foto: lexohen edhe kur brandi është i çelët. */
.tpl-base .base-tag,
.tpl-base .base-tag.is-sale,
.tpl-base .base-tag.is-rent {
  background: color-mix(in srgb, var(--rf-deep) 86%, transparent) !important;
  border-color: color-mix(in srgb, #fff 20%, transparent) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .rf-why-grid,
  .rf-steps-grid { grid-template-columns: repeat(2, 1fr); }
  .tpl-base .base-value > .ef-container { gap: 48px; }
}

@media (max-width: 900px) {
  .tpl-base .ef-container { width: min(1280px, calc(100% - 40px)); }
  .tpl-base .base-nav { height: 72px; }
  .tpl-base .base-hero { min-height: 740px; border-radius: 0 0 26px 26px; }
  .tpl-base .base-hero-content { padding-block: 92px 62px; }
  .tpl-base .base-value { margin-inline: 14px; padding: 74px 0; }
  .tpl-base .base-value-image { min-height: 340px; }
  .tpl-base .base-team { padding: 74px 0; }
  .tpl-base .base-contact { padding: 74px 0; }
  .rf-section { padding: 76px 0; }
  .rf-cta { padding-bottom: 76px; }
  .rf-cta .ef-container { grid-template-columns: 1fr; padding: 42px 34px; gap: 28px; }
  .tpl-base .base-footer > .ef-container { gap: 44px; }
  .tpl-base .base-footer > small { width: calc(100% - 40px); }
}

@media (max-width: 600px) {
  .tpl-base .ef-container { width: calc(100% - 32px); }
  .tpl-base .base-nav { height: 66px; }
  .tpl-base .base-brand > span { width: 40px; height: 40px; border-radius: 12px; }
  .tpl-base .base-hero { min-height: auto; border-radius: 0 0 22px 22px; }
  .tpl-base .base-hero-content { padding: 78px 0 30px; }
  .tpl-base .base-hero h1 { font-size: clamp(36px, 10.5vw, 50px); margin: 16px 0; }
  .tpl-base .base-hero .hero-lead { font-size: 15px; }
  .tpl-base .base-search { margin-top: 30px; border-radius: 20px; }
  .tpl-base .base-search-fields { padding: 14px; }
  .tpl-base .base-search-fields input,
  .tpl-base .base-search-fields select,
  .tpl-base .base-search-fields > button { height: 52px; font-size: 15px; }


  .tpl-base .base-premium { padding: 46px 0 24px; }
  .tpl-base .base-properties { padding: 46px 0 66px; }
  .tpl-base .base-section-head { margin-bottom: 22px; }
  .tpl-base .base-properties > .ef-container > .base-grid { gap: 18px; }
  .tpl-base .base-card { border-radius: 20px; }
  .tpl-base .base-card-body { padding: 18px; }
  .tpl-base .base-properties .base-card h3 { min-height: 0; font-size: 17.5px; }
  .tpl-base .base-card-price { font-size: 19px; }

  .rf-section { padding: 58px 0; }
  .rf-section-head { margin-bottom: 32px; }
  .rf-why-grid,
  .rf-steps-grid { grid-template-columns: 1fr; gap: 14px; }
  .rf-why-grid article { padding: 28px 24px; }
  .rf-steps-grid article { padding: 26px 22px; }

  .rf-cta { padding-bottom: 58px; }
  .rf-cta .ef-container { padding: 32px 22px; border-radius: 24px; }
  .rf-cta-actions { display: grid; width: 100%; }
  .rf-btn { justify-content: center; }

  .tpl-base .base-value { margin-inline: 8px; padding: 60px 0; border-radius: 26px; }
  .tpl-base .base-stats b { font-size: 30px; }
  .tpl-base .base-team { padding: 60px 0; }
  .tpl-base .base-contact { padding: 66px 0; border-radius: 26px 26px 0 0; }
  .tpl-base .base-contact form { padding: 22px; }
  .tpl-base .base-footer { padding-top: 56px; }
  .tpl-base .base-footer > small { width: calc(100% - 32px); }

  .rf-pagehead .ef-container { padding: 22px 0 20px; }
  .tpl-base .base-property-page { padding-bottom: 64px; }
  .tpl-base .base-agent-hero { padding: 20px; border-radius: 22px; }
}

/* --------------------------------------------------------------------------
   Rregullim: kartat brenda karuseleve horizontale nuk shfaqeshin.
   IntersectionObserver-i i bën "reveal" vetëm elementet që hyjnë në viewport
   vertikalisht; kartat jashtë ekranit horizontalisht mbeteshin me opacity:0
   (të padukshme, por të klikueshme). Kartat e pronave shfaqen menjëherë.
   -------------------------------------------------------------------------- */

.tpl-base .base-card[data-ef-reveal],
.tpl-base .base-property-slider [data-ef-reveal],
.tpl-base .base-similar-grid [data-ef-reveal],
.tpl-base .base-agent-listings [data-ef-reveal] {
  opacity: 1 !important;
  transform: none !important;
}

/* Kartat e katalogut janë grid, jo karusel: lartësia të jetë natyrale. */
.tpl-base .base-properties > .ef-container > .base-grid > .base-property-slide {
  height: auto;
  flex-basis: auto;
}

.tpl-base .base-properties > .ef-container > .base-grid > .base-property-slide .base-card-media {
  height: auto;
  flex: none;
  aspect-ratio: 1.32;
}

.tpl-base .base-properties > .ef-container > .base-grid > .base-property-slide .base-card-body {
  height: auto;
  flex: none;
  min-height: 0;
  padding: 22px 22px 24px;
}