/* ============================================================
   TURC GLOBAL REAL ESTATE — design system
   Dark luxury: charcoal surfaces, brand red accent, serif display
   ============================================================ */

/* ---------- Self-hosted fonts ----------
   No third-party font requests: the KVKK page promises the site loads nothing
   from third parties, and Google Fonts would leak visitor IPs. Variable weight
   axes; latin-ext carries the Turkish ğ ı İ ş glyphs. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url(/assets/fonts/cormorant-garamond-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #0c0d0f;
  --bg-2: #121316;
  --bg-3: #191b1f;
  --line: #26282e;
  --line-soft: #1e2025;
  --text: #eceae6;
  --text-2: #b4b2ad;
  /* Lightened from #807e79: that failed WCAG AA (4.25:1) against --bg-3, which
     is the surface most muted text actually sits on. Now 4.9:1. */
  --text-3: #8b8983;
  --red: #d21f26;
  --red-hover: #e02a31;
  /* Brand red is only 3.7:1 on charcoal — too low for the small bold text that
     uses it (eyebrows, meta labels, inline links). --red-text is the readable
     tint; --red stays for fills, rules and icons. */
  --red-text: #f0555c;
  --red-soft: rgba(210, 31, 38, 0.12);
  --wa: #128040;
  --wa-hover: #0f6e37;
  --focus: #8ecdff;
  --white: #ffffff;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", -apple-system, "Segoe UI", sans-serif;
  --radius: 14px;
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7);
  --container: 1200px;
  --header-h: 76px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* One visible focus ring for every interactive element. Previously nothing in
   the stylesheet styled focus and form fields explicitly removed the outline,
   which left keyboard users with no indication of position at all. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
:where(.btn, .nav-cta, .filter-bar button):focus-visible { outline-offset: 4px; }

/* scrollbar-gutter keeps the layout still when the nav or lightbox locks
   body scrolling — without it the page jumps by the scrollbar width. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--red); color: #fff; padding: 10px 18px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Typography ---------- */

h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--white);
}

h1 { font-size: clamp(2.5rem, 5.5vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
h3 { font-size: 1.35rem; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-text);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before { content: ""; width: 34px; height: 2px; background: var(--red); }
.eyebrow.centered { justify-content: center; }
.eyebrow.centered::after { content: ""; width: 34px; height: 2px; background: var(--red); }

.lead { font-size: 1.13rem; color: var(--text-2); max-width: 64ch; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.22s ease;
  white-space: nowrap;
}
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-hover); transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(210, 31, 38, 0.55); }
.btn-ghost { border-color: rgba(255, 255, 255, 0.25); color: var(--white); background: transparent; }
.btn-ghost:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.06); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-hover); transform: translateY(-2px); }
.btn-lg { padding: 18px 38px; font-size: 1.02rem; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(12, 13, 15, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--header-h); gap: 24px;
}

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-mark svg { width: 30px; height: 26px; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.08; }
.brand-name {
  font-family: var(--sans); font-weight: 800; font-size: 1.02rem;
  letter-spacing: 0.06em; color: var(--white);
}
.brand-sub {
  font-family: var(--sans); font-weight: 500; font-size: 0.62rem;
  letter-spacing: 0.42em; color: var(--text-2);
  border-top: 1.5px solid var(--red);
  padding-top: 3px; margin-top: 3px;
}

.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav a {
  font-size: 0.88rem; font-weight: 600; color: var(--text-2);
  transition: color 0.18s ease;
  padding: 6px 0;
  white-space: nowrap;
}
.main-nav a:hover, .main-nav a.active { color: var(--white); }
.main-nav a.active { box-shadow: 0 2px 0 var(--red); }
.main-nav .nav-cta {
  color: #fff; background: var(--red);
  padding: 10px 20px; border-radius: 999px;
  box-shadow: none;
}
.main-nav .nav-cta:hover { background: var(--red-hover); }

/* Dar masaüstü genişliklerinde menü tek satırda kalsın */
@media (max-width: 1400px) {
  .main-nav { gap: 17px; }
  .main-nav a { font-size: 0.83rem; }
  .main-nav .nav-cta { padding: 10px 15px; }
}

