@import url('./tokens.css');

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;            /* yatay scroll'u kilitle */
}
body {
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;            /* yatay scroll'u kilitle */
  width: 100%;
  max-width: 100vw;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* ============ Container ============ */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
@media (max-width: 768px) { :root { --gutter: 18px; } }

/* ============ Typography ============ */
.display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; }
.h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.h3 { font-size: clamp(1.4rem, 2.2vw, 1.7rem); }
.eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-weight: 600; color: var(--terracotta); }
.muted { color: var(--smoke); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 14px; line-height: 1;
  transition: transform .25s var(--ease), background .2s, color .2s, box-shadow .25s;
  white-space: nowrap;
}
.btn-primary { background: var(--terracotta); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--terracotta-700); transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--cream); border-color: var(--ink); }
.btn-dark { background: var(--ink); color: var(--ivory); }
.btn-dark:hover { background: var(--charcoal); transform: translateY(-2px); }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-lg { padding: 16px 28px; font-size: 15px; }
.btn-icon { padding: 10px; border-radius: 50%; width: 40px; height: 40px; }

/* ============ Header ============ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 247, 242, 0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 16px; gap: 24px;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 24px; font-weight: 600; }
.brand__mark { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--terracotta), var(--sun)); display:grid; place-items:center; color:#fff; }
.brand__mark svg { width: 18px; height: 18px; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav a { font-size: 14px; font-weight: 500; color: var(--ink); position: relative; }
.nav a::after { content:''; position: absolute; bottom: -6px; left: 50%; width: 0; height: 2px; background: var(--terracotta); transition: all .3s var(--ease); transform: translateX(-50%); }
.nav a:hover::after { width: 100%; }
.header-actions { display:flex; align-items:center; gap: 10px; }

/* Language switcher */
.lang-switcher { position: relative; }
.lang-switcher__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  transition: border-color .2s, background .2s;
}
.lang-switcher__btn:hover { border-color: var(--ink); }
.lang-switcher__btn .flag { font-size: 14px; line-height: 1; }
.lang-switcher__btn svg { width: 12px; height: 12px; transition: transform .25s var(--ease); }
.lang-switcher.open .lang-switcher__btn { background: var(--cream); border-color: var(--ink); }
.lang-switcher.open .lang-switcher__btn svg { transform: rotate(180deg); }

.lang-switcher__menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 160px; padding: 6px;
  display: none; z-index: 100;
}
.lang-switcher.open .lang-switcher__menu { display: block; animation: langIn .2s var(--ease-out); }
@keyframes langIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.lang-switcher__item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  width: 100%; text-align: left;
  font-size: 14px; font-weight: 500; color: var(--ink);
  transition: background .15s;
  cursor: pointer;
}
.lang-switcher__item:hover { background: var(--cream); }
.lang-switcher__item.active { background: var(--ink); color: var(--ivory); }
.lang-switcher__item .flag { font-size: 16px; }
.lang-switcher__item .lang-short { margin-left: auto; font-size: 11px; opacity: 0.6; font-weight: 600; letter-spacing: 0.08em; }
.lang-switcher__item.active .lang-short { opacity: 0.85; }

@media (max-width: 700px) {
  .lang-switcher__btn span:not(.flag) { display: none; }
  .lang-switcher__btn { padding: 8px 10px; }
}

/* Host CTA button (header) — outline with strong hover */
.btn-host {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  background: transparent;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
  white-space: nowrap;
}
.btn-host svg { transition: transform .3s var(--ease); }
.btn-host:hover {
  background: var(--ink);
  color: var(--ivory);
  transform: translateY(-1px);
}
.btn-host:hover svg { transform: rotate(-8deg); }
@media (max-width: 1000px) { .btn-host { display: none; } }
.header-actions__menu {
  display:flex; align-items:center; gap: 8px;
  padding: 6px 6px 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: #fff; transition: box-shadow .25s;
}
.header-actions__menu:hover { box-shadow: var(--shadow-md); }
.header-actions__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--ivory); display: grid; place-items: center; font-size: 14px; }
@media (max-width: 900px) { .nav { display: none; } }

/* ============ Mobile nav drawer ============ */
.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--cream); transition: background .2s;
}
.nav-toggle:hover { background: var(--sand); }
@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .header-actions__menu { display: none; }
  .header-actions .btn-ghost { display: none; }
}
.mobile-nav {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(380px, 92vw);
  background: var(--ivory);
  padding: 0;
  transform: translateX(100%);
  transition: transform .35s var(--ease);
  z-index: 70;
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
}
.mobile-nav.open { transform: translateX(0); visibility: visible; }

.mobile-nav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  position: sticky; top: 0;
  z-index: 2;
}
.mobile-nav__brand {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
}
.mobile-nav__brand__mark {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--terracotta), var(--sun));
  display: grid; place-items: center;
  color: #fff;
}
.mobile-nav__brand__mark svg { width: 16px; height: 16px; }
.mobile-nav__brand em { font-style: italic; color: var(--terracotta); font-weight: 500; }

.mobile-nav__close {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cream);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background .2s;
}
.mobile-nav__close:hover { background: var(--sand); }
.mobile-nav__close svg { width: 16px; height: 16px; }

.mobile-nav__body {
  padding: 18px 22px 32px;
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--ivory);
}

.mobile-nav__section {
  padding-block: 8px 16px;
  border-bottom: 1px solid var(--border);
}
.mobile-nav__section:last-of-type { border-bottom: none; }
.mobile-nav__section__title {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 4px;
  padding: 4px;
}

.mobile-nav__link {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 8px;
  font-size: 15px; font-weight: 500;
  color: var(--ink);
  border-radius: var(--radius-sm);
  transition: background .15s, padding-left .2s, color .15s;
  background: transparent;
}
.mobile-nav__link:hover {
  background: var(--cream);
  padding-left: 14px;
}
.mobile-nav__link svg {
  width: 18px; height: 18px;
  color: var(--smoke);
  flex-shrink: 0;
}
.mobile-nav__link:hover svg { color: var(--ink); }
.mobile-nav__link .arrow {
  margin-left: auto;
  width: 16px; height: 16px;
  color: var(--mute);
  transition: transform .2s, color .2s;
}
.mobile-nav__link:hover .arrow {
  transform: translateX(3px);
  color: var(--ink);
}

.mobile-nav__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 18px;
  background: var(--ink);
  color: var(--ivory);
  border-radius: var(--radius-pill);
  font-weight: 600; font-size: 14px;
  margin-top: 18px;
}
.mobile-nav__cta:hover { background: var(--charcoal); }
.mobile-nav__cta svg { width: 16px; height: 16px; }

.mobile-nav__sub-link {
  display: block; text-align: center;
  font-size: 13px; color: var(--smoke);
  padding: 10px 0 6px;
}
.mobile-nav__sub-link:hover { color: var(--terracotta); }

/* Backdrop */
.mobile-nav__backdrop {
  position: fixed; inset: 0;
  background: rgba(20, 18, 16, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 65;
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
.mobile-nav__backdrop.open { opacity: 1; pointer-events: auto; }

/* Body scroll lock when drawer open */
body.has-drawer { overflow: hidden; }

/* ============ Hero ============ */
.hero {
  position: relative; overflow: hidden;
  background: var(--ivory);
  padding-top: 48px;
}
.hero__grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center;
  padding-block: 32px 88px;
}
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 56px; } }
.hero__copy h1 .accent { color: var(--terracotta); font-style: italic; font-weight: 400; }
.hero__copy p { font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--smoke); margin-top: 24px; max-width: 520px; }
.hero__stats { display:flex; gap: 36px; margin-top: 36px; }
.hero__stat strong { font-family: var(--font-display); font-size: 28px; font-weight: 500; color: var(--ink); }
.hero__stat span { display:block; color: var(--smoke); font-size: 12px; margin-top: 4px; }
.hero__media {
  position: relative; aspect-ratio: 4/5; border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero__media img { width:100%; height:100%; object-fit: cover; transform: scale(1.02); }
.hero__badge {
  position: absolute; top: 24px; right: 24px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(8px);
  padding: 10px 14px; border-radius: var(--radius-pill);
  display:flex; align-items:center; gap:8px; font-size: 13px; font-weight: 600;
}
.hero__badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.hero__floating {
  position: absolute; left: -28px; bottom: 32px;
  background: #fff; padding: 16px 18px; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); width: 240px;
}
.hero__floating .row { display:flex; align-items:center; gap: 10px; }
.hero__floating img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.hero__floating strong { font-size: 13px; }
.hero__floating .muted { font-size: 11px; }

/* ============ Search bar ============ */
.search-bar {
  background: #fff; border-radius: var(--radius-pill);
  padding: 8px; display:flex; align-items: center;
  box-shadow: var(--shadow-md); border: 1px solid var(--border);
  margin-top: 36px; max-width: 620px;
}
.search-bar__field {
  flex: 1; padding: 10px 18px; display:flex; flex-direction: column; cursor: pointer;
  position: relative; transition: background .2s;
  border-radius: var(--radius-pill);
}
.search-bar__field:hover { background: var(--cream); }
.search-bar__field + .search-bar__field::before {
  content:''; position: absolute; left: 0; top: 20%; height: 60%; width: 1px; background: var(--border);
}
.search-bar__field label { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.search-bar__field input, .search-bar__field select {
  border: none; outline: none; background: transparent;
  padding: 4px 0; font-size: 13px; color: var(--ink); width: 100%;
}
.search-bar__cta {
  background: var(--terracotta); color: #fff;
  border-radius: var(--radius-pill);
  width: 52px; height: 52px; display:grid; place-items:center;
  transition: background .2s, transform .2s var(--ease);
}
.search-bar__cta:hover { background: var(--terracotta-700); transform: scale(1.05); }
@media (max-width: 700px) {
  .search-bar { flex-direction: column; border-radius: var(--radius-lg); padding: 12px; gap: 6px; }
  .search-bar__field { width: 100%; }
  .search-bar__field + .search-bar__field::before { display: none; }
  .search-bar__cta { width: 100%; height: 48px; border-radius: var(--radius-pill); }
}

/* ============ Category strip ============ */
.cat-strip {
  padding-block: 32px 0;
  border-top: 1px solid var(--border);
  position: relative;
}
.cat-strip__viewport {
  position: relative;
  /* overflow visible — nav butonları dışına taşabilsin */
}
.cat-strip__list {
  /* scroll buradan, overflow-x:auto altta zaten var */
}
.cat-strip__list {
  display: flex; gap: 8px;
  overflow-x: auto; padding: 4px 4px 20px;
  scrollbar-width: none;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
}
.cat-strip__list::-webkit-scrollbar { display: none; }

.cat-item {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 92px; padding: 10px 16px 14px;
  color: var(--smoke);
  position: relative;
  transition: color .25s var(--ease), transform .25s var(--ease);
  scroll-snap-align: center;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.cat-item:hover {
  color: var(--ink);
  transform: translateY(-2px);
}
.cat-item.active { color: var(--ink); }
.cat-item.active .cat-item__ic { transform: scale(1.06); }
.cat-item__ic {
  width: 28px; height: 28px;
  opacity: 0.55;
  transition: opacity .25s var(--ease), transform .35s var(--ease);
}
.cat-item:hover .cat-item__ic { opacity: 1; }
.cat-item.active .cat-item__ic { opacity: 1; }
.cat-item span {
  font-size: 12px; font-weight: 600; white-space: nowrap;
  letter-spacing: 0.01em;
}

/* Animated active underline indicator — moves between items */
.cat-strip__indicator {
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transform: translateX(0);
  transition: transform .45s var(--ease-out), width .35s var(--ease-out), opacity .2s;
  pointer-events: none;
  opacity: 0;
}
.cat-strip__indicator.ready { opacity: 1; }

/* Fade gradients at edges (içeride absolute, viewport'a göre değil list'e göre) */
.cat-strip__viewport::before,
.cat-strip__viewport::after {
  content: '';
  position: absolute; top: 0; bottom: 20px;
  width: 56px; pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity .25s var(--ease);
}
.cat-strip__viewport::before { left: 0; background: linear-gradient(to right, var(--ivory) 20%, transparent); }
.cat-strip__viewport::after  { right: 0; background: linear-gradient(to left, var(--ivory) 20%, transparent); }
.cat-strip__viewport.has-prev::before { opacity: 1; }
.cat-strip__viewport.has-next::after  { opacity: 1; }

/* Nav buttons */
.cat-strip__nav {
  position: absolute; top: 50%;
  transform: translateY(calc(-50% - 7px));
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
  z-index: 3;
  transition: opacity .25s, transform .25s var(--ease), box-shadow .25s;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
}
.cat-strip__nav:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(calc(-50% - 7px)) scale(1.06);
}
.cat-strip__nav svg { width: 14px; height: 14px; color: var(--ink); }
.cat-strip__nav--prev { left: -18px; }
.cat-strip__nav--next { right: -18px; }
.cat-strip__viewport.has-prev .cat-strip__nav--prev { opacity: 1; pointer-events: auto; }
.cat-strip__viewport.has-next .cat-strip__nav--next { opacity: 1; pointer-events: auto; }

/* Category active state badge — appears next to "Bu hafta keşfedilesi" title */
.cat-active-pill {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 12px;
  padding: 5px 12px 5px 8px;
  background: var(--ink); color: var(--ivory);
  border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.02em;
  animation: pillIn .35s var(--ease-out);
}
.cat-active-pill button {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: var(--ivory);
  display: grid; place-items: center;
  font-size: 11px; line-height: 1;
}
.cat-active-pill button:hover { background: rgba(255,255,255,0.32); }
@keyframes pillIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

/* ============ Section ============ */
.section { padding-block: 80px; }
.section--cream { background: var(--cream); }
.section__head { display:flex; align-items: flex-end; justify-content: space-between; margin-bottom: 40px; gap: 24px; flex-wrap: wrap; }
.section__head h2 { margin-top: 8px; }
.section__head p { color: var(--smoke); max-width: 460px; }
@media (max-width: 700px) {
  .section { padding-block: 56px; }
  .section__head { margin-bottom: 28px; }
  .hero__stats { gap: 20px; margin-top: 28px; }
  .hero__stat strong { font-size: 22px; }
  .hero__floating { display: none; }
  .cta-strip { padding: 32px 24px; }
  .site-footer { padding-block: 48px 24px; }
}

/* ============ Region grid — editorial magazine style ============ */
/* Tek sıra, yatay kayan — bir seferde 3 görünür */
.region-grid {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;       /* mandatory → proximity: dikey scroll'u takmıyor */
  overscroll-behavior-x: contain;      /* yatay scroll bitince dikey'e geçişi serbest bırak */
  touch-action: pan-x pan-y;           /* dokunma: iki yönde de izin */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 12px;
  scroll-padding-inline: 4px;
}
.region-grid::-webkit-scrollbar { display: none; }
.region-grid > .region-card {
  flex: 0 0 calc((100% - 80px) / 3);
  scroll-snap-align: start;
  min-width: 0;
}
@media (max-width: 980px) {
  .region-grid { gap: 28px; }
  .region-grid > .region-card { flex: 0 0 calc((100% - 28px) / 2); }
}
@media (max-width: 700px) {
  .region-grid { gap: 20px; }
  .region-grid > .region-card { flex: 0 0 86%; }
}

.region-card {
  display: flex; flex-direction: column;
  color: var(--ink);
  transition: transform .35s var(--ease);
}
.region-card:hover { transform: translateY(-4px); }

.region-card__num {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px;
}
.region-card__num::after {
  content:'';
  flex: 1; max-width: 80px;
  height: 1px; background: var(--border);
}

.region-card__media {
  aspect-ratio: 4/5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--sand);
  margin-bottom: 22px;
  position: relative;
}
.region-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}
.region-card:hover .region-card__media img { transform: scale(1.06); }

