/* ==========================================================================
   OTOMATİK ÜRETİLDİ — ELLE DÜZENLEME
   Bu dosya tasarım sisteminden derlenmiştir.
   Değişiklik yapmak için `tasarim/` klasöründeki dosyaları düzenleyip 
   `build-css.sh` scriptini çalıştırın.
   ========================================================================== */
/* =============================================================================
   RENK TOKENLARI — YER TUTUCU PALET
   Marka renkleri geldiğinde DEĞİŞECEK TEK DOSYA burasıdır.

   YÖN: sıcak espresso + kum kâğıdı + pirinç vurgu.
   Önceki palet soğuk bir kurumsal griydi (Fluent tonları) ve uzun dönem VIP
   konaklamanın satmaya çalıştığı şeyin —"ev sıcaklığı, otel değil"— tam tersini
   söylüyordu. Lüks konaklamada sıcak nötrler + tek bir metalik vurgu standarttır.

   KURAL: bileşen CSS'i ham rampayı DEĞİL, alttaki anlamsal takma adları kullanır.
   ============================================================================= */

:root {
  /* --- Kum: sıcak nötr rampa (kâğıt → espresso) ------------------------- */
  --kum-0:   #ffffff;
  --kum-50:  #fbf9f5;   /* sayfa kâğıdı */
  --kum-100: #f4f0e8;
  --kum-200: #e8e2d6;
  --kum-300: #d6cebd;
  --kum-400: #b8ae99;
  --kum-500: #948a75;
  --kum-600: #6f6857;   /* ikincil metin — açık zeminde 5,26:1 */
  --kum-700: #524c3f;
  --kum-800: #35312a;   /* gövde metni — açık zeminde 12,4:1 */
  --kum-900: #221f1a;   /* koyu yüzey */
  --kum-950: #15130f;   /* en koyu: footer, hero perdesi */

  /* --- Pirinç: tek metalik vurgu ---------------------------------------- */
  --pirinc-100: #f5e9d0;
  --pirinc-200: #e8d2a5;
  --pirinc-300: #d9b978;   /* koyu zeminde vurgu — 8,73:1 */
  --pirinc-400: #c79e4e;
  --pirinc-500: #b08334;
  --pirinc-600: #8a641d;   /* açık zeminde vurgu metni.
                              Ölçülen: beyaz 5,35:1 · sayfa kâğıdı 5,09:1 ·
                              ara yüzey (--kum-100) 4,71:1. Önceki ton #8f681f
                              ara yüzeyde 4,43'e düşüp AA'yı kaçırıyordu. */
  --pirinc-700: #6f5117;
  --pirinc-800: #513b10;

  /* --- Geri bildirim ---------------------------------------------------- */
  --hata-50:    #fdf4f3;
  --hata-600:   #a4262c;
  --basari-50:  #f2f8f4;
  --basari-600: #1c6b41;

  /* =========================================================================
     ANLAMSAL TAKMA ADLAR — bileşenler YALNIZCA bunları kullanır
     ========================================================================= */

  /* Yüzeyler */
  --yuzey-sayfa:  var(--kum-50);    /* varsayılan zemin: sıcak kâğıt */
  --yuzey-kart:   var(--kum-0);     /* beyaz kart */
  --yuzey-kagit:  var(--kum-100);   /* ara yüzey, sakin bant */
  --yuzey-koyu:   var(--kum-900);   /* koyu bant */
  --yuzey-derin:  var(--kum-950);   /* hero perdesi, footer */
  /* Yapışkan üst çubuk: yarı saydam.
     color-mix() DEĞİL düz rgba: color-mix'in hesaplanmış değeri bazı
     tarayıcılarda color(srgb ...) biçiminde dönüyor ve hem eski tarayıcılarda
     hem denetim araçlarında yanlış çözümleniyordu. Saydamlık 0,90: altından
     koyu bir bölüm geçerken bile zemin açık kalıyor ve koyu menü yazısı
     kontrastını koruyor. */
  --yuzey-cubuk:  rgba(255, 255, 255, .90);

  /* Metin */
  --metin-ana:              var(--kum-800);
  --metin-ikincil:          var(--kum-600);
  --metin-koyu-uzeri:       var(--kum-100);
  --metin-zayif-koyu-uzeri: var(--kum-300);

  /* Vurgu — rasyonlanır. Görünüm başına bir birincil buton,
     sayfa başına bir tam vurgu yüzeyi. */
  --vurgu:            var(--pirinc-600);   /* açık zeminde vurgu metni/ikon */
  --vurgu-koyu-uzeri: var(--pirinc-300);   /* koyu zeminde vurgu */
  --vurgu-zemin:      var(--pirinc-300);   /* koyu zeminde pirinç buton zemini */
  --vurgu-zayif:      var(--pirinc-100);   /* çok açık pirinç dolgu */

  /* Mürekkep butonu (birincil eylem).
     NEDEN pirinç zeminli değil: pirinci açarak hover yapmak beyaz yazıyla
     kontrastı 3,46:1'e düşürüyor ve AA'yı kaybediyor. Birincil eylem mürekkep,
     pirinç ise vurgu katmanı olarak kalıyor — koyu bantta pirinç buton kullanılır,
     orada zemin koyu olduğu için pirinç üzerine siyah yazı 9,86:1 veriyor. */
  --murekkep:        var(--kum-900);
  --murekkep-hover:  var(--kum-800);
  --murekkep-basili: var(--kum-950);

  /* Kenarlar */
  --kenar-ince:     var(--kum-200);
  --kenar-belirgin: var(--kum-400);
  --kenar-koyu-uzeri: rgba(255, 255, 255, 0.16);

  /* Odak halkası — vurgudan FARKLI olmak zorunda, yoksa odak "seçili"
     görünümünden ayırt edilemiyor. Soğuk mavi bilerek seçildi. */
  --odak-halkasi: #2563eb;

  /* Geri bildirim takma adları */
  --hata-metin:   var(--hata-600);
  --hata-zemin:   var(--hata-50);
  --basari-metin: var(--basari-600);
  --basari-zemin: var(--basari-50);

  /* Gölge — lüks yüzeylerde gölge AZ kullanılır; derinlik çizgiyle verilir.
     Yalnız yükselen kart ve yapışkan çubukta. */
  --golge-kart:   0 1px 2px rgba(34, 31, 26, .04), 0 8px 24px -12px rgba(34, 31, 26, .18);
  --golge-yuksek: 0 2px 4px rgba(34, 31, 26, .06), 0 20px 40px -20px rgba(34, 31, 26, .28);
  --golge-serit:  0 1px 0 rgba(34, 31, 26, .06);
}

/* =============================================================================
   TİPOGRAFİ TOKENLARI — İKAME OLARAK İŞARETLİ
   Markanın gerçek fontu geldiğinde --font-* satırları değişir, başka hiçbir yer.

   ÜÇ REGISTER (lüks emlak/konaklama sitelerinin standardı):
     display  — zarif serif. Marka sesi, başlıklar. Playfair Display.
     govde    — nötr sans. Açıklama, arayüz, form. Inter.
     veri     — aynı sans, tabular rakamlarla. Fiyat, m², oda sayısı.

   Neden veri için ayrı bir mono aile YOK: üçüncü bir font ailesi mobilde
   ~40-60 KB daha demek ve bu kategoride hız doğrudan dönüşüm kaybı
   (3 sn üzeri yüklemede ziyaretçilerin yarısından fazlası ayrılıyor).
   Inter'in tabular-nums özelliği hizalı rakam için yeterli.
   ============================================================================= */

