/* ==========================================================================
   PREMIUM REALTY — TASARIM SİSTEMİ
   Ana sayfa tasarımındaki renk, tipografi ve boşluk kararları buradan yönetilir.
   ========================================================================== */

:root {
  /* Marka */
  --kirmizi: #b5121b;
  --kirmizi-acik: #d71920;
  --kirmizi-koyu: #8d0c13;

  /* Zeminler */
  --zemin: #f8f7f4;
  --beyaz: #ffffff;
  --siyah: #151515;
  --koyu: #171717;

  /* Metin */
  --metin: #151515;
  --metin-soluk: #666666;
  --metin-cok-soluk: #8c8c8c;
  --metin-ters: #ffffff;

  /* Çizgiler */
  --cizgi: #dddddd;
  --cizgi-koyu: #444444;

  /* Tipografi */
  --baslik-font: "Playfair Display", Georgia, serif;
  --govde-font: "DM Sans", "Segoe UI", system-ui, sans-serif;

  /* Ölçüler */
  --sayfa-yan: 8%;
  --sayfa-yan-dar: 7%;
  --golge: 0 20px 60px rgba(0, 0, 0, 0.12);
  --golge-kart: 0 10px 35px rgba(0, 0, 0, 0.07);
  --gecis: 0.3s ease;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--govde-font);
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
  background: var(--zemin);
  color: var(--metin);
  -webkit-font-smoothing: antialiased;
}

a {
  text-decoration: none;
  color: inherit;
}

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

:focus-visible {
  outline: 2px solid var(--kirmizi-acik);
  outline-offset: 3px;
}

/* Sayfa geçişinde başlığa programatik odaklanma olabilir; orada çerçeve gösterme. */
h1:focus,
h1:focus-visible {
  outline: none;
}

/* ==========================================================================
   ORTAK TİPOGRAFİ
   ========================================================================== */

.bolum-etiket {
  color: var(--kirmizi);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 25px;
}

.bolum-etiket--beyaz {
  color: var(--beyaz);
}

.serif {
  font-family: var(--baslik-font);
  font-weight: 400;
}

.metin-baglanti {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--kirmizi);
  text-transform: uppercase;
}

.metin-baglanti:hover {
  color: var(--kirmizi-koyu);
}

/* ==========================================================================
   BUTONLAR
   ========================================================================== */

.btn {
  padding: 17px 28px;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: var(--gecis);
  display: inline-block;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}

.btn--kirmizi {
  background: var(--kirmizi);
  color: var(--beyaz);
}

.btn--kirmizi:hover {
  background: var(--kirmizi-koyu);
  transform: translateY(-3px);
}

.btn--cizgi {
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: var(--beyaz);
  background: transparent;
}

.btn--cizgi:hover {
  background: var(--beyaz);
  color: #111;
}

.btn--cizgi-koyu {
  border: 1px solid var(--siyah);
  color: var(--siyah);
  background: transparent;
}

.btn--cizgi-koyu:hover {
  background: var(--siyah);
  color: var(--beyaz);
}

.btn--beyaz {
  background: var(--beyaz);
  color: var(--kirmizi);
  border: 1px solid var(--kirmizi);
}

.btn--beyaz:hover {
  background: var(--kirmizi);
  color: var(--beyaz);
}

/* Kırmızı zemindeki beyaz buton: hover'da zemin ile karışmasın, beyaz çerçeve kalsın */
.beyan .btn--beyaz:hover {
  border-color: var(--beyaz);
}

.btn--kucuk {
  padding: 12px 20px;
  font-size: 11px;
}

.btn--telefon {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: none;
}

.btn--tam {
  width: 100%;
}

.buton-grup {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.ust-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 25px 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--beyaz);
  transition: 0.4s;
}

.ust-bar--kati,
.ust-bar.kaydirildi {
  background: rgba(255, 255, 255, 0.96);
  color: #111;
  padding: 18px 55px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
}

.logo {
  flex-shrink: 0;
  display: block;
  line-height: 0;
}

.logo__kilit {
  height: 58px;
  width: auto;
  display: block;
}

/* Hero üzerinde şeffafken açık, beyaz zeminde lacivert sürüm. */
.ust-bar--kati .logo__kilit--acik,
.ust-bar.kaydirildi .logo__kilit--acik {
  display: none;
}

.logo__kilit--koyu {
  display: none;
}

.ust-bar--kati .logo__kilit--koyu,
.ust-bar.kaydirildi .logo__kilit--koyu {
  display: block;
}

.ana-menu {
  display: flex;
  gap: 32px;
  align-items: center;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ana-menu a {
  position: relative;
  padding-bottom: 2px;
}

.ana-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 0;
  height: 1px;
  background: var(--kirmizi);
  transition: var(--gecis);
}

.ana-menu a:hover::after,
.ana-menu a.aktif::after {
  width: 100%;
}

.ana-menu a.aktif {
  color: var(--kirmizi-acik);
}

.ust-bar--kati .ana-menu a.aktif {
  color: var(--kirmizi);
}

.menu-dugme {
  display: none;
  font-size: 25px;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  line-height: 1;
  padding: 4px;
}

.mobil-menu {
  display: none;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.alt-bar {
  background: var(--kirmizi);
  color: var(--beyaz);
  padding: 80px var(--sayfa-yan) 35px;
}

.alt-bar__ust {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 50px;
}

.alt-bar__logo {
  display: block;
  height: 62px;
  width: auto;
}

.alt-bar__slogan {
  margin-top: 22px;
  font-size: 15px;
  letter-spacing: 0.5px;
  opacity: 0.95;
}

.alt-bar__iletisim {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.9;
  opacity: 0.85;
}

.alt-bar__baglantilar {
  display: flex;
  gap: 70px;
}

.alt-bar__sutun h4 {
  font-size: 10px;
  letter-spacing: 3px;
  margin-bottom: 20px;
  opacity: 0.7;
  font-weight: 500;
}

.alt-bar__sutun a {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  opacity: 0.95;
  transition: var(--gecis);
}

.alt-bar__sutun a:hover {
  opacity: 1;
  padding-left: 5px;
}

.alt-bar__alt {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  margin-top: 80px;
  padding-top: 25px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 10px;
  letter-spacing: 1px;
  opacity: 0.7;
}

/* ==========================================================================
   ANA SAYFA — HERO
   ========================================================================== */

.hero {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: var(--beyaz);
  /* Video yüklenene kadar beyaz parlama olmasın diye koyu zemin. */
  background: var(--koyu);
}

/* Katman 0 — poster görseli.
   Video oynamadığı her durumda (JS kapalı, hareket azaltma tercihi,
   video yüklenemedi) hero yine de doğru görünür. */
.hero__gorsel {
  position: absolute;
  inset: 0;
  background-image: url("../img/genel/hero-poster.webp");
  background-size: cover;
  background-position: center;
  transform: scale(1.04);
}

/* Katman 1 — slider (D10). API'den gelen foto/video dizisi sırayla bu iki
   öğenin arasında geçiş yapar; aynı anda yalnız biri "aktif" olur. Dizi
   boşsa (ya da veri tasarrufu/JS kapalı) hiçbiri görünmez, .hero__gorsel
   (poster) fallback olarak kalır. */
.hero__medya {
  position: absolute;
  inset: 0;
}

.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}

/* Sıradaki öge devreye girdiğinde yumuşak geçişle görünür olur. */
.hero__slide.aktif {
  opacity: 1;
}

/* Katman 2 — okunabilirlik perdesi.
   Eskiden bu degrade poster görselinin içindeydi; artık ayrı katman,
   çünkü videonun da üstünde durması gerekiyor. */
.hero__perde {
  position: absolute;
  inset: 0;
  /* İki katmanlı perde. Videodaki kare parlaklığı değiştiği için tek yönlü
       degrade yetmiyordu; yatay degrade metnin solduğu tarafı, dikey degrade
       üstteki menü ile alttaki şeridi okunur tutuyor. */
  background:
        /* Yatay: metnin olduğu sol tarafta güçlü, sağa doğru hızla açılıyor.
           Önceki hâli sağ tarafı da .28 ile karartıyor, alt köşede dikey
           degradeyle birleşince toplam ~.68'e çıkıyordu; video donuk ve
           "kalitesiz" görünüyordu. Artık sağ taraf neredeyse temiz. */
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.72) 30%,
      rgba(0, 0, 0, 0.34) 58%,
      rgba(0, 0, 0, 0.06) 85%
    ),
    /* Dikey: üstte menü, altta şerit için yalnızca gerektiği kadar. */
    linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.32),
        transparent 18%,
        transparent 72%,
        rgba(0, 0, 0, 0.4)
      );
}

/* Katman 3 — metin */
.hero__ic {
  position: relative;
  z-index: 3;
  width: 100%;
  /* Alt dolgu üstten büyük: blok dikeyde ~50px yukarı kayar. */
  padding: 150px var(--sayfa-yan) 250px;
}