.region-card__title {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin-bottom: 8px;
}
.region-card__tag {
  font-size: 14px;
  color: var(--smoke);
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 400;
  margin-bottom: 20px;
}

.region-card__divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 16px;
}

.region-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px;
}
.region-card__foot__meta {
  display: flex; align-items: center; gap: 10px;
  color: var(--smoke);
}
.region-card__foot__meta strong {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.region-card__foot__meta .dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--mute);
}
.region-card__foot__arrow {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--ink);
  transition: all .25s var(--ease);
  flex-shrink: 0;
}
.region-card:hover .region-card__foot__arrow {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
  transform: rotate(-12deg);
}
.region-card__foot__arrow svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.region-card:hover .region-card__foot__arrow svg { transform: rotate(12deg); }

/* ============ Villa card ============ */
.villa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }
.villa-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .villa-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .villa-grid--3 { grid-template-columns: 1fr; } }
.villa-card { background: transparent; }
.villa-card__media {
  position: relative; aspect-ratio: 4/3.2; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--sand);
}
.villa-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.villa-card:hover .villa-card__media img { transform: scale(1.04); }
.villa-card__fav {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; display: grid; place-items: center;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  border-radius: 50%; transition: transform .2s, background .2s;
}
.villa-card__fav:hover { transform: scale(1.1); background: #fff; }
.villa-card__fav.active svg { fill: var(--terracotta); stroke: var(--terracotta); }
.villa-card__tag {
  position: absolute; top: 12px; left: 12px;
  padding: 6px 12px; background: var(--ink); color: #fff;
  font-size: 11px; font-weight: 700; border-radius: var(--radius-pill);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.villa-card__body { padding: 14px 4px 0; }
.villa-card__head { display:flex; justify-content: space-between; align-items: center; gap: 8px; }
.villa-card__title { font-weight: 600; font-size: 15px; }
.villa-card__rating { display:flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; }
.villa-card__rating svg { width: 14px; height: 14px; fill: var(--ink); }
.villa-card__meta { color: var(--smoke); font-size: 13px; margin-top: 2px; }
.villa-card__feats { display:flex; gap: 12px; margin-top: 6px; font-size: 12px; color: var(--smoke); flex-wrap: wrap; }
.villa-card__feats span { display:inline-flex; align-items: center; gap: 4px; }
@media (max-width: 600px) {
  .villa-card__feats { gap: 8px; font-size: 11px; }
  .villa-card__title { font-size: 14px; }
}
.villa-card__price { margin-top: 10px; font-size: 15px; }
.villa-card__price strong { font-weight: 700; font-size: 16px; }
.villa-card__price .old { color: var(--mute); text-decoration: line-through; margin-right: 6px; font-size: 13px; }

/* ============ Mood stories ============ */
.mood-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
@media (max-width: 900px) { .mood-grid { grid-template-columns: repeat(2, 1fr); } }
.mood-card {
  position: relative; aspect-ratio: 3/4; border-radius: var(--radius-lg); overflow: hidden;
  cursor: pointer; isolation: isolate;
}
.mood-card img { width:100%; height:100%; object-fit: cover; transition: transform .8s var(--ease); }
.mood-card:hover img { transform: scale(1.08); }
.mood-card::after { content:''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.65) 5%, transparent 50%); }
.mood-card__info { position: absolute; bottom: 22px; left: 22px; right: 22px; color: #fff; z-index: 2; }
.mood-card__info .eyebrow { color: var(--sun); }
.mood-card__info h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin-top: 6px; }
.mood-card__info p { font-size: 13px; opacity: 0.9; margin-top: 6px; }

/* ============ Why bizebivilla — premium editorial ============ */
.why-section {
  position: relative;
  overflow: hidden;
  padding-block: 96px;
  background: var(--ivory);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.why-section::before {
  content:''; position: absolute; top: -200px; right: -300px;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(255, 201, 60, 0.18), transparent 60%);
  filter: blur(60px); pointer-events: none;
}
.why-section::after {
  content:''; position: absolute; bottom: -200px; left: -300px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(255, 90, 54, 0.10), transparent 60%);
  filter: blur(60px); pointer-events: none;
}
.why-container { position: relative; z-index: 2; }

@media (max-width: 700px) { .why-section { padding-block: 64px; } }

/* Manifesto block */
.why-manifesto {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: end;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 56px;
}
@media (max-width: 900px) { .why-manifesto { grid-template-columns: 1fr; gap: 28px; padding-bottom: 40px; margin-bottom: 40px; } }

.why-manifesto__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.02;
}
.why-manifesto__title em {
  font-style: italic;
  color: var(--terracotta);
  font-weight: 400;
}
.why-manifesto__body {
  font-size: 16px; line-height: 1.65;
  color: var(--ink);
}
.why-manifesto__body p + p { margin-top: 12px; }
.why-manifesto__sig {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 24px;
  font-size: 13px; color: var(--smoke);
  font-style: italic;
}
.why-manifesto__sig::before {
  content:''; width: 32px; height: 1px; background: var(--ink);
}

/* KPI strip */
.why-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 28px; padding-bottom: 56px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 56px;
}
@media (max-width: 900px) { .why-kpis { grid-template-columns: repeat(2, 1fr); gap: 32px; } }
@media (max-width: 500px) { .why-kpis { grid-template-columns: repeat(2, 1fr); gap: 24px; } }

.why-kpi {
  position: relative;
  padding-left: 18px;
}
.why-kpi::before {
  content:''; position: absolute; left: 0; top: 6px; bottom: 14px;
  width: 2px; background: var(--terracotta);
}
.why-kpi__value {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 500;
  line-height: 1; letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: 4px;
}
.why-kpi__value sup {
  font-size: 14px; color: var(--terracotta);
  font-family: var(--font-body); font-weight: 600;
  vertical-align: super;
}
.why-kpi__label {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--smoke);
  margin-top: 10px;
}

/* Numbered value points */
.why-points {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 1000px) { .why-points { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .why-points { grid-template-columns: 1fr; } }

.why-point {
  padding: 28px 28px 32px;
  border-right: 1px solid var(--border);
  transition: background .25s var(--ease);
  position: relative;
}
.why-point:last-child { border-right: none; }
@media (max-width: 1000px) {
  .why-point:nth-child(2n) { border-right: none; }
  .why-point:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 560px) {
  .why-point { border-right: none; border-bottom: 1px solid var(--border); padding: 24px 0; }
  .why-point:last-child { border-bottom: none; }
}
.why-point:hover { background: rgba(255, 201, 60, 0.08); }
.why-point:hover .why-point__num { color: var(--terracotta); }
.why-point:hover .why-point__arrow { transform: translateX(6px); color: var(--terracotta); }

.why-point__num {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--mute);
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 28px;
  transition: color .25s var(--ease);
}
.why-point__num::after {
  content:''; flex: 1; max-width: 40px;
  height: 1px; background: var(--border);
}

.why-point__icon {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  color: var(--ink);
  margin-bottom: 18px;
}
.why-point__icon svg { width: 24px; height: 24px; }

.why-point__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.15;
  margin-bottom: 10px;
}
.why-point__desc {
  font-size: 14px; line-height: 1.6;
  color: var(--smoke);
  margin-bottom: 22px;
}
.why-point__arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em; text-transform: uppercase;
  transition: transform .25s var(--ease), color .25s;
}
.why-point__arrow svg { width: 14px; height: 14px; }

/* ============ CTA strip (legacy — kept for other pages) ============ */
.cta-strip {
  background: var(--ink); color: var(--ivory);
  border-radius: var(--radius-xl); padding: 64px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center;
  position: relative; overflow: hidden;
}
@media (max-width: 800px) { .cta-strip { grid-template-columns: 1fr; padding: 40px; } }
.cta-strip h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); }
.cta-strip p { color: rgba(245, 240, 232, 0.7); margin-top: 14px; }
.cta-strip__actions { display:flex; gap: 12px; flex-wrap: wrap; }
.cta-strip::before {
  content:''; position: absolute; top: -60%; right: -10%; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(255, 90, 54, 0.6), transparent 70%);
  filter: blur(40px);
}

/* ============ Host CTA — interactive earnings calculator ============ */
.host-cta {
  background: var(--ink);
  color: var(--ivory);
  border-radius: var(--radius-xl);
  padding: 56px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  position: relative; overflow: hidden;
  align-items: stretch;
}
.host-cta::before {
  content:''; position: absolute; top: -40%; right: -20%; width: 540px; height: 540px;
  background: radial-gradient(circle, rgba(255, 90, 54, 0.45), transparent 60%);
  filter: blur(40px); pointer-events: none;
}
.host-cta::after {
  content:''; position: absolute; bottom: -50%; left: -20%; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(255, 201, 60, 0.22), transparent 60%);
  filter: blur(40px); pointer-events: none;
}
@media (max-width: 980px) { .host-cta { grid-template-columns: 1fr; gap: 36px; padding: 40px 28px; } }

.host-cta__intro { position: relative; z-index: 2; display: flex; flex-direction: column; }
.host-cta__intro .eyebrow { color: var(--sun); }
.host-cta__intro h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.8rem);
  font-weight: 500;
  margin-top: 16px;
  letter-spacing: -0.02em;
  line-height: 1.04;
}
.host-cta__intro h2 em { font-style: italic; color: var(--sun); font-weight: 400; }
.host-cta__intro p { color: rgba(245, 240, 232, 0.72); margin-top: 18px; font-size: 15px; line-height: 1.6; max-width: 420px; }

.host-cta__perks {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-top: 32px; padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.host-cta__perk { display: flex; gap: 12px; align-items: flex-start; }
.host-cta__perk svg { width: 18px; height: 18px; color: var(--sun); flex-shrink: 0; margin-top: 2px; }
.host-cta__perk strong { display: block; font-size: 14px; color: var(--ivory); }
.host-cta__perk span { display: block; font-size: 12px; color: rgba(245, 240, 232, 0.6); margin-top: 2px; }

.host-cta__actions { display: flex; gap: 10px; margin-top: auto; padding-top: 32px; flex-wrap: wrap; }

/* Calculator widget */
.host-calc {
  position: relative; z-index: 2;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 32px;
  display: flex; flex-direction: column; gap: 22px;
}
.host-calc__head {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sun);
}
.host-calc__head::after {
  content:''; flex: 1; height: 1px;
  background: linear-gradient(to right, rgba(255, 201, 60, 0.4), transparent);
}

.host-calc__field { display: flex; flex-direction: column; gap: 10px; }
.host-calc__field-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: rgba(245, 240, 232, 0.78);
}
.host-calc__field-head strong { color: var(--ivory); font-weight: 600; font-variant-numeric: tabular-nums; }

.host-calc__select {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  color: var(--ivory); font-size: 14px;
  width: 100%;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23FAF7F2' stroke-width='2'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  cursor: pointer;
}
.host-calc__select:focus { outline: none; border-color: var(--sun); }
.host-calc__select option { background: var(--ink); color: var(--ivory); }

.host-calc__range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  outline: none;
  background-image: linear-gradient(var(--sun), var(--sun));
  background-size: 50% 100%;
  background-repeat: no-repeat;
}
.host-calc__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ivory);
  border: 3px solid var(--terracotta);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: transform .15s;
}
.host-calc__range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.host-calc__range::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ivory);
  border: 3px solid var(--terracotta);
  cursor: pointer;
}

.host-calc__result {
  background: rgba(255, 201, 60, 0.1);
  border: 1px solid rgba(255, 201, 60, 0.22);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  margin-top: 4px;
}
.host-calc__result-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--sun);
}
.host-calc__result-value {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  font-weight: 500; line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 8px;
  color: var(--ivory);
  display: flex; align-items: baseline; gap: 6px;
}
.host-calc__result-value sup {
  font-size: 16px; color: var(--sun);
  font-family: var(--font-body); font-weight: 600;
}
.host-calc__result-note {
  font-size: 12px; color: rgba(245, 240, 232, 0.6);
  margin-top: 8px;
  display: flex; align-items: center; gap: 6px;
}
.host-calc__result-note svg { width: 12px; height: 12px; color: var(--success); }