.header-right { display: flex; align-items: center; gap: 14px; }
.lang-switch {
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 7px 12px; color: var(--text-2);
  transition: all 0.18s ease;
}
.lang-switch:hover { color: var(--white); border-color: var(--text-3); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--white);
  margin: 5px 0; transition: 0.25s;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: flex; align-items: center;
  overflow: hidden;
}
.hero-media, .hero-media video, .hero-media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(12, 13, 15, 0.92) 0%, rgba(12, 13, 15, 0.55) 55%, rgba(12, 13, 15, 0.35) 100%),
    linear-gradient(to top, var(--bg) 0%, transparent 32%);
}
.hero-content { position: relative; z-index: 2; padding: 90px 0; max-width: 720px; }
.hero-content h1 em { font-style: italic; color: var(--red-hover); }
.hero-content .lead { margin: 26px 0 38px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-strip {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  margin-top: auto;
}

/* ---------- Stats ---------- */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 34px 0; }
.stat .stat-num {
  font-family: var(--serif); font-size: 2.4rem; font-weight: 600; color: var(--white);
  line-height: 1;
}
.stat .stat-num small { color: var(--red); font-size: 2.4rem; }
.stat .stat-label { font-size: 0.82rem; color: var(--text-3); margin-top: 8px; letter-spacing: 0.04em; }

/* ---------- Sections ---------- */

.section { padding: 110px 0; }
.section-tight { padding: 70px 0; }
.section-dark { background: var(--bg-2); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.section-head { max-width: 680px; margin-bottom: 56px; }
.section-head.centered { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { margin-top: 16px; color: var(--text-2); }

/* ---------- Cards / grids ---------- */

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

.card {
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 36px 30px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--line); }
.card h3 { margin: 18px 0 10px; }
.card p { color: var(--text-2); font-size: 0.95rem; }
.card-icon {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--red-soft); color: var(--red-text);
  display: flex; align-items: center; justify-content: center;
}
.card-icon svg { width: 26px; height: 26px; }

/* ---------- Listing cards ---------- */

.listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.listing-card {
  background: var(--bg-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.listing-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--line); }

.listing-card-media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; }
.listing-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.listing-card:hover .listing-card-media img { transform: scale(1.06); }

.badge {
  position: absolute; top: 14px; left: 14px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px;
}
.badge-kiralik { background: rgba(210, 31, 38, 0.92); color: #fff; }
.badge-satilik { background: rgba(255, 255, 255, 0.92); color: #111; }

.listing-card-body { padding: 22px 22px 24px; }
.listing-card-loc {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red-text); margin-bottom: 8px;
}
.listing-card-title { font-size: 1.22rem; }
.listing-card-title a:hover { color: var(--red-text); }
.listing-card-specs { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 16px; }
.listing-card-specs span {
  font-size: 0.8rem; color: var(--text-2);
  background: var(--bg-2); border: 1px solid var(--line-soft);
  padding: 4px 12px; border-radius: 999px;
}
.listing-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line-soft); padding-top: 16px;
}
.listing-card-price { font-family: var(--serif); font-size: 1.45rem; font-weight: 700; color: var(--white); }
.listing-card-price small { font-family: var(--sans); font-size: 0.8rem; color: var(--text-3); font-weight: 500; }
.listing-card-more { font-size: 0.85rem; font-weight: 700; color: var(--text-2); transition: color 0.18s; }
.listing-card-more:hover { color: var(--red-text); }

/* ---------- Steps (how it works) ---------- */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: step; }
.step { position: relative; padding: 30px 26px; background: var(--bg-3); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--serif); font-size: 3rem; font-weight: 700; font-style: italic;
  color: transparent;
  -webkit-text-stroke: 1px var(--red);
  display: block; line-height: 1; margin-bottom: 16px;
}
.step h3 { font-size: 1.15rem; margin-bottom: 8px; }
.step p { font-size: 0.92rem; color: var(--text-2); }

/* ---------- Owner banner ---------- */