.hero__kucuk {
  font-size: 12px;
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.hero h1 {
  font-family: var(--baslik-font);
  font-weight: 400;
  /* Dört satırlık slogan, eski üç satırlık başlıktan uzun.
       Punto buna göre ayarlandı; daha büyüğünde hero 100vh'yi taşırıyor. */
  font-size: clamp(54px, 7.5vw, 120px);
  line-height: 0.98;
  max-width: 900px;
}

/* Her satır <span> ile sarıldığı için kırmızı yalnızca .vurgu'ya verilir;
   aksi halde bütün başlık kırmızıya dönerdi. */
.hero h1 .vurgu {
  color: var(--kirmizi-acik);
}

/* --- Satırların yerden yükselmesi --------------------------------------- */

.hero h1 .satir {
  display: block;
  overflow: hidden;
  /* Kırpma kutusu harf kutusundan biraz geniş: "HİZMET," virgülü aşağıda,
       Ğ'nin şapkası ve İ'nin noktası yukarıda kalıyor. Negatif margin ile
       satır aralığı bozulmuyor. */
  padding: 0.1em 0 0.16em;
  margin-bottom: -0.16em;
}

.hero h1 .satir__ic {
  display: block;
}

/* Başlangıç durumu yalnızca JS varken gizli. Betik çalışmazsa yazı
   olduğu gibi görünür — animasyon yüzünden kaybolmaz. */
.animasyon-var .hero h1 .satir__ic {
  transform: translateY(115%);
}

/* Animasyon perde kapanınca başlar; aksi halde ziyaretçi perdenin
   arkasında oynayıp biten bir animasyonu hiç görmezdi. */
/* Süre ve satır arası gecikme burada. Daha hızlı istenirse ikisini birlikte
   küçültün; yalnızca süreyi kısaltmak satırları üst üste bindirir. */
.animasyon-var.giris-bitti .hero h1 .satir__ic {
  animation: satirYukari 1.45s cubic-bezier(0.19, 0.72, 0.28, 1) both;
}

.animasyon-var.giris-bitti .hero h1 .satir:nth-child(1) .satir__ic {
  animation-delay: 0.12s;
}
.animasyon-var.giris-bitti .hero h1 .satir:nth-child(2) .satir__ic {
  animation-delay: 0.38s;
}
.animasyon-var.giris-bitti .hero h1 .satir:nth-child(3) .satir__ic {
  animation-delay: 0.64s;
}
.animasyon-var.giris-bitti .hero h1 .satir:nth-child(4) .satir__ic {
  animation-delay: 0.9s;
}

@keyframes satirYukari {
  from {
    transform: translateY(115%);
  }
  to {
    transform: translateY(0);
  }
}

/* "Animasyonları kaldır" açıkken başlık HAREKET ETMEZ ama yine de belirir:
   yükselme yerine yumuşak bir açılma. Rahatsız edici olan yer değiştirmedir;
   opaklık geçişi bu tercihin hedeflediği hareket değildir.

   Tamamen durdurmak sayfayı ölü gösteriyordu — Android'de pil tasarrufu bu
   ayarı kendiliğinden açtığı için ziyaretçilerin azımsanmayacak bir kısmı
   hareketsiz bir hero görüyordu. */
@media (prefers-reduced-motion: reduce) {
  .animasyon-var .hero h1 .satir__ic {
    transform: none;
    opacity: 0;
  }

  .animasyon-var.giris-bitti .hero h1 .satir__ic {
    transform: none;
    animation-name: satirBelir !important;
    animation-duration: 1s !important;
    animation-fill-mode: both !important;
    animation-timing-function: ease !important;
  }

  .ust-basvuru__dugme--dolu {
    animation: none;
  }
}

@keyframes satirBelir {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero__aciklama {
  margin-top: 40px;
  font-size: 17px;
  max-width: 480px;
  line-height: 1.7;
  color: #eee;
}

.hero__butonlar {
  display: flex;
  gap: 15px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.hero__zemin {
  position: absolute;
  z-index: 3;
  bottom: 35px;
  left: var(--sayfa-yan);
  right: var(--sayfa-yan);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ==========================================================================
   ARAMA KUTUSU
   ========================================================================== */

.arama-bolum {
  background: var(--beyaz);
  padding: 0 var(--sayfa-yan-dar);
}

.arama-kutu {
  transform: translateY(-45px);
  position: relative;
  z-index: 10;
  background: var(--beyaz);
  box-shadow: var(--golge);
  padding: 32px;
}

.arama-kutu--sade {
  transform: none;
  box-shadow: var(--golge-kart);
  border: 1px solid var(--cizgi);
}

.arama-kutu__baslik {
  font-family: var(--baslik-font);
  font-size: 24px;
  margin-bottom: 25px;
}

.arama-izgara {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr auto;
  border: 1px solid var(--cizgi);
}

/* Danışman sayfası: ofis filtresi kaldırıldığı için iki alan + düğme. */
.arama-izgara--ucdi {
  grid-template-columns: 1.4fr 1fr auto;
}

.arama-oge {
  padding: 18px 22px;
  border-right: 1px solid var(--cizgi);
}

.arama-oge label {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.arama-oge select,
.arama-oge input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: inherit;
}

.arama-dugme {
  border: 0;
  background: var(--kirmizi);
  color: var(--beyaz);
  padding: 0 35px;
  font-size: 12px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: var(--gecis);
  font-family: inherit;
}

.arama-dugme:hover {
  background: var(--kirmizi-koyu);
}

/* ==========================================================================
   ANA SAYFA — TANITIM / BEYAN / LOKASYON / TİPLER / RAKAMLAR / CTA
   ========================================================================== */

.tanitim {
  padding: 130px var(--sayfa-yan);
  background: var(--beyaz);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}

.tanitim h2 {
  font-family: var(--baslik-font);
  font-weight: 400;
  font-size: clamp(50px, 6vw, 90px);
  line-height: 1.06;
}

.tanitim h2 span {
  color: var(--kirmizi);
}

/* Tablet: iki sütunda başlık dar kalıp kötü kırılıyordu */
@media (min-width: 901px) and (max-width: 1100px) {
  .tanitim {
    gap: 50px;
    padding-left: var(--sayfa-yan-dar);
    padding-right: var(--sayfa-yan-dar);
  }

  .tanitim h2 {
    font-size: clamp(36px, 4.6vw, 48px);
  }
}

.tanitim__sag {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 10px;
}

.tanitim__sag p {
  max-width: 500px;
  color: var(--metin-soluk);
  font-size: 17px;
  line-height: 1.9;
  margin-bottom: 35px;
}

.vitrin {
  padding: 120px var(--sayfa-yan-dar);
  background: var(--zemin);
}

.vitrin__ust {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 50px;
}

.vitrin__baslik {
  font-family: var(--baslik-font);
  font-size: clamp(50px, 7vw, 100px);
  font-weight: 400;
  line-height: 0.98;
}

/* Tek kelimelik uzun başlıklar için (ör. "DANIŞMANLARIMIZ"). Türkçede bu tür
   kelimeler bölünemediği için punto alt sınırı daha düşük tutuluyor; aksi halde
   dar ekranda kelime kutuyu taşırıp belgeyi yatayda genişletiyor. */
.vitrin__baslik--kisa {
  font-size: clamp(30px, 5vw, 72px);
}

.vitrin__sayi {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--kirmizi);
  white-space: nowrap;
}

/* Ana sayfadaki büyük öne çıkan ilan */
.one-cikan {
  height: 650px;
  position: relative;
  overflow: hidden;
  display: block;
  color: var(--beyaz);
}

.one-cikan__gorsel {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.8s ease;
}

.one-cikan:hover .one-cikan__gorsel {
  transform: scale(1.05);
}

.one-cikan::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent 55%);
}

.one-cikan__bilgi {
  position: absolute;
  z-index: 2;
  bottom: 45px;
  left: 50px;
  right: 50px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
}

.one-cikan__no {
  font-size: 11px;
  letter-spacing: 3px;
  margin-bottom: 12px;
  color: #ddd;
}

.one-cikan__baslik {
  font-family: var(--baslik-font);
  font-size: clamp(32px, 4vw, 55px);
  line-height: 1.05;
  max-width: 700px;
}

.one-cikan__konum {
  margin-top: 8px;
  color: #ddd;
}

.one-cikan__fiyat {
  font-size: 28px;
  margin-bottom: 20px;
  white-space: nowrap;
}

.beyan {
  background: var(--kirmizi);
  color: var(--beyaz);
  padding: 150px var(--sayfa-yan);
  text-align: center;
}

.beyan__kucuk {
  font-size: 11px;
  letter-spacing: 4px;
  margin-bottom: 35px;
}

.beyan h2 {
  font-family: var(--baslik-font);
  font-size: clamp(55px, 8vw, 120px);
  font-weight: 400;
  line-height: 1.02;
  max-width: 1100px;
  margin: auto;
}

.beyan p {
  max-width: 600px;
  margin: 35px auto 0;
  line-height: 1.7;
  opacity: 0.85;
}

.lokasyonlar {
  padding: 130px var(--sayfa-yan);
  background: var(--beyaz);
}

.lokasyonlar h2 {
  font-family: var(--baslik-font);
  font-size: clamp(55px, 7vw, 100px);
  line-height: 1.02;
  font-weight: 400;
  margin-bottom: 70px;
}

.lokasyonlar h2 span {
  color: var(--kirmizi);
}

.lokasyon-liste {
  border-top: 1px solid var(--cizgi);
}

.lokasyon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 25px 0;
  border-bottom: 1px solid var(--cizgi);
  font-family: var(--baslik-font);
  font-size: 40px;
  transition: var(--gecis);
}