.host-calc__cta {
  width: 100%; padding: 14px;
  font-size: 14px; font-weight: 600;
  background: var(--terracotta);
  color: #fff;
  border-radius: var(--radius-pill);
  transition: background .2s, transform .2s var(--ease);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.host-calc__cta:hover { background: var(--terracotta-700); transform: translateY(-2px); }

/* ============ Footer ============ */
.site-footer { background: var(--ink); color: var(--ivory); padding-block: 72px 32px; margin-top: 80px; }
.site-footer__grid { display:grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 48px; }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.site-footer h4 { font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 16px; color: var(--sun); }
.site-footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.site-footer a { color: rgba(245, 240, 232, 0.7); font-size: 14px; transition: color .2s; }
.site-footer a:hover { color: #fff; }
.site-footer .brand { color: var(--ivory); }
.site-footer__bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08);
  display:flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-size: 13px; color: rgba(245, 240, 232, 0.5);
}

/* ============ Listing page ============ */
.list-hero {
  padding: 32px 0 8px;
  border-bottom: 1px solid var(--border);
  background: var(--ivory);
}
.list-hero__crumbs { font-size: 12px; color: var(--smoke); display: flex; gap: 6px; }
.list-hero__crumbs a:hover { color: var(--ink); }
.list-hero__title { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-top: 8px; }
.list-hero__title h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 500; }
.list-hero__title p { color: var(--smoke); font-size: 14px; margin-top: 6px; }
.list-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding-block: 16px; flex-wrap: wrap;
}
.list-toolbar__chips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.list-toolbar__chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--border);
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: all .2s;
}
.chip:hover { border-color: var(--ink); }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip svg { width: 14px; height: 14px; }
.chip__close { width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,0.08); margin-left: 4px; cursor: pointer; }
.chip.active .chip__close { background: rgba(255,255,255,0.18); }
.list-toolbar__actions { display: flex; gap: 8px; align-items: center; }
.sort-select {
  appearance: none; -webkit-appearance: none;
  background: #fff; border: 1px solid var(--border);
  padding: 9px 36px 9px 14px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%231A1A1A' stroke-width='2'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  cursor: pointer;
}
.view-toggle {
  display: inline-flex; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px;
}
.view-toggle button { padding: 6px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; color: var(--smoke); display: inline-flex; align-items: center; gap: 6px; }
.view-toggle button.active { background: var(--ink); color: #fff; }
.view-toggle svg { width: 14px; height: 14px; }

/* Layout split */
.list-layout {
  display: grid; grid-template-columns: 280px 1fr; gap: 32px;
  align-items: start; padding-block: 24px 80px;
}
.list-layout.map-on { grid-template-columns: 280px 1fr 1fr; gap: 24px; }
@media (max-width: 1100px) {
  .list-layout, .list-layout.map-on { grid-template-columns: 1fr; }
  .filters { position: relative; top: auto !important; }
  .map-pane { display: none !important; }
}

/* Filter panel */
.filters {
  position: sticky; top: 88px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 22px; max-height: calc(100vh - 110px); overflow-y: auto;
}
.filters__head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.filters__head h3 { font-family: var(--font-display); font-size: 18px; font-weight: 500; }
.filters__head button { font-size: 12px; color: var(--terracotta); font-weight: 600; }
.filter-group { padding-block: 18px; border-bottom: 1px solid var(--border); }
.filter-group:last-child { border-bottom: none; padding-bottom: 0; }
.filter-group h4 { font-size: 13px; font-weight: 700; margin-bottom: 14px; letter-spacing: 0.02em; }

.range-slider { padding: 6px 4px 0; }
.range-slider__inputs { display: flex; gap: 8px; }
.range-slider__inputs input {
  flex: 1; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 12px; background: var(--ivory);
}
.range-slider__inputs input:focus { outline: none; border-color: var(--ink); }
.range-slider__track {
  position: relative; height: 4px; background: var(--sand); border-radius: 999px; margin: 18px 0 14px;
}
.range-slider__fill { position: absolute; height: 100%; background: var(--ink); border-radius: 999px; }
.range-slider__thumbs input[type=range] {
  position: absolute; top: -18px; left: 0; right: 0;
  width: 100%; pointer-events: none; -webkit-appearance: none; appearance: none;
  background: transparent; height: 40px;
}
.range-slider__thumbs input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ink); cursor: pointer;
  pointer-events: auto; box-shadow: var(--shadow-sm);
}
.range-slider__thumbs input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--ink); cursor: pointer;
  pointer-events: auto;
}

.counter { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
.counter span { font-size: 13px; }
.counter__btns { display: flex; align-items: center; gap: 10px; }
.counter__btns button {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border);
  display: grid; place-items: center; font-size: 14px; color: var(--ink);
  transition: all .2s;
}
.counter__btns button:hover:not(:disabled) { border-color: var(--ink); }
.counter__btns button:disabled { opacity: 0.3; cursor: not-allowed; }
.counter__btns span { min-width: 24px; text-align: center; font-weight: 600; font-size: 14px; }

.checkbox-list { display: flex; flex-direction: column; gap: 10px; max-height: 180px; overflow-y: auto; padding-right: 4px; }
.checkbox {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 13px; color: var(--ink);
}
.checkbox input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1.5px solid var(--border); border-radius: 5px; position: relative; cursor: pointer; transition: all .15s; flex-shrink: 0; }
.checkbox input:checked { background: var(--ink); border-color: var(--ink); }
.checkbox input:checked::after { content: ''; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checkbox:hover { color: var(--terracotta); }
.checkbox span { flex: 1; }
.checkbox em { font-style: normal; color: var(--mute); font-size: 12px; }

/* Result area */
.result-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; flex-wrap: wrap; gap: 8px; }
.result-head h2 { font-family: var(--font-display); font-size: 22px; font-weight: 500; }
.result-head p { color: var(--smoke); font-size: 13px; }
.result-empty {
  padding: 80px 32px; text-align: center; background: var(--cream); border-radius: var(--radius-lg);
}
.result-empty h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; }
.result-empty p { color: var(--smoke); margin-top: 8px; }

.list-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.list-layout.map-on .list-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 1400px) { .list-layout.map-on .list-grid { grid-template-columns: 1fr; } }

/* Map pane — sadece "Harita" görünümünde göster */
.map-pane { display: none; }
.list-layout.map-on .map-pane {
  display: block;
  position: sticky; top: 88px; height: calc(100vh - 110px);
  border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--cream);
}
#map { width: 100%; height: 100%; }
.leaflet-container { background: var(--cream); font-family: var(--font-body); }
.map-marker {
  background: #fff; padding: 6px 12px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 700; color: var(--ink);
  box-shadow: var(--shadow-md); border: 1.5px solid var(--ink);
  white-space: nowrap; transition: all .2s var(--ease); transform: translate(-50%, -100%);
  cursor: pointer;
}
.map-marker:hover, .map-marker.active { background: var(--ink); color: #fff; transform: translate(-50%, -100%) scale(1.08); }
.map-popup .leaflet-popup-content-wrapper { border-radius: var(--radius-md); padding: 0; overflow: hidden; }
.map-popup .leaflet-popup-content { margin: 0; width: 230px !important; }
.map-popup__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.map-popup__body { padding: 12px 14px 14px; }
.map-popup__title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.map-popup__meta { color: var(--smoke); font-size: 12px; }
.map-popup__price { font-weight: 700; font-size: 14px; margin-top: 8px; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 40px; }
.pagination button {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff;
  font-size: 13px; font-weight: 600; color: var(--ink);
  transition: all .2s;
}
.pagination button:hover:not(:disabled) { border-color: var(--ink); }
.pagination button.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Filter drawer (mobile) */
.filter-drawer-btn {
  display: none; align-items: center; gap: 6px;
  padding: 9px 16px; background: var(--ink); color: #fff;
  border-radius: var(--radius-pill); font-size: 13px; font-weight: 600;
}
.filter-drawer-btn svg { width: 14px; height: 14px; }
@media (max-width: 1100px) {
  .filter-drawer-btn { display: inline-flex; }
  .filters { position: fixed; inset: 0; max-height: none; z-index: 99; padding: 24px; transform: translateX(-100%); transition: transform .3s var(--ease); border-radius: 0; }
  .filters.open { transform: translateX(0); }
}

/* ============ Section nav (in-page sticky) ============ */
.section-nav {
  position: sticky; top: 64px; z-index: 30;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  margin: 0 calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
}
@media (max-width: 700px) {
  .section-nav { top: 56px; }
  .section-nav__link { padding: 11px 12px; font-size: 12px; }
  .section-nav__link svg { width: 12px; height: 12px; }
}
.section-nav__inner {
  display: flex; gap: 4px;
  overflow-x: auto; scrollbar-width: none;
  padding: 4px 0;
}
.section-nav__inner::-webkit-scrollbar { display: none; }
.section-nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 16px;
  font-size: 13px; font-weight: 600;
  color: var(--smoke);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease);
  cursor: pointer;
  background: transparent;
}
.section-nav__link:hover { color: var(--ink); }
.section-nav__link.active {
  color: var(--ink);
  border-bottom-color: var(--terracotta);
}
.section-nav__link svg { width: 14px; height: 14px; opacity: 0.8; }

/* ============ Hero badges (under title) ============ */
.hero-badges {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 16px;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600;
  color: var(--ink);
  transition: border-color .2s;
}
.hero-badge:hover { border-color: var(--ink); }
.hero-badge svg { width: 13px; height: 13px; }
.hero-badge--accent {
  background: var(--ink); color: var(--ivory); border-color: var(--ink);
}
.hero-badge--accent svg { color: var(--sun); }
.hero-badge--terra {
  background: rgba(255, 90, 54, 0.08);
  border-color: rgba(255, 90, 54, 0.25);
  color: var(--terracotta-900);
}
.hero-badge--terra svg { color: var(--terracotta); }
.hero-badge--olive {
  background: rgba(0, 168, 181, 0.08);
  border-color: rgba(0, 168, 181, 0.25);
  color: var(--olive);
}
.hero-badge--olive svg { color: var(--olive); }

/* ============ Description callout ============ */
.desc-callout {
  background: linear-gradient(135deg, rgba(255, 201, 60, 0.10), rgba(255, 90, 54, 0.06));
  border-left: 3px solid var(--terracotta);
  padding: 18px 22px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: 22px;
}
.desc-callout__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--terracotta);
}
.desc-callout__label svg { width: 12px; height: 12px; }
.desc-callout__title {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 500;
  margin-top: 6px;
  letter-spacing: -0.01em;
}
.desc-callout__features {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-top: 12px;
}
.desc-callout__features span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--ink); font-weight: 500;
}
.desc-callout__features svg {
  width: 14px; height: 14px;
  color: var(--terracotta);
  flex-shrink: 0;
}

/* ============ Detail page ============ */
.detail-head { padding-block: 24px 0; }
.detail-head__crumbs { font-size: 12px; color: var(--smoke); display: flex; gap: 6px; }
.detail-head__crumbs a:hover { color: var(--ink); }
.detail-head__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-top: 12px; flex-wrap: wrap; }
.detail-head__title h1 { font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; }
.detail-head__meta { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: 14px; flex-wrap: wrap; }
.detail-head__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--mute); }
.detail-head__meta .star { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.detail-head__meta .star svg { width: 14px; height: 14px; fill: var(--ink); }
.detail-head__actions { display: flex; gap: 8px; }
.icon-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: #fff; font-size: 13px; font-weight: 500; transition: all .2s; }
.icon-btn:hover { border-color: var(--ink); }
.icon-btn svg { width: 14px; height: 14px; }
.icon-btn.fav-active { color: var(--terracotta); border-color: var(--terracotta); }
.icon-btn.fav-active svg { fill: var(--terracotta); stroke: var(--terracotta); }

/* Gallery */
.gallery {
  margin-top: 20px;
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px; height: 480px;
  border-radius: var(--radius-lg); overflow: hidden;
}
.gallery__cell { position: relative; cursor: pointer; overflow: hidden; }
.gallery__cell:nth-child(1) { grid-row: span 2; }
.gallery__cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.gallery__cell:hover img { transform: scale(1.04); }
.gallery__cell:hover::after { content:''; position: absolute; inset: 0; background: rgba(0,0,0,0.08); }
.gallery__all {
  position: absolute; bottom: 18px; right: 18px;
  background: #fff; padding: 10px 16px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
  transition: all .2s;
}
.gallery__all:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
@media (max-width: 800px) {
  .gallery { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; gap: 4px; }
  .gallery__cell:nth-child(1) { grid-row: auto; aspect-ratio: 4/3; }
  .gallery__cell:not(:nth-child(1)) { display: none; }
}

/* Hybrid Layout — üst 2-col + alt full-width */
.detail-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 64px;
  padding-block: 40px 56px;
  align-items: start;
}
.detail-top > * { min-width: 0; }

.detail-bottom {
  padding-bottom: 80px;
}
.detail-bottom .detail-section {
  border-bottom: 1px solid var(--border);
}
.detail-bottom .detail-section:last-of-type { border-bottom: none; }

/* Eski .detail-layout (yan yana 2 col layout) — backward compat için tutuyoruz ama kullanılmıyor */
.detail-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 64px;
  padding-block: 48px 80px;
}
.detail-layout > * { min-width: 0; }
@media (max-width: 980px) {
  .detail-top { grid-template-columns: 1fr; gap: 40px; padding-bottom: 100px; }
  .detail-layout { grid-template-columns: 1fr; gap: 40px; padding-bottom: 100px; }
  .booking-card {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 12px 16px !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.10); z-index: 40;
    display: flex !important; align-items: center; gap: 12px;
    max-width: 100%; box-sizing: border-box;
  }
  /* Sadece fiyat + CTA göster; diğer her şey gizli */
  .booking-card__rating,
  .booking-card__form,
  .booking-card__note,
  .booking-summary,
  .booking-card__trust,
  .min-stay-badge { display: none !important; }

  .booking-card__price {
    flex: 1 1 auto; min-width: 0;
    display: flex; align-items: baseline; gap: 4px;
  }
  .booking-card__price strong { font-size: 17px !important; line-height: 1; white-space: nowrap; }
  .booking-card__price .muted { font-size: 12px; white-space: nowrap; }

  .booking-card__cta {
    width: auto !important; flex-shrink: 0;
    padding: 11px 18px !important; margin: 0 !important;
    font-size: 13px !important; line-height: 1;
    white-space: nowrap;
  }
}