.owner-banner {
  background: linear-gradient(120deg, #17181c 0%, #1d1315 60%, #241012 100%);
  border-top: 1px solid var(--line-soft);
  padding: 72px 0;
}
.owner-banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.owner-banner h2 { max-width: 560px; font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.owner-banner p { color: var(--text-2); margin-top: 12px; max-width: 560px; }
.owner-banner-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Footer ---------- */

.site-footer { background: #0a0b0c; border-top: 1px solid var(--line-soft); padding: 70px 0 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 54px; }
.footer-brand p { color: var(--text-3); font-size: 0.92rem; margin-top: 18px; max-width: 34ch; }
.footer-meta { font-size: 0.85rem; }
.footer-col h2 {
  font-family: var(--sans); font-size: 0.8rem; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-2);
  margin-bottom: 20px;
}
.footer-col ul .footer-plain { color: var(--text-3); font-size: 0.94rem; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul a { color: var(--text-3); font-size: 0.94rem; transition: color 0.18s; }
.footer-col ul a:hover { color: var(--white); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid var(--line-soft);
  padding-top: 26px; padding-bottom: 26px;
}
.footer-bottom p, .footer-bottom a { font-size: 0.82rem; color: var(--text-3); }
.footer-bottom a:hover { color: var(--white); }

/* ---------- WhatsApp float ---------- */

.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--wa); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px -8px rgba(18, 128, 64, 0.7);
  transition: transform 0.2s ease;
}
.wa-float:hover { transform: scale(1.08); }

/* ---------- Page hero (inner pages) ---------- */

.page-hero { padding: 90px 0 60px; border-bottom: 1px solid var(--line-soft); }
.page-hero .lead { margin-top: 18px; }
.breadcrumbs { font-size: 0.8rem; color: var(--text-3); margin-bottom: 22px; }
/* The global `a { text-decoration: none }` left breadcrumb links visually
   identical to the plain-text final crumb until hover — a WCAG 2.2 SC 1.4.1
   failure (colour alone distinguishing a link) on essentially every page.
   Article body links already carry an underline, so this matches. */
.breadcrumbs a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(139, 137, 131, 0.5); }
.breadcrumbs a:hover { color: var(--white); text-decoration-color: currentColor; }

/* ---------- Listing detail ---------- */

.gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; margin: 46px 0; }
.gallery-main { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; }
.gallery-side { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; }
.gallery-side .gallery-thumb { border-radius: var(--radius); overflow: hidden; position: relative; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; transition: transform 0.4s; }
.gallery-thumb:hover img { transform: scale(1.05); }
.gallery-more {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 1.1rem; cursor: pointer;
}

.detail-grid { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
.detail-body h2 { font-size: 1.6rem; margin: 40px 0 16px; }
.detail-body p { color: var(--text-2); margin-bottom: 16px; }

.spec-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.spec-table td { padding: 13px 4px; border-bottom: 1px solid var(--line-soft); font-size: 0.94rem; }
.spec-table td:first-child { color: var(--text-3); width: 45%; }
.spec-table td:last-child { color: var(--text); font-weight: 600; }

.feature-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.feature-tags span {
  background: var(--bg-3); border: 1px solid var(--line-soft);
  padding: 8px 16px; border-radius: 999px; font-size: 0.86rem; color: var(--text-2);
}

.detail-cta {
  position: sticky; top: calc(var(--header-h) + 20px);
  background: var(--bg-3); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px;
}
.detail-cta .price { font-family: var(--serif); font-size: 2.2rem; font-weight: 700; color: var(--white); }
.detail-cta .price small { font-family: var(--sans); font-size: 0.85rem; color: var(--text-3); font-weight: 500; }
.detail-cta .btn { width: 100%; margin-top: 14px; }
.detail-cta .cta-note { font-size: 0.8rem; color: var(--text-3); margin-top: 16px; text-align: center; }

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(5, 5, 6, 0.96);
  display: none; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.lightbox button {
  position: absolute; background: none; border: 0; color: #fff; cursor: pointer;
  font-size: 2rem; opacity: 0.7; transition: opacity 0.2s; padding: 20px;
}
.lightbox button:hover { opacity: 1; }
.lb-close { top: 12px; right: 16px; }
.lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: var(--text-2); font-size: 0.85rem; }