:root {
  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-govde:   'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-veri:    var(--font-govde);

  /* --- Ölçek -------------------------------------------------------------
     Display boyutları clamp() ile akışkan: 360px telefonda da 1920px
     masaüstünde de aynı orantıyı koruyor, ara kırılma noktası gerekmiyor. */
  --fs-display-1: clamp(2.25rem, 1.30rem + 4.20vw, 4.50rem);  /* 36 → 72 */
  --fs-display-2: clamp(1.75rem, 1.16rem + 2.60vw, 3.15rem);  /* 28 → 50 */
  --fs-display-3: clamp(1.40rem, 1.12rem + 1.25vw, 2.10rem);  /* 22 → 34 */

  --fs-xs:   0.75rem;    /* 12 */
  --fs-sm:   0.8125rem;  /* 13 — üst şerit, dipnot */
  --fs-base: 0.9375rem;  /* 15 — arayüz */
  --fs-govde:1.0625rem;  /* 17 — okuma metni; 16 lüks yerleşimde biraz sıkışık */
  --fs-lg:   1.1875rem;  /* 19 */
  --fs-xl:   1.375rem;   /* 22 */
  --fs-2xl:  1.75rem;    /* 28 */

  /* Satır yükseklikleri */
  --lh-display: 1.06;   /* büyük serif başlıklar sıkı olmalı */
  --lh-tight:   1.2;
  --lh-snug:    1.35;
  --lh-normal:  1.55;
  --lh-okuma:   1.7;    /* uzun paragraf */

  /* Harf aralığı */
  --ls-display: -0.02em;   /* büyük serifte hafif sıkıştırma */
  --ls-tight:   -0.01em;
  --ls-normal:  0;
  --ls-eyebrow:  0.14em;   /* üst etiket: seyrek ve büyük harf */
  --ls-buton:    0.02em;

  /* Okuma genişliği — 65-75 karakter */
  --olcu-metin: 62ch;
  --olcu-dar:   46ch;
}

:root {
  /* Boşluklar (Base 16px / 4px ritim) */
  --sp-0: 0px;
  --sp-1: 0.25rem;   /* 4px */
  --sp-2: 0.5rem;    /* 8px */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.25rem;   /* 20px */
  --sp-6: 1.5rem;    /* 24px */
  --sp-8: 2rem;      /* 32px */
  --sp-10: 2.5rem;   /* 40px */
  --sp-12: 3rem;     /* 48px */
  --sp-16: 4rem;     /* 64px */
  --sp-20: 5rem;     /* 80px */
  --sp-24: 6rem;     /* 96px */
  --sp-32: 8rem;     /* 128px */
  
  /* Sınır Yarıçapı (Border Radius) */
  --r-none: 0;
  --r-sm: 0.125rem;
  --r-base: 0.25rem;
  --r-md: 0.375rem;
  --r-lg: 0.5rem;
  --r-xl: 0.75rem;
  --r-2xl: 1rem;
  --r-full: 9999px;
  
  /* Kenar Çizgisi Kalınlığı (Border Width) */
  --bw-1: 1px;
  --bw-2: 2px;
  
  /* Animasyon ve Geçişler */
  --dur-hizli: 150ms;
  --dur-normal: 300ms;
  --dur-yavas: 500ms;
  --ease-standart: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-grup: cubic-bezier(0.4, 0, 1, 1);
  --ease-cikis: cubic-bezier(0, 0, 0.2, 1);
}

/* =============================================================================
   TEMEL — sıfırlama, tipografi ilkelleri, yerleşim yardımcıları
   ============================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-family: var(--font-govde);
  font-size: 16px;
  line-height: var(--lh-normal);
  color: var(--metin-ana);
  background-color: var(--yuzey-sayfa);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;

  /* NOT: buraya overflow-x: clip KOYMA. Kok elemandaki overflow degeri viewport'a
     devrediliyor ve position:fixed bir paneli kirpmiyor — denendi, olculdu, ise
     yaramadi (belge 430px viewport'ta 770px kaliyordu). Off-canvas menunun
     tasmasi bilesenler.css icinde, panel kapaliyken hic yerlestirilmeyerek
     cozuluyor. */
}

/* Hareket hassasiyeti olan ziyaretçi: kaydırma ve geçişler kapanır. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: var(--fs-govde);
}

/* --- Başlıklar ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--sp-4);
  font-weight: 600;
  line-height: var(--lh-tight);
  color: inherit;
  text-wrap: balance;          /* başlık son satırında yetim kelime bırakmaz */
}

/* Display register: serif. Marka sesi burada. */
.konak-display-1,
.konak-display-2,
.konak-display-3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.konak-display-1 { font-size: var(--fs-display-1); }
.konak-display-2 { font-size: var(--fs-display-2); }
.konak-display-3 { font-size: var(--fs-display-3); line-height: var(--lh-tight); }

/* Serif başlıkta italik vurgu — tek kelimeyi öne çıkarmanın en sessiz yolu.
   Kalın yazmak yerine bu kullanılır; lüks tipografide ağırlık değil biçim konuşur. */
.konak-vurgu-italik {
  font-style: italic;
  color: var(--vurgu);
}
.konak-koyu .konak-vurgu-italik { color: var(--vurgu-koyu-uzeri); }

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4, h5, h6 { font-size: var(--fs-govde); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

/* --- Metin ilkelleri ------------------------------------------------------ */
.konak-eyebrow {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--vurgu);
  margin-bottom: var(--sp-3);
}
.konak-koyu .konak-eyebrow { color: var(--vurgu-koyu-uzeri); }

/* İmza çizgisi: 40×2px pirinç. Bölüm başlıklarının altında. */
.konak-rule {
  width: 40px;
  height: 2px;
  border: 0;
  background: var(--vurgu);
  margin: 0 0 var(--sp-5);
}
.konak-koyu .konak-rule { background: var(--vurgu-koyu-uzeri); }
.konak-rule--orta { margin-left: auto; margin-right: auto; }

.konak-spot {
  font-size: var(--fs-lg);
  line-height: var(--lh-okuma);
  color: var(--metin-ikincil);
  max-width: var(--olcu-metin);
}
.konak-koyu .konak-spot { color: var(--metin-zayif-koyu-uzeri); }

.konak-metin-ikincil { color: var(--metin-ikincil); }
.konak-olcu { max-width: var(--olcu-metin); }
.konak-olcu-dar { max-width: var(--olcu-dar); }

/* Veri register: hizalı rakam. Fiyat, m², oda sayısı — hepsi bu sınıfla. */
.konak-veri {
  font-family: var(--font-veri);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: var(--ls-tight);
}

/* --- Bağlantılar ---------------------------------------------------------- */
a {
  color: var(--vurgu);
  text-decoration: none;
  transition: color var(--dur-hizli) var(--ease-standart);
}
a:hover { color: var(--pirinc-700); }