.detail-section { padding-block: 32px; border-bottom: 1px solid var(--border); }
.detail-section:first-child { padding-top: 0; }
.detail-section h2 { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin-bottom: 18px; }

.host-row { display: flex; align-items: center; gap: 16px; }
.host-row img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.host-row strong { font-size: 15px; }
.host-row .muted { font-size: 13px; }
.host-quick { display: flex; gap: 28px; margin-top: 18px; flex-wrap: wrap; }
.host-quick > div { font-size: 13px; }
.host-quick strong { display: block; font-family: var(--font-display); font-size: 18px; font-weight: 500; }

.feat-stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 600px) { .feat-stack { grid-template-columns: 1fr; } }
.feat-stack > div { display: flex; gap: 14px; }
.feat-stack svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--ink); margin-top: 2px; }
.feat-stack strong { display: block; font-size: 14px; }
.feat-stack p { color: var(--smoke); font-size: 13px; margin-top: 2px; }

.desc-text { font-size: 15px; line-height: 1.7; color: var(--ink); }
.desc-text p + p { margin-top: 16px; }
.desc-toggle { background: none; padding: 0; margin-top: 16px; text-decoration: underline; font-weight: 600; font-size: 14px; }

/* ============ Amenities — PREMIUM kategorize layout ============ */
.amen-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 600px) { .amen-grid { grid-template-columns: 1fr; } }
.amen-grid > label { display: flex; align-items: center; gap: 12px; font-size: 14px; padding: 4px 0; }
.amen-grid svg { width: 20px; height: 20px; color: var(--ink); flex-shrink: 0; }

/* New: kategorize amenity blocks */
.amen-cats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
@media (max-width: 760px) { .amen-cats { grid-template-columns: 1fr; } }

.amen-cat {
  padding: 22px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.amen-cat:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.amen-cat::before {
  content: ''; position: absolute; top: -40px; right: -40px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(255, 201, 60, 0.15), transparent 70%);
  pointer-events: none;
}
.amen-cat__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.amen-cat__ic {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--cream);
  display: grid; place-items: center;
  color: var(--terracotta);
  flex-shrink: 0;
}
.amen-cat__ic svg { width: 22px; height: 22px; }
.amen-cat__title {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 500;
  letter-spacing: -0.005em;
}
.amen-cat__count {
  font-size: 11px; color: var(--smoke);
  font-weight: 500;
  margin-top: 2px;
}
.amen-cat__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.amen-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 12px; color: var(--ink);
  font-weight: 500;
}
.amen-chip svg { width: 11px; height: 11px; color: var(--terracotta); flex-shrink: 0; }
.amen-chip--off {
  background: transparent;
  color: var(--mute);
  border-color: transparent;
  text-decoration: line-through;
  text-decoration-color: var(--mute);
  text-decoration-thickness: 1px;
}
.amen-chip--off svg { color: var(--mute); }

/* ============ Bedroom plan — PREMIUM ============ */
.bedroom-list {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
@media (max-width: 600px) { .bedroom-list { grid-template-columns: 1fr; } }

.bedroom-card {
  padding: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: block;
  position: relative;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.bedroom-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.bedroom-card__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--cream), var(--sand));
  border-bottom: 1px solid var(--border);
}
.bedroom-card__head__left {
  display: flex; align-items: center; gap: 12px;
}
.bedroom-card__ic {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.7);
  display: grid; place-items: center;
  color: var(--ink);
  flex-shrink: 0;
}
.bedroom-card__ic svg { width: 20px; height: 20px; }
.bedroom-card__title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 500;
  letter-spacing: -0.005em;
}
.bedroom-card__head__num {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 500;
  color: var(--terracotta);
  letter-spacing: -0.01em;
}
.bedroom-card__body {
  padding: 16px 18px 18px;
}
.bedroom-card__bed {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500;
  color: var(--ink);
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.bedroom-card__bed svg { width: 16px; height: 16px; color: var(--terracotta); flex-shrink: 0; }
.bedroom-card__feats {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.bedroom-card__feats span {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 11px; color: var(--ink);
  font-weight: 500;
}
.bedroom-card__feats svg { width: 11px; height: 11px; color: var(--olive); flex-shrink: 0; }

/* ============ Villa rules — PREMIUM (3 grup) ============ */
.rules-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; }
@media (max-width: 600px) { .rules-grid { grid-template-columns: 1fr; } }

.rules-premium {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
@media (max-width: 900px) { .rules-premium { grid-template-columns: 1fr; } }

.rules-group {
  padding: 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #fff;
  display: flex; flex-direction: column;
}
.rules-group--allow {
  background: linear-gradient(180deg, rgba(79, 122, 90, 0.06), transparent 60%);
  border-color: rgba(79, 122, 90, 0.18);
}
.rules-group--deny {
  background: linear-gradient(180deg, rgba(184, 68, 58, 0.06), transparent 60%);
  border-color: rgba(184, 68, 58, 0.18);
}
.rules-group--info {
  background: linear-gradient(180deg, rgba(255, 201, 60, 0.06), transparent 60%);
  border-color: rgba(255, 201, 60, 0.22);
}
.rules-group__head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.rules-group__ic {
  width: 30px; height: 30px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.rules-group--allow .rules-group__ic { background: rgba(79, 122, 90, 0.14); color: var(--success); }
.rules-group--deny  .rules-group__ic { background: rgba(184, 68, 58, 0.14); color: var(--danger); }
.rules-group--info  .rules-group__ic { background: rgba(255, 201, 60, 0.20); color: var(--terracotta); }
.rules-group__ic svg { width: 16px; height: 16px; }
.rules-group__title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 500;
  letter-spacing: -0.005em;
}
.rules-group__count {
  margin-left: auto;
  font-size: 11px; color: var(--smoke);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.rules-group__list {
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
}
.rules-group__item {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px;
  color: var(--ink);
}
.rules-group__item svg {
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--smoke);
}
.rules-group--allow .rules-group__item svg { color: var(--success); }
.rules-group--deny  .rules-group__item svg { color: var(--danger); }
.rules-group--info  .rules-group__item svg { color: var(--terracotta); }
.rules-group__item strong { font-weight: 600; }
.rules-group__item span { color: var(--smoke); font-size: 11px; margin-left: auto; font-variant-numeric: tabular-nums; }
.rules-group__empty {
  font-size: 12px; color: var(--mute);
  font-style: italic;
  padding: 6px 0;
}

/* Rating bars */
.rating-summary { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; margin-bottom: 28px; }
@media (max-width: 700px) { .rating-summary { grid-template-columns: 1fr; gap: 20px; } }
.rating-summary__score { text-align: left; }
.rating-summary__score strong { font-family: var(--font-display); font-size: 56px; font-weight: 500; display: block; line-height: 1; }
.rating-summary__score span { color: var(--smoke); font-size: 14px; display: block; margin-top: 4px; }
.rating-bars { display: flex; flex-direction: column; gap: 10px; }
.rating-bar { display: grid; grid-template-columns: 110px 1fr 40px; gap: 14px; align-items: center; font-size: 13px; }
.rating-bar__track { height: 6px; background: var(--sand); border-radius: 999px; overflow: hidden; }
.rating-bar__fill { height: 100%; background: var(--ink); border-radius: 999px; }

.reviews-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 700px) { .reviews-grid { grid-template-columns: 1fr; } }
.review-card { padding: 18px 0; }
.review-card__head { display: flex; align-items: center; gap: 12px; }
.review-card__head img { width: 40px; height: 40px; border-radius: 50%; }
.review-card__head strong { font-size: 14px; }
.review-card__head span { display: block; color: var(--smoke); font-size: 12px; }
.review-card__text { margin-top: 12px; font-size: 14px; line-height: 1.6; }

.map-wrap { height: 360px; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); margin-top: 16px; }
.map-wrap #detail-map { width: 100%; height: 100%; }
@media (max-width: 700px) { .map-wrap { height: 280px; } }

/* Booking card */
.booking-card {
  position: sticky; top: 96px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px; box-shadow: var(--shadow-md);
  align-self: start;
}
.booking-card__price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.booking-card__price strong { font-family: var(--font-display); font-size: 28px; font-weight: 500; }
.booking-card__price .muted { font-size: 13px; }
.booking-card__rating { font-size: 13px; margin-top: 4px; display: inline-flex; align-items: center; gap: 4px; }
.booking-card__rating svg { width: 14px; height: 14px; fill: var(--ink); }

.booking-card__form {
  margin-top: 18px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
}
.booking-card__field {
  display: block; padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.booking-card__field:last-of-type { border-bottom: none; }
.booking-card__field--row { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.booking-card__field--row .booking-card__field { border-bottom: none; border-right: 1px solid var(--border); padding: 12px 14px; }
.booking-card__field--row .booking-card__field:last-child { border-right: none; }
.booking-card__field label { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.booking-card__field input, .booking-card__field select { display: block; width: 100%; border: none; outline: none; padding: 4px 0 0; font-size: 13px; background: transparent; }

.booking-card__cta { width: 100%; margin-top: 14px; padding: 14px; font-size: 15px; }
.booking-card__note { text-align: center; color: var(--smoke); font-size: 12px; margin-top: 10px; }

.booking-summary { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.booking-summary__row { display: flex; justify-content: space-between; }
.booking-summary__row.total { font-weight: 700; font-size: 16px; padding-top: 14px; border-top: 1px solid var(--border); margin-top: 4px; }
.booking-summary__row .underline { text-decoration: underline; cursor: help; }

.booking-card__trust {
  margin-top: 18px; padding: 12px 14px; background: var(--cream); border-radius: var(--radius-md);
  display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--ink);
}
.booking-card__trust svg { width: 18px; height: 18px; color: var(--terracotta); flex-shrink: 0; }

/* Similar */
.similar-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1000px) { .similar-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .similar-row { grid-template-columns: 1fr; } }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; background: rgba(20,20,20,0.92);
  z-index: 1000; display: none; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox__img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: var(--radius-md); }
.lightbox__close, .lightbox__nav { position: absolute; background: rgba(255,255,255,0.12); color: #fff; border-radius: 50%; width: 44px; height: 44px; display: grid; place-items: center; transition: background .2s; backdrop-filter: blur(8px); }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,0.22); }
.lightbox__close { top: 24px; right: 24px; }
.lightbox__nav.prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__nav.next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__count { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; background: rgba(0,0,0,0.4); padding: 6px 12px; border-radius: var(--radius-pill); }

/* ============ Auth ============ */
.auth-shell {
  min-height: calc(100vh - 88px);
  display: grid; grid-template-columns: 1fr 1.05fr;
}
@media (max-width: 900px) { .auth-shell { grid-template-columns: 1fr; } .auth-shell__art { display: none; } }
.auth-shell__art {
  position: relative; overflow: hidden;
}
.auth-shell__art img { width: 100%; height: 100%; object-fit: cover; }
.auth-shell__art::after { content:''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255, 90, 54,0.25), rgba(0,0,0,0.35)); }
.auth-shell__quote {
  position: absolute; bottom: 48px; left: 48px; right: 48px; color: #fff; z-index: 2;
}
.auth-shell__quote h2 { font-family: var(--font-display); font-size: clamp(1.6rem, 2.5vw, 2.2rem); font-weight: 500; line-height: 1.2; }
.auth-shell__quote p { margin-top: 16px; opacity: 0.85; font-size: 14px; }

.auth-shell__form {
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px 56px;
}
@media (max-width: 600px) { .auth-shell__form { padding: 48px 24px; } }
.auth-form { max-width: 420px; width: 100%; margin: 0 auto; }
.auth-form h1 { font-family: var(--font-display); font-size: 28px; font-weight: 500; }
.auth-form p { color: var(--smoke); font-size: 14px; margin-top: 8px; }

.field { margin-top: 18px; }
.field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  display: block; width: 100%; padding: 13px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: #fff; font-size: 14px; transition: border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field__hint { font-size: 12px; color: var(--smoke); margin-top: 6px; }
.field__error { font-size: 12px; color: var(--danger); margin-top: 6px; }

.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--mute); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content:''; flex: 1; height: 1px; background: var(--border); }
.auth-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-social button {
  padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; font-weight: 600; transition: border-color .2s;
}
.auth-social button:hover { border-color: var(--ink); }
.auth-social svg { width: 18px; height: 18px; }

.auth-foot { margin-top: 22px; font-size: 13px; text-align: center; color: var(--smoke); }
.auth-foot a { color: var(--terracotta); font-weight: 600; }

/* ============ Account shell ============ */
.account-shell {
  display: grid; grid-template-columns: 260px 1fr; gap: 40px;
  padding-block: 32px 80px;
}
@media (max-width: 900px) {
  .account-shell { grid-template-columns: 1fr; gap: 24px; }
  .account-side { position: static !important; top: auto !important; }
}

.account-side {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px; position: sticky; top: 96px;
  align-self: start;
}
.account-side__user { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.account-side__user .avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 16px; }
.account-side__user strong { display: block; font-size: 14px; }
.account-side__user span { font-size: 12px; color: var(--smoke); }
.account-side__nav { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; }
.account-side__nav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--radius-md); font-size: 14px; color: var(--ink);
  transition: background .2s;
}
.account-side__nav a:hover { background: var(--cream); }
.account-side__nav a.active { background: var(--ink); color: var(--ivory); }
.account-side__nav svg { width: 18px; height: 18px; }

.account-main { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; }
.account-main__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.account-main__head h1 { font-family: var(--font-display); font-size: 26px; font-weight: 500; }
.account-main__head p { color: var(--smoke); font-size: 14px; margin-top: 4px; }