/* ---------- Filters ---------- */

.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin: 40px 0; }
.filter-bar button {
  background: var(--bg-3); border: 1px solid var(--line-soft); color: var(--text-2);
  padding: 11px 22px; min-height: 44px; border-radius: 999px; font-family: var(--sans);
  font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: all 0.18s;
}
.filter-bar button:hover { color: var(--white); border-color: var(--line); }
.filter-bar button.active { background: var(--red); border-color: var(--red); color: #fff; }

/* ---------- Blog ---------- */

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.post-card {
  background: var(--bg-3); border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
/* Same trap as .gallery-grid below: the `display: flex` above is an author rule
   and beat the user-agent `[hidden] { display: none }`, so the category filter
   on /blog/ and /en/guide/ only ever updated the "N yazı gösteriliyor" counter
   while every article stayed on screen. */
.post-card[hidden] { display: none; }
.post-card:hover { transform: translateY(-4px); border-color: var(--line); }
.post-card-media { aspect-ratio: 16 / 9; overflow: hidden; }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.post-card:hover .post-card-media img { transform: scale(1.05); }
.post-card-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.post-card-meta { font-size: 0.78rem; color: var(--text-3); margin-bottom: 10px; display: flex; gap: 10px; }
.post-card-meta .cat { color: var(--red-text); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.post-card h3 { font-size: 1.18rem; line-height: 1.3; }
.post-card h3 a:hover { color: var(--red-text); }
.post-card p { font-size: 0.9rem; color: var(--text-2); margin-top: 10px; flex: 1; }

.article { max-width: 760px; margin: 0 auto; padding: 70px 24px 90px; }
.article-header { margin-bottom: 40px; }
.article-header .post-card-meta { font-size: 0.85rem; }
.article-header h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 14px 0 18px; }
.article-hero { border-radius: var(--radius); overflow: hidden; margin: 36px 0; aspect-ratio: 16/8; }
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.article-body h2 { font-size: 1.7rem; margin: 44px 0 16px; }
.article-body h3 { font-size: 1.25rem; margin: 32px 0 12px; }
.article-body p { color: var(--text-2); margin-bottom: 18px; font-size: 1.02rem; }
.article-body ul, .article-body ol { margin: 0 0 18px 22px; color: var(--text-2); }
.article-body ul { list-style: disc; }
.article-body li { margin-bottom: 8px; }
.article-body strong { color: var(--text); }
.article-body a { color: var(--red-text); text-decoration: underline; text-underline-offset: 3px; }
.article-body blockquote {
  border-left: 3px solid var(--red); padding: 6px 0 6px 22px; margin: 26px 0;
  font-family: var(--serif); font-size: 1.25rem; font-style: italic; color: var(--text);
}
.article-body table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.92rem; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; }
.article-body th { background: var(--bg-3); color: var(--text); }
.article-body td { color: var(--text-2); }

/* ---------- Forms ---------- */

.form-card {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 40px;
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.85rem; font-weight: 700; color: var(--text-2); }
.form-field input, .form-field select, .form-field textarea {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; color: var(--text); font-family: var(--sans); font-size: 0.95rem;
  transition: border-color 0.18s;
  -webkit-appearance: none; appearance: none;
  width: 100%; min-width: 0;
  text-overflow: ellipsis;
}
.form-field select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23807e79' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--red); }
.form-note { font-size: 0.8rem; color: var(--text-3); margin-top: 16px; }

/* ---------- Calculator ---------- */

.calc-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
.calc-result {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 36px; position: sticky; top: calc(var(--header-h) + 20px);
}
.calc-result h3 { font-size: 1rem; font-family: var(--sans); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); margin-bottom: 24px; }
.calc-row { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line-soft); }
.calc-row span:first-child { color: var(--text-3); font-size: 0.9rem; }
.calc-row span:last-child { font-weight: 700; color: var(--text); }
.calc-row.calc-big span:last-child { font-family: var(--serif); font-size: 1.9rem; color: var(--red-text); }
.calc-hint { font-size: 0.8rem; color: var(--text-3); margin-top: 18px; line-height: 1.6; }
.range-out { font-weight: 800; color: var(--red-text); }