/* :not(.konak-btn) ŞART. Bu seçici (0,1,1) özgüllüğünde ve buton varyantları
   (0,1,0) — yani koyu yüzeydeki her butonun rengini eziyordu. Sonuç: pirinç
   zeminli butonun yazısı da pirinç oluyor ve buton BOŞ görünüyordu.
   Butonların kendi renkleri var; bağlantı rengi onlara hiç uygulanmamalı. */
.konak-koyu a:not(.konak-btn) { color: var(--vurgu-koyu-uzeri); }
.konak-koyu a:not(.konak-btn):hover { color: var(--pirinc-200); }

/* Metin içi bağlantı altı çizili kalır — erişilebilirlik için renk tek
   ayırt edici olamaz. */
.konak-metin a { text-decoration: underline; text-underline-offset: 0.18em; }

:focus-visible {
  outline: var(--bw-2) solid var(--odak-halkasi);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; margin: 0; }

/* --- Yerleşim ------------------------------------------------------------- */
.konak-container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
@media (min-width: 768px) {
  .konak-container { padding-inline: var(--sp-8); }
}

/* Bölüm ritmi. Lüks yerleşimin yarısı boşluktur — bu değerler cimri olmamalı. */
.konak-bolum { padding-block: clamp(var(--sp-16), 9vw, var(--sp-32)); }
.konak-bolum--dar { padding-block: clamp(var(--sp-12), 6vw, var(--sp-20)); }

/* Yüzeyler. Bölümler RENKLE ayrılır, boşlukla değil: yan yana iki aynı renkli
   bölüm tek blok gibi okunuyor ve sayfa yapısını kaybediyor. */
.konak-yuzey-sayfa { background: var(--yuzey-sayfa); }
.konak-yuzey-kagit { background: var(--yuzey-kagit); }
.konak-yuzey-kart  { background: var(--yuzey-kart); }
.konak-yuzey-koyu  { background: var(--yuzey-koyu); color: var(--metin-koyu-uzeri); }
.konak-yuzey-derin { background: var(--yuzey-derin); color: var(--metin-koyu-uzeri); }

.konak-koyu h1, .konak-koyu h2, .konak-koyu h3,
.konak-koyu h4, .konak-koyu h5, .konak-koyu h6 { color: var(--metin-koyu-uzeri); }

.konak-izgara { display: grid; gap: var(--sp-6); }
@media (min-width: 640px)  { .konak-izgara--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .konak-izgara--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px)  { .konak-izgara--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .konak-izgara--4 { grid-template-columns: repeat(4, 1fr); } }

.konak-yigin { display: flex; flex-direction: column; gap: var(--sp-4); }
.konak-sira  { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

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

/* Klavyeyle gezen ziyaretçi için içeriğe atlama bağlantısı. */
.konak-atla {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 100;
  background: var(--murekkep); color: var(--metin-koyu-uzeri);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-md);
}
.konak-atla:focus { top: var(--sp-4); color: var(--metin-koyu-uzeri); }

/* --- Fotoğraf ------------------------------------------------------------- */
/* Marka grade'i: doygunluk 0,92 / kontrast 1,04. foto-uret.py ile AYNI değerler,
   böylece panelden yüklenen ham fotoğraf da işlenmiş olanla aynı görünüyor. */
.konak-foto img { filter: saturate(0.92) contrast(1.04); }

.konak-foto {
  position: relative;
  overflow: hidden;
  background: var(--yuzey-kagit);
}
.konak-foto img { width: 100%; height: 100%; object-fit: cover; }
.konak-foto--4x3 { aspect-ratio: 4 / 3; }
.konak-foto--3x2 { aspect-ratio: 3 / 2; }
.konak-foto--1x1 { aspect-ratio: 1 / 1; }
.konak-foto--4x5 { aspect-ratio: 4 / 5; }

/* Fotoğraf yoksa uydurma görsel çizilmez: konusu ve ölçüsü yazılı yer tutucu. */
.konak-yuva {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); text-align: center; padding: var(--sp-6);
  background: var(--yuzey-kagit);
  border: var(--bw-1) dashed var(--kenar-belirgin);
  color: var(--metin-ikincil);
}
.konak-yuva__konu { font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }
.konak-yuva__olcu { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

/* =============================================================================
   BİLEŞENLER — tüm .konak-* sınıfları
   React yok; bu sınıflar doğrudan PHP şablonlarından kullanılır.
   ============================================================================= */

/* =========================================================================
   BUTON
   Durum grameri: HOVER AÇAR, BASILI KOYULTUR. Tek istisna mürekkep butonu —
   orada hover'da açmak beyaz yazının kontrastını düşürdüğü için tersi geçerli
   ve bu bilinçli.
   ========================================================================= */
.konak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-govde);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: var(--ls-buton);
  line-height: 1.2;
  border: var(--bw-1) solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background-color var(--dur-hizli) var(--ease-standart),
              border-color var(--dur-hizli) var(--ease-standart),
              color var(--dur-hizli) var(--ease-standart),
              transform var(--dur-hizli) var(--ease-standart);
}
.konak-btn:active { transform: translateY(1px); }
.konak-btn .konak-icon { flex-shrink: 0; }

/* Birincil: mürekkep. Görünüm başına BİR tane. */
.konak-btn--primary {
  background: var(--murekkep);
  color: var(--metin-koyu-uzeri);
}
.konak-btn--primary:hover  { background: var(--murekkep-hover); color: var(--metin-koyu-uzeri); }
.konak-btn--primary:active { background: var(--murekkep-basili); }

/* İkincil: çizgili. */
.konak-btn--secondary {
  background: transparent;
  border-color: var(--kenar-belirgin);
  color: var(--metin-ana);
}
.konak-btn--secondary:hover {
  background: var(--yuzey-kagit);
  border-color: var(--metin-ana);
  color: var(--metin-ana);
}

/* Pirinç: YALNIZCA koyu yüzeyde. Koyu zeminde pirinç üstüne siyah yazı 9,86:1;
   açık zeminde aynı kombinasyon AA'yı geçmiyor, o yüzden kısıtlı. */
.konak-btn--pirinc {
  background: var(--vurgu-zemin);
  color: var(--kum-950);
}
.konak-btn--pirinc:hover  { background: var(--pirinc-200); color: var(--kum-950); }
.konak-btn--pirinc:active { background: var(--pirinc-400); }

/* Koyu zeminde çizgili buton. */
.konak-btn--hayalet {
  background: transparent;
  border-color: var(--kenar-koyu-uzeri);
  color: var(--metin-koyu-uzeri);
}
.konak-btn--hayalet:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .40);
  color: var(--metin-koyu-uzeri);
}

.konak-btn--blok { width: 100%; }
.konak-btn--kucuk { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); }
.konak-btn--buyuk { padding: var(--sp-4) var(--sp-8); font-size: var(--fs-govde); }

/* Metin bağlantısı + ok. Hover'da ok kayar — tıklanabilirliği anlatan
   en ucuz sinyal. */