/* Reservation rows */
.res-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.res-tabs button { padding: 12px 18px; font-size: 13px; font-weight: 600; color: var(--smoke); border-bottom: 2px solid transparent; transition: all .2s; }
.res-tabs button.active { color: var(--ink); border-bottom-color: var(--terracotta); }
.res-tabs button:hover { color: var(--ink); }

.res-row {
  display: grid; grid-template-columns: 160px 1fr auto; gap: 20px;
  padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md);
  align-items: center; transition: box-shadow .2s;
  margin-bottom: 12px;
}
.res-row:hover { box-shadow: var(--shadow-sm); }
.res-row img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius-sm); }
.res-row__title { font-weight: 600; font-size: 15px; }
.res-row__meta { color: var(--smoke); font-size: 13px; margin-top: 4px; }
.res-row__badges { display: flex; gap: 6px; margin-top: 8px; }
.res-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; }
.res-badge--confirmed { background: rgba(79, 122, 90, 0.12); color: var(--success); }
.res-badge--pending   { background: rgba(255, 201, 60, 0.18); color: var(--terracotta-700); }
.res-badge--past      { background: rgba(106, 106, 106, 0.12); color: var(--smoke); }
.res-badge--canceled  { background: rgba(184, 68, 58, 0.12); color: var(--danger); }
.res-row__price { font-weight: 700; font-size: 15px; }
.res-row__price span { display: block; font-weight: 400; color: var(--smoke); font-size: 12px; margin-top: 2px; }
@media (max-width: 700px) {
  .res-row { grid-template-columns: 1fr; }
  .res-row img { aspect-ratio: 16/9; }
}

/* Empty state */
.empty-state { padding: 48px 24px; text-align: center; background: var(--cream); border-radius: var(--radius-md); }
.empty-state svg { width: 40px; height: 40px; color: var(--mute); margin: 0 auto; }
.empty-state h3 { font-family: var(--font-display); font-size: 18px; font-weight: 500; margin-top: 12px; }
.empty-state p { color: var(--smoke); font-size: 14px; margin-top: 6px; }
.empty-state a { display: inline-block; margin-top: 16px; }

/* Profile form */
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .profile-grid { grid-template-columns: 1fr; } }

/* Host dashboard */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.kpi {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 22px;
}
.kpi__label { font-size: 12px; color: var(--smoke); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.kpi__value { font-family: var(--font-display); font-size: 32px; font-weight: 500; margin-top: 6px; line-height: 1; }
.kpi__diff { font-size: 12px; margin-top: 8px; color: var(--success); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.kpi__diff.down { color: var(--danger); }
.kpi__diff svg { width: 12px; height: 12px; }

.host-charts {
  display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-top: 28px;
}
@media (max-width: 900px) { .host-charts { grid-template-columns: 1fr; } }
.card-block {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 24px;
}
.card-block h3 { font-family: var(--font-display); font-size: 18px; font-weight: 500; margin-bottom: 16px; }

.bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 220px; padding: 12px 0; }
.bar-chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bar-chart__bar { width: 100%; background: var(--terracotta); border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: opacity .2s; cursor: pointer; }
.bar-chart__bar:hover { opacity: 0.8; }
.bar-chart__label { font-size: 11px; color: var(--smoke); }

.donut { width: 160px; height: 160px; margin: 0 auto; position: relative; }
.donut__center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.donut__center strong { font-family: var(--font-display); font-size: 28px; font-weight: 500; display: block; }
.donut__center span { font-size: 11px; color: var(--smoke); }

/* Host calendar */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.calendar-grid__head { font-size: 11px; font-weight: 700; text-align: center; padding: 8px 0; color: var(--smoke); text-transform: uppercase; letter-spacing: 0.04em; }
.calendar-grid__cell {
  aspect-ratio: 1/1; border-radius: var(--radius-sm);
  display: flex; flex-direction: column; padding: 8px;
  background: var(--ivory); cursor: pointer; transition: background .2s;
  border: 1px solid var(--border);
}
.calendar-grid__cell:hover { background: var(--cream); }
.calendar-grid__cell.booked { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.calendar-grid__cell.blocked { background: var(--sand); color: var(--mute); }
.calendar-grid__cell.outside { opacity: 0.3; pointer-events: none; }
.calendar-grid__cell .date { font-weight: 600; font-size: 13px; }
.calendar-grid__cell .price { font-size: 10px; margin-top: auto; color: var(--terracotta); font-weight: 600; }
.calendar-grid__cell.booked .price { color: var(--sun); }

.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.calendar-head h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; }
.calendar-head__nav { display: flex; gap: 6px; }
.calendar-head__nav button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center; }
.calendar-head__nav button:hover { border-color: var(--ink); }
.calendar-legend { display: flex; gap: 16px; margin-top: 16px; font-size: 12px; color: var(--smoke); flex-wrap: wrap; }
.calendar-legend > div { display: inline-flex; align-items: center; gap: 6px; }
.calendar-legend .sw { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border); }
.sw--available { background: var(--ivory); }
.sw--booked    { background: var(--ink); }
.sw--blocked   { background: var(--sand); }

/* ============ Wizard (host listing) ============ */
.wizard-shell { display: grid; grid-template-columns: 320px 1fr; min-height: calc(100vh - 88px); }
@media (max-width: 900px) { .wizard-shell { grid-template-columns: 1fr; } .wizard-side { display: none; } }
.wizard-side {
  background: var(--ink); color: var(--ivory); padding: 40px;
  display: flex; flex-direction: column;
}
.wizard-side h2 { font-family: var(--font-display); font-size: 22px; font-weight: 500; }
.wizard-side p { color: rgba(245, 240, 232, 0.65); font-size: 14px; margin-top: 8px; }
.wizard-steps { margin-top: 36px; display: flex; flex-direction: column; gap: 4px; }
.wizard-step {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius-md);
  color: rgba(245, 240, 232, 0.65); transition: all .2s; cursor: pointer;
}
.wizard-step:hover { background: rgba(255,255,255,0.04); color: var(--ivory); }
.wizard-step.active { background: rgba(255, 90, 54, 0.16); color: var(--ivory); }
.wizard-step.done { color: var(--sun); }
.wizard-step__n {
  width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid currentColor;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.wizard-step.done .wizard-step__n { background: var(--sun); color: var(--ink); border-color: var(--sun); }
.wizard-step strong { font-size: 14px; }
.wizard-step span { display: block; font-size: 11px; opacity: 0.8; margin-top: 2px; }

.wizard-main {
  padding: 56px;
  max-width: 720px; width: 100%; margin: 0 auto;
}
@media (max-width: 600px) { .wizard-main { padding: 32px 20px; } }
.wizard-main h1 { font-family: var(--font-display); font-size: 32px; font-weight: 500; }
.wizard-main > p.lead { color: var(--smoke); margin-top: 10px; font-size: 15px; }

.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px; }
@media (max-width: 500px) { .choice-grid { grid-template-columns: 1fr; } }
.choice {
  padding: 24px; border: 1.5px solid var(--border); border-radius: var(--radius-md);
  background: #fff; cursor: pointer; transition: all .2s;
  display: flex; flex-direction: column; gap: 10px;
}
.choice:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.choice.selected { border-color: var(--ink); background: var(--cream); }
.choice svg { width: 32px; height: 32px; color: var(--terracotta); }
.choice strong { font-size: 15px; }
.choice span { color: var(--smoke); font-size: 13px; }

.wizard-foot {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 12px;
}
.wizard-progress { height: 4px; background: var(--sand); border-radius: 999px; margin-bottom: 32px; overflow: hidden; }
.wizard-progress__fill { height: 100%; background: var(--terracotta); transition: width .3s var(--ease); }

/* ============ Page hero (static) ============ */
.page-hero {
  padding-block: 64px 48px; background: var(--cream);
  border-bottom: 1px solid var(--border); text-align: center;
}
.page-hero .eyebrow { display: inline-block; }
.page-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); font-weight: 500; margin-top: 14px; letter-spacing: -0.01em; line-height: 1.05; }
.page-hero p { max-width: 600px; margin: 18px auto 0; color: var(--smoke); font-size: 16px; }
.page-hero--image { padding: 0; height: 60vh; min-height: 420px; position: relative; overflow: hidden; }
.page-hero--image img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.page-hero--image::after { content:''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.6)); }
.page-hero--image .container { position: relative; z-index: 2; color: #fff; padding-bottom: 56px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; text-align: left; }
.page-hero--image h1 { color: #fff; }
.page-hero--image p { color: rgba(255,255,255,0.85); margin-left: 0; margin-right: 0; }

.prose { max-width: 720px; margin: 0 auto; padding-block: 64px; }
.prose h2 { font-family: var(--font-display); font-size: 28px; font-weight: 500; margin-top: 40px; margin-bottom: 12px; }
.prose p { font-size: 16px; line-height: 1.7; color: var(--ink); margin-bottom: 16px; }
.prose ul { padding-left: 20px; margin-bottom: 16px; }
.prose ul li { margin-bottom: 6px; }
.prose blockquote { border-left: 3px solid var(--terracotta); padding-left: 18px; margin: 24px 0; font-style: italic; color: var(--smoke); }

.faq-list { max-width: 760px; margin: 0 auto; padding-block: 32px 64px; }
.faq-item { border-bottom: 1px solid var(--border); padding: 20px 0; cursor: pointer; }
.faq-item summary { font-size: 16px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 22px; font-weight: 300; transition: transform .2s; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin-top: 14px; color: var(--smoke); font-size: 14px; line-height: 1.7; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; max-width: 960px; margin: 0 auto; padding-block: 64px; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; padding-block: 40px; } }
.contact-info > div { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.contact-info svg { width: 22px; height: 22px; color: var(--terracotta); flex-shrink: 0; }
.contact-info strong { display: block; font-size: 15px; }
.contact-info p { color: var(--smoke); font-size: 14px; margin-top: 2px; }

/* Blog */
.blog-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-block: 32px 64px; }
@media (max-width: 900px) { .blog-list { grid-template-columns: 1fr; } }
.blog-card { display: block; }
.blog-card__img { aspect-ratio: 5/3; overflow: hidden; border-radius: var(--radius-lg); }
.blog-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.blog-card:hover .blog-card__img img { transform: scale(1.04); }
.blog-card__cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--terracotta); font-weight: 700; margin-top: 16px; }
.blog-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 500; margin-top: 8px; line-height: 1.25; }
.blog-card__meta { color: var(--smoke); font-size: 13px; margin-top: 8px; }

/* ============ Compare page ============ */
.compare-page { padding-block: 48px 80px; }
.compare-empty {
  padding: 80px 32px; text-align: center; background: var(--cream);
  border-radius: var(--radius-lg); max-width: 640px; margin: 0 auto;
}
.compare-empty svg { width: 48px; height: 48px; color: var(--mute); margin: 0 auto 16px; }
.compare-empty h3 { font-family: var(--font-display); font-size: 24px; font-weight: 500; }
.compare-empty p { color: var(--smoke); margin-top: 8px; }

.compare-table { display: grid; gap: 0; overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); background: #fff; }
.compare-table__row {
  display: grid; gap: 0;
  border-bottom: 1px solid var(--border);
}
.compare-table__row:last-child { border-bottom: none; }
.compare-table__row > * {
  padding: 16px 18px;
  border-right: 1px solid var(--border);
}
.compare-table__row > *:last-child { border-right: none; }
.compare-table__row--head { background: var(--cream); position: sticky; top: 80px; z-index: 5; }
.compare-table__row--head > * { padding: 0; }
.compare-table__feat {
  background: var(--ivory); font-weight: 600; font-size: 13px;
  display: flex; align-items: center; gap: 8px; color: var(--ink);
}
.compare-table__feat svg { width: 16px; height: 16px; color: var(--terracotta); }
.compare-cell { font-size: 14px; color: var(--ink); display: flex; align-items: center; }
.compare-cell--yes { color: var(--success); font-weight: 600; }
.compare-cell--no { color: var(--mute); }
.compare-cell strong { font-weight: 700; }

.compare-card {
  position: relative; padding: 0;
  display: flex; flex-direction: column;
}
.compare-card__img { aspect-ratio: 4/3; overflow: hidden; }
.compare-card__img img { width: 100%; height: 100%; object-fit: cover; }
.compare-card__body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.compare-card__title { font-weight: 600; font-size: 15px; }
.compare-card__meta { color: var(--smoke); font-size: 12px; }
.compare-card__price { font-family: var(--font-display); font-size: 20px; font-weight: 500; margin-top: auto; }
.compare-card__price span { font-size: 12px; color: var(--smoke); font-weight: 400; font-family: var(--font-body); }
.compare-card__remove {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.92); display: grid; place-items: center;
  transition: background .2s;
}
.compare-card__remove:hover { background: #fff; }
.compare-card__remove svg { width: 14px; height: 14px; }

.compare-add {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--cream); color: var(--smoke); font-size: 13px; font-weight: 600;
  border: 2px dashed var(--border); border-radius: 0;
  flex-direction: column; padding: 32px;
}
.compare-add svg { width: 28px; height: 28px; opacity: 0.5; }
.compare-add:hover { background: var(--sand); }