/* Tools index: both calculators stacked on one page */
.tool-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.tool-jump a {
  padding: 10px 20px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.88rem; font-weight: 700; color: var(--text-2);
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.tool-jump a:hover { border-color: var(--red); color: var(--text); background: var(--red-soft); }
.tool-block { scroll-margin-top: calc(var(--header-h) + 8px); }
.tool-block + .tool-block { border-top: 1px solid var(--line-soft); }
.tool-head { max-width: 760px; margin-bottom: 30px; }
.tool-head h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.tool-head p { color: var(--text-2); margin-top: 12px; }
.tool-head .tool-link {
  display: inline-block; margin-top: 14px; font-size: 0.85rem; font-weight: 700;
  color: var(--red-text);
}
.tool-head .tool-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- FAQ ---------- */

.faq details {
  border: 1px solid var(--line-soft); border-radius: 12px; background: var(--bg-3);
  margin-bottom: 12px; overflow: hidden;
}
.faq summary {
  cursor: pointer; padding: 20px 24px; font-weight: 700; color: var(--text);
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; color: var(--red-text); flex-shrink: 0; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 24px 20px; color: var(--text-2); font-size: 0.95rem; }

/* ---------- Reveal animation ---------- */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card:hover, .listing-card:hover, .post-card:hover, .btn:hover, .wa-float:hover { transform: none; }
}

/* Without JS the reveal class would leave every card permanently invisible. */
.no-js .reveal { opacity: 1; transform: none; }
/* Without JavaScript there is no toggle to press, so show every photo and hide
   the control that would do nothing. Mirrors the .reveal fallback above. */
.no-js .gallery-grid[hidden] { display: grid; }
.no-js .gallery-toggle { display: none; }

/* ---------- Utility ---------- */

.center { text-align: center; }
.mt-40 { margin-top: 40px; }
.mt-60 { margin-top: 60px; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .main-nav { display: none; }
  .nav-toggle { display: block; }
  .main-nav.open {
    display: flex; flex-direction: column; align-items: flex-start;
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    background: var(--bg); padding: 34px 28px; gap: 8px;
    overflow-y: auto; z-index: 99;
  }
  .main-nav.open a { font-size: 1.25rem; padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line-soft); }
  .main-nav.open .nav-cta { text-align: center; margin-top: 18px; border: 0; }
  .listing-grid, .grid-3, .post-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-cta { position: static; }
  .calc-wrap { grid-template-columns: 1fr; }
  .calc-result { position: static; }
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .section { padding: 70px 0; }
  .listing-grid, .grid-3, .grid-2, .post-grid, .steps { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; gap: 36px; }
  .gallery { grid-template-columns: 1fr; }
  .gallery-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-card { padding: 26px 20px; }
  .calc-result { padding: 26px 20px; }
  .hero-content { padding: 70px 0; }
  .owner-banner-inner { flex-direction: column; align-items: flex-start; }
}


/* ============================================================
   Area (district) landing pages
   ============================================================ */

