/* NEO Suit Hotels — yeniden tasarım, 2026-08-11 (bütünlük turu)
   Tez: otelde ürün odadır. Oda dekor değil, arayüzün düğmesidir: ziyaretçi oda
   seçer, fotoğraf ona döner, gönderilecek WhatsApp mesajı kendini yazar.
   Sayfanın tek işi WhatsApp mesajı / telefon araması / form gönderimi almaktır.

   Bu sürümün TEK KARARI — ÖLÇÜ SİSTEMİ:
     Sayfada tek bir sol kenar var: .kap'ın sol kenarı. Hiçbir şey ortalanmaz.
     Satır satır OKUNAN metin  → okuma kolonu (--olcu, 660px, ~72 karakter)
     Göz atılan / bakılan şey  → kabın tamamı (--kap, 1160px)
   Önceki sürümde 760px'lik metin kolonu 1160px'lik kabın İÇİNDE ortalanıyordu;
   her bölüm iki yandan 200px omuz veriyordu ("üst geniş, aşağısı dar") ve sol
   kenar 140 → 340 → 240 → 340 → 140 diye basamaklanıyordu ("parça parça").
   Bölüm ayracı da <section> üzerindeydi: 1440px çizgi, 760px içerik (1,89 kat).
   Artık ayraç .kap'ın içinde, ayırdığı şeyle aynı genişlikte.

   Renk jetonları tesisin kendi fotoğraflarından ölçüldü. Ölçülen kontrastlar:
   mürekkep/zemin 14.5:1 · kadife/beyaz 11.5:1 · kadife/zemin 9.4:1
   hat yeşili/beyaz 5.0:1 · amber/mürekkep 8.1:1 · sessiz/zemin 5.2:1 */

/* ── yazı tipleri (kendi sunucumuzda, Türkçe tam kapsam) ─────────────────── */
@font-face {
  font-family: 'NEO Display';                 /* Bricolage Grotesque, wght 700 / opsz 36 sabit */
  src: url(/assets/fonts/neo-display.woff2) format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'NEO Body';                    /* Figtree değişken; 300 900 yazılmazsa tarayıcı sahte-kalın üretir */
  src: url(/assets/fonts/neo-body.woff2) format('woff2');
  font-weight: 300 900; font-style: normal; font-display: swap;
}

/* ── jetonlar ────────────────────────────────────────────────────────────── */
:root {
  --ink: #16191E;          /* metin, konum şeridi, altbilgi — sayfa zemini olarak ASLA */
  --zemin: #E7E9EC;        /* sayfa zemini */
  --yuzey: #FFFFFF;        /* kart/form/mesaj yüzeyi — durum göstergesi olarak ASLA */
  --kadife: #1B3A63;       /* seçili durum, "Ara", bağlantı, odak halkası */
  --kadife-koyu: #12294A;  /* :active */
  --hat: #157F4A;          /* YALNIZ WhatsApp yüzeyleri */
  --kordon: #E8A13A;       /* YALNIZ --ink üzerinde */
  --sessiz: #57606E;       /* ikincil metin */
  --cizgi: #C4C9D0;        /* dekoratif ayraç — durum taşıyıcısı olarak ASLA */
  --kap: 1160px;           /* kap: header, konum, fold, bölümler, altbilgi — hepsi aynı */
  --olcu: 660px;           /* okuma kolonu: 17px gövdede ~72 karakter/satır */
  --gov: 'NEO Body', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --dis: 'NEO Display', var(--gov);
  --r: 10px;               /* kart/düğme yarıçapı */
  --rk: 8px;               /* KONTROL yarıçapı (input, select) — bilinçli olarak farklı */
  --ust: 48px;             /* üst şerit yüksekliği */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--zemin); color: var(--ink);
  font: 400 16px/1.55 var(--gov); letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { max-width: 100%; display: block; }
a { color: var(--kadife); }
h1, h2, h3 { font-family: var(--dis); font-weight: 700; margin: 0; }
h1 { font-size: 26px; line-height: 1.14; letter-spacing: -0.02em; }
h2 { font-size: 21px; line-height: 1.18; letter-spacing: -0.015em; }
h3 { font-size: 17px; line-height: 1.25; letter-spacing: -0.01em; }
p { margin: 0; }

/* klavye odağı — durum yalnız kadife dolgu ya da 2px kadife kontur ile anlatılır */
:focus-visible {
  outline: 2px solid var(--kadife); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--yuzey);
}
.atla {
  position: absolute; left: -9999px; top: 0; z-index: 90;
  background: var(--kadife); color: #fff; padding: 12px 16px; border-radius: 0 0 var(--r) 0;
}
.atla:focus { left: 0; }

.kap { width: min(100% - 28px, var(--kap)); margin-inline: auto; }

/* Bölüm ritmi: dolgu ve ayraç ARTIK .kap'ın içinde.
   Böylece ayırıcı çizgi tam viewport değil, ayırdığı içerikle aynı genişlikte. */
.bolum { padding: 0; }
.bolum > .kap { padding-block: 34px; }
.fold + .bolum > .kap,
.bolum + .bolum > .kap { border-top: 1px solid var(--cizgi); }
/* alt başlığı OLMAYAN bölümlerde (§bolgeler, §sss) başlık içeriğe yapışmasın */
.bolum > .kap > h2 { margin-bottom: 24px; }
.bolum > .kap > h2 + .bolum-alt { margin-top: -18px; }
.bolum-alt { color: var(--sessiz); font-size: 15.5px; line-height: 1.45; margin-bottom: 18px; }
.mikro {
  font-family: var(--gov); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.10em; font-variant-numeric: tabular-nums;
}

/* ── ikonlar ─────────────────────────────────────────────────────────────── */
.ikon { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; }
.ikon-kucuk { width: 16px; height: 16px; }

/* ── üst şerit ───────────────────────────────────────────────────────────── */
.ust {
  position: sticky; top: 0; z-index: 40; background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
}
.ust-ic { display: flex; align-items: center; gap: 10px; height: var(--ust); }
.marka {
  font-family: var(--dis); font-size: 15px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink); text-decoration: none; margin-right: auto;
  display: inline-flex; align-items: center; min-height: 44px;   /* dokunma hedefi */
}
.ust-nav { display: none; }
.ust-dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: var(--r);
  font: 600 14px/1 var(--gov); text-decoration: none; border: 1px solid var(--cizgi);
  color: var(--ink); background: var(--yuzey);
}
.ust-dugme.wa { display: none; }
.ust-menu {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border: 1px solid var(--cizgi); border-radius: var(--r);
  background: var(--yuzey); color: var(--ink); cursor: pointer;
}
.cekmece {
  position: fixed; inset: var(--ust) 0 auto 0; z-index: 39; background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi); padding: 8px 14px 14px;
  display: none; box-shadow: 0 12px 24px rgba(22, 25, 30, .12);
}
.cekmece.open { display: block; }
.cekmece a {
  display: flex; align-items: center; min-height: 48px; padding: 0 4px;
  color: var(--ink); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid var(--cizgi);
}
.cekmece a.cekmece-wa {
  margin-top: 12px; border: 0; justify-content: center; gap: 8px;
  background: var(--hat); color: #fff; border-radius: var(--r); font-size: 16.5px;
}

/* ── konum şeridi (antrasit donanım şeridi) ──────────────────────────────── */
.konum {
  background: var(--ink); color: #fff;
}
.konum-ic { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.konum-nokta {
  width: 6px; height: 6px; border-radius: 50%; background: var(--kordon); flex: 0 0 auto;
}
.konum-metin { margin-right: auto; color: #fff; opacity: .94; white-space: nowrap; }
.konum-uzun { display: none; }
/* gap YOK: "Harita" + "da aç" ayrı flex öğesi, aralarına boşluk girmemeli */
.konum a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px;
  color: #fff; text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
}
.konum a .ikon { margin-right: 6px; }
.konum-uzun-etiket { display: none; }         /* "Haritada aç" → mobilde "Harita" */
.konum a:focus-visible { outline-color: var(--kordon); box-shadow: none; }

/* ── FOLD ────────────────────────────────────────────────────────────────── */
.fold { padding: 14px 0 18px; }
.fold-h1 { margin-bottom: 10px; }
.fold-alt { display: none; }
.fold-foto {
  margin: 0 0 8px; position: relative; background: var(--ink);
  border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3;
}
.fold-foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity .16s linear;                 /* SCRIM YOK, FİLTRE YOK */
}
.fold-foto img.degisiyor { opacity: 0; }
.foto-buyut {
  position: absolute; right: 8px; bottom: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--r); cursor: pointer;
  background: rgba(22, 25, 30, .82); color: #fff; font: 600 13px/1 var(--gov);
}
.foto-yok {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  color: #fff; font-size: 14px; text-align: center; padding: 16px;
}
.fold-foto.hatali .foto-yok { display: flex; }

/* ═══ İMZA: ODA RAYI ═══ seçim aynı anda fotoğrafı, mesajı ve wa.me metnini değiştirir */
.ray {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px;
}
.ray button {
  /* 13px: "Günlük kiralık daire" 390px'te iki satıra sığsın diye — kısaltma yasak */
  min-height: 52px; padding: 6px 5px; cursor: pointer;
  background: var(--yuzey); color: var(--ink); border: 1px solid var(--cizgi);
  border-radius: var(--r); font: 600 13px/1.18 var(--gov); text-align: center;
}
.ray button[aria-checked="true"] {
  background: var(--kadife); color: #fff; border-color: var(--kadife);   /* hale/gölge/ışık YOK */
}
.ray button:active { background: var(--kadife-koyu); border-color: var(--kadife-koyu); color: #fff; }

.mesaj {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r);
  padding: 7px 8px 7px 11px; min-height: 48px;
}
.mesaj-govde { flex: 1 1 auto; min-width: 0; }
.mesaj-etiket { display: block; color: var(--sessiz); font-size: 11.5px; font-weight: 600; }
.mesaj-metin {
  display: block; font-size: 14.5px; font-weight: 500; line-height: 1.35;
  min-height: 2.7em;                                /* sabit → CLS 0, düğme kaymaz */
  transition: opacity .12s linear, transform .12s linear;
}
.mesaj-metin.degisiyor { opacity: 0; transform: translateY(2px); }
.mesaj-duzenle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: var(--r);
  border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--kadife);
  font: 600 13px/1 var(--gov); text-decoration: none; flex: 0 0 auto;
}

.cta { display: grid; grid-template-columns: 58fr 42fr; gap: 8px; }
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 8px 12px; border: 0; border-radius: var(--r); cursor: pointer;
  font: 700 16.5px/1.15 var(--gov); text-decoration: none; text-align: center;
}
.dugme-wa { background: var(--hat); color: #fff; }
.dugme-ara { background: var(--kadife); color: #fff; flex-direction: column; gap: 2px; }
.dugme-ara .no { font: 600 12px/1 var(--gov); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.dugme-cizgi { background: var(--yuzey); color: var(--ink); border: 1px solid var(--cizgi); }
.dugme-mavi { background: var(--kadife); color: #fff; }
.dugme:active { transform: none; filter: none; }
.dugme-wa:active { background: #0F6339; }
.dugme-ara:active, .dugme-mavi:active { background: var(--kadife-koyu); }
.dugme-wa:focus-visible, .dugme-ara:focus-visible, .dugme-mavi:focus-visible {
  outline: 2px solid var(--kadife); box-shadow: 0 0 0 2px var(--yuzey);
}

.fold-sizinti { color: var(--sessiz); font-size: 13.5px; margin-top: 10px; }

/* 360px sınıfı cihazlarda "WhatsApp'tan yaz" tek satırda kalsın */
@media (max-width: 380px) {
  .cta .dugme { padding-inline: 8px; }
  .cta .dugme-wa { font-size: 15.5px; }
}

/* ── bölüm 2: nasıl cevap alıyorsunuz ────────────────────────────────────── */
.adim { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.adim li {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r);
  padding: 12px 14px; font-size: 15.5px;
}
.adim b { font-weight: 700; }
.fiyat-panel {
  background: var(--ink); color: #fff; border-radius: var(--r); padding: 12px 14px;
  /* şeffaf kenarlık: metni kenarlıklı kardeşleriyle AYNI x'te başlatır */
  border: 1px solid transparent;
  font-size: 14.5px; line-height: 1.5;
}
.fiyat-panel .mikro { display: block; color: var(--kordon); margin-bottom: 5px; }
.gercekler { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.gercekler li {
  display: flex; align-items: center; gap: 9px; font-size: 15.5px;
  padding: 12px 14px; background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r);
}
.gercekler svg { color: var(--kadife); }

/* ── bölüm 3: ne için geliyorsunuz (niyet satırları) ─────────────────────── */
.niyet { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.niyet a {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 14px;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15.5px;
}
.niyet a .sebep { margin-right: auto; }
.niyet a .yaz {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--hat); font: 600 13px/1 var(--gov); white-space: nowrap;
}
.niyet a:active { background: var(--kadife); color: #fff; border-color: var(--kadife); }
.niyet a:active .yaz { color: #fff; }

/* ── bölüm 4: rezervasyon formu ──────────────────────────────────────────── */
.form-kart {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r); padding: 14px;
}
.alanlar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.alan { display: flex; flex-direction: column; gap: 5px; }
.alan label { font: 600 12.5px/1.2 var(--gov); color: var(--sessiz); }
.alan input, .alan select {
  min-height: 48px; padding: 0 10px; border: 1px solid var(--cizgi); border-radius: var(--rk);
  background: var(--yuzey); color: var(--ink); font: 400 16px/1.2 var(--gov);
  appearance: none; -webkit-appearance: none;
}
.alan select { background-image: none; }
.alan input:focus-visible, .alan select:focus-visible {
  outline: 2px solid var(--kadife); outline-offset: 0; border-color: var(--kadife); box-shadow: none;
}
.form-yardim { color: var(--sessiz); font-size: 13.5px; margin: 10px 0 12px; }
.form-cta { display: grid; grid-template-columns: 1fr; gap: 8px; }

/* ── RESEPSİYON KARTI ─────────────────────────────────────────────────────
   Masaüstünde formun yanındaki şeridi dolduran, otel masasındaki kart.
   Altbilgideki "Resepsiyon" sütunuyla AYNI bileşen: koyu yüzey + kordon etiketi.
   Mobilde gizli — orada zaten fold CTA'sı, yapışkan çubuk ve form var. */
.resepsiyon { display: none; }

/* ── bölüm 5: odanın içi ─────────────────────────────────────────────────── */
.foto-izgara { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
/* 🔴 tarayıcı varsayılanı figure{margin:1em 40px} sıfırlanmamıştı: her hücre 80px
   yatay kaybediyordu. 360px telefonda oda turu videoları 81px'e düşüyordu. */
.foto-izgara figure, .video-izgara figure { margin: 0; }
.foto-izgara button {
  display: block; width: 100%; padding: 0; border: 1px solid var(--cizgi); cursor: pointer;
  background: var(--ink); border-radius: var(--r); overflow: hidden;
}
.foto-izgara img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.foto-izgara img.dikey { object-position: center 40%; }   /* dikey kare kırpımda üst-orta bant */
.foto-izgara figcaption { font-size: 13.5px; color: var(--sessiz); padding: 7px 2px 0; }
.video-izgara {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none;
}
.video-izgara video {
  width: 100%; height: auto; background: var(--ink); border-radius: var(--r);
  border: 1px solid var(--cizgi);
}
.video-izgara figcaption { font-size: 13.5px; color: var(--sessiz); padding: 7px 2px 0; }

/* ── bölüm 6: adres ve bölgeler ──────────────────────────────────────────── */
.adres-kart {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r);
  padding: 14px; margin-bottom: 14px;
}
.adres-kart p { font-size: 15.5px; margin-bottom: 12px; }
.bolge-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bolge-liste li {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 999px;
  padding: 7px 11px; font-size: 13.5px; color: var(--ink);
}
.metin-blok { margin-top: 16px; display: grid; gap: 11px; }
.metin-blok p { font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.ic-baglanti { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.ic-baglanti a {
  display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r);
  color: var(--kadife); text-decoration: none; font-weight: 600; font-size: 15px;
}

/* ── bölüm 7: yorumlar (yıldız glifi yok, puan yok) ──────────────────────── */
.yorumlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.yorumlar figure {
  margin: 0; background: var(--yuzey); border: 1px solid var(--cizgi);
  border-left: 3px solid var(--kadife); border-radius: var(--r); padding: 13px 14px 13px 12px;
}
.yorumlar blockquote { margin: 0 0 7px; font-size: 15.5px; line-height: 1.45; }
.yorumlar figcaption { color: var(--sessiz); font-size: 13.5px; font-weight: 600; }
.yorum-kaynak {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 6px;
  font-weight: 600; font-size: 14.5px;
}

/* ── bölüm 8: sık sorulanlar ─────────────────────────────────────────────── */
.sss { display: grid; gap: 8px; }
.sss details {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r);
}
.sss summary {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px;
  cursor: pointer; font-weight: 600; font-size: 15.5px; list-style: none;
}
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after {
  content: ''; margin-left: auto; width: 10px; height: 10px; flex: 0 0 auto;
  border-right: 2px solid var(--kadife); border-bottom: 2px solid var(--kadife);
  transform: rotate(45deg);
}
.sss details[open] summary::after { transform: rotate(-135deg); }
.sss p { padding: 0 14px 14px; font-size: 15.5px; line-height: 1.55; color: var(--ink); }

/* ── bölüm 9: kapanış ────────────────────────────────────────────────────── */
.kapanis-cta { display: grid; gap: 8px; margin-top: 16px; }

/* ── ALTBİLGİ ─────────────────────────────────────────────────────────────
   Eski altbilgi 1160px'lik kabın sol 480px'ine yığılmış 5 satırdı (%51 ölü),
   sol kenarı üstündeki bölümden 200px sapıyordu, marka bir raster çıkartmaydı
   ve iletişim eylemi (tel / WhatsApp / harita) HİÇ yoktu.
   Şimdi: kabın tamamını kullanan 4 sütun, tipografik marka (üst şeritle aynı
   kimlik), gerçek resepsiyon sütunu ve --kordon'un ilk anlamlı kullanımı. */
.alt {
  background: var(--ink); color: #fff; padding: 30px 0 96px; margin-top: 0;
}
.alt a { color: #fff; text-decoration: none; }
.alt a:hover { text-decoration: underline; }
/* Telefonda iki bağlantı sütunu YAN YANA: 8 bağlantı × 44px dokunma hedefi tek
   kolonda 352px ediyordu. Marka ve resepsiyon tam genişlikte kalır. */
.alt-izgara { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; }
.alt-izgara > .alt-marka, .alt-izgara > .alt-sutun:last-child { grid-column: 1 / -1; }

.alt-ad {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--dis); font-weight: 700; font-size: 19px; letter-spacing: 0.06em;
  text-transform: uppercase; color: #fff;
}
.alt-ad:hover { text-decoration: none; }
/* Kordon altını YALNIZ sütun başlıklarında kullanıyoruz; markanın altına ikinci
   bir çizgi koymak "Yol tarifi al" bağlantısının altçizgisiyle üst üste biniyordu. */
.alt-adres { font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .82); margin-top: 8px; }
.alt-harita {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  margin-top: 6px; font-size: 14.5px; font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
}
.alt-harita:hover { text-decoration: none; border-bottom-color: #fff; }

.alt-baslik {
  display: block; color: var(--kordon); margin-bottom: 4px;   /* amber/mürekkep 8.1:1 */
}
.alt-sutun { display: flex; flex-direction: column; }
.alt-sutun a {
  display: flex; align-items: center; min-height: 44px;
  font-size: 15px; color: rgba(255, 255, 255, .88);
}
.alt-tel {
  font-family: var(--dis); font-weight: 700; font-size: 21px; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; color: #fff !important; min-height: 48px !important;
}
.alt-wa {
  justify-content: center; gap: 8px; margin-top: 8px;
  background: var(--hat); border-radius: var(--r);
  min-height: 48px !important; font-weight: 700; font-size: 15.5px;
  color: #fff !important;
}
.alt-wa:hover { text-decoration: none; background: #12703F; }
.alt-saat { font-size: 13.5px; color: rgba(255, 255, 255, .72); margin-top: 10px; }

.alt-dip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  border-top: 1px solid rgba(255, 255, 255, .16); margin-top: 30px; padding-top: 18px;
}
.alt-telif { font-size: 13.5px; color: rgba(255, 255, 255, .72); }
.alt-yasal { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.alt-yasal a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13.5px; color: rgba(255, 255, 255, .72);
}
.alt-dil { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alt-dil label { font-size: 13px; color: rgba(255, 255, 255, .72); }
.alt-dil select {
  appearance: none; -webkit-appearance: none;
  min-height: 44px; padding: 0 34px 0 12px; border-radius: var(--rk);
  /* eski kenarlık rgba(255,255,255,.3) = 2.67:1 → WCAG 1.4.11 (3:1) başarısızdı */
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .07)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 12px center / 12px 8px;
  color: #fff; font: 400 15px/1 var(--gov); cursor: pointer;
}
.alt-dil select option { background: var(--ink); color: #fff; }
/* tedarikçi imzası sessiz: eskiden footer'ın EN yüksek kontrastlı metniydi (17.6:1),
   otelin kendi adresinden (12.2:1) öndeydi. */
.alt-hostragons {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  margin-left: auto; font-size: 12.5px; color: rgba(255, 255, 255, .55) !important;
}
/* Tedarikçi ejderi sayfanın en doygun nesnesiydi (S=0,96 magenta). Dinlenirken
   gri, üzerine gelince kendi rengi: imza kalıyor, dikkat çalmıyor. */
.alt-hostragons img { opacity: .75; filter: grayscale(1); transition: filter .16s linear, opacity .16s linear; }
.alt-hostragons:hover img { opacity: 1; filter: none; }

/* ── yapışkan alt çubuk: CSS'te VARSAYILAN GÖRÜNÜR (JS'siz ziyaretçi CTA'sız kalmaz) ── */
.yapiskan {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: 62fr 38fr; gap: 8px;
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  background: rgba(231, 233, 236, .96); border-top: 1px solid var(--cizgi);
  transition: transform .14s ease-out;
}
.yapiskan .dugme { min-height: 52px; font-size: 16px; }
body.cta-gorunur .yapiskan { transform: translateY(110%); pointer-events: none; }
.dikey-ray { display: none; }

/* ── lightbox ────────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: rgba(22, 25, 30, .93); padding: 16px;
  align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img {
  width: auto; height: auto; max-width: 100%; max-height: 86vh;
  object-fit: contain; border-radius: var(--rk);
}
.lb-kapat {
  position: absolute; top: 12px; right: 12px; width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--yuzey); color: var(--ink); border: 0; border-radius: 50%; cursor: pointer;
}

/* Google Translate kabuğu görünmesin, mekanizma çalışsın. Google'ın enjekte ettiği
   select/bağlantı ekran dışında ama ölçülebilir kalıyor; hedef boyutunu yine de veriyoruz.
   🔴 `top: 0` ŞART: yalnız `left:-9999px` verilirse kutu kendi statik yerinde kalır ve
   her sayfanın dibine 85px ölü kaydırma ekler. */
#google_translate_element { position: absolute; left: -9999px; top: 0; }
#google_translate_element select,
#google_translate_element a { min-height: 44px; min-width: 44px; }
.goog-te-gadget { position: absolute !important; left: -9999px !important; top: 0 !important; }
.goog-te-gadget a, .goog-te-gadget select, .goog-te-gadget span { min-height: 44px; }
body { top: 0 !important; }
.skiptranslate iframe { display: none !important; }
body > .skiptranslate { position: absolute !important; left: -9999px !important; top: 0 !important; }
body > .skiptranslate a, body > .skiptranslate span { min-height: 44px; }

/* ── kısa ekranlar: SPEC'in izin verdiği kısıntı sırası ──────────────────── */
/* 🔴 `max-width: 1023px` ŞART: bu kural masaüstünde de ateşleniyordu, 1px'lik
   pencere yüksekliği farkı fold fotoğrafının kırpımını değiştiriyordu. */
@media (max-height: 680px) and (max-width: 1023px) {
  /* Gerçek telefonlarda iç yükseklik ~640–660px. SPEC'in kısıntı sırası: önce H1,
     sonra fotoğraf. CTA satırı asla küçülmez ve asla aşağı kaymaz. */
  .fold-foto { aspect-ratio: 1.62; }
  h1 { font-size: 24px; }
}

/* ── ARA BANT 700–1023px ──────────────────────────────────────────────────
   Burada kendi kuralı yoktu: .kap sınırsız gerilip fold fotoğrafı 995×746'ya
   çıkıyor, hero CTA fold'un dışına düşüyordu. 1440 ekranda %150 yakınlaştırma
   (=960 CSS px) tam buraya iniyor, yani gerçek ziyaretçi bandı.
   ≤699px'e DOKUNULMUYOR — kabul.js bütçesi (390×620, 360×640) orada. */
@media (min-width: 700px) and (max-width: 1023px) {
  .kap { width: min(100% - 32px, 720px); }
  .fold-foto { aspect-ratio: 16 / 10; }        /* 746px yükseklik → 450px */
  .adim, .gercekler, .niyet, .ic-baglanti, .yorumlar { grid-template-columns: 1fr 1fr; }
  .video-izgara { grid-template-columns: repeat(4, 1fr); }
  .kapanis-cta { grid-template-columns: repeat(3, 1fr); }
  .alt-izgara { grid-template-columns: 1fr 1fr; gap: 28px 40px; }
}

/* ── masaüstü ────────────────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  :root { --ust: 72px; }
  body { font-size: 17px; line-height: 1.6; }
  h1 { font-size: 46px; line-height: 1.06; letter-spacing: -0.025em; }
  h2 { font-size: 27px; line-height: 1.15; }   /* 30 → 27: h2/gövde 1.94 → 1.59 */
  h3 { font-size: 19px; }
  .marka { font-size: 18px; }
  .mikro { font-size: 12px; }
  .bolum > .kap { padding-block: 48px; }

  /* ═══ ÖLÇÜ SİSTEMİ ═══
     Tek sol kenar. Okunan metin 1. kolonda (660px), göz atılan şey kabın
     tamamında. Hiçbir şey ortalanmıyor — omuz düşüşü bu yüzden yok.
     row-gap: 0 → boş örtük satırlar boşluk üretmesin (bkz. .resepsiyon). */
  .bolum > .kap {
    display: grid;
    grid-template-columns: minmax(0, var(--olcu)) minmax(0, 1fr);
    column-gap: 56px; row-gap: 0; align-items: start;
  }
  .bolum > .kap > * { grid-column: 1; }
  /* kabı boydan boya kullananlar: kart ızgaraları ve medya */
  .bolum > .kap > .adim, .bolum > .kap > .gercekler, .bolum > .kap > .niyet,
  .bolum > .kap > .bolge-liste, .bolum > .kap > .ic-baglanti,
  .bolum > .kap > .adres-kart, .bolum > .kap > .metin-blok,
  .bolum > .kap > .foto-izgara, .bolum > .kap > .video-izgara,
  .bolum > .kap > .yorumlar, .bolum > .kap > .sss,
  .bolum > .kap > .kapanis-cta { grid-column: 1 / -1; }
  /* sağ şerit: yalnız #rezervasyon kullanıyor (boydan boya öğesi olmayan tek bölüm) */
  #rezervasyon > .kap > .resepsiyon {
    grid-column: 2; grid-row: 1 / span 30; align-self: start;
  }
  /* inline-flex bir ızgara öğesi olarak bloklaşır; kolonu doldurmasın */
  .bolum > .kap > .yorum-kaynak { justify-self: start; }

  /* masaüstünde gövde metni de büyüsün: 46 seçici mobil boyutunda donmuştu,
     gövde metninin %81'i beyan edilen 17px'in altında kalıyordu */
  .bolum-alt, .adim li, .gercekler li, .niyet a, .sss summary, .sss p,
  .metin-blok p, .adres-kart p, .yorumlar blockquote { font-size: 17px; }
  .bolum-alt { line-height: 1.55; }
  .ic-baglanti a { font-size: 16px; }
  .bolge-liste li, .foto-izgara figcaption, .video-izgara figcaption,
  .yorumlar figcaption, .form-yardim, .alt-saat { font-size: 14.5px; }
  .yorum-kaynak, .fiyat-panel { font-size: 15.5px; }

  .ust-nav { display: flex; gap: 22px; margin-right: 22px; }
  .ust-nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
  .ust-dugme.wa { display: inline-flex; background: var(--hat); color: #fff; border-color: var(--hat); }
  .ust-menu, .cekmece { display: none !important; }
  .konum-ic { min-height: 40px; }
  .konum-uzun, .konum-uzun-etiket { display: inline; }
  .konum-kisa { display: none; }

  .fold { padding: 28px 0 40px; }
  /* Tek akışkan formül: 1024–1199 istisnası kaldırıldı. Eskiden 1199→1200
     arasında pencere 1px büyürken fotoğraf 720×540 → 640×480'e DÜŞÜYOR,
     h1 yeniden sarılıyor ve CTA satırı 78px zıplıyordu. */
  .fold-kap {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 480px); column-gap: 40px;
    grid-template-areas: "foto h1" "foto alt" "foto secim" "foto bos"; align-content: start;
  }
  .fold-h1 { grid-area: h1; margin-bottom: 12px; }
  .fold-alt { grid-area: alt; display: block; color: var(--sessiz); font-size: 17px; margin-bottom: 20px; }
  .fold-foto { grid-area: foto; align-self: start; margin: 0; }
  .fold-secim { grid-area: secim; position: sticky; top: calc(var(--ust) + 40px + 24px); align-self: start; }
  .fold-sizinti { display: none; }
  .ray { gap: 8px; }
  .ray button { font-size: 15px; min-height: 56px; }
  .mesaj-metin { font-size: 16px; line-height: 1.4; }
  .cta { gap: 10px; }
  .dugme { min-height: 60px; font-size: 17px; }

  .alanlar { grid-template-columns: 1fr 1fr; }
  .form-cta { grid-template-columns: 1fr 1fr; }
  .adim { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .gercekler { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .niyet { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .foto-izgara { grid-template-columns: 1fr 1fr; gap: 14px; }
  .video-izgara { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .yorumlar { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .sss { grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .kapanis-cta { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .ic-baglanti { grid-template-columns: 1fr 1fr; gap: 12px; }
  /* Adres bir eylem satırı: metin solda, harita düğmesi sağda — 660px'lik
     kolonda dursaydı sağında 444px'lik ölü bir alan bırakıyordu. */
  .adres-kart {
    display: flex; align-items: center; justify-content: space-between;
    gap: 32px; padding: 18px 22px;
  }
  .adres-kart p { margin-bottom: 0; }
  .adres-kart .dugme { flex: 0 0 auto; }
  /* 4 paragraf iki kolonda: kolon başına ~552px (≈62 karakter) — hâlâ okuma
     ölçüsü, ama bölümün sağ yarısı boş kalmıyor. */
  .metin-blok { grid-template-columns: 1fr 1fr; gap: 14px 56px; }

  /* resepsiyon kartı — formun yanındaki şerit */
  .resepsiyon {
    display: block; background: var(--ink); color: #fff;
    border-radius: var(--r); padding: 22px;
  }
  .resepsiyon .mikro { display: block; color: var(--kordon); margin-bottom: 12px; }
  .resepsiyon-tel {
    display: inline-flex; align-items: center; min-height: 48px;
    font-family: var(--dis); font-weight: 700; font-size: 26px; letter-spacing: .01em;
    font-variant-numeric: tabular-nums; color: #fff; text-decoration: none;
  }
  .resepsiyon-tel:hover { text-decoration: underline; }
  .resepsiyon .dugme-wa { margin-top: 12px; width: 100%; min-height: 52px; font-size: 16px; }
  .resepsiyon-not {
    font-size: 14.5px; line-height: 1.5; color: rgba(255, 255, 255, .78);
    margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .16);
  }

  /* altbilgi: kabın tamamı, 4 sütun */
  .alt { padding: 44px 0 40px; }
  .alt-izgara { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 40px; }
  /* mobildeki tam-genişlik istisnalarını geri al: masaüstünde dört gerçek sütun */
  .alt-izgara > .alt-marka, .alt-izgara > .alt-sutun:last-child { grid-column: auto; }
  .alt-ad { font-size: 21px; }
  .alt-dip { flex-wrap: nowrap; }

  .yapiskan { display: none; }
}

/* Yüzen dikey ray yalnız içeriğe DEĞMEDİĞİ genişlikte açılır.
   1024–1319'da 56px'lik ray galerinin üstüne biniyordu (1024'te 38px örtüşme);
   o bantta mobil yapışkan çubuk açık kalıyor — ölçülmüş örtüşme yerine
   her zaman erişilebilir bir CTA. */
@media (min-width: 1024px) and (max-width: 1319px) {
  .yapiskan { display: grid; }
  .alt { padding-bottom: 96px; }
}
@media (min-width: 1320px) {
  .dikey-ray {
    display: flex; flex-direction: column; gap: 8px;
    position: fixed; right: clamp(16px, calc(50vw - 644px), 56px);
    top: 50%; transform: translateY(-50%); z-index: 45;
    transition: opacity .16s linear;
  }
  /* Fold'daki düğmeler ekrandayken yüzen ray gereksiz — mobil çubukla aynı kural */
  body.cta-gorunur .dikey-ray { opacity: 0; pointer-events: none; }
  .dikey-ray a {
    width: 56px; height: 56px; border-radius: var(--r); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .dikey-ray .wa { background: var(--hat); }
  .dikey-ray .tel { background: var(--kadife); }
  .dikey-ray svg { width: 24px; height: 24px; }
}

/* Kısa masaüstü penceresi: hero CTA'sının altı ~622px'te, yani 660px'ten kısa bir
   pencerede KESİK kalıyor. `cta-gorunur` eşiği (intersectionRatio 0,5) onu yine
   "görünür" sayıp yedeği kaldırıyordu → 1024×600 ve 1280×600'de tek CTA yarımdı.
   Bu blok 1320 bloğundan SONRA gelmeli, yoksa ray kuralı onu ezer.
   Telefona dokunmuyoruz: yalnız ≥1024'te geçerli. */
@media (min-width: 1024px) and (max-height: 660px) {
  body.cta-gorunur .yapiskan { transform: none; pointer-events: auto; }
  body.cta-gorunur .dikey-ray { opacity: 1; pointer-events: auto; }
}

/* ── hareket bütçesi: tavan 200ms, sonsuz döngü yok ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0ms !important; animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}