/* Compare-add-button on villa card */
.villa-card__compare {
  position: absolute; top: 12px; right: 56px;
  width: 36px; height: 36px; display: grid; place-items: center;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  border-radius: 50%; transition: transform .2s, background .2s;
}
.villa-card__compare:hover { transform: scale(1.1); background: #fff; }
.villa-card__compare.active { background: var(--ink); color: var(--ivory); }
.villa-card__compare svg { width: 16px; height: 16px; }

/* Floating compare bar */
.compare-bar {
  display: none !important; /* Karşılaştırma çubuğu kaldırıldı — sadece kart üstündeki ⇄ butonu kalır */
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120%);
  background: var(--ink); color: var(--ivory);
  border-radius: var(--radius-pill); padding: 10px 12px 10px 20px;
  display: inline-flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow-lg); z-index: 30;
  transition: transform .35s var(--ease);
}
.compare-bar.visible { transform: translateX(-50%) translateY(0); }
.compare-bar__count { background: var(--terracotta); color: #fff; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; }
.compare-bar__text { font-size: 14px; font-weight: 500; }
.compare-bar a { background: var(--ivory); color: var(--ink); padding: 8px 16px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; transition: background .2s; }
.compare-bar a:hover { background: var(--sun); }

/* ============ Toast ============ */
.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 1000;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  background: var(--ink); color: var(--ivory);
  padding: 14px 20px; border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14px; min-width: 220px;
  pointer-events: auto;
  animation: toastIn .35s var(--ease-out);
  transform-origin: bottom right;
}
.toast.closing { animation: toastOut .25s var(--ease) forwards; }
.toast svg { width: 18px; height: 18px; flex-shrink: 0; }
.toast--success svg { color: var(--success); }
.toast--info svg    { color: var(--sun); }
.toast--error svg   { color: var(--danger); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateY(20px) scale(0.95); }
}
@media (max-width: 600px) {
  .toast-container { left: 16px; right: 16px; bottom: 16px; }
  .toast { min-width: 0; width: 100%; }
}

/* ============ Scroll fade-in ============ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

/* ============ Back to top ============ */
.back-to-top {
  position: fixed; bottom: 24px; right: 24px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--ink); color: var(--ivory);
  display: grid; place-items: center;
  box-shadow: var(--shadow-md);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  z-index: 35;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { transform: translateY(-2px); background: var(--terracotta); }
@media (max-width: 600px) { .back-to-top { bottom: 80px; } }

/* ============ Date range picker ============ */
.dp-input { position: relative; }
.dp-popover {
  position: absolute; top: calc(100% + 12px); left: 0;
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border: 1px solid var(--border);
  padding: 22px; z-index: 80;
  display: none; min-width: 640px;
}
.dp-popover.open { display: block; animation: dpIn .25s var(--ease-out); }
@keyframes dpIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .dp-popover {
    position: fixed; inset: auto 0 0 0; top: auto;
    min-width: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 92vh; overflow-y: auto;
    padding-bottom: 24px;
  }
  .dp-popover.open { animation: dpInMobile .3s var(--ease-out); }
  @keyframes dpInMobile { from { transform: translateY(100%); } to { transform: none; } }
}

.dp-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.dp-head__nav { display: flex; gap: 6px; }
.dp-head__nav button {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); display: grid; place-items: center;
  transition: all .2s;
}
.dp-head__nav button:hover:not(:disabled) { border-color: var(--ink); }
.dp-head__nav button:disabled { opacity: 0.3; cursor: not-allowed; }
.dp-head__nav svg { width: 14px; height: 14px; }
.dp-head__info { font-size: 13px; color: var(--smoke); display: flex; gap: 14px; }
.dp-head__info strong { color: var(--ink); font-weight: 600; }

.dp-months { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 700px) { .dp-months { grid-template-columns: 1fr; gap: 20px; } }
.dp-month__title { font-family: var(--font-display); font-size: 16px; font-weight: 500; margin-bottom: 12px; text-align: center; text-transform: capitalize; }
.dp-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.dp-grid__head { font-size: 10px; font-weight: 700; color: var(--smoke); text-align: center; padding: 4px 0; text-transform: uppercase; letter-spacing: 0.04em; }
.dp-cell {
  height: 36px; display: grid; place-items: center;
  font-size: 13px; font-weight: 500;
  border-radius: 50%; cursor: pointer;
  transition: background .15s, color .15s;
  position: relative;
  background: transparent; color: var(--ink); border: none;
}
.dp-cell:hover:not(:disabled):not(.outside) { background: var(--cream); }
.dp-cell.outside { color: transparent; pointer-events: none; }
.dp-cell:disabled { color: var(--mute); text-decoration: line-through; cursor: not-allowed; }
.dp-cell.today { font-weight: 700; }
.dp-cell.in-range { background: var(--cream); border-radius: 0; color: var(--ink); }
.dp-cell.start, .dp-cell.end { background: var(--ink); color: var(--ivory); border-radius: 50%; z-index: 2; }
.dp-cell.start:not(.end) { border-radius: 50% 0 0 50%; border-radius: 50%; }
.dp-cell.start.in-range-edge::after,
.dp-cell.end.in-range-edge::before {
  content:''; position: absolute; top: 0; bottom: 0; width: 50%;
  background: var(--cream); z-index: -1;
}
.dp-cell.start.in-range-edge::after { right: 0; }
.dp-cell.end.in-range-edge::before { left: 0; }

.dp-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
  gap: 12px;
}
.dp-foot__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dp-foot__chips button {
  font-size: 11px; padding: 6px 10px; border-radius: var(--radius-pill);
  background: var(--cream); border: 1px solid var(--border);
  font-weight: 500;
}
.dp-foot__chips button:hover { border-color: var(--ink); }
.dp-foot__actions { display: flex; gap: 8px; }

/* ============ Villa rules ============ */
.rules-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px;
}
@media (max-width: 600px) { .rules-grid { grid-template-columns: 1fr; } }
.rule {
  display: flex; align-items: center; gap: 14px;
  padding: 4px 0;
}
.rule__ic {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--cream);
  display: grid; place-items: center;
  color: var(--ink);
  flex-shrink: 0;
}
.rule--no .rule__ic { background: rgba(184, 68, 58, 0.08); color: var(--danger); }
.rule__ic svg { width: 18px; height: 18px; }
.rule__body { line-height: 1.35; }
.rule__label { font-weight: 600; font-size: 14px; }
.rule__value { font-size: 12px; color: var(--smoke); margin-top: 2px; }
.rule--no .rule__value { color: var(--danger); }

/* ============ Nearby places ============ */
.nearby-grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px;
}
@media (max-width: 1100px) { .nearby-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .nearby-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 400px)  { .nearby-grid { grid-template-columns: 1fr; } }
.nearby-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform .25s var(--ease), box-shadow .2s;
}
.nearby-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.nearby-card__ic {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--cream);
  display: grid; place-items: center;
  color: var(--terracotta);
  flex-shrink: 0;
}
.nearby-card__ic svg { width: 18px; height: 18px; }
.nearby-card__label { font-size: 13px; color: var(--smoke); }
.nearby-card__dist { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }

/* ============ Bedroom plan ============ */
.bedroom-list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
@media (max-width: 600px) { .bedroom-list { grid-template-columns: 1fr; } }
.bedroom-card {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  display: flex; gap: 14px; align-items: flex-start;
}
.bedroom-card__ic {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--cream);
  display: grid; place-items: center;
  color: var(--ink);
  flex-shrink: 0;
}
.bedroom-card__ic svg { width: 22px; height: 22px; }
.bedroom-card__title {
  font-weight: 600; font-size: 14px;
  margin-bottom: 4px;
}
.bedroom-card__bed {
  font-size: 13px; color: var(--smoke);
}
.bedroom-card__feats {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  margin-top: 8px;
  font-size: 11px; color: var(--ink);
}
.bedroom-card__feats span {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  background: var(--ivory);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.bedroom-card__feats svg { width: 11px; height: 11px; }

/* ============ Min stay badge (booking card) ============ */
.min-stay-badge {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--cream);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--ink);
}
.min-stay-badge svg { width: 14px; height: 14px; color: var(--terracotta); flex-shrink: 0; }
.min-stay-badge strong { font-weight: 700; }

/* ============ Seasonal pricing table ============ */
.season-pricing {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
@media (min-width: 1100px) { .season-pricing { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .season-pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .season-pricing { grid-template-columns: 1fr; } }
.season-pricing__row {
  position: relative;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: transform .25s var(--ease), box-shadow .2s;
}
.season-pricing__row:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.season-pricing__row.peak {
  border-color: var(--terracotta);
  background: linear-gradient(135deg, rgba(255, 201, 60, 0.08), rgba(255, 90, 54, 0.04));
}
.season-pricing__row.peak::before {
  content: 'ZİRVE';
  position: absolute; top: -8px; right: 14px;
  background: var(--terracotta); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  padding: 3px 8px; border-radius: var(--radius-pill);
}
.season-pricing__label {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--smoke);
}
.season-pricing__range {
  font-size: 11px; color: var(--mute); margin-top: 2px;
}
.season-pricing__price {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.01em;
  margin-top: 10px;
  display: flex; align-items: baseline; gap: 4px;
}
.season-pricing__price span { font-size: 12px; color: var(--smoke); font-weight: 400; font-family: var(--font-body); }

/* ============ Payment plan timeline ============ */
.payment-plan {
  display: flex; align-items: stretch; gap: 0;
  position: relative;
}
.payment-plan__step {
  flex: 1;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--border);
  position: relative;
}
.payment-plan__step:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); border-right: none; }
.payment-plan__step:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.payment-plan__step + .payment-plan__step::before {
  content: ''; position: absolute; left: -1px; top: 0; bottom: 0;
  width: 1px; background: var(--border);
}
.payment-plan__step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--cream); color: var(--ink);
  font-weight: 700; font-size: 13px;
  margin-bottom: 10px;
}
.payment-plan__step--active .payment-plan__step__n {
  background: var(--terracotta); color: #fff;
}
.payment-plan__step__amount {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.payment-plan__step__when {
  font-size: 12px; color: var(--smoke);
  margin-top: 6px;
}
@media (max-width: 600px) {
  .payment-plan { flex-direction: column; }
  .payment-plan__step { border-radius: 0 !important; border-right: 1px solid var(--border); border-bottom: none; }
  .payment-plan__step:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0 !important; }
  .payment-plan__step:last-child  { border-radius: 0 0 var(--radius-md) var(--radius-md) !important; border-bottom: 1px solid var(--border); }
  .payment-plan__step + .payment-plan__step::before { display: none; }
  .payment-plan__step + .payment-plan__step { border-top: none; }
}

/* ============ Cancellation policy tiers ============ */
.cancel-tiers {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
}
@media (max-width: 760px) { .cancel-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cancel-tiers { grid-template-columns: 1fr; } }
.cancel-tier {
  padding: 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}
.cancel-tier::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--mute);
}
.cancel-tier--success::before { background: var(--success); }
.cancel-tier--warn::before    { background: var(--sun); }
.cancel-tier--danger::before  { background: var(--danger); }
.cancel-tier__range {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--smoke);
  margin-bottom: 8px;
}
.cancel-tier__refund {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.cancel-tier__refund span { font-size: 14px; color: var(--smoke); font-family: var(--font-body); margin-left: 4px; }
.cancel-tier__label {
  font-size: 13px; color: var(--ink);
  margin-top: 8px;
}

/* ============ Villa FAQ ============ */
.villa-faq {
  display: flex; flex-direction: column; gap: 0;
}
.villa-faq__item {
  border-bottom: 1px solid var(--border);
  padding: 16px 4px;
}
.villa-faq__item:last-child { border-bottom: none; }
.villa-faq__item summary {
  font-weight: 600; font-size: 15px;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; list-style: none;
  color: var(--ink);
}
.villa-faq__item summary::-webkit-details-marker { display: none; }
.villa-faq__item summary::after {
  content: '';
  width: 12px; height: 12px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
  flex-shrink: 0;
  margin-right: 4px;
}
.villa-faq__item[open] summary::after { transform: rotate(225deg); margin-top: 6px; }
.villa-faq__item p {
  margin-top: 12px;
  color: var(--smoke);
  font-size: 14px;
  line-height: 1.65;
}

/* ============ Share dropdown ============ */
.share-wrapper { position: relative; display: inline-block; }
.share-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px; min-width: 200px;
  z-index: 50; display: none;
}
.share-wrapper.open .share-dropdown {
  display: block;
  animation: shareIn .2s var(--ease-out);
}
@keyframes shareIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.share-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  width: 100%; text-align: left;
  font-size: 13px; font-weight: 500; color: var(--ink);
  background: transparent;
  border-radius: var(--radius-sm);
  transition: background .15s;
  cursor: pointer;
}
.share-item:hover { background: var(--cream); }
.share-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.share-item--wa svg { color: #25D366; }
.share-item--em svg { color: var(--terracotta); }
.share-item--tw svg { color: #1DA1F2; }
.share-item--link svg { color: var(--ink); }
.share-item--print svg { color: var(--smoke); }

/* ============ Review filter tabs ============ */
.reviews-filter {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px;
}
.reviews-filter button {
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--border);
  font-size: 12px; font-weight: 600;
  color: var(--ink);
  transition: all .2s;
}
.reviews-filter button:hover { border-color: var(--ink); }
.reviews-filter button.active {
  background: var(--ink); color: var(--ivory); border-color: var(--ink);
}
.reviews-filter button .count {
  margin-left: 4px; opacity: 0.6; font-weight: 500;
}
.reviews-filter button.active .count { opacity: 0.85; }

/* ============ Review with host reply ============ */
.review-card__reply {
  margin-top: 14px;
  margin-left: 52px;
  padding: 14px 16px;
  background: var(--cream);
  border-radius: var(--radius-md);
  position: relative;
}
.review-card__reply::before {
  content: '';
  position: absolute; left: -6px; top: 14px;
  width: 12px; height: 12px;
  background: var(--cream);
  transform: rotate(45deg);
}
.review-card__reply-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; color: var(--ink);
  margin-bottom: 6px;
}
.review-card__reply-head svg {
  width: 12px; height: 12px; color: var(--terracotta);
}
.review-card__reply-head .badge {
  background: var(--terracotta); color: #fff;
  font-size: 9px; padding: 2px 7px; border-radius: var(--radius-pill);
  letter-spacing: 0.06em;
}
.review-card__reply-text {
  font-size: 13px; color: var(--ink); line-height: 1.55;
}
.review-card__reply-date {
  font-size: 11px; color: var(--smoke); margin-top: 6px;
}