.area-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
.area-aside { display: grid; gap: 18px; position: sticky; top: calc(var(--header-h) + 20px); }
.area-aside .card { padding: 26px 24px; }
.area-aside .card h3 { font-size: 1.1rem; }
.card-accent { border-color: var(--line); background: linear-gradient(150deg, var(--bg-3) 0%, #201316 100%); }

.tick-list { display: grid; gap: 10px; margin-top: 14px; }
.tick-list li {
  position: relative; padding-left: 26px;
  font-size: 0.92rem; color: var(--text-2); line-height: 1.5;
}
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 12px; height: 2px; background: var(--red);
}

.area-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.area-link {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px 22px; border-radius: var(--radius);
  background: var(--bg-3); border: 1px solid var(--line-soft);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.area-link:hover { border-color: var(--line); transform: translateY(-3px); }
.area-link strong { font-size: 1.05rem; color: var(--white); }
.area-link span { font-size: 0.84rem; color: var(--text-3); }

/* ============================================================
   Listing gallery — every photo is real markup, not just JSON
   ============================================================ */

.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin-top: 12px;
}
/* `display: grid` above is an author rule, so it beat the user-agent
   `[hidden] { display: none }` — which meant the hidden attribute never hid
   this grid and the "show all photos" toggle was a visual no-op: every listing
   painted all 14 thumbnails, always. This rule is what makes the toggle work. */
.gallery-grid[hidden] { display: none; }
.gallery-grid button {
  display: block; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 10px; overflow: hidden; aspect-ratio: 3 / 2;
  transition: transform 0.25s ease;
}
.gallery-grid button:hover { transform: translateY(-3px); }
.gallery-grid img, .gallery-grid picture { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-toggle { margin-top: 18px; }

.gallery-main button, .gallery-thumb button {
  display: block; width: 100%; height: 100%; padding: 0; border: 0;
  background: none; cursor: pointer;
}
.gallery-main picture, .gallery-thumb picture { display: block; width: 100%; height: 100%; }

/* ============================================================
   Lightbox (dialog semantics + bigger hit areas)
   ============================================================ */

.lightbox button { min-width: 56px; min-height: 56px; }
.lightbox figcaption {
  position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%);
  max-width: 80vw; text-align: center; color: var(--text-2); font-size: 0.9rem;
}

/* ============================================================
   Portfolio toolbar
   ============================================================ */

.filter-toolbar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin: 40px 0 8px;
}
.filter-toolbar .filter-bar { margin: 0; flex: 1 1 460px; }
.filter-sort { display: flex; align-items: center; gap: 10px; }
.filter-sort label { font-size: 0.82rem; font-weight: 700; color: var(--text-3); white-space: nowrap; }
.filter-sort select {
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 999px;
  color: var(--text); font-family: var(--sans); font-size: 0.88rem; font-weight: 600;
  padding: 11px 40px 11px 18px; min-height: 44px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238b8983' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.filter-status { font-size: 0.86rem; color: var(--text-3); margin-bottom: 28px; }
.filter-empty {
  display: none; padding: 46px 30px; text-align: center;
  border: 1px dashed var(--line); border-radius: var(--radius); color: var(--text-2);
}
.filter-empty.show { display: block; }
.filter-empty p { max-width: 52ch; margin: 0 auto 22px; }

/* ============================================================
   Sticky mobile CTA (listing detail)
   ============================================================ */

.sticky-cta { display: none; }
@media (max-width: 900px) {
  .sticky-cta {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(12, 13, 15, 0.94);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
  }
  .sticky-cta .sticky-price {
    font-family: var(--serif); font-size: 1.25rem; font-weight: 700;
    color: var(--white); line-height: 1.1; flex-shrink: 0;
  }
  .sticky-cta .sticky-price small { font-family: var(--sans); font-size: 0.72rem; color: var(--text-3); display: block; font-weight: 500; }
  .sticky-cta .btn { flex: 1; padding: 13px 18px; min-height: 48px; }
  /* Keep the floating button clear of the bar. */
  body.has-sticky-cta .wa-float { bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.has-sticky-cta { padding-bottom: 76px; }
}

/* ============================================================
   End-of-article conversion block
   ============================================================ */

.article-cta {
  margin: 56px 0 0; padding: 34px 32px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(140deg, var(--bg-3) 0%, #211316 100%);
}
.article-cta h2 { font-size: 1.5rem; margin: 0 0 12px; }
.article-cta p { color: var(--text-2); margin-bottom: 22px; }
.article-cta .article-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.article-related { margin-top: 56px; }
.article-related h2 { font-size: 1.4rem; margin-bottom: 20px; }
.article-related ul { display: grid; gap: 12px; }
.article-related a { color: var(--text-2); font-weight: 600; }
.article-related a:hover { color: var(--red-text); }

/* ============================================================
   Visually-hidden helper (live regions, extra link context)
   ============================================================ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 1080px) {
  .area-grid { grid-template-columns: 1fr; }
  .area-aside { position: static; }
}

@media (max-width: 680px) {
  .article-cta { padding: 26px 22px; }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}