.lokasyon:hover {
  color: var(--kirmizi);
  padding-left: 20px;
}

.lokasyon span {
  font-family: var(--govde-font);
  font-size: 11px;
  letter-spacing: 2px;
  white-space: nowrap;
}

.tipler {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.tip {
  height: 500px;
  position: relative;
  overflow: hidden;
  color: var(--beyaz);
  display: flex;
  align-items: end;
  padding: 45px;
  background-size: cover;
  background-position: center;
}

.tip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  transition: 0.5s;
}

.tip:hover::before {
  background: rgba(181, 18, 27, 0.75);
}

.tip__ic {
  position: relative;
  z-index: 2;
}

.tip h3 {
  font-family: var(--baslik-font);
  font-size: 55px;
  font-weight: 400;
}

.tip__baglanti {
  font-size: 11px;
  letter-spacing: 2px;
  margin-top: 8px;
}

.rakamlar {
  padding: 120px var(--sayfa-yan);
  background: var(--koyu);
  color: var(--beyaz);
}

.rakam-izgara {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.rakam {
  padding: 20px;
  border-left: 1px solid var(--cizgi-koyu);
}

.rakam strong {
  display: block;
  font-family: var(--baslik-font);
  font-size: 70px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.rakam span {
  color: #aaa;
  font-size: 11px;
  letter-spacing: 3px;
}

.cagri {
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--beyaz);
  position: relative;
  padding: 100px var(--sayfa-yan);
  background:
    linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
    url("../img/genel/cta.webp");
  background-size: cover;
  background-position: center;
}

.cagri h2 {
  font-family: var(--baslik-font);
  font-weight: 400;
  font-size: clamp(60px, 9vw, 130px);
  line-height: 0.98;
  margin-bottom: 60px;
}

.cagri p {
  margin: 35px auto;
  max-width: 500px;
  color: #ddd;
  line-height: 1.7;
}

/* ==========================================================================
   İÇ SAYFA BAŞLIĞI
   ========================================================================== */

.sayfa-basi {
  position: relative;
  color: var(--beyaz);
  padding: 190px var(--sayfa-yan) 90px;
  background: var(--koyu);
  overflow: hidden;
}

.sayfa-basi__gorsel {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.45;
}

.sayfa-basi::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.45));
}

.sayfa-basi__ic {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.sayfa-basi h1,
.sayfa-basi__yazi {
  font-family: var(--baslik-font);
  font-weight: 400;
  font-size: clamp(46px, 6.5vw, 92px);
  line-height: 1.02;
  text-wrap: balance;
}

.sayfa-basi h1 span,
.sayfa-basi__yazi span {
  color: var(--kirmizi-acik);
}

.sayfa-basi p {
  margin-top: 25px;
  max-width: 560px;
  line-height: 1.8;
  color: #ddd;
  font-size: 16px;
}

/* Kırıntı yolu */
.kirinti {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ccc;
  margin-bottom: 22px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.kirinti a:hover {
  color: var(--beyaz);
}

.kirinti span {
  opacity: 0.5;
}

/* ==========================================================================
   İÇERİK KABI
   ========================================================================== */

.kap {
  padding: 90px var(--sayfa-yan-dar);
  background: var(--zemin);
}

.kap--beyaz {
  background: var(--beyaz);
}

.kap--dar {
  max-width: 900px;
  margin: 0 auto;
}

.bolum-basligi {
  margin-bottom: 45px;
}

.bolum-basligi h2 {
  font-family: var(--baslik-font);
  font-weight: 400;
  font-size: clamp(36px, 4.5vw, 62px);
  line-height: 1.06;
}

/* ==========================================================================
   İLAN KARTI
   ========================================================================== */

.ilan-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 32px;
}

.ilan-kart {
  background: var(--beyaz);
  display: flex;
  flex-direction: column;
  transition: var(--gecis);
  box-shadow: var(--golge-kart);
}

.ilan-kart:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.13);
}

.ilan-kart__gorsel {
  height: 240px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.ilan-kart__rozetler {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ilan-kart__no {
  position: absolute;
  bottom: 14px;
  right: 16px;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--beyaz);
  background: rgba(0, 0, 0, 0.55);
  padding: 5px 10px;
}

.ilan-kart__govde {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

.ilan-kart__konum {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--metin-cok-soluk);
}

.ilan-kart__baslik {
  font-family: var(--baslik-font);
  font-size: 23px;
  line-height: 1.25;
  font-weight: 400;
}

.ilan-kart:hover .ilan-kart__baslik {
  color: var(--kirmizi);
}

.ilan-kart__fiyat {
  font-size: 22px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}

.ilan-kart__ozet {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid #eee;
  font-size: 12px;
  color: var(--metin-soluk);
}

.ilan-kart__ozet b {
  font-weight: 600;
  color: var(--metin);
}

/* Rozet */
.rozet {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 6px 11px;
  background: var(--beyaz);
  color: var(--metin);
}

.rozet--kirmizi {
  background: var(--kirmizi);
  color: var(--beyaz);
}

.rozet--koyu {
  background: rgba(21, 21, 21, 0.82);
  color: var(--beyaz);
}

.rozet--cizgi {
  background: transparent;
  border: 1px solid var(--cizgi);
  color: var(--metin-soluk);
}

/* ==========================================================================
   FİLTRE PANELİ
   ========================================================================== */

.liste-duzen {
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 40px;
  align-items: start;
}

.filtre {
  background: var(--beyaz);
  padding: 28px;
  box-shadow: var(--golge-kart);
  position: sticky;
  top: 100px;
}

.filtre-ac {
  display: none;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--baslik-font);
  font-size: 22px;
  cursor: pointer;
  color: inherit;
}

.filtre h3 {
  font-family: var(--baslik-font);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 22px;
}

.filtre-alan {
  margin-bottom: 20px;
}

.filtre-alan label {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 8px;
}

.filtre-alan input,
.filtre-alan select {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--cizgi);
  background: var(--beyaz);
  font-family: inherit;
  font-size: 14px;
  color: inherit;
  outline: 0;
}

.filtre-alan input:focus,
.filtre-alan select:focus {
  border-color: var(--kirmizi);
}

.filtre-ikili {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.filtre__ayrac {
  border: 0;
  border-top: 1px solid var(--cizgi);
  margin: 24px 0;
}

/* Liste üst çubuğu */
.liste-ust {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--cizgi);
}

.liste-ust__sayi {
  font-size: 13px;
  color: var(--metin-soluk);
}

.liste-ust__sayi b {
  color: var(--metin);
  font-variant-numeric: tabular-nums;
}

.liste-ust__siralama {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--metin-soluk);
}

.liste-ust__siralama select {
  padding: 9px 12px;
  border: 1px solid var(--cizgi);
  background: var(--beyaz);
  font-family: inherit;
  font-size: 13px;
  color: inherit;
}

/* ==========================================================================
   SAYFALAMA
   ========================================================================== */

.sayfalama {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 55px;
  flex-wrap: wrap;
}

.sayfalama button {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--cizgi);
  background: var(--beyaz);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: var(--gecis);
  color: inherit;
  font-variant-numeric: tabular-nums;
}

.sayfalama button:hover:not(:disabled) {
  border-color: var(--kirmizi);
  color: var(--kirmizi);
}

.sayfalama button.aktif {
  background: var(--kirmizi);
  border-color: var(--kirmizi);
  color: var(--beyaz);
}

.sayfalama button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ==========================================================================
   DURUM BİLEŞENLERİ
   ========================================================================== */

.durum {
  padding: 80px 30px;
  text-align: center;
  background: var(--beyaz);
  box-shadow: var(--golge-kart);
}

.durum h3 {
  font-family: var(--baslik-font);
  font-size: 30px;
  font-weight: 400;
  margin-bottom: 14px;
}

.durum p {
  color: var(--metin-soluk);
  max-width: 420px;
  margin: 0 auto 26px;
  line-height: 1.8;
}

.yukleniyor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 70px 20px;
  color: var(--metin-soluk);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.yukleniyor::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 2px solid var(--cizgi);
  border-top-color: var(--kirmizi);
  border-radius: 50%;
  animation: don 0.8s linear infinite;
}

@keyframes don {
  to {
    transform: rotate(360deg);
  }
}

.bos-sayfa {
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: 190px var(--sayfa-yan) 120px;
  background: var(--beyaz);
}

.bos-sayfa h1 {
  font-family: var(--baslik-font);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 100px);
  line-height: 1;
  margin-bottom: 25px;
}

.bos-sayfa p {
  color: var(--metin-soluk);
  max-width: 460px;
  line-height: 1.8;
  margin-bottom: 35px;
}

/* ==========================================================================
   İLAN DETAY
   ========================================================================== */

.detay-baslik {
  background: var(--zemin);
  padding: 70px var(--sayfa-yan-dar) 30px;
}

.detay-baslik h1 {
  font-family: var(--baslik-font);
  font-weight: 400;
  font-size: clamp(34px, 4.2vw, 58px);
  line-height: 1.05;
  text-wrap: balance;
}

.detay-galeri {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  background: var(--zemin);
  padding: 0 var(--sayfa-yan-dar) 0;
}

.detay-galeri__buyuk {
  height: 560px;
  background-size: cover;
  background-position: center;
  cursor: pointer;
}

.detay-galeri__yan {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 10px;
}

.detay-galeri__yan:has(.detay-galeri__sayfa-ok) {
  grid-template-rows: 32px repeat(3, minmax(0, 1fr)) 32px;
}

.detay-galeri__sayfa-ok {
  border: 0;
  background: var(--kirmizi);
  color: var(--beyaz);
  cursor: pointer;
  font-size: 13px;
  transition: var(--gecis);
}

.detay-galeri__sayfa-ok:disabled {
  opacity: 0.3;
  cursor: default;
}

.detay-galeri__kucuk {
  background-size: cover;
  background-position: center;
  cursor: pointer;
  position: relative;
  transition: var(--gecis);
  min-height: 100px;
}

.detay-galeri__kucuk:hover {
  opacity: 0.85;
}

.detay-galeri__kucuk.secili {
  outline: 3px solid var(--kirmizi);
  outline-offset: -3px;
}

.detay-galeri__kucuk--video::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--beyaz);
  font-size: 18px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.detay-galeri__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}

.detay-galeri__360-cagri {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  background: #171717;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
}

.detay-galeri__360-cagri i {
  color: var(--kirmizi);
  font-size: 28px;
}

.detay-galeri__tam-ekran {
  grid-column: 1;
  justify-self: start;
  border: 0;
  background: var(--kirmizi);
  color: var(--beyaz);
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
}

.detay-360 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-left: 3px solid var(--kirmizi);
  padding: 22px 24px;
  margin: 28px 0 10px;
  background: var(--beyaz);
}

.detay-360 h2 {
  margin: 4px 0 6px;
  font-size: 24px;
}
.detay-360 p {
  margin: 0;
  color: var(--metin-soluk);
  font-size: 14px;
}
.detay-360__etiket {
  color: var(--kirmizi);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.detay-360-foto {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0 0 22px;
  padding: 16px 20px;
  border: 0;
  border-left: 3px solid var(--kirmizi);
  background: #171717;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  text-align: left;
}
.detay-360-foto i {
  color: var(--kirmizi);
  font-size: 26px;
}
.detay-360-foto small {
  margin-left: auto;
  opacity: 0.7;
  font-size: 12px;
}
.detay-360-foto:hover {
  background: var(--kirmizi);
}
.detay-360-foto:hover i {
  color: #fff;
}

.foto360-durum {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  font-size: 14px;
}
.foto360-durum button {
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  padding: 6px 12px;
  cursor: pointer;
}
.foto360-sahneler {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 84px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
}
.foto360-sahne {
  flex: 0 0 auto;
  width: 88px;
  height: 56px;
  border: 2px solid transparent;
  background-size: cover;
  background-position: center;
  cursor: pointer;
  opacity: 0.8;
}
.foto360-sahne.secili {
  border-color: var(--kirmizi);
  opacity: 1;
}

.lightbox__360-cagri {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: var(--kirmizi);
  color: #fff;
  padding: 16px 22px;
  cursor: pointer;
  font-size: 14px;
}

.video360-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050505;
}

.video360-modal__icerik {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

.video360-viewer {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
}
.video360-viewer:active {
  cursor: grabbing;
}
.video360-kaynak {
  display: none;
}
.video360-kontroller {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  display: flex;
  gap: 10px;
}
.video360-kontroller button {
  width: 48px;
  height: 48px;
  border: 0;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  cursor: pointer;
  font-size: 20px;
}
.video360-kontroller button:hover {
  background: var(--kirmizi);
}
.video360-kontroller .video360-kapat {
  margin-left: auto;
}
.video360-ipucu {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  padding: 8px 14px;
  font-size: 12px;
  pointer-events: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

.lightbox__icerik {
  max-width: 92vw;
  max-height: 90vh;
  display: flex;
}

.lightbox__icerik img,
.lightbox__icerik video {
  max-width: 92vw;
  max-height: 90vh;
  object-fit: contain;
  display: block;
}

.lightbox__kapat,
.lightbox__ok {
  position: absolute;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.lightbox__kapat:hover,
.lightbox__ok:hover {
  background: var(--kirmizi);
}

.lightbox__kapat {
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  font-size: 28px;
  line-height: 1;
}

.lightbox__ok {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 72px;
  font-size: 24px;
}

.lightbox__ok--sol {
  left: 18px;
}
.lightbox__ok--sag {
  right: 18px;
}

.lightbox__sayac {
  position: absolute;
  top: 26px;
  left: 24px;
  color: #fff;
  font-size: 13px;
  letter-spacing: 2px;
}

@media (max-width: 700px) {
  .lightbox__ok {
    width: 40px;
    height: 56px;
  }
  .lightbox__ok--sol {
    left: 6px;
  }
  .lightbox__ok--sag {
    right: 6px;
  }
  .detay-360 {
    align-items: flex-start;
    flex-direction: column;
  }
  .detay-360 .btn {
    width: 100%;
    text-align: center;
  }
  .video360-kontroller {
    left: 14px;
    right: 14px;
    bottom: max(14px, env(safe-area-inset-bottom));
  }
}

.detay-duzen {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 50px;
  align-items: start;
  padding: 70px var(--sayfa-yan-dar) 100px;
  background: var(--zemin);
}

.detay-konum {
  margin-top: 18px;
  color: var(--metin-soluk);
  font-size: 15px;
  margin-bottom: 26px;
}

.detay-fiyat {
  font-family: inherit; /* ilan kartındaki fiyatla aynı yazı tipi */
  font-weight: 500;
  font-size: 46px;
  color: var(--kirmizi);
  font-variant-numeric: tabular-nums;
  margin-bottom: 34px;
}

/* İlan paylaşım satırı — WhatsApp/Facebook düz bağlantı, Instagram kopyala+aç */
.detay-paylas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: -6px 0 30px;
}

.detay-paylas__etiket {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--metin-cok-soluk);
  margin-right: 4px;
}

.detay-paylas__btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--beyaz);
  border: 0;
  cursor: pointer;
  transition: var(--gecis);
  flex-shrink: 0;
}

.detay-paylas__btn i {
  font-size: 19px;
  line-height: 1;
}

.detay-paylas__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
}

.detay-paylas__btn--whatsapp {
  background: #25d366;
}
.detay-paylas__btn--facebook {
  background: #1877f2;
}

.detay-paylas__btn--hikaye {
  background: radial-gradient(
    circle at 30% 107%,
    #fdf497 0%,
    #fdf497 5%,
    #fd5949 45%,
    #d6249f 60%,
    #285aeb 90%
  );
}

/* Paylaşım geri bildirim balonu (PRPaylas.instagram tarafından oluşturulur) */
.paylas-toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 20px);
  z-index: 9500;
  max-width: calc(100% - 32px);
  padding: 14px 22px;
  background: #14203a;
  color: #e9edf5;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.paylas-toast.gorunur {
  opacity: 1;
  transform: translate(-50%, 0);
}

.detay-blok {
  background: var(--beyaz);
  padding: 34px;
  margin-bottom: 26px;
  box-shadow: var(--golge-kart);
}

.detay-blok h2 {
  font-family: var(--baslik-font);
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 22px;
}

.detay-blok p {
  line-height: 1.95;
  color: #444;
  max-width: 68ch;
}

/* Zengin metin (TinyMCE çıktısı: ilan açıklaması, danışman biyografisi) */
.zengin-metin--duz {
  white-space: pre-line;
}

.zengin-metin > :first-child { margin-top: 0; }
.zengin-metin > :last-child { margin-bottom: 0; }

.zengin-metin p {
  margin: 0 0 1.1em;
}

.zengin-metin h2,
.zengin-metin h3,
.zengin-metin h4 {
  font-family: var(--baslik-font);
  font-weight: 400;
  line-height: 1.3;
  color: #222;
  margin: 1.6em 0 0.6em;
}

.zengin-metin h2 { font-size: 22px; }
.zengin-metin h3 { font-size: 19px; }
.zengin-metin h4 { font-size: 16px; letter-spacing: 1px; text-transform: uppercase; }

.zengin-metin ul,
.zengin-metin ol {
  margin: 0 0 1.1em;
  padding-left: 1.4em;
}

.zengin-metin ul { list-style: disc; }
.zengin-metin ol { list-style: decimal; }
.zengin-metin li { margin-bottom: 0.4em; }

.zengin-metin strong { font-weight: 600; color: #222; }

.zengin-metin blockquote {
  margin: 1.4em 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--cizgi);
  font-style: italic;
}

.zengin-metin a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.detay-blok .zengin-metin {
  line-height: 1.95;
  color: #444;
  max-width: 68ch;
}

/* Özellik tablosu */
.ozellik-tablo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: #eee;
  border: 1px solid #eee;
}

.ozellik-satir {
  background: var(--beyaz);
  padding: 16px 18px;
}

.ozellik-satir dt {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--metin-cok-soluk);
  margin-bottom: 6px;
}

.ozellik-satir dd {
  font-size: 16px;
  font-weight: 500;
}

.etiket-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.etiket {
  font-size: 12px;
  padding: 9px 15px;
  background: var(--zemin);
  border: 1px solid var(--cizgi);
  color: #444;
}

/* Yan sütun — danışman kartı */
.yan-sutun {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.danisman-kutu {
  background: var(--beyaz);
  padding: 30px;
  box-shadow: var(--golge-kart);
  text-align: center;
}

.danisman-kutu__etiket {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--metin-cok-soluk);
  margin-bottom: 20px;
}

.danisman-kutu h3 {
  font-family: var(--baslik-font);
  font-size: 30px;
  font-weight: 400;
  margin-top: 16px;
}

.danisman-kutu__unvan {
  font-size: 15px;
  color: var(--metin-soluk);
  margin-top: 6px;
  margin-bottom: 22px;
}

.danisman-kutu__iletisim {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ==========================================================================
   DANIŞMAN
   ========================================================================== */

.monogram {
  width: 92px;
  height: 92px;
  margin: 0 auto;
  background: #ece9e3;
  color: var(--kirmizi);
  border-bottom: 3px solid var(--kirmizi);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--baslik-font);
  font-size: 34px;
  letter-spacing: 1px;
}

.monogram--buyuk {
  width: 100%;
  height: 320px;
  font-size: 80px;
}

.monogram--kart {
  width: 100%;
  height: 280px;
  font-size: 64px;
}

.danisman-izgara {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 340px));
  justify-content: center;
  gap: 30px;
}

.danisman-izgara--ust {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.danisman-izgara--ust .danisman-kart {
  flex: 0 1 340px;
}

.danisman-kart {
  background: var(--beyaz);
  box-shadow: var(--golge-kart);
  transition: var(--gecis);
  display: flex;
  flex-direction: column;
}

.danisman-kart:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.13);
}

.danisman-kart__gorsel {
  height: 280px;
  background-size: cover;
  background-position: center top;
}

.danisman-kart__govde {
  padding: 24px 26px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

.danisman-kart__ad {
  font-family: var(--baslik-font);
  font-size: 24px;
  font-weight: 400;
}

.danisman-kart:hover .danisman-kart__ad {
  color: var(--kirmizi);
}

.danisman-kart__unvan {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--kirmizi);
  text-transform: uppercase;
}

.danisman-kart__ofis {
  font-size: 13px;
  color: var(--metin-soluk);
}

.danisman-kart__alt {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--metin-soluk);
}

.danisman-kart__alt b {
  color: var(--metin);
  font-variant-numeric: tabular-nums;
}

/* Danışman profil üst bloğu */
.profil {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 50px;
  padding: 70px var(--sayfa-yan-dar);
  background: var(--beyaz);
  align-items: start;
}

.profil__gorsel {
  height: 400px;
  background-size: cover;
  background-position: center top;
  box-shadow: var(--golge-kart);
}

.profil h1 {
  font-family: var(--baslik-font);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1;
  margin-bottom: 10px;
}

.profil__unvan {
  color: var(--kirmizi);
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 26px;
}

.profil__hakkinda {
  line-height: 1.95;
  color: #444;
  max-width: 66ch;
  margin-bottom: 30px;
}

.profil__rakamlar {
  display: flex;
  gap: 45px;
  flex-wrap: wrap;
  padding: 26px 0;
  border-top: 1px solid var(--cizgi);
  border-bottom: 1px solid var(--cizgi);
  margin-bottom: 30px;
}

.profil__rakam strong {
  display: block;
  font-family: var(--baslik-font);
  font-size: 42px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.profil__rakam span {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--metin-cok-soluk);
}

.profil__satir {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin-bottom: 14px;
  font-size: 15px;
  flex-wrap: wrap;
}

.profil__satir dt {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--metin-cok-soluk);
  min-width: 110px;
}

/* ==========================================================================
   OFİS KARTI
   ========================================================================== */

.ofis-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 30px;
}

.ofis-kart {
  background: var(--beyaz);
  box-shadow: var(--golge-kart);
  display: flex;
  flex-direction: column;
}

.ofis-kart__gorsel {
  height: 210px;
  background-size: cover;
  background-position: center;
}

.ofis-kart__govde {
  padding: 26px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
}

.ofis-kart h3 {
  font-family: var(--baslik-font);
  font-size: 26px;
  font-weight: 400;
}

.ofis-kart__adres {
  color: var(--metin-soluk);
  font-size: 14px;
  line-height: 1.7;
}

.ofis-kart__alt {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 20px;
  font-size: 12px;
  color: var(--metin-soluk);
}

.ofis-kart__alt b {
  color: var(--metin);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   FORM
   ========================================================================== */

.form-alan {
  margin-bottom: 18px;
}

.form-alan label {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 8px;
}

.form-alan input,
.form-alan textarea,
.form-alan select {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--cizgi);
  background: var(--beyaz);
  font-family: inherit;
  font-size: 15px;
  color: inherit;
  outline: 0;
  transition: var(--gecis);
}

.form-alan textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.7;
}

.form-alan input:focus,
.form-alan textarea:focus,
.form-alan select:focus {
  border-color: var(--kirmizi);
}

.form-ikili {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* Honeypot — ekrandan ve ekran okuyucudan gizli, ama botların doldurabileceği
   bir input. display:none KULLANILMAZ: bazı botlar CSS'i işleyip bu tür
   alanları es geçiyor; off-screen konumlandırma daha güvenilir. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.dogrulama-hata {
  color: var(--kirmizi);
  font-size: 12px;
  margin-top: 6px;
  display: block;
}

.form-sonuc {
  padding: 16px 18px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.6;
}

.form-sonuc--basarili {
  background: #f0f7f0;
  border-left: 3px solid #2e7d32;
  color: #1b5e20;
}

.form-sonuc--hata {
  background: #fdf0f0;
  border-left: 3px solid var(--kirmizi);
  color: var(--kirmizi-koyu);
}

.form-not {
  font-size: 12px;
  color: var(--metin-cok-soluk);
  line-height: 1.7;
  margin-top: 14px;
}

/* ==========================================================================
   DANIŞMAN YORUMLARI
   ========================================================================== */

.yorum-rozet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 15px;
  color: var(--metin-soluk);
}

.yorum-rozet__yildiz {
  color: var(--kirmizi);
  font-size: 18px;
}

.yorum-rozet strong {
  font-size: 20px;
  color: var(--metin);
}

/* Danışman kartındaki küçük sürüm (liste / ana sayfa). */
.yorum-rozet--kart {
  margin-top: 0;
  gap: 5px;
  font-size: 12px;
}

.yorum-rozet--kart .yorum-rozet__yildiz {
  font-size: 14px;
}

.yorum-rozet--kart strong {
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.yorum-duzen {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 640px) {
  .yorum-duzen {
    grid-template-columns: 1fr;
  }
}

.yorum-serit {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.yorum-kart {
  background: var(--zemin);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.yorum-kart__yildizlar {
  color: var(--kirmizi);
  font-size: 16px;
  letter-spacing: 2px;
}

.yorum-kart__metin {
  font-size: 15px;
  line-height: 1.7;
  color: var(--metin);
  flex: 1;
}

.yorum-kart__yazan {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
}

.yorum-kart__yazan strong {
  color: var(--metin);
}

.yorum-kart__yazan span {
  color: var(--metin-cok-soluk);
}

.yorum-bos {
  color: var(--metin-soluk);
  font-size: 15px;
}

.yorum-sayfalama {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 20px;
}

/* İlan detayı galerisindeki .detay-galeri__sayfa-ok ile aynı stil ve geçiş — dolu kırmızı,
   sınırda opacity 0.3'e düşen aynı "geçiş" (bkz. site.css §detay-galeri). */
.yorum-sayfalama__ok {
  width: 34px;
  height: 34px;
  border: 0;
  background: var(--kirmizi);
  color: var(--beyaz);
  font-size: 13px;
  cursor: pointer;
  transition: var(--gecis);
}

.yorum-sayfalama__ok:disabled {
  opacity: 0.3;
  cursor: default;
}

.yorum-sayfalama__durum {
  font-size: 13px;
  color: var(--metin-cok-soluk);
  letter-spacing: 1px;
}

.yorum-form-kap h3 {
  font-family: var(--baslik-font);
  font-weight: 400;
  font-size: 26px;
  margin-bottom: 20px;
}

.yildiz-secici {
  display: flex;
  gap: 6px;
}

.yildiz-secici__buton {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
  color: var(--cizgi);
  padding: 0;
  transition: var(--gecis);
}

.yildiz-secici__buton--dolu {
  color: var(--kirmizi);
}

/* İletişim sayfası düzeni */
.iletisim-duzen {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: start;
}

.iletisim-bilgi dt {
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--kirmizi);
  margin-bottom: 8px;
}

.iletisim-bilgi dd {
  font-size: 17px;
  margin-bottom: 28px;
  line-height: 1.7;
}

/* ==========================================================================
   KURUMSAL / KARİYER İÇERİĞİ
   ========================================================================== */

.metin-blok {
  max-width: 68ch;
}

.metin-blok p {
  line-height: 1.95;
  color: #444;
  margin-bottom: 22px;
  font-size: 17px;
}

.metin-blok h3 {
  font-family: var(--baslik-font);
  font-size: 30px;
  font-weight: 400;
  margin: 40px 0 16px;
}

.deger-izgara {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--cizgi);
  border: 1px solid var(--cizgi);
  margin-top: 20px;
}

/* Tablet: 2'li 2'li; mobil: tek sütun */
@media (max-width: 1100px) {
  .deger-izgara {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .deger-izgara {
    grid-template-columns: 1fr;
  }
}

.deger {
  background: var(--beyaz);
  padding: 34px 30px;
}

.deger__no {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--kirmizi);
  margin-bottom: 16px;
}

.deger h3 {
  font-family: var(--baslik-font);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 12px;
}

.deger p {
  color: var(--metin-soluk);
  line-height: 1.8;
  font-size: 15px;
}

/* Adım listesi (kariyer süreci) */
.adim-liste {
  border-top: 1px solid var(--cizgi);
  margin-top: 30px;
}

.adim {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 26px;
  padding: 28px 0;
  border-bottom: 1px solid var(--cizgi);
  align-items: start;
}

.adim__no {
  font-family: var(--baslik-font);
  font-size: 34px;
  color: var(--kirmizi);
  line-height: 1;
}

.adim h3 {
  font-family: var(--baslik-font);
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 8px;
}

.adim p {
  color: var(--metin-soluk);
  line-height: 1.8;
  max-width: 60ch;
}

/* Blazor hata çubuğu */
#blazor-error-ui {
  background: #ffe9e9;
  border-top: 3px solid var(--kirmizi);
  bottom: 0;
  display: none;
  left: 0;
  padding: 14px 20px;
  position: fixed;
  width: 100%;
  z-index: 1000;
  font-size: 14px;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 18px;
  top: 12px;
  font-size: 18px;
}

/* ==========================================================================
   DUYARLI TASARIM
   ========================================================================== */

@media (max-width: 1100px) {
  .liste-duzen {
    grid-template-columns: 1fr;
  }

  .filtre {
    position: static;
  }

  .filtre-ac {
    display: flex;
  }

  .filtre__icerik {
    display: none;
    margin-top: 22px;
  }

  .filtre__icerik h3 {
    display: none;
  }

  .filtre--acik .filtre__icerik {
    display: block;
  }

  .detay-duzen {
    grid-template-columns: 1fr;
  }

  .yan-sutun {
    position: static;
  }

  .profil {
    grid-template-columns: 240px 1fr;
    gap: 35px;
  }

  .iletisim-duzen {
    grid-template-columns: 1fr;
    gap: 45px;
  }
}

@media (max-width: 900px) {
  .ust-bar {
    padding: 20px 25px;
  }

  .ust-bar--kati,
  .ust-bar.kaydirildi {
    padding: 18px 25px;
  }

  .logo__kilit {
    height: 44px;
  }

  .alt-bar__logo {
    height: 54px;
  }

  .ana-menu {
    display: none;
  }

  .menu-dugme {
    display: block;
  }

  .mobil-menu.acik {
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--kirmizi);
    color: var(--beyaz);
    padding: 110px 30px 40px;
    overflow-y: auto;
  }

  .mobil-menu.acik a {
    font-family: var(--baslik-font);
    font-size: 30px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  }

  .hero__ic {
    padding: 130px var(--sayfa-yan-dar);
  }

  .hero h1 {
    font-size: 70px;
  }

  /* Arama kutusu translateY(-45px) ile hero'nun üzerine biniyor ve bu şeridi
       örtüyordu; ayrıca iki yazı dar ekranda birbirine giriyordu.
       Dokunmatikte "kaydırın" ipucunun da bir karşılığı yok, gizleniyor. */
  .hero__zemin {
    display: none;
  }

  .arama-izgara {
    grid-template-columns: 1fr;
  }

  .arama-oge {
    border-right: 0;
    border-bottom: 1px solid var(--cizgi);
  }

  .arama-dugme {
    padding: 20px;
  }

  .tanitim {
    grid-template-columns: 1fr;
    gap: 50px;
    padding: 90px var(--sayfa-yan-dar);
  }

  .vitrin {
    padding: 90px 5%;
  }

  /* Başlık ile "TÜM İLANLAR →" bağlantısı dar ekranda yan yana sığmıyordu.
       Bağlantı white-space: nowrap olduğu için satıra dönmüyor, belgeyi
       yatayda genişletiyordu: içerik görünen alanda kalırken position: fixed
       olan üst bar ve ses düğmesi taşan belge genişliğine göre konumlanıp
       ekranın dışına kayıyordu. Alt alta diziliyorlar. */
  .vitrin__ust {
    flex-direction: column;
    align-items: start;
    gap: 16px;
    margin-bottom: 36px;
  }

  .one-cikan {
    height: 500px;
  }

  .one-cikan__bilgi {
    left: 25px;
    right: 25px;
    flex-direction: column;
    align-items: start;
    gap: 22px;
  }

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

  .rakam-izgara {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .alt-bar__ust {
    flex-direction: column;
    gap: 50px;
  }

  .alt-bar__baglantilar {
    gap: 35px;
    flex-wrap: wrap;
  }

  .sayfa-basi {
    padding: 150px var(--sayfa-yan-dar) 70px;
  }

  .detay-baslik {
    padding: 30px var(--sayfa-yan-dar) 20px;
  }

  .detay-galeri {
    grid-template-columns: 1fr;
    padding-top: 0;
  }

  .detay-galeri__buyuk {
    height: 340px;
  }

  .detay-galeri__yan {
    grid-template-rows: none;
    grid-template-columns: repeat(3, 1fr);
    height: 100px;
  }

  .detay-galeri__yan:has(.detay-galeri__sayfa-ok) {
    grid-template-rows: none;
    grid-template-columns: 36px repeat(3, minmax(0, 1fr)) 36px;
  }

  .detay-galeri__sayfa-ok {
    font-size: 0;
  }

  .detay-galeri__sayfa-ok:first-child::after {
    content: "\25C0";
    font-size: 13px;
  }

  .detay-galeri__sayfa-ok:last-child::after {
    content: "\25B6";
    font-size: 13px;
  }

  .detay-duzen {
    padding: 50px var(--sayfa-yan-dar) 80px;
    gap: 35px;
  }

  .profil {
    grid-template-columns: 1fr;
    padding: 50px var(--sayfa-yan-dar);
  }

  .profil__gorsel,
  .monogram--buyuk {
    height: 300px;
  }

  .form-ikili {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .lokasyon {
    font-size: 30px;
  }
}

@media (max-width: 520px) {
  .ust-bar,
  .ust-bar--kati,
  .ust-bar.kaydirildi {
    padding-left: 16px;
    padding-right: 16px;
  }

  .ust-aksiyonlar {
    gap: 8px;
    margin-left: 8px;
  }

  .ust-basvuru__dugme {
    padding: 7px 9px;
    font-size: 10px;
    letter-spacing: 1px;
  }

  .hero h1 {
    font-size: 56px;
  }

  .hero__butonlar {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__zemin {
    font-size: 9px;
    letter-spacing: 2px;
  }

  .rakam strong {
    font-size: 50px;
  }

  .rakam-izgara {
    grid-template-columns: 1fr;
  }

  .alt-bar__baglantilar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .ilan-izgara,
  .ofis-izgara {
    grid-template-columns: 1fr;
  }

  /* İlan kartları mobilde sahibinden tarzı yatay: solda görsel, sağda bilgi */
  .ilan-izgara {
    gap: 12px;
  }

  .ilan-kart {
    flex-direction: row;
    min-height: 124px;
  }

  .ilan-kart:hover {
    transform: none;
  }

  .ilan-kart__gorsel {
    flex: 0 0 132px;
    height: auto;
    min-height: 124px;
  }

  .ilan-kart__rozetler {
    top: 8px;
    left: 8px;
  }

  .ilan-kart__rozetler .rozet--koyu,
  .ilan-kart__no {
    display: none;
  }

  .ilan-kart__govde {
    min-width: 0;
    padding: 12px 14px;
    gap: 6px;
  }

  .ilan-kart__konum {
    font-size: 10px;
    letter-spacing: 1px;
  }

  .ilan-kart__baslik {
    font-size: 16px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .ilan-kart__fiyat {
    font-size: 17px;
  }

  .ilan-kart__ozet {
    padding-top: 8px;
    gap: 12px;
  }

  /* Danışmanlar mobilde 2'şerli yan yana */
  .danisman-izgara {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .danisman-izgara--ust {
    margin-bottom: 14px;
  }

  .danisman-izgara--ust .danisman-kart {
    flex: 0 1 calc((100% - 14px) / 2);
  }

  .danisman-kart__gorsel,
  .monogram--kart {
    height: 190px;
  }

  .monogram--kart {
    font-size: 44px;
  }

  .danisman-kart__govde {
    padding: 14px 14px 16px;
    gap: 6px;
  }

  .danisman-kart__ad {
    font-size: 18px;
  }

  .danisman-kart__unvan {
    font-size: 10px;
    letter-spacing: 0.5px;
  }

  .detay-fiyat {
    font-size: 34px;
  }

  /* ------------------------------------------------------------------
       Dar ekranda büyük başlık puntoları.

       clamp() alt sınırları (55–70px) İngilizce metin için seçilmişti.
       Türkçede "YAŞAMLARIN", "İSTERSİNİZ", "DANIŞMANLARIMIZ" gibi uzun
       kelimeler bölünemediği için kutuyu taşırıyor ve BELGEYİ YATAYDA
       GENİŞLETİYORDU. Sonuç kafa karıştırıcıydı: içerik görünen alanda
       kalırken position: fixed olan üst bar ve ses düğmesi taşan belge
       genişliğine göre konumlanıp ekranın dışına kayıyordu.

       360px'te kullanılabilir genişlik ~310px. 11 harfli bir kelimenin
       sığması için punto en çok ~49px olabilir.
       ------------------------------------------------------------------ */
  .vitrin__baslik {
    font-size: 42px;
  }

  .vitrin__baslik--kisa {
    font-size: 30px;
  }

  .beyan h2 {
    font-size: 38px;
  }

  .beyan {
    padding: 90px 7%;
  }

  .lokasyonlar h2 {
    font-size: 40px;
  }

  .tanitim h2 {
    font-size: 40px;
  }

  .cagri h2 {
    font-size: 42px;
  }

  .sayfa-basi h1,
  .sayfa-basi__yazi {
    font-size: 38px;
  }

  .bolum-basligi h2 {
    font-size: 32px;
  }

  .bos-sayfa h1 {
    font-size: 42px;
  }

  .detay-baslik h1 {
    font-size: 30px;
  }

  .profil h1 {
    font-size: 34px;
  }

  .profil__rakamlar {
    gap: 28px;
  }

  .kap,
  .detay-duzen {
    padding-left: 6%;
    padding-right: 6%;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Hareket azaltma tercihinde slider'ın video ögesi gizlenir, poster
       görseli kalır. Foto ögeleri kalır (statik görsel, rahatsız edici
       hareket sayılmaz) — aradaki geçiş de aşağıdaki blanket transition
       kuralıyla zaten neredeyse anlıktır. */
  .hero__slide--video {
    display: none;
  }

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   ARKA PLAN MÜZİĞİ DÜĞMESİ
   Sağ altta sabit durur. Çalarken hoparlör ikonu yerine küçük bir
   eşitleyici animasyonu görünür; durunca ikon geri gelir.
   ========================================================================== */

.whatsapp-dugme {
  position: fixed;
  right: 26px;
  bottom: 92px;
  z-index: 90;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #25d366;
  color: var(--beyaz);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
  transition: var(--gecis);
}

.whatsapp-dugme:hover {
  background: #1ebe5a;
  transform: translateY(-3px);
}

.whatsapp-dugme__ikon {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.ses-dugme {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 90;
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  background: var(--kirmizi);
  color: var(--beyaz);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.28);
  transition: var(--gecis);
}

.ses-dugme:hover {
  background: var(--kirmizi-koyu);
  transform: translateY(-3px);
}

.ses-dugme__ikon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ses-dugme__hoparlor {
  fill: currentColor;
  stroke: none;
}

/* Kapalıyken: dalgalar gizli, çapraz görünür. */
.ses-dugme__dalga {
  display: none;
}

.ses-dugme.caliyor .ses-dugme__capraz {
  display: none;
}

.ses-dugme.caliyor .ses-dugme__dalga {
  display: block;
}

/* Çalarken ikon gizlenir, eşitleyici çubukları görünür. */
.ses-dugme__esitleyici {
  display: none;
  align-items: flex-end;
  gap: 3px;
  height: 18px;
}

.ses-dugme.caliyor .ses-dugme__ikon {
  display: none;
}

.ses-dugme.caliyor .ses-dugme__esitleyici {
  display: flex;
}

.ses-dugme__esitleyici i {
  width: 3px;
  background: currentColor;
  animation: esitleyici 0.9s ease-in-out infinite;
}

.ses-dugme__esitleyici i:nth-child(1) {
  height: 8px;
  animation-delay: 0s;
}
.ses-dugme__esitleyici i:nth-child(2) {
  height: 16px;
  animation-delay: 0.25s;
}
.ses-dugme__esitleyici i:nth-child(3) {
  height: 11px;
  animation-delay: 0.5s;
}

@keyframes esitleyici {
  0%,
  100% {
    transform: scaleY(0.45);
  }
  50% {
    transform: scaleY(1);
  }
}

@media (max-width: 520px) {
  .ses-dugme {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }

  .whatsapp-dugme {
    right: 16px;
    bottom: 72px;
    width: 44px;
    height: 44px;
  }

  .whatsapp-dugme__ikon {
    width: 22px;
    height: 22px;
  }
}

/* Eşitleyici çubukları "az hareket" tercihinde de oynamaya devam eder,
   yalnızca yavaşlar. Tamamen durdurmak, müziğin çaldığını gösteren TEK
   göstergeyi öldürüyordu — bu erişilebilirlik kazancı değil, kayıp.
   12×18 piksellik bir gösterge, tercihin hedeflediği türde hareket değil.

   Sayfa sonundaki genel kural bütün animasyonları .01ms'ye indirdiği için
   burada !important gerekiyor. */
@media (prefers-reduced-motion: reduce) {
  .ses-dugme.caliyor .ses-dugme__esitleyici i {
    animation-name: esitleyici !important;
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
    animation-timing-function: ease-in-out !important;
  }
}

/* ==========================================================================
   GİRİŞ PERDESİ (YÜKLEME EKRANI)
   Varsayılan gizli; site.js açar. JavaScript yoksa hiç görünmez.
   ========================================================================== */

.giris {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #101010;
  color: var(--beyaz);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  opacity: 1;
  transition:
    opacity 0.7s ease,
    visibility 0.7s;
}

/* .giris'in display:flex'i tarayıcının [hidden] kuralını ezer; bu olmadan
   JavaScript kapalıyken perde ekranda kalır ve site açılmaz. */
.giris[hidden] {
  display: none !important;
}

.giris.kapaniyor {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Perde açıkken arka plan kaydırılmasın. */
body.giris-acik {
  overflow: hidden;
}

.giris__ic {
  text-align: center;
  max-width: 460px;
  width: 100%;
  animation: girisBelir 1s ease both;
}

@keyframes girisBelir {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.giris__logo {
  display: block;
  height: clamp(130px, 24vw, 190px);
  width: auto;
  margin: 0 auto;
}

.giris__slogan {
  margin-top: 34px;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: #cfcfcf;
}

.giris__ilerleme {
  margin: 42px auto 14px;
  width: 100%;
  max-width: 300px;
  height: 2px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}

/* Genişlik her karede JS tarafından yazılır; CSS geçişi bunu geciktirirdi. */
.giris__ilerleme span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--kirmizi-acik);
}

.giris__durum {
  margin-bottom: 8px;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #8f8f8f;
  font-variant-numeric: tabular-nums;
  min-height: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .giris__ic {
    animation: none;
  }
}

/* ==========================================================================
   GÖMÜLÜ HARİTA (iletişim sayfası)
   ========================================================================== */

.harita-bolum {
  background: var(--zemin);
  padding: 0;
  line-height: 0; /* iframe altındaki boşluğu kaldırır */
}

.harita {
  display: block;
  width: 100%;
  height: 460px;
  border: 0;
  /* Harita renkli ve parlak; sayfanın sakin tonuna yaklaştırmak için
       hafifçe soluklaştırılıyor, üzerine gelince tam renge dönüyor. */
  filter: grayscale(0.35) contrast(1.02);
  transition: filter 0.4s ease;
}

.harita:hover,
.harita:focus-within {
  filter: none;
}

@media (max-width: 900px) {
  .harita {
    height: 320px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .harita {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   "Az hareket" muafiyeti — dosyanın EN SONUNDA olmalı.
   Yukarıdaki genel kural (*, *::before, *::after) bütün animasyonları
   .01ms'ye indiriyor; eşitleyici göstergesi bundan muaf tutuluyor.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ses-dugme.caliyor .ses-dugme__esitleyici i {
    animation-name: esitleyici !important;
    animation-duration: 1.6s !important;
    animation-iteration-count: infinite !important;
  }

  /* Başlık: hareket yok, yalnızca açılma. */
  .animasyon-var.giris-bitti .hero h1 .satir__ic {
    animation-name: satirBelir !important;
    animation-duration: 1s !important;
    animation-fill-mode: both !important;
  }
}

/* ==========================================================================
   ÜST BAR BAŞVURU BUTONLARI + BAŞVURU MODALI
   ========================================================================== */

.ust-aksiyonlar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: 28px;
}

.ust-basvuru {
  display: flex;
  gap: 10px;
}

.ust-basvuru__dugme {
  display: inline-block;
  text-decoration: none;
  border: 0;
  background: transparent;
  color: var(--kirmizi);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: var(--gecis);
}

.ust-basvuru__dugme::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 5px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.ust-basvuru__dugme:hover::after {
  transform: scaleX(1);
}

.ust-basvuru__dugme--dolu {
  background: var(--kirmizi);
  color: var(--beyaz);
  font-size: 13px;
  font-weight: 800;
  padding: 12px 20px;
  box-shadow: 0 4px 14px rgba(200, 30, 45, 0.3);
  animation: kalpAtisi 1.8s ease-in-out infinite;
}

@keyframes kalpAtisi {
  0%,
  100% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.08);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.08);
  }
  70% {
    transform: scale(1);
  }
}

.ust-bar--seffaf:not(.kaydirildi)
  .ust-basvuru__dugme:not(.ust-basvuru__dugme--dolu) {
  color: var(--beyaz);
}

/* Giriş: ana menüdeki Satılık/Kiralık linkleriyle aynı görünüm (çubuğun
   rengi, büyük harf, ince kırmızı alt çizgi) + yanında ">" oku.
   İki sınıflı seçici, kırmızı taban rengini ezmek için; şeffaf barda beyazı
   zaten yukarıdaki genel kural veriyor. */
.ust-basvuru__dugme.ust-basvuru__dugme--giris {
  color: inherit;
  font-weight: 400;
  letter-spacing: 1px;
  padding: 0 0 2px;
  margin-right: 14px;
  align-self: center;
}

.ust-basvuru__dugme--giris::after {
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: var(--kirmizi);
}

.giris-ok {
  display: inline-block;
  margin-left: 4px;
  transition: transform 0.3s ease;
}

.ust-basvuru__dugme--giris:hover .giris-ok {
  transform: translateX(3px);
}

@media (min-width: 901px) {
  .ust-basvuru__dugme.ust-basvuru__dugme--giris {
    font-size: 13px;
  }
}

.basvuru-kutu {
  max-width: 860px;
  margin: 0 auto;
}

.modal__alt {
  text-align: center;
  margin-bottom: 28px;
  color: #555;
}

.form-telefon {
  display: grid;
  grid-template-columns: 90px 1fr;
}

.form-onay {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: #555;
  margin-bottom: 22px;
  cursor: pointer;
}

.form-onay input {
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .ust-basvuru {
    display: none;
  }
}

/* 900px altında menü burgera dönüşür; "Danışman Ol" butonu artık açılan
   menünün içinde kaybolmak yerine burgerin yanında, aynı animasyonla durur.
   Bu kural 1100px kuralından sonra geldiği için kazanır. */
@media (max-width: 900px) {
  .ust-basvuru {
    display: flex;
  }

  .ust-aksiyonlar {
    gap: 10px;
    margin-left: 12px;
  }

  .ust-basvuru__dugme {
    padding: 8px 12px;
    font-size: 11px;
  }
}

@media (max-width: 700px) {
  .basvuru-kutu .form-ikili {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.token-aciklama {
  margin-bottom: 24px;
  line-height: 1.8;
  color: #444;
}

/* ==========================================================================
   YASAL SAYFALAR
   ========================================================================== */

.yasal-metin {
  max-width: 860px;
  margin: 0 auto;
  line-height: 1.8;
  color: #333;
}

.yasal-metin h2 {
  font-size: 24px;
  margin: 36px 0 12px;
}

.yasal-metin p,
.yasal-metin ul {
  margin-bottom: 14px;
}

.yasal-metin ul {
  padding-left: 22px;
}

.yasal-metin a {
  color: var(--kirmizi);
  text-decoration: underline;
}

.yasal-metin__tarih {
  font-size: 12px;
  letter-spacing: 1px;
  color: #888;
  margin-bottom: 24px;
}

.yasal-metin__kimlik {
  list-style: none;
  padding: 16px 20px !important;
  background: var(--zemin);
}

.yasal-metin__tablo {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
  font-size: 14px;
}

@media (max-width: 700px) {
  /* Geniş tablolar sayfayı taşırmasın; kendi içinde yatay kayar */
  .yasal-metin__tablo {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.yasal-metin__tablo th,
.yasal-metin__tablo td {
  border: 1px solid var(--cizgi);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.yasal-metin__tablo th {
  background: var(--zemin);
}

.harita-onay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  background: var(--zemin);
  color: #555;
  min-height: 260px;
}

.harita-onay p {
  max-width: 480px;
  line-height: 1.7;
}

.harita-onay a {
  color: var(--kirmizi);
  text-decoration: underline;
}

.alt-bar__yasal {
  padding: 18px var(--sayfa-yan-dar) 0;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.8;
}

.alt-bar__yasal-baglantilar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin-bottom: 6px;
}

.alt-bar__yasal-baglantilar a {
  color: inherit;
  text-decoration: none;
  letter-spacing: 0.5px;
}

.alt-bar__yasal-baglantilar a:hover {
  color: #fff;
  text-decoration: underline;
}

.aydinlatma-notu {
  margin-top: 14px;
  line-height: 1.7;
}

.aydinlatma-notu a {
  color: var(--kirmizi);
  text-decoration: underline;
}

/* Çerez/analitik onay şeridi — engelleyici değil, sayfanın altında durur. */
.cerez-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9000;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  padding: 16px 20px;
  background: #14203a;
  color: #e9edf5;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  font-size: 14px;
  line-height: 1.55;
}

.cerez-banner__metin {
  flex: 1 1 320px;
  margin: 0;
}
.cerez-banner__metin a {
  color: #fff;
  text-decoration: underline;
}
.cerez-banner__butonlar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.cerez-banner__kabul {
  padding: 12px 26px;
  border: 0;
  border-radius: 4px;
  background: var(--kirmizi, #b5121b);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.cerez-banner__kabul:hover {
  filter: brightness(1.1);
}

.cerez-banner__red {
  padding: 4px 2px;
  border: 0;
  background: none;
  color: inherit;
  opacity: 0.7;
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.cerez-banner__red:hover {
  opacity: 1;
}

.cerez-banner [aria-current] {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* Görselle Paylaş penceresi (PRPaylas.instagramHikaye) */
.paylas-modal-acik { overflow: hidden; }
.paylas-modal { position: fixed; inset: 0; z-index: 9400; background: rgba(8,12,22,.6); display: flex; align-items: flex-end; justify-content: center; }
.paylas-modal__kutu { background: #fff; width: 100%; max-width: 520px; max-height: 98vh; overflow-y: auto; padding: 14px 24px 18px; border-radius: 18px 18px 0 0; }
@media (min-width: 640px) { .paylas-modal { align-items: center; } .paylas-modal__kutu { border-radius: 18px; } }
.paylas-modal__ust { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.paylas-modal__ust h3 { font-size: 20px; margin: 0; }
.paylas-modal__kapat { background: none; border: 0; font-size: 30px; line-height: 1; cursor: pointer; color: var(--metin-soluk); }
.paylas-modal__onizleme { display: flex; justify-content: center; margin-bottom: 8px; }
.paylas-modal__onizleme canvas { max-width: 100%; max-height: calc(100vh - 360px); min-height: 180px; width: auto; height: auto; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.paylas-modal__baslik { font-weight: 700; margin: 10px 0 6px; }
.paylas-modal__secenek { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.paylas-modal__secenek button { padding: 9px 6px; border: 1px solid var(--cizgi); border-radius: 10px; background: #fff; font-weight: 600; color: var(--metin-soluk); cursor: pointer; }
.paylas-modal__secenek button.secili { border-color: var(--kirmizi); background: #fbeeee; color: var(--kirmizi-koyu); }
.paylas-modal__ayarlar { display: flex; flex-wrap: wrap; gap: 10px; }
.paylas-modal__ayarlar label { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--cizgi); border-radius: 10px; font-weight: 600; cursor: pointer; }
.paylas-modal__ayarlar input[type="checkbox"] { accent-color: var(--kirmizi); }
.paylas-modal__paylas { width: 100%; margin-top: 12px; padding: 12px; border: 0; border-radius: 12px; background: var(--kirmizi); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; }
.paylas-modal__paylas:hover { background: var(--kirmizi-koyu); }

.turnstile-kutu {
  margin: 0 0 14px;
  min-height: 0;
}