/* ============ Host other villas (cross-sell strip) ============ */
.host-other {
  display: flex; gap: 14px; overflow-x: auto;
  padding: 8px 0 18px; scrollbar-width: none;
  margin-top: 18px;
  max-width: 100%; min-width: 0;
}
.host-other::-webkit-scrollbar { display: none; }
.host-other__item {
  flex: 0 0 220px;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  transition: transform .25s var(--ease), box-shadow .2s;
  color: var(--ink);
  scroll-snap-align: start;
}
.host-other__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.host-other__item img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover;
}
.host-other__body {
  padding: 12px 14px;
}
.host-other__title {
  font-weight: 600; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.host-other__meta {
  font-size: 11px; color: var(--smoke); margin-top: 3px;
}
.host-other__price {
  font-size: 13px; font-weight: 700; margin-top: 8px;
}
.host-other__price span { font-size: 11px; color: var(--smoke); font-weight: 500; }

/* ============ Report (şikayet) link ============ */
.villa-report {
  text-align: center; padding: 24px 0 8px;
}
.villa-report button {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none;
  font-size: 13px; color: var(--smoke);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
  transition: color .2s;
}
.villa-report button:hover { color: var(--danger); }
.villa-report svg { width: 14px; height: 14px; }

/* ============ Mini calendar (villa detail) — PROFESSIONAL ============ */
.mini-cal {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 26px; margin-top: 20px;
}
.mini-cal__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 22px; flex-wrap: wrap; gap: 16px;
}
.mini-cal__head h4 {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.01em;
}
.mini-cal__head__summary {
  display: flex; gap: 28px;
  margin-top: 10px;
}
.mini-cal__head__summary > div {
  display: flex; flex-direction: column; gap: 2px;
}
.mini-cal__head__summary strong {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 500;
  line-height: 1; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.mini-cal__head__summary span {
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--smoke);
}

.mini-cal__head__nav {
  display: flex; gap: 6px;
  margin-left: auto;
}
.mini-cal__head__nav button {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border);
  display: grid; place-items: center;
  background: #fff;
  transition: border-color .2s, transform .15s;
}
.mini-cal__head__nav button:hover:not(:disabled) {
  border-color: var(--ink);
  transform: scale(1.05);
}
.mini-cal__head__nav button:disabled { opacity: 0.3; cursor: not-allowed; }

/* Months side-by-side */
.mini-cal__months {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 28px;
}
@media (max-width: 760px) {
  .mini-cal__months { grid-template-columns: 1fr; gap: 22px; }
}

.mini-cal__month-title {
  font-family: var(--font-display);
  font-size: 16px; font-weight: 500;
  text-align: center;
  margin-bottom: 4px;
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
}
.mini-cal__month-title small {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--terracotta);
}

/* New: cell grid uses bigger rectangles instead of round buttons */
.mini-cal__grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.mini-cal__head-row {
  font-size: 10px; font-weight: 700;
  text-align: center;
  color: var(--mute);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 0 4px;
}

/* Day cell — rectangle with date + small price */
.mini-cal__cell {
  position: relative;
  min-height: 58px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  padding: 6px 2px;
  border-radius: var(--radius-sm);
  background: var(--ivory);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s var(--ease);
  font-family: var(--font-body);
}
.mini-cal__cell--outside {
  background: transparent;
  cursor: default; pointer-events: none;
}
.mini-cal__cell--past {
  background: transparent;
  color: var(--mute);
  cursor: not-allowed;
  text-decoration: line-through;
}
.mini-cal__cell--booked {
  background: var(--ink);
  color: var(--ivory);
  cursor: not-allowed;
}
.mini-cal__cell--blocked {
  background: var(--sand);
  color: var(--mute);
  cursor: not-allowed;
  pointer-events: none;
}
.mini-cal__cell--available:hover {
  border-color: var(--ink);
  background: var(--cream);
  transform: scale(1.02);
}

/* Season tint backgrounds for available cells */
.mini-cal__cell--season-low.mini-cal__cell--available  { background: rgba(0, 168, 181, 0.06); }
.mini-cal__cell--season-mid.mini-cal__cell--available  { background: rgba(255, 201, 60, 0.10); }
.mini-cal__cell--season-high.mini-cal__cell--available { background: rgba(255, 90, 54, 0.14); }
.mini-cal__cell--season-peak.mini-cal__cell--available { background: rgba(255, 90, 54, 0.22); }

/* Selected range states */
.mini-cal__cell--in-range {
  background: var(--cream) !important;
  border-radius: 0;
}
.mini-cal__cell--start, .mini-cal__cell--end {
  background: var(--terracotta) !important;
  color: #fff !important;
  font-weight: 700;
  z-index: 2;
}
.mini-cal__cell--today {
  border-color: var(--ink);
  border-style: dashed;
  font-weight: 700;
}
.mini-cal__cell--today.mini-cal__cell--available { font-weight: 700; }

.mini-cal__cell__date {
  font-size: 14px; font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mini-cal__cell__price {
  font-size: 10px; font-weight: 600;
  color: var(--smoke);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mini-cal__cell--booked .mini-cal__cell__price,
.mini-cal__cell--blocked .mini-cal__cell__price { color: var(--mute); }
.mini-cal__cell--start .mini-cal__cell__price,
.mini-cal__cell--end .mini-cal__cell__price { color: rgba(255,255,255,0.8); }

/* Selection footer summary */
.mini-cal__selection {
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--cream);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.mini-cal__selection.empty { background: var(--ivory); border: 1px dashed var(--border); }
.mini-cal__selection__info { display: flex; gap: 18px; font-size: 13px; }
.mini-cal__selection__info > div { display: flex; flex-direction: column; gap: 2px; }
.mini-cal__selection__info span { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--smoke); }
.mini-cal__selection__info strong { font-size: 14px; font-weight: 600; color: var(--ink); }
.mini-cal__selection__total {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.01em;
}
.mini-cal__selection__clear {
  font-size: 12px; color: var(--terracotta);
  text-decoration: underline; text-underline-offset: 3px;
  background: transparent;
}

.mini-cal__legend {
  display: flex; gap: 18px; margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 11px; color: var(--smoke);
  flex-wrap: wrap;
}
.mini-cal__legend > div { display: inline-flex; align-items: center; gap: 6px; }
.mini-cal__legend .sw { width: 12px; height: 12px; border-radius: 3px; }
.mini-cal__legend .sw--av { background: var(--ivory); border: 1px solid var(--border); }
.mini-cal__legend .sw--bk { background: var(--ink); }
.mini-cal__legend .sw--peak { background: rgba(255, 90, 54, 0.22); }
.mini-cal__legend .sw--sel { background: var(--terracotta); }

/* ============ AI Concierge ============ */
.ai-fab {
  position: fixed; bottom: 24px; right: 24px;
  width: 60px; height: 60px; border-radius: 50%;
  background: linear-gradient(135deg, var(--terracotta), var(--sun));
  color: #fff; display: grid; place-items: center;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  transition: transform .3s var(--ease);
  cursor: pointer;
}
.ai-fab:hover { transform: scale(1.08) rotate(-6deg); }
.ai-fab svg { width: 28px; height: 28px; }
.ai-fab__pulse {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--terracotta); opacity: 0.6;
  animation: aiPulse 2.4s ease-out infinite;
  z-index: -1;
}
@keyframes aiPulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}
.ai-fab__badge {
  position: absolute; top: -2px; right: -2px;
  background: var(--ink); color: var(--sun);
  font-size: 10px; font-weight: 700;
  padding: 3px 6px; border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
}

.ai-panel {
  position: fixed; bottom: 100px; right: 24px;
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 140px));
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border: 1px solid var(--border);
  z-index: 49; display: none;
  flex-direction: column; overflow: hidden;
  animation: aiPanelIn .3s var(--ease-out);
}
.ai-panel.open { display: flex; }
@keyframes aiPanelIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); transform-origin: bottom right; }
  to   { opacity: 1; transform: none; }
}

.ai-panel__head {
  padding: 18px 20px; background: var(--ink); color: var(--ivory);
  display: flex; align-items: center; gap: 12px;
}
.ai-panel__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--terracotta), var(--sun));
  display: grid; place-items: center;
}
.ai-panel__avatar svg { width: 22px; height: 22px; color: #fff; }
.ai-panel__title { font-weight: 600; font-size: 14px; }
.ai-panel__status { font-size: 11px; color: var(--success); display: inline-flex; align-items: center; gap: 4px; }
.ai-panel__status::before { content:''; width: 6px; height: 6px; border-radius: 50%; background: var(--success); }
.ai-panel__close { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.1); display: grid; place-items: center; color: #fff; }
.ai-panel__close:hover { background: rgba(255,255,255,0.2); }
.ai-panel__close svg { width: 14px; height: 14px; }

.ai-panel__body {
  flex: 1; overflow-y: auto; padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--ivory);
}
.ai-msg { max-width: 80%; padding: 10px 14px; border-radius: var(--radius-md); font-size: 14px; line-height: 1.5; }
.ai-msg--bot { background: #fff; border: 1px solid var(--border); align-self: flex-start; border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 4px; }
.ai-msg--user { background: var(--ink); color: var(--ivory); align-self: flex-end; border-radius: var(--radius-md) var(--radius-md) 4px var(--radius-md); }
.ai-typing { display: inline-flex; gap: 4px; padding: 14px; }
.ai-typing span { width: 6px; height: 6px; background: var(--mute); border-radius: 50%; animation: aiBlink 1.2s infinite; }
.ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes aiBlink { 0%, 60%, 100% { opacity: 0.2; transform: scale(0.9); } 30% { opacity: 1; transform: scale(1.1); } }

.ai-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.ai-suggestions button {
  font-size: 12px; padding: 6px 12px; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--border); font-weight: 500; color: var(--ink);
  transition: all .2s;
}
.ai-suggestions button:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.ai-result-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; margin-top: 6px;
}
.ai-result-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.ai-result-card__body { padding: 12px 14px; }
.ai-result-card__title { font-weight: 600; font-size: 13px; }
.ai-result-card__meta { font-size: 11px; color: var(--smoke); margin-top: 2px; }
.ai-result-card__price { font-weight: 700; font-size: 13px; margin-top: 6px; }

.ai-panel__form {
  display: flex; gap: 8px; padding: 14px; border-top: 1px solid var(--border); background: #fff;
}
.ai-panel__form input {
  flex: 1; padding: 11px 14px; border: 1px solid var(--border);
  border-radius: var(--radius-pill); font-size: 13px;
}
.ai-panel__form input:focus { outline: none; border-color: var(--ink); }
.ai-panel__form button {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--terracotta); color: #fff; display: grid; place-items: center;
  transition: background .2s;
}
.ai-panel__form button:hover { background: var(--terracotta-700); }
.ai-panel__form button svg { width: 18px; height: 18px; }

@media (max-width: 600px) {
  .ai-panel { right: 16px; left: 16px; width: auto; bottom: 90px; }
  .ai-fab { bottom: 16px; right: 16px; width: 52px; height: 52px; }
}

/* ============ Skip to content (a11y) ============ */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--ivory);
  padding: 12px 18px; border-radius: 0 0 var(--radius-md) 0;
  z-index: 999; font-size: 14px; font-weight: 600;
}
.skip-link:focus { left: 0; }

/* Focus visible */
*:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible, .villa-card:focus-visible, .region-card:focus-visible, .mood-card:focus-visible {
  outline-offset: 4px;
}

/* ============ Season cards (short stay) ============ */
.season-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
@media (max-width: 1100px) { .season-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 560px)  { .season-grid { grid-template-columns: 1fr; gap: 18px; } }

