/* ==========================================================================
   HALVORSEN & REEVE — site stilleri
   --------------------------------------------------------------------------
     01  Header + mobil menu
     02  Hero
     03  Sayfa basligi
     04  Rakamlar seridi
     05  Mulk kartlari
     06  Filtre cubugu
     07  Acik bolum
     08  Hizmetler / sureç
     09  Ekip (monogram)
     10  Referanslar
     11  Form
     12  CTA
     13  Footer
     14  Ortak
   ========================================================================== */

/* ==========================================================================
   01  HEADER
   ========================================================================== */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  padding-block: var(--s-5);
  transition:
    padding-block var(--dur-base) var(--ease-out-quart),
    background-color var(--dur-base) var(--ease-out-quart),
    border-color var(--dur-base) var(--ease-out-quart);
  border-bottom: 1px solid transparent;
}

.header.is-scrolled {
  padding-block: var(--s-3);
  background-color: color-mix(in srgb, var(--c-bg) 92%, transparent);
  backdrop-filter: blur(16px);
  border-bottom-color: var(--c-border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  width: 100%;
  max-width: var(--width-wide);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.header__logo {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.header__logo span { color: var(--c-accent); }

.header__nav {
  display: flex;
  gap: var(--s-7);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.header__cta { padding: var(--s-3) var(--s-5); }

.burger {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  color: inherit;
}

.burger span {
  position: absolute;
  left: 11px;
  width: 22px; height: 1px;
  background-color: currentColor;
  transition: transform var(--dur-base) var(--ease-in-out-quart);
}

.burger span:nth-child(1) { top: 19px; }
.burger span:nth-child(2) { top: 25px; }
.burger.is-open span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger.is-open span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 61.99rem) {
  .header__nav, .header__cta { display: none; }
  .burger { display: block; }
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-8);
  padding: var(--s-8) var(--space-gutter);
  background-color: var(--c-surface);
  transform: translateX(100%);
}

.mobile-menu[hidden] { display: none; }

.mobile-menu__nav {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.mobile-menu__nav a {
  display: flex;
  align-items: baseline;
  gap: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
}

.mobile-menu__nav span {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  color: var(--c-accent);
}

.mobile-menu__foot {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* ==========================================================================
   02  HERO
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding: var(--s-10) var(--space-gutter) var(--s-8);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: -10% 0 -10% 0;
  z-index: -2;
}

.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(16 20 24 / 0.92) 0%,
    rgb(16 20 24 / 0.55) 45%,
    rgb(16 20 24 / 0.35) 100%
  );
}

.hero__inner {
  width: 100%;
  max-width: var(--width-wide);
  margin-inline: auto;
}

.hero__label {
  margin-bottom: var(--s-6);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-accent);
}

.hero__title {
  max-width: 15ch;
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  font-weight: var(--fw-light);
  line-height: 0.92;
  letter-spacing: var(--ls-tight);
}

.hero__title em {
  font-style: italic;
  color: var(--c-accent);
}

.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: block; }

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-6);
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid rgb(242 239 233 / 0.18);
}

.hero__text {
  max-width: 42ch;
  font-size: var(--fs-md);
  color: rgb(242 239 233 / 0.8);
}

/* ==========================================================================
   03  SAYFA BASLIGI
   ========================================================================== */
.page-head {
  position: relative;
  padding-block: calc(var(--s-10) + var(--s-8)) var(--s-9);
  border-bottom: 1px solid var(--c-border);
}

.page-head__title {
  max-width: 16ch;
  margin-top: var(--s-5);
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.page-head__text {
  max-width: 52ch;
  margin-top: var(--s-6);
  font-size: var(--fs-md);
  color: var(--c-text-muted);
}

.crumbs {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.crumbs span { color: var(--c-accent); }

/* ==========================================================================
   04  RAKAMLAR SERIDI
   ========================================================================== */
.figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-7) var(--s-5);
}

@media (min-width: 48rem) {
  .figures { grid-template-columns: repeat(4, 1fr); }
}

.figure {
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
}

.figure b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-light);
  line-height: 1;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}

.figure span {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

/* ==========================================================================
   05  MULK KARTLARI
   ========================================================================== */
.props {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-8);
}

@media (min-width: 44rem) {
  .props { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 72rem) {
  .props--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Filtre ile gizlenen kart */
.prop[hidden] { display: none; }

.prop {
  display: flex;
  flex-direction: column;
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  transition: border-color var(--dur-base) var(--ease-out-quart);
}

.prop:hover,
.prop:focus-within { border-color: var(--c-accent); }

.prop__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.prop__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slower) var(--ease-out-expo);
}

.prop:hover .prop__media img,
.prop:focus-within .prop__media img { transform: scale(1.05); }

/* Durum rozeti — gorselin ustune oturur */
.prop__status {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  padding: var(--s-2) var(--s-4);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background-color: var(--c-bg);
  color: var(--c-accent);
  border: 1px solid var(--c-accent);
}

.prop__status--sold {
  color: var(--c-text-muted);
  border-color: var(--c-border);
}

.prop__price {
  position: absolute;
  right: var(--s-4);
  bottom: var(--s-4);
  padding: var(--s-2) var(--s-4);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  background-color: color-mix(in srgb, var(--c-bg) 88%, transparent);
  backdrop-filter: blur(8px);
}

.prop__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5);
}

/* Kart basligi ana sayfada h3, listeleme sayfasinda h2 —
   baslik hiyerarsisi sayfaya gore degisiyor, stil ayni kalmali. */
.prop__body h2,
.prop__body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
}

.prop__place {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
}

/* Oda / banyo / metrekare satiri */
.prop__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  margin-top: auto;
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  list-style: none;
}

.prop__specs b {
  font-weight: var(--fw-medium);
  color: var(--c-text);
}

/* ==========================================================================
   06  FILTRE CUBUGU
   ========================================================================== */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-6);
  border-block: 1px solid var(--c-border);
}

.filters__label {
  margin-right: var(--s-3);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.filter {
  padding: var(--s-2) var(--s-5);
  border: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  transition:
    border-color var(--dur-fast) var(--ease-out-quart),
    color var(--dur-fast) var(--ease-out-quart),
    background-color var(--dur-fast) var(--ease-out-quart);
}

.filter:hover { color: var(--c-text); border-color: var(--c-text-muted); }

.filter[aria-pressed="true"] {
  background-color: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-bg);
}

.filters__count {
  margin-left: auto;
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  font-variant-numeric: tabular-nums;
}

/* Hicbir sonuc yoksa */
.props__empty {
  padding-block: var(--s-9);
  text-align: center;
  color: var(--c-text-muted);
}

.props__empty[hidden] { display: none; }

/* ==========================================================================
   07  ACIK BOLUM — koyu sayfada nefes
   ========================================================================== */
.section--light {
  background-color: var(--c-inverse-bg);
  color: var(--c-inverse-text);
  --c-text: var(--c-inverse-text);
  --c-text-muted: var(--c-inverse-muted);
  --c-border: rgb(16 20 24 / 0.14);
  --c-surface: #FFFFFF;
}

.section--light .btn--ghost { border-color: rgb(16 20 24 / 0.25); }
.section--light .btn--ghost:hover {
  background-color: var(--c-inverse-text);
  color: var(--c-inverse-bg);
}

/* ==========================================================================
   08  HIZMETLER / SUREÇ
   ========================================================================== */
.steps {
  display: grid;
  gap: var(--s-7);
  margin-top: var(--s-8);
  counter-reset: step;
}

@media (min-width: 48rem) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}

.step {
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
  counter-increment: step;
}

.step::before {
  content: "0" counter(step);
  display: block;
  margin-bottom: var(--s-4);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  color: var(--c-accent);
  letter-spacing: var(--ls-wide);
}

.step h3 {
  margin-bottom: var(--s-3);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
}

.step p {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* ==========================================================================
   09  EKIP — fotograf yerine monogram
   Bilerek portresiz: mulk one ciksin, uydurma yuz kullanmayalim.
   ========================================================================== */
.team {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-8);
}

@media (min-width: 44rem) {
  .team { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 68rem) {
  .team { grid-template-columns: repeat(4, 1fr); }
}

.person {
  padding: var(--s-6);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
  transition: border-color var(--dur-base) var(--ease-out-quart);
}

.person:hover { border-color: var(--c-accent); }

.person__mono {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--s-5);
  border: 1px solid var(--c-accent);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-wide);
  color: var(--c-accent);
}

.person__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
}

.person__role {
  margin-top: var(--s-1);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-accent);
}

.person__note {
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* ==========================================================================
   10  REFERANSLAR
   ========================================================================== */
.quotes {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-8);
}

@media (min-width: 48rem) {
  .quotes { grid-template-columns: repeat(3, 1fr); }
}

.quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--c-border);
}

.quote p {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  line-height: var(--lh-snug);
}

.quote cite {
  font-size: var(--fs-xs);
  font-style: normal;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.quote cite b {
  display: block;
  margin-bottom: var(--s-1);
  font-weight: var(--fw-medium);
  color: var(--c-accent);
}

/* ==========================================================================
   11  FORM
   ========================================================================== */
.contact__grid {
  display: grid;
  gap: var(--s-8);
}

@media (min-width: 62rem) {
  .contact__grid {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--s-10);
  }
}

.info-block { margin-bottom: var(--s-6); }

.info-block dt {
  margin-bottom: var(--s-2);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-accent);
}

.info-block dd {
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}

.form {
  padding: var(--s-7);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border);
}

.form__grid {
  display: grid;
  gap: var(--s-5);
}

@media (min-width: 40rem) {
  .form__grid { grid-template-columns: 1fr 1fr; }
  .form__field--full { grid-column: 1 / -1; }
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.form__field label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.form__field input,
.form__field select,
.form__field textarea {
  padding: var(--s-3) var(--s-4);
  background-color: var(--c-bg);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease-out-quart);
}

.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--c-accent);
}

.form__field textarea { resize: vertical; min-height: 7rem; }

.form .btn { margin-top: var(--s-6); width: 100%; }

.form__note {
  margin-top: var(--s-5);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

.form__success {
  display: none;
  gap: var(--s-4);
  padding: var(--s-6);
  border: 1px solid var(--c-accent);
  background-color: var(--c-accent-soft);
  font-size: var(--fs-sm);
}

.form__success.is-visible { display: flex; }

.form__success svg {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  color: var(--c-accent);
}

/* ==========================================================================
   12  CTA
   ========================================================================== */
.cta {
  position: relative;
  padding-block: var(--space-section);
  overflow: hidden;
  text-align: center;
}

.cta__media {
  position: absolute;
  inset: -10% 0 -10% 0;
  z-index: -2;
}

.cta__media img { width: 100%; height: 100%; object-fit: cover; }

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgb(16 20 24 / 0.82);
}

.cta h2 {
  max-width: 18ch;
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
}

.cta p {
  max-width: 46ch;
  margin: var(--s-6) auto 0;
  color: var(--c-text-muted);
}

.cta .cluster { margin-top: var(--s-7); }

/* ==========================================================================
   13  FOOTER
   ========================================================================== */
.footer {
  padding-block: var(--s-9) var(--s-6);
  border-top: 1px solid var(--c-border);
}

.footer__top {
  display: grid;
  gap: var(--s-7);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--c-border);
}

@media (min-width: 48rem) {
  .footer__top { grid-template-columns: 1.6fr 1fr 1fr; }
}

.footer__mark {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-light);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.footer__about {
  max-width: 36ch;
  margin-top: var(--s-4);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.footer h3 {
  margin-bottom: var(--s-4);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-accent);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  list-style: none;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  margin-top: var(--s-6);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* ==========================================================================
   14  ORTAK
   ========================================================================== */
.section__head { max-width: var(--width-narrow); }
.section__head .t-label { margin-bottom: var(--s-5); }

.section__head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.section__head p {
  margin-top: var(--s-6);
  font-size: var(--fs-md);
  color: var(--c-text-muted);
}

/* Buton — keskin kose, genis harf araligi */
.btn {
  border-radius: 0;
  padding: var(--s-3) var(--s-6);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.btn--primary { background-color: var(--c-accent); color: var(--c-bg); }
.btn--primary:hover { background-color: var(--c-accent-hover); }
.btn--ghost { border: 1px solid var(--c-border); color: var(--c-text); }
.btn--ghost:hover { background-color: var(--c-text); color: var(--c-bg); }

.t-label {
  color: var(--c-accent);
  letter-spacing: var(--ls-wider);
}

.js .reveal-clip { clip-path: inset(0 0 100% 0); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal-clip { clip-path: none !important; }
}

.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--4x5 { aspect-ratio: 4 / 5; }

/* ==========================================================================
   DIL DEGISTIRICI
   --------------------------------------------------------------------------
   Gercek bir baglanti — JS'siz calisir, arama motoru gorur.
   Her sayfa Turkce karsiligina isaret eder (about.html → tr/hakkimizda.html),
   bu yuzden href sayfaya gore degisir; test bu ogeyi karsilastirma disi tutar.
   ========================================================================== */
.lang-switch {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  transition:
    border-color var(--dur-fast) var(--ease-out-quart),
    color var(--dur-fast) var(--ease-out-quart);
}

.lang-switch:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

@media (max-width: 61.99rem) {
  .header .lang-switch { display: none; }
}

.mobile-menu .lang-switch {
  align-self: flex-start;
  margin-top: var(--s-4);
}