.konak-link-ok {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: 600; font-size: var(--fs-base);
}
.konak-link-ok .konak-icon {
  transition: transform var(--dur-hizli) var(--ease-standart);
}
.konak-link-ok:hover .konak-icon { transform: translateX(3px); }

/* =========================================================================
   ÜST ŞERİT + BAŞLIK ÇUBUĞU
   ========================================================================= */
.konak-topbar {
  background: var(--yuzey-derin);
  color: var(--metin-zayif-koyu-uzeri);
  font-size: var(--fs-sm);
  padding-block: var(--sp-2);
}
.konak-topbar__ic { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.konak-topbar a { color: var(--metin-koyu-uzeri); display: inline-flex; align-items: center; gap: var(--sp-2); }
.konak-topbar a:hover { color: var(--vurgu-koyu-uzeri); }
.konak-topbar__sag { display: flex; align-items: center; gap: var(--sp-5); }
@media (max-width: 767px) {
  .konak-topbar__sag { display: none; }
  .konak-topbar__ic { justify-content: center; }
}

.konak-header {
  position: sticky; top: 0;
  background: var(--yuzey-cubuk);
  border-bottom: var(--bw-1) solid var(--kenar-ince);
  transition: box-shadow var(--dur-normal) var(--ease-standart);

  /* z-index PERDEDEN YÜKSEK (perde 50). Üst çubuk sticky+z-index ile bir yığın
     bağlamı yaratıyor; mobil menü paneli bu çubuğun İÇİNDE duruyor, dolayısıyla
     panelin z-60'ı çubuğun bağlamı içinde çözülüyor. Çubuk 40'ta kalırsa perde
     panelin ÜSTÜNE biniyor ve menü açıldığı hâlde görünmüyordu. */
  z-index: 70;

  /* backdrop-filter BİLEREK YOK.
     Buzlu cam etkisi güzeldi ama backdrop-filter, elemanı position:fixed
     torunları için KAPSAYICI BLOK yapıyor. Sonuç: off-canvas menü paneli
     viewport'a değil üst çubuğa göre yerleşiyordu — ölçülen panel 340×72px,
     yani tam yükseklik yerine yalnızca çubuk yüksekliği kadar.
     Zemin zaten %90 opak; buzlu cam olmadan da okunur. */
}
.konak-header--kaydirildi { box-shadow: var(--golge-serit); }
.konak-header__ic {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); min-height: 72px;
}

/* Marka lockup — logo dosyası yokken tipografik. */
.konak-wordmark { display: inline-flex; align-items: baseline; gap: var(--sp-2); }
.konak-wordmark__ad {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  color: var(--metin-ana);
  line-height: 1;
}
.konak-wordmark__alt {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--metin-ikincil);
}
.konak-koyu .konak-wordmark__ad  { color: var(--metin-koyu-uzeri); }
.konak-koyu .konak-wordmark__alt { color: var(--metin-zayif-koyu-uzeri); }

/* Menü */
/* --sp-7 diye bir token YOK (ölçek 6'dan 8'e atlıyor). Tanımsız değişken
   sessizce boşluğu sıfırlıyordu: menünün son öğesiyle buton yan yana
   yapışıyordu. Tanımsız token uyarı vermiyor, bu yüzden gözden kaçtı. */
.konak-nav { display: flex; align-items: center; gap: var(--sp-8); }
.konak-menu-list { display: flex; align-items: center; gap: var(--sp-6); list-style: none; margin: 0; padding: 0; }
.konak-menu-list a {
  position: relative;
  font-size: var(--fs-base);
  font-weight: 500;
  color: var(--metin-ana);
  padding-block: var(--sp-2);
}
.konak-menu-list a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--vurgu);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-hizli) var(--ease-standart);
}
.konak-menu-list a:hover::after,
.konak-menu-list .current-menu-item > a::after { transform: scaleX(1); }
.konak-menu-list .current-menu-item > a { color: var(--vurgu); }

.konak-menu-dugme {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px;               /* 44px: dokunma hedefi alt sınırı */
  background: transparent; border: var(--bw-1) solid var(--kenar-ince);
  border-radius: var(--r-md); color: var(--metin-ana); cursor: pointer;
}

@media (max-width: 979px) {
  .konak-menu-dugme { display: inline-flex; }

  /* KAPALIYKEN display:none — ve bu bilincli bir tercih.
     Panel kapaliyken translateX(100%) ile viewport'un sagina itiliyordu; fixed
     konumlu bir kutu orada da KAYDIRILABILIR TASMA uretiyor. Olculen sonuc:
     430px viewport'ta belge 770px, yani tum sayfa saga kayiyor, metinler
     kirpiliyor ve sag ustteki hamburger ekran disinda kaliyordu.
     Kok elemana overflow-x: clip koymak CARE DEGIL: kokteki overflow degeri
     viewport'a devrediliyor ve fixed panele islemiyor (denendi).
     Cozum: kapaliyken hic yerlestirme. Acilista kayma animasyonu keyframe ile
     geliyor; kapanis anlik oluyor, kabul edilebilir takas. */
  .konak-nav { display: none; }
  .konak-nav[data-acik="1"] {
    display: flex;
    animation: konak-panel-gir var(--dur-normal) var(--ease-standart);
  }
  .konak-nav {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 88vw);
    background: var(--yuzey-kart);
    border-left: var(--bw-1) solid var(--kenar-ince);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: var(--sp-2); padding: var(--sp-8) var(--sp-6);
    z-index: 60; overflow-y: auto;
  }
  .konak-menu-list { flex-direction: column; align-items: stretch; gap: 0; }
  /* display:block ŞART: <a> satır içi kaldığında alt çizgi yalnızca metin
     genişliği kadar uzuyor ve ayraçlar kırık görünüyordu. */
  .konak-menu-list a { display: block; padding-block: var(--sp-4); border-bottom: var(--bw-1) solid var(--kenar-ince); }
  .konak-menu-list li:last-child a { border-bottom: 0; }
  .konak-menu-list a::after { display: none; }
  .konak-nav .konak-btn { margin-top: var(--sp-5); }
  .konak-nav__kapat { align-self: flex-end; }
}

.konak-perde {
  position: fixed; inset: 0; background: rgba(21, 19, 15, .5);
  z-index: 50; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-normal) var(--ease-standart);
}
.konak-perde[data-acik="1"] { opacity: 1; pointer-events: auto; }

/* =========================================================================
   HERO
   ========================================================================= */
.konak-hero {
  position: relative;
  background: var(--yuzey-derin);
  color: var(--metin-koyu-uzeri);
  overflow: hidden;
}
.konak-hero__zemin { position: absolute; inset: 0; }
.konak-hero__zemin img { width: 100%; height: 100%; object-fit: cover; }

/* Koruma katmanı. Fotoğrafı boğmadan metni okunur tutar; ölçülen en kötü
   kontrast bu değerlerle 6,8:1. Fotoğraf değişirse yeniden ölçülmeli. */
.konak-hero__perde {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(21,19,15,.92) 0%, rgba(21,19,15,.72) 46%, rgba(21,19,15,.30) 78%, rgba(21,19,15,.18) 100%),
    linear-gradient(to top, rgba(21,19,15,.55) 0%, rgba(21,19,15,0) 45%);
}
.konak-hero__ic {
  position: relative; z-index: 2;
  padding-block: clamp(var(--sp-20), 13vw, var(--sp-32));
  max-width: 44rem;
}
.konak-hero__baslik { margin-bottom: var(--sp-5); }
.konak-hero__spot {
  font-size: var(--fs-lg);
  line-height: var(--lh-okuma);
  color: var(--metin-zayif-koyu-uzeri);
  max-width: 34rem;
  margin-bottom: var(--sp-8);
}
.konak-hero__eylem { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* =========================================================================
   GÜVEN ŞERİDİ — hero'nun hemen altında, kesişen bant
   Araştırma: birincil CTA'nın yanındaki güven sinyali form terk oranını
   belirgin düşürüyor. Bu yüzden hero ile aynı görüş alanında duruyor.
   ========================================================================= */
.konak-guven {
  background: var(--yuzey-kart);
  border-block: var(--bw-1) solid var(--kenar-ince);
}
.konak-guven__izgara {
  display: grid; gap: var(--sp-6);
  grid-template-columns: 1fr;
  padding-block: var(--sp-8);
}
@media (min-width: 720px) { .konak-guven__izgara { grid-template-columns: repeat(3, 1fr); } }
.konak-guven__oge { display: flex; gap: var(--sp-4); align-items: flex-start; }
.konak-guven__ikon {
  flex-shrink: 0; width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--vurgu-zayif); color: var(--pirinc-700);
  border-radius: var(--r-full);
}
.konak-guven__baslik { font-weight: 600; font-size: var(--fs-base); margin-bottom: 2px; }
.konak-guven__metin  { font-size: var(--fs-sm); color: var(--metin-ikincil); line-height: var(--lh-snug); }

/* =========================================================================
   BÖLÜM BAŞLIĞI
   ========================================================================= */
.konak-bolum-basligi { margin-bottom: var(--sp-12); max-width: var(--olcu-metin); }
.konak-bolum-basligi--orta { margin-inline: auto; text-align: center; }
.konak-bolum-basligi--satir {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-6); max-width: none; flex-wrap: wrap;
}

/* =========================================================================
   KARŞILAŞTIRMA — "otelde 30 gün / burada 30 gün"
   Bu bölüm dekorasyon değil: uzun dönem konaklamada satın alma kararının
   birinci etkeni maliyet öngörülebilirliği. Alternatifle yan yana koymak,
   ziyaretçinin zaten kafasında yaptığı hesabı onun yerine yapmak demek.
   ========================================================================= */
.konak-kiyas { display: grid; gap: var(--sp-6); align-items: stretch; }
@media (min-width: 860px) { .konak-kiyas { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }

.konak-kiyas__kart {
  border: var(--bw-1) solid var(--kenar-ince);
  border-radius: var(--r-xl);
  padding: var(--sp-8);
  background: var(--yuzey-kart);
  display: flex; flex-direction: column;
}
/* Kazanan taraf mürekkep zeminde. Renk zaten "bu taraf" diyor; ayrıca
   "önerilen" rozeti koymuyoruz — iki sinyal aynı şeyi söyleyince reklam gibi
   okunuyor. */
.konak-kiyas__kart--biz {
  background: var(--yuzey-koyu);
  color: var(--metin-koyu-uzeri);
  border-color: transparent;
  box-shadow: var(--golge-yuksek);
}
.konak-kiyas__etiket {
  font-size: var(--fs-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  color: var(--metin-ikincil); margin-bottom: var(--sp-2);
}
.konak-kiyas__kart--biz .konak-kiyas__etiket { color: var(--vurgu-koyu-uzeri); }
.konak-kiyas__baslik {
  font-family: var(--font-display); font-size: var(--fs-2xl);
  font-weight: 500; margin-bottom: var(--sp-6);
}
.konak-kiyas__liste { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: grid; gap: var(--sp-3); }
.konak-kiyas__satir { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-base); line-height: var(--lh-snug); }
.konak-kiyas__satir .konak-icon { flex-shrink: 0; margin-top: 2px; }
.konak-kiyas__satir--yok  { color: var(--metin-ikincil); }
.konak-kiyas__satir--yok  .konak-icon { color: var(--kum-500); }
.konak-kiyas__satir--var  .konak-icon { color: var(--vurgu-koyu-uzeri); }
.konak-kiyas__dipnot {
  margin-top: auto; padding-top: var(--sp-5);
  border-top: var(--bw-1) solid var(--kenar-ince);
  font-size: var(--fs-sm); color: var(--metin-ikincil);
}
.konak-kiyas__kart--biz .konak-kiyas__dipnot {
  border-top-color: var(--kenar-koyu-uzeri);
  color: var(--metin-zayif-koyu-uzeri);
}

/* =========================================================================
   DAHİL OLANLAR — "taşınmaya hazır" kanıtı
   ========================================================================= */
.konak-dahil {
  display: grid; gap: var(--sp-4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px)  { .konak-dahil { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .konak-dahil { grid-template-columns: repeat(4, 1fr); } }

.konak-dahil__oge {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--yuzey-kart);
  border: var(--bw-1) solid var(--kenar-ince);
  border-radius: var(--r-lg);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: var(--lh-snug);
}
.konak-dahil__oge .konak-icon { color: var(--vurgu); flex-shrink: 0; }

/* =========================================================================
   BİRİM KARTI
   ========================================================================= */
.konak-birim-izgara {
  display: grid; gap: var(--sp-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.konak-birim {
  display: flex; flex-direction: column;
  background: var(--yuzey-kart);
  border: var(--bw-1) solid var(--kenar-ince);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: box-shadow var(--dur-normal) var(--ease-standart),
              transform var(--dur-normal) var(--ease-standart),
              border-color var(--dur-normal) var(--ease-standart);
}
.konak-birim:hover {
  transform: translateY(-4px);
  box-shadow: var(--golge-kart);
  border-color: var(--kenar-belirgin);
}
.konak-birim__foto { position: relative; }
.konak-birim__foto img { transition: transform var(--dur-yavas) var(--ease-standart); }
.konak-birim:hover .konak-birim__foto img { transform: scale(1.04); }

.konak-birim__tip {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  background: rgba(21, 19, 15, .82);
  color: var(--metin-koyu-uzeri);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--ls-eyebrow);
  backdrop-filter: blur(4px);
}
.konak-birim__govde { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.konak-birim__baslik { font-size: var(--fs-lg); margin-bottom: var(--sp-1); }
.konak-birim__baslik a { color: var(--metin-ana); }
.konak-birim__baslik a:hover { color: var(--vurgu); }
.konak-birim__yer {
  display: flex; align-items: center; gap: var(--sp-1);
  color: var(--metin-ikincil); font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
.konak-birim__kunye {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm); color: var(--metin-ikincil);
}
.konak-birim__kunye span { display: inline-flex; align-items: center; gap: var(--sp-1); }
.konak-birim__alt {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-3);
  margin-top: auto; padding-top: var(--sp-4);
  border-top: var(--bw-1) solid var(--kenar-ince);
}
.konak-birim__fiyat-etiket { font-size: var(--fs-xs); color: var(--metin-ikincil); display: block; }
.konak-birim__fiyat { font-size: var(--fs-lg); font-weight: 700; color: var(--metin-ana); }

/* Rozet / çip */
.konak-badge {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--fs-xs); font-weight: 600;
  border-radius: var(--r-full);
  background: var(--yuzey-kagit);
  color: var(--metin-ikincil);
  border: var(--bw-1) solid var(--kenar-ince);
}
.konak-badge--pirinc { background: var(--vurgu-zayif); color: var(--pirinc-700); border-color: var(--pirinc-200); }

/* =========================================================================
   BÖLGE KARTI — konum, kararın ilk üç etkeninden biri
   ========================================================================= */
.konak-bolge {
  position: relative; display: block;
  border-radius: var(--r-xl); overflow: hidden;
  background: var(--yuzey-koyu);
  min-height: 200px;
}
.konak-bolge img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-yavas) var(--ease-standart); }
.konak-bolge:hover img { transform: scale(1.05); }
.konak-bolge__perde {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(21,19,15,.86) 0%, rgba(21,19,15,.30) 55%, rgba(21,19,15,.10) 100%);
}
.konak-bolge__yazi { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--sp-5); color: var(--metin-koyu-uzeri); }
.konak-bolge__ad { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500; }
.konak-bolge__sayi { font-size: var(--fs-sm); color: var(--metin-zayif-koyu-uzeri); }

/* =========================================================================
   SÜREÇ ADIMLARI
   ========================================================================= */
.konak-adim { position: relative; }
.konak-adim__no {
  font-family: var(--font-display);
  font-size: var(--fs-2xl); font-weight: 500;
  color: var(--vurgu);
  line-height: 1; margin-bottom: var(--sp-4);
  display: block;
}
.konak-koyu .konak-adim__no { color: var(--vurgu-koyu-uzeri); }
.konak-adim__baslik { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
.konak-adim__metin { color: var(--metin-ikincil); line-height: var(--lh-okuma); font-size: var(--fs-base); }
.konak-koyu .konak-adim__metin { color: var(--metin-zayif-koyu-uzeri); }

/* Adımlar arası ince çizgi — sıralı olduğunu söyler. */
@media (min-width: 900px) {
  .konak-adimlar { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-10); }
  .konak-adimlar .konak-adim + .konak-adim { padding-left: var(--sp-10); border-left: var(--bw-1) solid var(--kenar-ince); }
  .konak-koyu .konak-adimlar .konak-adim + .konak-adim { border-left-color: var(--kenar-koyu-uzeri); }
}

/* =========================================================================
   SEGMENT KARTI — "kimler için"
   Ziyaretçinin kendini tanıması, genel bir vaatten daha hızlı ikna ediyor.
   ========================================================================= */
.konak-segment {
  display: flex; flex-direction: column; gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--yuzey-kart);
  border: var(--bw-1) solid var(--kenar-ince);
  border-radius: var(--r-xl);
  border-top: 3px solid var(--vurgu);
  height: 100%;
}
.konak-segment__baslik { font-size: var(--fs-lg); margin: 0; }
.konak-segment__metin { color: var(--metin-ikincil); font-size: var(--fs-base); line-height: var(--lh-okuma); margin: 0; }

/* =========================================================================
   SSS — itiraz karşılama + arama görünürlüğü
   ========================================================================= */
.konak-sss { border-top: var(--bw-1) solid var(--kenar-ince); }
.konak-sss__oge { border-bottom: var(--bw-1) solid var(--kenar-ince); }
.konak-sss__dugme {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) 0;
  background: none; border: 0; cursor: pointer;
  font-size: var(--fs-lg); font-weight: 500; text-align: left;
  color: var(--metin-ana);
  font-family: var(--font-govde);
}
.konak-sss__dugme:hover { color: var(--vurgu); }
.konak-sss__dugme .konak-icon { flex-shrink: 0; transition: transform var(--dur-normal) var(--ease-standart); color: var(--vurgu); }
.konak-sss__dugme[aria-expanded="true"] .konak-icon { transform: rotate(180deg); }
.konak-sss__cevap { padding-bottom: var(--sp-5); color: var(--metin-ikincil); line-height: var(--lh-okuma); max-width: var(--olcu-metin); }
.konak-sss__cevap[hidden] { display: none; }

/* =========================================================================
   FORM
   ========================================================================= */
.konak-form-kutu {
  background: var(--yuzey-kart);
  /* Metin rengini KENDİSİ kurar. Bu kutu koyu çağrı bandının içinde de
     kullanılıyor; renk mirasla geldiğinde açık kalıyor ve beyaz kutuda
     etiketler 1,14:1'e düşüyordu — pratikte görünmez. Ölçülerek bulundu. */
  color: var(--metin-ana);
  border: var(--bw-1) solid var(--kenar-ince);
  border-radius: var(--r-xl);
  padding: clamp(var(--sp-6), 4vw, var(--sp-10));
  box-shadow: var(--golge-kart);
}
.konak-alan { margin-bottom: var(--sp-5); }
.konak-alan label { display: block; font-size: var(--fs-base); font-weight: 600; margin-bottom: var(--sp-2); }
.konak-alan__zorunlu { color: var(--hata-metin); }
.konak-alan input[type="text"],
.konak-alan input[type="tel"],
.konak-alan input[type="email"],
.konak-alan select,
.konak-alan textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-govde);
  color: var(--metin-ana);
  background: var(--yuzey-sayfa);
  border: var(--bw-1) solid var(--kenar-belirgin);
  border-radius: var(--r-md);
  transition: border-color var(--dur-hizli) var(--ease-standart),
              box-shadow var(--dur-hizli) var(--ease-standart);
}
.konak-alan input:focus,
.konak-alan select:focus,
.konak-alan textarea:focus {
  outline: none;
  border-color: var(--odak-halkasi);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--odak-halkasi) 22%, transparent);
}
.konak-alan textarea { min-height: 110px; resize: vertical; }
.konak-alan__ipucu { font-size: var(--fs-sm); color: var(--metin-ikincil); margin-top: var(--sp-1); }
.konak-alan--hatali input,
.konak-alan--hatali select,
.konak-alan--hatali textarea { border-color: var(--hata-metin); }
.konak-alan__hata { font-size: var(--fs-sm); color: var(--hata-metin); margin-top: var(--sp-1); font-weight: 500; }

.konak-onay { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-base); }
.konak-onay input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--murekkep); }

/* Gönder düğmesinin YANINDAKİ güven notu. Araştırma: forma bitişik gizlilik
   notu / hızlı dönüş sözü terk oranını düşüren en ucuz müdahale. */
.konak-form-guven {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--fs-sm); color: var(--metin-ikincil);
}
.konak-form-guven .konak-icon { color: var(--basari-metin); flex-shrink: 0; }

.konak-form-bildirim { padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); margin-bottom: var(--sp-6); font-size: var(--fs-base); }
.konak-form-bildirim--basari { background: var(--basari-zemin); color: var(--basari-metin); border: var(--bw-1) solid currentColor; }
.konak-form-bildirim--hata   { background: var(--hata-zemin);   color: var(--hata-metin);   border: var(--bw-1) solid currentColor; }

/* Bal küpü: gerçek kullanıcıya görünmez, ekran okuyucudan da gizli. */
.konak-balkupu { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* =========================================================================
   ÇAĞRI ŞERİDİ — sayfadaki TEK tam vurgu yüzeyi
   ========================================================================= */
.konak-cagri {
  background: var(--yuzey-koyu);
  color: var(--metin-koyu-uzeri);
  position: relative; overflow: hidden;
}
/* Sağ üstte çok sönük pirinç ışık — düz koyu bloğu kırar, dikkat çalmaz. */
.konak-cagri::after {
  content: ''; position: absolute; top: -40%; right: -10%;
  width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(217,185,120,.14) 0%, rgba(217,185,120,0) 70%);
  pointer-events: none;
}
.konak-cagri__ic { position: relative; z-index: 1; text-align: center; max-width: 46rem; margin-inline: auto; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.konak-footer { background: var(--yuzey-derin); color: var(--metin-zayif-koyu-uzeri); }
.konak-footer__ust {
  display: grid; gap: var(--sp-10);
  grid-template-columns: 1fr;
  padding-block: var(--sp-16) var(--sp-10);
}
/* auto-fit: künye sütunu boşsa (müşteri vergi/MERSİS girmediyse) footer iki
   sütuna düşüyor ve sabit 3 sütunlu ızgarada sağda boş bir kolon kalıyordu. */
@media (min-width: 720px) {
  .konak-footer__ust { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .konak-footer__ust > :first-child { flex: 1.4; min-width: 260px; }
}
.konak-footer h3, .konak-footer h4 { color: var(--metin-koyu-uzeri); }
.konak-footer h4 { font-size: var(--fs-base); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); margin-bottom: var(--sp-5); }
.konak-footer a { color: var(--metin-zayif-koyu-uzeri); }
.konak-footer a:hover { color: var(--vurgu-koyu-uzeri); }
.konak-footer-menu { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); font-size: var(--fs-base); }
.konak-footer__iletisim { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); font-size: var(--fs-base); }
.konak-footer__iletisim a { display: inline-flex; align-items: center; gap: var(--sp-3); }
.konak-footer__alt {
  border-top: var(--bw-1) solid var(--kenar-koyu-uzeri);
  padding-block: var(--sp-6);
  display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
  font-size: var(--fs-sm);
}
.konak-footer__alt p { margin: 0; }
.konak-sosyal { display: flex; gap: var(--sp-3); }
.konak-sosyal a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: var(--bw-1) solid var(--kenar-koyu-uzeri); border-radius: var(--r-full);
}
.konak-sosyal a:hover { border-color: var(--vurgu-koyu-uzeri); background: rgba(255,255,255,.06); }

/* =========================================================================
   MOBİL YAPIŞKAN EYLEM ÇUBUĞU
   Araştırma: birincil eylem her an erişilebilir olmalı. Telefonda menüyü
   açtırmadan ara/WhatsApp/talep.
   ========================================================================= */
.konak-mobil-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--yuzey-kart);
  border-top: var(--bw-1) solid var(--kenar-ince);
  box-shadow: 0 -2px 12px rgba(34,31,26,.10);
  padding-bottom: env(safe-area-inset-bottom);
}
.konak-mobil-cta a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: var(--sp-3) var(--sp-2);
  font-size: var(--fs-xs); font-weight: 600;
  color: var(--metin-ana);
  min-height: 58px;
}
.konak-mobil-cta a + a { border-left: var(--bw-1) solid var(--kenar-ince); }
.konak-mobil-cta a:hover { background: var(--yuzey-kagit); color: var(--metin-ana); }
.konak-mobil-cta__birincil { background: var(--murekkep); color: var(--metin-koyu-uzeri) !important; }
.konak-mobil-cta__birincil:hover { background: var(--murekkep-hover) !important; }

@media (min-width: 980px) { .konak-mobil-cta { display: none; } }
/* Yapışkan çubuk son bölümün üstünü kapatmasın. */
@media (max-width: 979px) { body { padding-bottom: 58px; } }

/* =========================================================================
   GALERİ (birim detay)
   ========================================================================= */
/* İlk fotoğraf tam genişlik, kalanlar ADEDE GÖRE sütunlara bölünür.
   Sabit dört sütunlu ızgarada üç ya da dört fotoğrafla sağ altta boş bir göz
   kalıyor ve galeri yarım bitmiş görünüyordu. */
.konak-galeri { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
.konak-galeri__oge { border-radius: var(--r-lg); overflow: hidden; cursor: zoom-in; background: var(--yuzey-kagit); }
.konak-galeri__oge:first-child .konak-foto { aspect-ratio: 16 / 9; }

@media (min-width: 720px) {
  .konak-galeri__oge:first-child { grid-column: 1 / -1; }
  .konak-galeri--3 { grid-template-columns: repeat(2, 1fr); }
  .konak-galeri--4 { grid-template-columns: repeat(3, 1fr); }
  .konak-galeri--5 { grid-template-columns: repeat(4, 1fr); }
}
.konak-galeri__oge img { transition: transform var(--dur-normal) var(--ease-standart); }
.konak-galeri__oge:hover img { transform: scale(1.03); }

/* Künye tablosu */
.konak-kunye { width: 100%; border-collapse: collapse; }
.konak-kunye th, .konak-kunye td {
  padding: var(--sp-3) 0; text-align: left;
  border-bottom: var(--bw-1) solid var(--kenar-ince);
  font-size: var(--fs-base);
}
.konak-kunye th { color: var(--metin-ikincil); font-weight: 500; width: 45%; }
.konak-kunye td { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Özellik listesi */
.konak-ozellikler { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }

/* Yatay kaydırılabilir her şey kendi kabında kalsın; sayfa gövdesi asla
   yatay kaymaz. */
.konak-kaydir { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =========================================================================
   İÇ SAYFA BAŞLIĞI
   Anasayfa dışındaki sayfalar da koyu bir bantla açılır: üst çubuğun hemen
   altında beyaz bir başlık, sayfayı "yarım kalmış" gösteriyordu.
   ========================================================================= */
.konak-sayfa-basi {
  background: var(--yuzey-koyu);
  color: var(--metin-koyu-uzeri);
  padding-block: clamp(var(--sp-12), 7vw, var(--sp-20));
}
.konak-sayfa-basi__baslik { margin-bottom: var(--sp-4); }
.konak-sayfa-basi__spot {
  font-size: var(--fs-lg); line-height: var(--lh-okuma);
  color: var(--metin-zayif-koyu-uzeri); max-width: var(--olcu-metin);
}

/* Kırıntı navigasyonu */
.konak-kirinti { font-size: var(--fs-sm); margin-bottom: var(--sp-5); color: var(--metin-zayif-koyu-uzeri); }
.konak-kirinti ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.konak-kirinti a { color: var(--metin-zayif-koyu-uzeri); }
.konak-kirinti a:hover { color: var(--vurgu-koyu-uzeri); }
.konak-kirinti [aria-current] { color: var(--metin-koyu-uzeri); }

/* =========================================================================
   FİLTRE ÇUBUĞU
   ========================================================================= */
.konak-filtre {
  background: var(--yuzey-kart);
  border: var(--bw-1) solid var(--kenar-ince);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  margin-bottom: var(--sp-8);
}
.konak-filtre__satir { display: grid; gap: var(--sp-4); align-items: end; grid-template-columns: 1fr; }
@media (min-width: 720px)  { .konak-filtre__satir { grid-template-columns: repeat(2, 1fr) auto; } }
@media (min-width: 1000px) { .konak-filtre__satir { grid-template-columns: repeat(3, 1fr) auto; } }
.konak-filtre .konak-alan { margin-bottom: 0; }
.konak-filtre__sonuc { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--metin-ikincil); }

/* Sonuç yok durumu — çıkmaz sokak bırakmaz, forma yönlendirir. */
.konak-bos {
  text-align: center; padding: var(--sp-16) var(--sp-6);
  background: var(--yuzey-kart);
  border: var(--bw-1) dashed var(--kenar-belirgin);
  border-radius: var(--r-xl);
}
.konak-bos h3 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 500; }
.konak-bos p { color: var(--metin-ikincil); max-width: 34rem; margin-inline: auto; }

/* =========================================================================
   EDİTÖR İÇERİĞİ (Hakkımızda, KVKK)
   Müşteri buraya WordPress editöründen yazıyor; okunur olması bizim işimiz.
   ========================================================================= */
.konak-metin { max-width: var(--olcu-metin); font-size: var(--fs-govde); line-height: var(--lh-okuma); }
.konak-metin > * + * { margin-top: var(--sp-5); }
.konak-metin h2 {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-2xl); line-height: var(--lh-tight);
  margin-top: var(--sp-12); margin-bottom: 0;
}
.konak-metin h3 { font-size: var(--fs-lg); margin-top: var(--sp-8); margin-bottom: 0; }
.konak-metin ul, .konak-metin ol { padding-left: var(--sp-6); }
.konak-metin li + li { margin-top: var(--sp-2); }
.konak-metin img { border-radius: var(--r-lg); }
.konak-metin blockquote {
  border-left: 3px solid var(--vurgu);
  padding-left: var(--sp-5); margin-left: 0;
  font-family: var(--font-display); font-size: var(--fs-lg); font-style: italic;
}
.konak-metin table { width: 100%; border-collapse: collapse; }
.konak-metin th, .konak-metin td { padding: var(--sp-3); border-bottom: var(--bw-1) solid var(--kenar-ince); text-align: left; }

/* =========================================================================
   İLETİŞİM KARTLARI
   ========================================================================= */
.konak-iletisim-kart {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-6);
  background: var(--yuzey-kart);
  border: var(--bw-1) solid var(--kenar-ince);
  border-radius: var(--r-xl);
  height: 100%;
}
.konak-iletisim-kart__ikon { color: var(--vurgu); }
.konak-iletisim-kart__baslik { font-size: var(--fs-base); font-weight: 600; margin: 0; }
.konak-iletisim-kart__deger { font-size: var(--fs-lg); font-weight: 600; }
.konak-iletisim-kart__not { font-size: var(--fs-sm); color: var(--metin-ikincil); margin: 0; }

.konak-harita { border-radius: var(--r-xl); overflow: hidden; border: var(--bw-1) solid var(--kenar-ince); }
.konak-harita iframe { display: block; width: 100%; height: 420px; border: 0; }

/* Bölge kartı, fotoğraf YOKKEN: koruma perdesi basılmıyor (yer tutucuyu
   çamura çeviriyordu), dolayısıyla yazı da koyu zemine değil açık zemine
   düşüyor. Rengi buna göre çevir, yoksa beyaz yazı beyaz kâğıtta kayboluyor. */
.konak-bolge--yuva .konak-bolge__yazi { color: var(--metin-ana); }
.konak-bolge--yuva .konak-bolge__ad   { color: var(--metin-ana); }
.konak-bolge--yuva .konak-bolge__sayi { color: var(--metin-ikincil); }

/* Açılış animasyonu YATAY DEĞİL: translateX(100%) ile başlamak paneli ilk karede
   viewport'un sağına koyuyor, belge genişliyor, genişleyen belgede panelin
   right:0'ı da sağa kayıyor ve panel bir daha içeri girmiyordu — kendi kendini
   besleyen bir döngü. Ölçülen sonuç: menü "açık" ama ekranda görünmüyor
   (430px viewport'ta belge 770px, panel 430–770 arasında).
   translateY yatay taşma üretmiyor; sorun kökten kalkıyor. */
@keyframes konak-panel-gir {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Koyu bandın içindeki beyaz form kutusu: bağlantılar da açık yüzey rengine
   döner. .konak-koyu a kuralı burada yanlış tarafta kalıyor ve KVKK bağlantısı
   beyaz üstünde açık pirinç (1,88:1) oluyordu. */
.konak-koyu .konak-form-kutu a { color: var(--vurgu); }
.konak-koyu .konak-form-kutu a:hover { color: var(--pirinc-700); }

/* =========================================================================
   FOTOĞRAF GÖRÜNTÜLEYİCİ (lightbox)
   Görüntüleyici body'nin sonuna taşınıyor; üst çubuğun yığın bağlamına
   hapsolursa perdenin altında kalıyor.
   ========================================================================= */
.konak-lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-4); padding: var(--sp-6);
  background: rgba(21, 19, 15, .94);
}
.konak-lightbox[hidden] { display: none; }

.konak-lightbox__cerceve {
  margin: 0; max-width: min(1200px, 92vw); max-height: 82vh;
  display: flex; align-items: center; justify-content: center;
}
.konak-lightbox__cerceve img {
  max-width: 100%; max-height: 82vh;
  width: auto; height: auto;
  border-radius: var(--r-lg);
  object-fit: contain;
}

.konak-lightbox__kapat,
.konak-lightbox__ok {
  flex-shrink: 0;
  width: 48px; height: 48px;          /* dokunma hedefi */
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .10);
  border: var(--bw-1) solid rgba(255, 255, 255, .22);
  border-radius: var(--r-full);
  color: var(--kum-50);
  cursor: pointer;
  transition: background-color var(--dur-hizli) var(--ease-standart);
}
.konak-lightbox__kapat:hover,
.konak-lightbox__ok:hover { background: rgba(255, 255, 255, .22); }
.konak-lightbox__kapat { position: absolute; top: var(--sp-5); right: var(--sp-5); }

.konak-lightbox__sayac {
  position: absolute; bottom: var(--sp-6); left: 0; right: 0;
  margin: 0; text-align: center;
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
  color: var(--metin-zayif-koyu-uzeri);
}

@media (max-width: 640px) {
  /* Telefonda oklar görselin yanına sığmıyor; alta alınıyor. */
  .konak-lightbox { flex-wrap: wrap; padding: var(--sp-4); }
  .konak-lightbox__cerceve { order: -1; flex-basis: 100%; max-height: 68vh; }
  .konak-lightbox__cerceve img { max-height: 68vh; }
  .konak-lightbox__sayac { bottom: var(--sp-3); }
}

/* Küçük görsellerde imleç büyüteç: tıklanabilir olduğu anlaşılsın. */
.konak-galeri__oge { cursor: zoom-in; display: block; }