.season-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  position: relative;
}
.season-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.season-card__head {
  padding: 22px 22px 18px;
  color: var(--ink);
  position: relative;
  background: linear-gradient(135deg, var(--cream), var(--sand));
  border-bottom: 1px solid var(--border);
}
/* Season gradients */
.season-card--may .season-card__head {
  background: linear-gradient(135deg, #F5E6E8 0%, #FAF0E6 100%);
}
.season-card--jun .season-card__head {
  background: linear-gradient(135deg, #FAE6C9 0%, #F5D6A8 100%);
}
.season-card--jul .season-card__head {
  background: linear-gradient(135deg, #FFB785 0%, #FF5A36 100%);
  color: #fff;
}
.season-card--aug .season-card__head {
  background: linear-gradient(135deg, #D9E5DC 0%, #C5D4C9 100%);
}

.season-card__icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.season-card--jul .season-card__icon {
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px);
}
.season-card__icon svg { width: 22px; height: 22px; }
.season-card--may .season-card__icon svg { color: #C28FA6; }
.season-card--jun .season-card__icon svg { color: #B8782A; }
.season-card--jul .season-card__icon svg { color: #fff; }
.season-card--aug .season-card__icon svg { color: #00A8B5; }

.season-card__month {
  font-family: var(--font-display);
  font-size: 22px; font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.season-card__sub {
  font-size: 12px; margin-top: 4px;
  opacity: 0.75; font-weight: 500;
}
.season-card--jul .season-card__sub { opacity: 0.9; }

.season-card__total {
  margin-top: 14px;
  display: flex; align-items: baseline; gap: 6px;
}
.season-card__total strong {
  font-family: var(--font-display);
  font-size: 38px; font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.season-card__total span {
  font-size: 13px; font-weight: 500; opacity: 0.7;
}

.season-card__badge {
  position: absolute; top: 22px; right: 22px;
  background: var(--ink); color: var(--sun);
  font-size: 10px; font-weight: 700;
  padding: 5px 10px; border-radius: var(--radius-pill);
  letter-spacing: 0.06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 4px;
}
.season-card__badge svg { width: 11px; height: 11px; }

.season-card__list {
  padding: 8px 12px 16px;
  display: flex; flex-direction: column;
}

.season-row {
  display: grid; grid-template-columns: 24px 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 11px 10px;
  border-radius: var(--radius-sm);
  transition: background .15s, padding .2s;
  color: var(--ink);
  position: relative;
}
.season-row + .season-row {
  border-top: 1px solid var(--border);
  border-radius: 0;
}
.season-row:first-child { margin-top: 0; }
.season-row:hover {
  background: var(--cream);
  padding-left: 14px;
}
.season-row__ic {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--smoke);
}
.season-row__ic svg { width: 18px; height: 18px; }
.season-row__label {
  font-size: 13px; font-weight: 500;
}
.season-row__count {
  font-size: 13px; font-weight: 700;
  color: var(--terracotta);
  font-variant-numeric: tabular-nums;
  min-width: 32px; text-align: right;
}
.season-row__arrow {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  color: var(--mute);
  transition: transform .2s, color .2s;
}
.season-row:hover .season-row__arrow {
  color: var(--ink);
  transform: translateX(3px);
}
.season-row__arrow svg { width: 14px; height: 14px; }

/* Popularity dot */
.season-row__dot {
  position: absolute; left: 4px; top: 50%;
  transform: translateY(-50%);
  width: 3px; border-radius: 999px;
  background: var(--terracotta);
}

/* Footer link */
.season-card__foot {
  margin-top: auto;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; color: var(--smoke);
}
.season-card__foot a {
  font-weight: 600; color: var(--ink);
  display: inline-flex; align-items: center; gap: 4px;
}
.season-card__foot a:hover { color: var(--terracotta); }
.season-card__foot a svg { width: 12px; height: 12px; transition: transform .2s; }
.season-card__foot a:hover svg { transform: translateX(2px); }

/* ============ Discover / Experiences ============ */
.discover-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 32px; padding-bottom: 0;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.discover-tabs::-webkit-scrollbar { display: none; }
.discover-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px;
  font-size: 13px; font-weight: 600;
  color: var(--smoke);
  border-bottom: 2px solid transparent;
  transition: all .2s var(--ease);
  white-space: nowrap;
  background: transparent;
  margin-bottom: -1px;
}
.discover-tab:hover { color: var(--ink); }
.discover-tab.active { color: var(--ink); border-bottom-color: var(--terracotta); }
.discover-tab__ic { width: 18px; height: 18px; }
.discover-tab__count {
  font-size: 11px; opacity: 0.5;
  font-weight: 500; margin-left: 2px;
}

/* Tek sıra, yatay kayan — bir seferde 3 görünür */
.discover-grid {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 12px;
  scroll-padding-inline: 4px;
}
.discover-grid::-webkit-scrollbar { display: none; }
.discover-grid > .exp-card {
  flex: 0 0 calc((100% - 56px) / 3);
  scroll-snap-align: start;
  min-width: 0;
}
@media (max-width: 1000px) {
  .discover-grid { gap: 22px; }
  .discover-grid > .exp-card { flex: 0 0 calc((100% - 22px) / 2); }
}
@media (max-width: 700px) {
  .discover-grid { gap: 18px; }
  .discover-grid > .exp-card { flex: 0 0 86%; }
}

.exp-card {
  display: block;
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
  color: var(--ink);
  position: relative;
}
.exp-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.exp-card__media {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
  background: var(--sand);
}
.exp-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease);
}
.exp-card:hover .exp-card__media img { transform: scale(1.06); }
.exp-card__media::after {
  content:''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent 50%);
}
.exp-card__cat {
  position: absolute; top: 14px; left: 14px;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(6px);
  padding: 6px 12px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700;
  color: var(--ink); letter-spacing: 0.04em;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
}
.exp-card__cat svg { width: 12px; height: 12px; }
.exp-card__region {
  position: absolute; bottom: 14px; left: 14px;
  color: #fff; z-index: 2;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 4px;
}
.exp-card__region svg { width: 12px; height: 12px; }

.exp-card__body {
  padding: 20px 22px 22px;
}
.exp-card__title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 500;
  line-height: 1.15; letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.exp-card__sub {
  font-size: 13px;
  color: var(--terracotta);
  font-weight: 500; font-style: italic;
  margin-bottom: 12px;
}
.exp-card__desc {
  font-size: 13.5px; line-height: 1.55;
  color: var(--smoke);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.exp-card__foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--smoke);
}
.exp-card__season {
  display: inline-flex; align-items: center; gap: 5px;
}
.exp-card__season svg { width: 12px; height: 12px; color: var(--terracotta); }
.exp-card__arrow {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%; border: 1px solid var(--border);
  color: var(--ink);
  transition: all .25s;
}
.exp-card:hover .exp-card__arrow {
  background: var(--ink); color: var(--ivory); border-color: var(--ink);
}
.exp-card__arrow svg { width: 12px; height: 12px; }

/* Discover hero summary (kesif page) */
.discover-hero { padding-block: 56px 8px; background: var(--cream); border-bottom: 1px solid var(--border); }
.discover-stats { display: flex; gap: 32px; margin-top: 22px; flex-wrap: wrap; }
.discover-stat { display: flex; flex-direction: column; gap: 2px; }
.discover-stat strong { font-family: var(--font-display); font-size: 26px; font-weight: 500; line-height: 1; }
.discover-stat span { font-size: 12px; color: var(--smoke); }

/* Region-filter chips (kesif page) */
.region-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.region-chip {
  padding: 8px 14px; border-radius: var(--radius-pill);
  background: #fff; border: 1px solid var(--border);
  font-size: 13px; font-weight: 500;
  transition: all .2s;
}
.region-chip:hover { border-color: var(--ink); }
.region-chip.active { background: var(--ink); color: var(--ivory); border-color: var(--ink); }

/* Bölge sayfasındaki deneyim listesi (4-up) */
.bolge-exp-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  margin-top: 24px;
}
@media (max-width: 700px) { .bolge-exp-grid { grid-template-columns: 1fr; } }
.bolge-exp {
  display: grid; grid-template-columns: 160px 1fr; gap: 18px;
  align-items: stretch;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden; background: #fff;
  transition: box-shadow .2s, transform .25s var(--ease);
  color: var(--ink);
}
.bolge-exp:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.bolge-exp__media { position: relative; overflow: hidden; background: var(--sand); }
.bolge-exp__media img { width: 100%; height: 100%; object-fit: cover; }
.bolge-exp__body { padding: 14px 16px 14px 0; display: flex; flex-direction: column; gap: 4px; }
.bolge-exp__cat {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 700;
}
.bolge-exp__title { font-weight: 600; font-size: 15px; }
.bolge-exp__sub { font-size: 12px; color: var(--smoke); margin-bottom: 4px; }
.bolge-exp__desc { font-size: 12px; color: var(--smoke); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ============ Responsive polish — eksik mobile nüansları ============ */

/* === <960px : tablet/laptop küçük === */
@media (max-width: 960px) {
  /* Detail head — başlık + actions alta */
  .detail-head__top { flex-direction: column; align-items: flex-start; gap: 16px; }
  .detail-head__actions { width: 100%; justify-content: flex-end; }
  /* Share dropdown ekran taşmasın */
  .share-dropdown { right: 0; left: auto; min-width: 180px; }
}

/* === <800px : tablet === */
@media (max-width: 800px) {
  /* Hero — copy yan yana stat sıkışmasın */
  .hero__stats { gap: 18px; flex-wrap: wrap; }
  /* Liste sayfası toolbar mobile */
  .list-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
  .list-toolbar__actions { justify-content: space-between; }
  /* List hero title */
  .list-hero__title { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* Discover hero stats wrap */
  .discover-stats { gap: 18px; }
  /* Container daha sıkı padding */
  .section { padding-block: 56px; }
}

/* === <700px : mobile büyük === */
@media (max-width: 700px) {
  /* Genel container padding daha az */
  .container { padding-inline: 16px; }
  /* Detay sayfası head küçült */
  .detail-head__title h1 { font-size: clamp(1.4rem, 5vw, 1.9rem); }
  .detail-head__meta { gap: 8px 12px; flex-wrap: wrap; font-size: 13px; }
  /* Hero badges 1 satır olmasın */
  .hero-badges { gap: 6px; }
  .hero-badge { padding: 5px 10px; font-size: 11px; }
  /* Detay actions kompakt */
  .icon-btn { padding: 7px 12px; font-size: 12px; }
  .icon-btn svg { width: 12px; height: 12px; }
  /* Section nav — fade gradient'ler mobile'da görünür olsun */
  .section-nav { margin: 0 -16px; padding: 0 16px; }
  /* Why points padding */
  .why-point { padding: 22px 18px 26px; }
  /* Why kpi value küçük */
  .why-kpi__value { font-size: 2rem; }
  /* Footer padding */
  .site-footer { padding-block: 56px 24px; }
  /* Detail-bottom section padding */
  .detail-bottom .detail-section { padding-block: 24px; }
  /* Booking summary smaller */
  .booking-summary { font-size: 13px; }
  /* Mini cal cell smaller */
  .mini-cal__cell { min-height: 50px; }
  .mini-cal__cell__date { font-size: 13px; }
  .mini-cal__cell__price { font-size: 9px; }
  .mini-cal { padding: 18px; }
  /* AI panel sınırlandır */
  .ai-panel { height: 480px; }
  /* Compare bar küçült */
  .compare-bar { padding: 8px 10px 8px 16px; font-size: 12px; }
  .compare-bar a { padding: 6px 12px; font-size: 12px; }
  /* Reviews filter wrap */
  .reviews-filter { gap: 6px; }
  .reviews-filter button { padding: 6px 12px; font-size: 11px; }
  /* Compare table — yatay scroll'a hazır */
  .compare-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Discover-hero başlık */
  .discover-hero { padding-block: 36px 8px; }
  .discover-hero h1 { font-size: clamp(1.6rem, 6vw, 2.4rem) !important; }
}

/* === <560px : mobile === */
@media (max-width: 560px) {
  /* Hero search bar inputs daha kompakt */
  .search-bar { padding: 10px; gap: 4px; }
  /* Hero başlığı sığsın */
  .hero__copy h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .hero__copy p { font-size: 14px; }
  /* Detay layout gap azalt */
  .detail-top { gap: 24px; padding-block: 24px 100px; }
  .detail-bottom { padding-bottom: 60px; }
  /* Gallery küçük ekranda 1 görsel */
  .gallery { margin-top: 14px; height: 280px; }
  /* Booking card mobile bar tutarlı padding */
  .booking-card { padding: 12px 16px !important; }
  .booking-card__price strong { font-size: 16px !important; }
  /* Site header inner */
  .site-header__inner { padding-block: 12px; gap: 12px; }
  .brand { font-size: 20px; }
  .brand__mark { width: 32px; height: 32px; }
  /* Footer grid mobile */
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  /* Pagination küçük */
  .pagination button { width: 32px; height: 32px; font-size: 12px; }
  /* Page hero image height */
  .page-hero--image { height: 50vh; min-height: 340px; }
  .page-hero { padding-block: 40px 28px; }
  .page-hero h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  /* Prose mobile */
  .prose { padding-block: 36px; }
  .prose h2 { font-size: 22px; margin-top: 28px; }
  .prose p { font-size: 15px; }
  /* Wizard side */
  .wizard-main { padding: 28px 18px; }
  /* Auth form mobile */
  .auth-shell__form { padding: 32px 18px; }
  .auth-form h1 { font-size: 24px; }
  /* Reviews — host reply margin */
  .review-card__reply { margin-left: 12px; }
}

/* === <420px : küçük mobile === */
@media (max-width: 420px) {
  /* Hero stats 2 sütun */
  .hero__stats { gap: 14px 22px; }
  .hero__stat strong { font-size: 20px; }
  /* Footer grid tek sütun */
  .site-footer__grid { grid-template-columns: 1fr; }
  /* Compare table — minimum genişlik */
  .compare-table > * { min-width: 700px; }
  /* Host other item daha dar */
  .host-other__item { flex-basis: 180px; }
  /* Bedroom card padding */
  .bedroom-card__head, .bedroom-card__body { padding: 12px 14px; }
  /* Amen cat padding */
  .amen-cat { padding: 18px 16px; }
  /* Rules group padding */
  .rules-group { padding: 18px 16px; }
  /* Season pricing daha kompakt */
  .season-pricing__row { padding: 12px 14px; }
  .season-pricing__price { font-size: 18px; }
  /* Cancel tier */
  .cancel-tier { padding: 14px; }
  .cancel-tier__refund { font-size: 24px; }
  /* Map height en az */
  .map-wrap { height: 240px; }
  /* AI fab daha küçük */
  .ai-fab { width: 48px; height: 48px; bottom: 14px; right: 14px; }
  .ai-fab svg { width: 22px; height: 22px; }
  /* Back to top */
  .back-to-top { bottom: 70px; width: 38px; height: 38px; }
}

/* === Touch optimizasyonu === */
@media (hover: none) and (pointer: coarse) {
  /* Hover etkileri touch'ta yanlış davranabilir — disable */
  .villa-card:hover { transform: none; }
  .region-card:hover { transform: none; }
  .mood-card:hover img { transform: none; }
  .stay-card:hover { transform: none; box-shadow: none; }
  .exp-card:hover { transform: none; }
  .nearby-card:hover { transform: none; }
  .amen-cat:hover, .bedroom-card:hover, .season-pricing__row:hover { transform: none; }
  /* Tap target en az 44x44 */
  .nav-toggle, .icon-btn, .btn-icon { min-width: 40px; min-height: 40px; }
}

/* === Print stilleri === */
@media print {
  .site-header, .site-footer, .ai-fab, .ai-panel,
  .back-to-top, .compare-bar, .toast-container,
  .section-nav, .villa-report, .booking-card__cta,
  .booking-card__form, .booking-summary, .booking-card__trust { display: none !important; }
  body { background: #fff; color: #000; }
  .detail-top { grid-template-columns: 1fr; }
  .booking-card { display: none; }
  .detail-section { page-break-inside: avoid; }
}

/* ============ Utility ============ */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.hidden { display: none !important; }
.text-sm { font-size: 13px; } .text-xs { font-size: 12px; }
.fade-in { animation: fadeIn .6s var(--ease) backwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }