/* =============================================================
   Perla Via Villas — özel stiller
   Tailwind CDN yardımcı sınıflarını tamamlar; çakışmayı önlemek
   için tüm seçiciler kendi ad alanında (.nav-*, .shaft-*, .lb-* ...).
   ============================================================= */

/* ---------------------------------------------------------------
   RENK PALETİ — VIA TRUVA kurumsal kimliği
   Katalogdan çıkarılan dokuz renk. Kontrast ölçümleri sonucu iki
   kural doğdu ve tüm bileşenler buna uyar:

   1) Altın (#E8BE87) beyaz üzerinde 1,7:1 verir — metin olamaz.
      Ya koyu zümrüt zeminde metin (9,2:1) ya da dolgu olarak
      koyu yazı taşır (9,7:1). Üçüncü bir kullanımı yoktur.
   2) Bronz (#8E7658) açık zeminde 3,4:1 — yalnız çizgi, çerçeve
      ve ayraç. Paletin kendi tarifi de böyle.

   Sonuç: koyu zeminde aksan ALTIN, açık zeminde aksan ZÜMRÜT,
   bronz her iki zeminde de yalnızca çizgi.
   --------------------------------------------------------------- */
:root {
  /* ---- Zümrüt — ana zemin ---- */
  --emerald: #0e2624;        /* site geneli koyu bölümler, navbar, footer */
  --emerald-deep: #001916;   /* gradyan geçişleri, gölge tonu */
  --emerald-soft: #142c2b;   /* koyu zeminde hover ve kart zemini */

  /* ---- Altın — vurgu ---- */
  --gold: #e8be87;           /* koyu zeminde başlık aksanı, ikon, buton dolgusu */

  /* ---- Metalik ve nötr ---- */
  --bronze: #8e7658;         /* ince çizgi, çerçeve — metin değil */
  --champagne: #968971;      /* ayraç ve ikincil işaret */
  --cream: #f3e0cc;          /* açık bölüm zeminleri */
  --paper: #fafaf8;          /* kart zemini, açık ana zemin */
  --ink: #09211d;            /* açık zeminlerde metin */

  /* Açık zeminde ikincil metin. Palette karşılığı yoktu; zümrütten
     türetildi ve krem üzerinde 5,6:1 verir (AA). */
  --muted: #4a5a56;

  /* Çizgi tonları — bronzun ve zümrütün saydam türevleri. */
  --line: rgba(142, 118, 88, .34);
  --line-soft: rgba(9, 33, 29, .12);
  --line-light: rgba(232, 190, 135, .2);

  /* WhatsApp'ın kendi markası — paletin dışında kalır, çünkü buton
     hangi uygulamayı açtığını rengiyle söyler. */
  --wa: #25d366;
  --wa-deep: #1eb658;

  /* Navbar ve footer zümrüt olduğu için cam yüzey de koyu camdır. */
  --glass-bg: rgba(14, 38, 36, .72);
  --glass-border: rgba(232, 190, 135, .18);
  --glass-blur: 26px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .6s;

  --nav-h: 76px;

  /* Tipografi rolleri.
     display : Marcellus — Roma yazıtı karakterli, yalnız başlıklarda
     body    : Manrope   — arayüzün tamamı */
  --font-display: "Marcellus", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

* { -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: hidden;
  font-feature-settings: "ss01";
}

@media (max-width: 1023px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

body.is-locked { overflow: hidden; }

img { max-width: 100%; height: auto; }

::selection { background: var(--cream); color: var(--ink); }

/* ---------- Erişilebilirlik ---------- */
.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--emerald);
  color: var(--gold);
  border-radius: 0 0 4px 4px;
  font-size: .875rem;
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Koyu zeminlerde halka altına döner — zümrüt üzerinde görünmez kalırdı. */
.site-header :focus-visible,
.site-footer :focus-visible,
.section-dark :focus-visible,
.cta-final :focus-visible,
.shaft.is-deep :focus-visible,
.mobile-menu :focus-visible { outline-color: var(--gold); }

/* ---------- Cam yüzey ---------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}
.glass-dark {
  background: rgba(232, 190, 135, .07);
  border: 1px solid var(--line-light);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(14, 38, 36, .95); }
  .glass-dark { background: rgba(20, 44, 43, .9); }
}

/* ---------- Tipografi ----------
   Başlıklar Marcellus: yazıt harfi olduğu için sıkı harf aralığı
   istemez — negatif tracking okunurluğu bozar, burada 0'a yakındır. */
.display-1,
.display-2,
.display-3 {
  font-family: var(--font-display);
  font-weight: 400;
}
.display-1 {
  font-size: clamp(2.6rem, 6.6vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -.012em;
}
.display-2 {
  font-size: clamp(2rem, 4.8vw, 3.9rem);
  line-height: 1.08;
  letter-spacing: -.01em;
}
.display-3 {
  font-size: clamp(1.55rem, 2.9vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -.006em;
}
.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: var(--muted);
}

/* Eyebrow'un önündeki işaret nokta değil ölçü çizgisidir: mimari
   çizimde bir ölçüyü kendi etiketine bağlayan kılavuz çizgi. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--bronze);
  flex: none;
}
.eyebrow-light { color: rgba(250, 250, 248, .74); }
.eyebrow-light::before { background: var(--gold); }

.tnum { font-variant-numeric: tabular-nums; }

/* Manrope'un virgülü geniş bir sağ yan boşlukla çizilmiştir; iri puntoda
   "23,85" gözle "23, 85" gibi ayrık okunur. measure_html() ondalık
   virgülü bu sınıfla sarar. Küçük puntoda fark edilmediği için ölçü
   tablolarında kullanılmaz. */
.dec { margin-right: -.1em; }

/* ---------- Rakam yüzü ----------
   Rakamlar Marcellus'ta dizilmez. Marcellus bir yazıt harfidir; rakamları
   kaligrafik, dar ve eşit genişlikte değil — ölçü okumak için uygun değil.
   Ölçüler, mesafeler ve telefon numarası gövde yazısıyla (Manrope) dizilir.

   Manrope 400 ağırlıkta Marcellus kadar yer kaplamaz; aynı görsel ağırlığı
   tutması için 700'e çıkarılır ve harf aralığı sıkılaştırılır. Boyutlar da
   Manrope'un daha geniş rakam gövdesine göre bir tık küçültülmüştür.

   Başlıklar (display-1/2/3, kat adları, donatı başlıkları) Marcellus'ta
   kalır — orada rakam yoktur. */
.measure-value,
.villa-card-title,
.tline-time,
.amenity-tile-measure,
.amenity-measure,
.cta-phone {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

/* Aksan renkleri zemine göre değişir: açık zeminde zümrüt (12,4:1),
   koyu zeminde altın (9,2:1). İkisi asla yer değiştirmez. */
.text-accent { color: var(--emerald); }
.text-gold { color: var(--gold); }

.info-pending {
  display: inline-block;
  padding: .1rem .5rem;
  border: 1px dashed var(--line);
  border-radius: 999px;
  font-size: .8125rem;
  color: var(--muted);
}

/* ---------- Butonlar ---------- */
.btn-primary,
.btn-ghost,
.btn-light,
.btn-glass,
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  padding: 0 1.6rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.005em;
  transition: transform .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  will-change: transform;
}
/* Birincil eylem altın dolguludur ve koyu zümrüt yazı taşır (9,7:1).
   Altın üzerine beyaz yazı 1,8:1 kalırdı — hiçbir koşulda kullanılmaz. */
.btn-primary { background: var(--gold); color: var(--ink); }
.btn-primary:hover {
  background: #f0cf9f;
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(142, 118, 88, .35);
}
.btn-dark { background: var(--emerald); color: var(--paper); }
.btn-dark:hover {
  background: var(--emerald-deep);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(9, 33, 29, .28);
}
.btn-ghost { border: 1px solid var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--cream); border-color: var(--bronze); }
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(0, 0, 0, .28); }
.btn-glass {
  background: rgba(232, 190, 135, .12);
  border: 1px solid rgba(232, 190, 135, .34);
  color: var(--gold);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.btn-glass:hover { background: rgba(232, 190, 135, .22); color: var(--paper); }
.btn-sm { min-height: 42px; padding: 0 1.15rem; font-size: .875rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  color: var(--ink);
  min-height: 44px;
}
.link-arrow svg { transition: transform .35s var(--ease); color: var(--bronze); }
.link-arrow:hover { color: var(--emerald); }
.link-arrow:hover svg { transform: translateX(4px); }
.section-dark .link-arrow,
.cta-final .link-arrow { color: var(--paper); }
.section-dark .link-arrow svg,
.cta-final .link-arrow svg { color: var(--gold); }
.section-dark .link-arrow:hover,
.cta-final .link-arrow:hover { color: var(--gold); }

/* ---------- Navbar ----------
   Palet notu navbar ve footer'ı zümrüde ayırır. Koyu bar hem açık
   hem koyu sayfalarda aynı görünür; marka her sayfada aynı yerde,
   aynı ağırlıkta durur. */
.site-header {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 90;
  padding: 0 clamp(12px, 3vw, 24px);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.nav-shell {
  pointer-events: auto;
  width: 100%;
  max-width: 78rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 10px 10px 10px 20px;
  border-radius: 999px;
  color: var(--paper);
  box-shadow: 0 10px 34px rgba(0, 25, 22, .22);
  transition: padding .45s var(--ease), box-shadow .45s var(--ease), background-color .45s var(--ease), max-width .45s var(--ease);
}
.site-header.is-scrolled .nav-shell {
  padding: 6px 6px 6px 16px;
  max-width: 68rem;
  box-shadow: 0 12px 38px rgba(0, 25, 22, .3);
  background: rgba(0, 25, 22, .88);
}

.brand { display: inline-flex; align-items: center; gap: .65rem; flex: none; }

/* Logo dosyası yoksa çizilen marka işareti: dikey bir altın çizgi —
   villanın üç katını birbirine bağlayan asansör şaftının en küçük hâli. */
.brand-mark {
  width: 3px;
  height: 26px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--gold) 0%, var(--bronze) 100%);
  flex: none;
}
/* config.php'de logo tanımlıysa marka işaretinin yerini alır. */
.brand-logo {
  display: block;
  height: var(--logo-h, 28px);
  width: auto;
  max-width: 190px;
  object-fit: contain;
  flex: none;
}
.brand-name {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.05;
  white-space: nowrap;
}
.brand-name-main {
  font-family: var(--font-display);
  font-size: 1.08rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold);
}
.brand-tail {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(250, 250, 248, .62);
  margin-top: .2rem;
}
/* Marka kuyruğu yalnız daraldığı yerlerde gizlenir: çok küçük
   ekranlarda ve menünün açıldığı 1100–1279 aralığında. */
@media (max-width: 419px) { .brand-tail { display: none; } }
@media (min-width: 1100px) and (max-width: 1279px) { .brand-tail { display: none; } }
.brand-footer .brand-name-main { font-size: 1.25rem; }

.nav-links {
  display: none;
  align-items: center;
  gap: .1rem;
  margin: 0 auto;
}
@media (min-width: 1100px) { .nav-links { display: flex; } }

.nav-link {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 .8rem;
  border-radius: 999px;
  font-size: .875rem;
  color: rgba(250, 250, 248, .76);
  white-space: nowrap;
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.nav-link:hover { color: var(--gold); background: rgba(232, 190, 135, .1); }
.nav-link.is-active { color: var(--gold); font-weight: 600; background: rgba(232, 190, 135, .14); }

.nav-end { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
@media (min-width: 1100px) { .nav-end { margin-left: 0; } }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(232, 190, 135, .28);
}
@media (min-width: 1100px) { .nav-toggle { display: none; } }
.nav-toggle-bar {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--gold);
  border-radius: 2px;
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* ---------- Mobil menü ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 25, 22, .94);
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  backdrop-filter: blur(30px) saturate(140%);
  color: var(--paper);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu.is-open { opacity: 1; }
.mobile-menu-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--nav-h) + 32px) 24px calc(28px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.mobile-nav-list { display: flex; flex-direction: column; gap: 0; }
.mobile-nav-link {
  display: block;
  padding: .4rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 5.2vw, 2.1rem);
  letter-spacing: -.01em;
  color: var(--paper);
  opacity: 0;
  transform: translateY(14px);
}
.mobile-menu.is-open .mobile-nav-link {
  animation: menuIn .5s var(--ease) forwards;
  animation-delay: calc(var(--i) * 40ms + 60ms);
}
.mobile-nav-link.is-active { color: var(--gold); }
@keyframes menuIn { to { opacity: 1; transform: none; } }

.mobile-menu-foot {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-light);
}
/* Koyu menüde hayalet buton altın çerçeveli olmalı. */
.mobile-menu-foot .btn-ghost { border-color: rgba(232, 190, 135, .34); color: var(--gold); }
.mobile-menu-foot .btn-ghost:hover { background: rgba(232, 190, 135, .12); border-color: var(--gold); }
.mobile-menu-phone { text-align: center; color: rgba(250, 250, 248, .7); font-size: .95rem; padding: .5rem; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background: var(--emerald-deep);
}
.hero-media {
  position: absolute;
  inset: -8% 0 0;
  height: 116%;
  z-index: -2;
  will-change: transform;
}
/* Fazladan %16 yükseklik yalnızca parallax'ın kaydırma payı içindir.
   768px altında parallax çalışmadığı için pay da gereksiz. */
@media (max-width: 767px) {
  .hero-media { inset: 0; height: 100%; will-change: auto; }
}
/* <picture> satır içi bir kutudur; blok yapılmazsa img'in height:100%
   değeri dayanacak bir yükseklik bulamaz ve object-fit çalışmaz. */
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* İki katmanlı örtü: alt kısımda metin için garantili kontrast,
   üstte navbar'ın camını taşıyan hafif bir koyulaşma. */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(0, 25, 22, .93) 0%, rgba(0, 25, 22, .72) 30%, rgba(0, 25, 22, .34) 58%, rgba(0, 25, 22, .1) 78%, rgba(0, 25, 22, .44) 100%),
    linear-gradient(115deg, rgba(14, 38, 36, .55) 0%, rgba(0, 25, 22, .1) 55%, transparent 100%);
}
.hero-inner {
  width: 100%;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem) clamp(7rem, 12vh, 10rem);
}

/* Hero'daki konum etiketi — proje nerede, ilk satırda söylenir. */
.hero-place {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .9rem .4rem .7rem;
  border-radius: 999px;
  background: rgba(232, 190, 135, .12);
  border: 1px solid rgba(232, 190, 135, .32);
  color: var(--gold);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .05em;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* ---------- ÖLÇÜ ŞERİDİ (sayaç) ----------
   Projeyi tarif eden dört rakam. Kutu değil, ölçülmüş bir levha:
   köşeler 4px (sitenin geri kalanıyla aynı mimari disiplin), ayraçlar
   1px'lik boşluklardan doğar, her hücrenin üstünden altın bir ölçü
   çentiği sarkar — teknik çizimde bir kotu işaretleyen çizginin
   karşılığı.

   Rakamlar bilerek iri: bu bölümün işi etkilemek, liste sunmak değil.
   Etki boyuttan gelir, süsten değil. */
.measure-band {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  /* Hücre araları bandın kendi zemininden görünür — böylece hem 2 hem
     4 sütunlu düzende ayraçlar kendiliğinden doğru yere düşer. */
  background: rgba(232, 190, 135, .22);
  border: 1px solid var(--line-light);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .measure-band { grid-template-columns: repeat(4, 1fr); }
}

.measure-cell {
  position: relative;
  background: var(--emerald);
  padding: 1.9rem clamp(1.25rem, 2vw, 1.9rem) 1.6rem;
}
/* Üst kenardan sarkan ölçü çentiği. */
.measure-cell::before {
  content: "";
  position: absolute;
  left: clamp(1.25rem, 2vw, 1.9rem);
  top: 0;
  width: 1px;
  height: 15px;
  background: var(--gold);
  opacity: .5;
}

.measure-value {
  font-size: clamp(1.85rem, 3vw, 2.6rem);
  line-height: 1;
  color: var(--gold);
}
.measure-unit {
  font-family: var(--font-body);
  font-size: .32em;
  font-weight: 600;
  letter-spacing: .05em;
  color: rgba(250, 250, 248, .74);
  margin-left: .45rem;
  vertical-align: .42em;
}
.measure-label {
  margin-top: 1rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  line-height: 1.45;
  color: rgba(250, 250, 248, .62);
}

/* ---------- AYRICALIK LİSTESİ ----------
   Yedi ayrıcalık sütun değil satır. İki gerekçe:
   1) Üstteki ölçü şeridi zaten yatay bir ray; ikisini üst üste koymak
      aynı cihazı iki kez tekrarlamak ve ritmi düzleştirmek oluyordu.
   2) Yedi tek sayıdır; sütunlarda son hücre daima boşta kalıyordu.
      Satırda ise tek sayı görünmez — son öğe iki sütunu birden kaplar. */
.perk-list {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--line);
}
@media (min-width: 640px) {
  .perk-list { grid-template-columns: 1fr 1fr; column-gap: clamp(1.5rem, 3vw, 3rem); }
  /* Öğe sayısı tekse son satır yarım kalmasın. Izgara öğesi <a> değil
     onu saran <li>; seçici de ona yazılmalı. */
  .perk-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.perk {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1.05rem .25rem 1.05rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  transition: color .3s var(--ease), padding-left .3s var(--ease);
}
/* İkon zümrüt: bronz yalnız çizgi rengidir ve krem üzerinde 3,4:1 ile
   soluk kalıyordu. Zümrüt 12,4:1 verir, satır net okunur. */
.perk-icon { flex: none; color: var(--emerald); opacity: .75; transition: opacity .3s var(--ease); }
.perk-title { font-size: .9375rem; font-weight: 600; letter-spacing: -.005em; line-height: 1.35; }
.perk-go {
  margin-left: auto;
  flex: none;
  color: var(--bronze);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.perk:hover,
.perk:focus-visible { color: var(--emerald); padding-left: .35rem; }
.perk:hover .perk-icon,
.perk:focus-visible .perk-icon { opacity: 1; }
.perk:hover .perk-go,
.perk:focus-visible .perk-go { opacity: 1; transform: none; }

/* ---------- Bölüm yardımcıları ---------- */
.section-dark {
  position: relative;
  isolation: isolate;
  /* Huzme bölümün dışına taşmasın — aksi hâlde sayfa yatay kayar. */
  overflow: hidden;
  background: var(--emerald);
  color: var(--paper);
}
/* Koyu bölümü aydınlatan tek altın huzme — dekor değil, marka imzası. */
.section-dark::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10%;
  right: -5%;
  width: min(52rem, 80%);
  height: 60%;
  background: radial-gradient(closest-side, rgba(232, 190, 135, .13), transparent 72%);
  pointer-events: none;
}
.section-dark .lead { color: rgba(250, 250, 248, .7); }

.hairline { height: 1px; background: var(--line-soft); }
.hairline-accent { height: 1px; width: 44px; background: var(--bronze); }
.hairline-light { height: 1px; background: var(--line-light); }

.page-head { padding-top: calc(var(--nav-h) + clamp(3rem, 8vw, 6rem)); }

.figure-frame {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: var(--cream);
}
.figure-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}
.figure-frame:hover img { transform: scale(1.04); }

/* ---------- Kat planı çerçevesi ----------
   figure-frame'den ayrı bir bileşen, çünkü kat planı bir fotoğraf değil
   teknik çizimdir ve üç kuralı da tersine çevirir:

   1. KIRPILMAZ. figure-frame object-fit:cover kullanır; sabit oranlı bir
      kutuda bu, çizimin bir kısmını keser. Burada oran dayatılmaz, çizim
      kendi ölçüsüyle gelir (media_size dosyadan okur).
   2. BÜYÜTÜLMEZ. Üzerine gelince %4 yakınlaştırmak bir fotoğrafta hoş,
      bir ölçü çiziminde okumayı bozar.
   3. ZEMİN KÂĞITTIR. Çizim beyaz üzerine siyahtır; krem zemin onu
      sarartır. Koyu katta da kâğıt kalır — orada bir plan paftası gibi
      okunur.

   Yükseklik sınırı, en dikey çizimin (0,63 oranı) bölümü tek başına
   doldurmasını engeller. */
.plan-frame {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 4px;
  background: var(--paper);
  box-shadow: 0 18px 44px rgba(0, 25, 22, .16);
  transition: box-shadow .3s var(--ease);
}

.plan-frame:hover,
.plan-frame:focus-visible { box-shadow: 0 22px 56px rgba(0, 25, 22, .28); }

/* Büyütme işareti. Çizim üzerine gelince büyümez (ölçü okumayı bozar),
   bu yüzden "açılabilir" olduğunu söyleyen görünür bir işaret gerekir. */
.plan-buyut {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(9, 33, 29, .82);
  color: var(--paper);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}

.plan-frame:hover .plan-buyut,
.plan-frame:focus-visible .plan-buyut { opacity: 1; transform: none; }

/* Dokunmatikte hover yoktur; işaret hep görünür kalır. */
@media (hover: none) {
  .plan-buyut { opacity: 1; transform: none; }
}

.plan-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 76vh;
  object-fit: contain;
  margin-inline: auto;
}

/* Ölçü etiketi — görsel köşesine iliştirilen m² / kat bilgisi.
   Mimari çizimdeki kot etiketinin karşılığıdır. */
.figure-tag {
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1rem;
  background: rgba(0, 25, 22, .84);
  color: var(--gold);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .03em;
  font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ---------- KARŞILAŞTIRMA — tek fark ----------
   Burada dokuz satırlık bir tablo vardı; yedi satırı "Var / Var"
   yazıyordu. Sayfanın başlığı "fark tek bir satırda" derken aynılığı
   dokuz satırda kanıtlamak kendi kendisiyle çelişiyordu.

   Tek gerçek fark (kapalı alan) ölçülerek gösterilir: çubuk uzunlukları
   m² oranını birebir taşır, eksik kalan bölüm taralı olarak işaretlenir.
   Çubuklar sayfa görüş alanına girdiğinde soldan sağa ölçülür — hareket
   süs değil, ölçme eyleminin kendisidir. */
.cmp { display: flex; flex-direction: column; gap: .85rem; }

.cmp-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
  color: var(--ink);
}
@media (min-width: 640px) {
  .cmp-row {
    grid-template-columns: 6.5rem 1fr auto;
    align-items: center;
    gap: 1.25rem;
  }
}

.cmp-label { display: flex; align-items: baseline; gap: .6rem; }
@media (min-width: 640px) { .cmp-label { flex-direction: column; gap: .15rem; } }
.cmp-code {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.cmp-plan { font-size: .8125rem; color: var(--muted); }

.cmp-track {
  position: relative;
  display: block;
  height: clamp(46px, 5.5vw, 64px);
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--paper);
  overflow: hidden;
}
/* Dolgu scaleX ile büyür: genişlik değişmediği için düzen sarsılmaz. */
.cmp-fill {
  position: absolute;
  inset: 0;
  background: var(--emerald);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease);
}
.is-measured .cmp-fill { transform: scaleX(var(--oran, 1)); }

/* Eksik kalan bölüm: taralı ve kesikli sınırla ayrılır. */
.cmp-gap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--oran) * 100%);
  right: 0;
  display: grid;
  place-items: center;
  border-left: 1px dashed var(--bronze);
  background: repeating-linear-gradient(135deg,
    rgba(168, 134, 88, .3) 0 5px, transparent 5px 11px);
  opacity: 0;
  transition: opacity .5s var(--ease) .85s;
}
.is-measured .cmp-gap { opacity: 1; }
.cmp-gap-value {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  letter-spacing: -.01em;
}

.cmp-value {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (min-width: 640px) { .cmp-value { min-width: 5.5rem; text-align: right; } }
.cmp-unit {
  font-size: .5em;
  font-weight: 600;
  color: var(--muted);
  margin-left: .3rem;
  letter-spacing: .02em;
}

.cmp-row:hover .cmp-fill { background: var(--emerald-deep); }
.cmp-row:hover .cmp-track { border-color: var(--bronze); }

.cmp-note {
  margin-top: 1.5rem;
  font-size: .9375rem;
  color: var(--muted);
  max-width: 34rem;
}

/* ---------- Ortak olanlar ----------
   Tabloda yedi satır tutuyordu; burada tek bir şerit. */
.shared {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.shared-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.shared-list {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .5rem;
}
.shared-list li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .9rem;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: .875rem;
  font-weight: 500;
}
.shared-icon { color: var(--emerald); opacity: .7; flex: none; display: inline-flex; }

/* Koyu zemin varyantı — villa detay sayfasındaki donatı şeridi.
   Burada çipler bağlantıdır, o yüzden hover durumu da taşır. */
.shared-list.is-deep li {
  background: transparent;
  border-color: var(--line-light);
  padding: 0;
}
.shared-list.is-deep li a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1rem;
  border-radius: 999px;
  color: rgba(250, 250, 248, .8);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.shared-list.is-deep li a:hover { background: rgba(232, 190, 135, .12); color: var(--gold); }
.shared-list.is-deep .shared-icon { color: var(--gold); opacity: .8; }
.shared-olcu {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--gold);
  padding-left: .55rem;
  margin-left: .1rem;
  border-left: 1px solid var(--line-light);
}

/* Tip bloğundaki üçlü ölçü satırı. */
.tip-olcu {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: 1.5rem;
  font-size: .9375rem;
  color: var(--muted);
}
.tip-olcu strong {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.section-dark .tip-olcu { color: rgba(250, 250, 248, .62); }
.section-dark .tip-olcu strong { color: var(--gold); }

/* ---------- Villa kartları ---------- */
.villa-card {
  position: relative;
  display: block;
  border-radius: 4px;
  overflow: hidden;
  background: var(--emerald-soft);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}
.villa-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(9, 33, 29, .24); }
.villa-card-media { aspect-ratio: 4 / 3; }
.villa-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.villa-card:hover .villa-card-media img { transform: scale(1.06); }
.villa-card-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 25, 22, .9), rgba(0, 25, 22, .16) 58%, transparent);
  transition: opacity .55s var(--ease);
}
.villa-card-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  color: var(--paper);
}
.villa-card-title {
  font-size: clamp(1.4rem, 2.3vw, 1.8rem);
  line-height: 1.15;
  color: var(--gold);
}
/* Kod rozeti: villanın tip adı ve plan tipi. Sıralı numaralandırma
   değil, katalogdaki gerçek tip kodudur. */
.villa-code {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper);
}
.villa-code::after {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
}

/* ---------- VİLLA DETAY HERO — bölünmüş ----------
   Sayfa önce metinle açılıyordu ve klasördeki gerçek render sayfanın
   çok altına düşüyordu. Villayı satan şey görselidir: sol yarı görsel,
   sağ yarı kimlik ve ölçüler.

   Ana sayfanın tam genişlik hero'sundan bilerek farklı bir cihaz —
   orası bir manzara, burası bir ürün künyesi. */
.villa-hero {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--emerald);
  color: var(--paper);
}
@media (min-width: 1024px) {
  .villa-hero {
    grid-template-columns: 1fr 1fr;
    min-height: 88svh;
  }
}

.villa-hero-media {
  position: relative;
  min-height: 58svh;
  background: var(--emerald-deep);
}
@media (min-width: 1024px) { .villa-hero-media { min-height: 0; } }
.villa-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Görselin panele bakan kenarı zümrüde eriyor — iki yarı arasında sert
   bir dikey kesik kalmasın. */
@media (min-width: 1024px) {
  .villa-hero-media::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 14%;
    background: linear-gradient(to right, transparent, var(--emerald));
    pointer-events: none;
  }
}

.villa-hero-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 4.5rem);
}
/* Masaüstünde panel tam yükseklikte; sabit navbar üstünü örtmesin. */
@media (min-width: 1024px) {
  .villa-hero-panel { padding-top: calc(var(--nav-h) + 3rem); }
}

.villa-hero-yol { font-size: .8125rem; color: rgba(250, 250, 248, .6); }
.villa-hero-yol ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.villa-hero-yol a { transition: color .3s var(--ease); }
.villa-hero-yol a:hover { color: var(--gold); }
.villa-hero-yol [aria-current] { color: rgba(250, 250, 248, .9); }

.villa-hero-lead {
  margin-top: 1.5rem;
  max-width: 30rem;
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.65;
  color: rgba(250, 250, 248, .72);
}

/* Dört ölçü: rakam altın ve iri, etiket küçük versal. Sayfanın geri
   kalanındaki ölçü diliyle aynı. */
.villa-hero-olcu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1.25rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line-light);
  max-width: 30rem;
}
@media (min-width: 480px) { .villa-hero-olcu { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.villa-hero-deger {
  font-weight: 700;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.villa-hero-deger span {
  font-size: .5em;
  font-weight: 600;
  color: rgba(250, 250, 248, .7);
  margin-left: .25rem;
  letter-spacing: .02em;
}
.villa-hero-etiket {
  margin-top: .5rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(250, 250, 248, .55);
}

.villa-hero-kim {
  margin-top: 2rem;
  font-size: .9375rem;
  color: rgba(250, 250, 248, .62);
  max-width: 30rem;
}
.villa-hero-eylem { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: .75rem; }

/* Açık zeminde tip rozeti — villa detay sayfası başlıkları. */
.badge-sea {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .9rem;
  border-radius: 999px;
  background: var(--emerald);
  color: var(--gold);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
}

/* Villa detayında diğer tipe geçiş kartı. */
.villa-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border-radius: 4px;
  border: 1px solid var(--line-soft);
  background: var(--paper);
  color: var(--ink);
  transition: border-color .35s var(--ease), transform .35s var(--ease), background-color .35s var(--ease);
}
.villa-switch:hover {
  border-color: var(--bronze);
  background: var(--cream);
  transform: translateY(-2px);
}
.villa-switch-meta { font-size: .8125rem; color: var(--muted); }

/* ---------- Özellik satırları ---------- */
.feature-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line-soft);
}
.feature-icon {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: var(--cream);
  color: var(--emerald);
}
.section-dark .feature-row { border-top-color: var(--line-light); }
.section-dark .feature-icon { background: rgba(232, 190, 135, .12); color: var(--gold); }

/* Krem zeminde ikon çipi kâğıt rengine döner. Çipin varsayılan zemini
   krem olduğu için krem bölümlerde görünmez oluyordu — ikon havada
   asılı duruyordu. Kart içindekiler (zemini zaten kâğıt olan .amenity)
   krem kalır; orada kontrast doğru yönde. */
.bg-cream .feature-icon { background: var(--paper); }
.bg-cream .amenity .feature-icon { background: var(--cream); }

/* ---------- Ölçü tablosu ----------
   Mekân adı solda, m² sağda; aradaki noktalı çizgi ikisini bağlar.
   Rakamlar tabular olduğu için sütun kaymaz. */
.spec-list { display: flex; flex-direction: column; }
.spec-row {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.spec-name { flex: none; }
.spec-fill {
  flex: 1 1 auto;
  height: 1px;
  min-width: 1.5rem;
  align-self: center;
  background-image: linear-gradient(to right, var(--bronze) 45%, transparent 0);
  background-size: 5px 1px;
  background-repeat: repeat-x;
  opacity: .7;
}
.spec-value {
  flex: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
/* Koyu zeminde tablo: çizgi ve ölçü altına döner. */
.is-deep .spec-row,
.section-dark .spec-row { border-bottom-color: var(--line-light); }
.is-deep .spec-value,
.section-dark .spec-value { color: var(--gold); }
.is-deep .spec-fill,
.section-dark .spec-fill { background-image: linear-gradient(to right, var(--gold) 45%, transparent 0); opacity: .45; }

/* ---------- İMZA: villanın dikey kesiti ----------
   Sayfada aşağı kaydırmak villada aşağı inmektir. Sol raydaki cam
   kabin okuyucuyla birlikte iner; katın ışığı da onunla değişir. */
.shaft {
  --sky: #fafaf8;
  --shaft-ink: #09211d;
  --shaft-muted: #4a5a56;
  background: var(--sky);
  color: var(--shaft-ink);
  transition: background-color 1.1s var(--ease), color 1.1s var(--ease);
}
.shaft.is-deep {
  --shaft-ink: #fafaf8;
  --shaft-muted: rgba(250, 250, 248, .66);
}
.shaft-grid { display: grid; gap: 0; }
@media (min-width: 900px) { .shaft-grid { grid-template-columns: 15rem 1fr; gap: 3.25rem; } }

.shaft-rail {
  display: none;
  position: sticky;
  top: 0;
  height: 100svh;
  align-content: center;
}
@media (min-width: 900px) { .shaft-rail { display: grid; } }

.shaft-order {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--shaft-muted);
  transition: color 1.1s var(--ease);
}
.shaft-name {
  margin-top: .55rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.1vw, 2.05rem);
  line-height: 1.1;
  /* Ray dar bir sütun; en uzun kat adı ("Bodrum Kat") tek satıra
     sığmalı, yoksa kat değiştikçe blok aşağı yukarı zıplar. */
  text-wrap: balance;
  transition: color 1.1s var(--ease);
}
.shaft.is-deep .shaft-name { color: var(--gold); }
.shaft-meta {
  margin-top: .7rem;
  font-size: .8125rem;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  color: var(--shaft-muted);
  transition: color 1.1s var(--ease);
}

/* Asansör şaftı: ince kılavuz + içinde inen cam kabin. */
.shaft-track {
  position: relative;
  margin-top: 1.75rem;
  width: 14px;
  height: 32vh;
  color: var(--bronze);
}
.shaft.is-deep .shaft-track { color: var(--gold); }
.shaft-track::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  background: currentColor;
  opacity: .35;
}
.shaft-cabin {
  position: absolute;
  left: 0;
  width: 14px;
  border-radius: 2px;
  border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 16%, transparent);
  transition: top .8s var(--ease), height .8s var(--ease);
}
/* color-mix'i tanımayan tarayıcılarda kabin yine görünür kalır. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .shaft-cabin { background: rgba(142, 118, 88, .25); }
}
/* Kabinin cam yüzeyindeki tek yansıma. */
.shaft-cabin::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 3px;
  height: 22%;
  border-radius: 1px;
  background: currentColor;
  opacity: .45;
}

.shaft-floors { border-top: 1px solid var(--line); }
.floor {
  padding: clamp(3.5rem, 10vh, 6.5rem) 0;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}
.floor-order {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--shaft-muted);
  transition: color 1.1s var(--ease);
}
@media (min-width: 900px) { .floor-order { display: none; } }
.floor-name {
  margin-top: .5rem;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.06;
}
.shaft.is-deep .floor-name { color: var(--gold); }
.floor-lead {
  margin-top: .9rem;
  max-width: 34rem;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.65;
  color: var(--shaft-muted);
  transition: color 1.1s var(--ease);
}
.floor-note {
  margin-top: 1.5rem;
  padding-left: 1rem;
  border-left: 1px solid var(--bronze);
  font-size: .875rem;
  line-height: 1.65;
  color: var(--shaft-muted);
  max-width: 34rem;
  transition: color 1.1s var(--ease);
}
.shaft.is-deep .floor-note { border-left-color: var(--gold); }
/* Odaklanılmayan katlar soluklaşır; okuyucu nerede olduğunu bilir. */
.floor > * { opacity: .42; transition: opacity .8s var(--ease); }
.floor.is-current > * { opacity: 1; }

/* Şaft içindeki ölçü tablosu ve kısayollar zemine uyar. */
.shaft .spec-row { border-bottom-color: var(--line); }
.shaft.is-deep .spec-value { color: var(--gold); }
.shaft .filter-btn { color: var(--shaft-muted); border-color: var(--line); }
.shaft.is-deep .filter-btn:hover { color: var(--gold); background: rgba(232, 190, 135, .12); border-color: var(--gold); }

/* ---------- Kat şeridi (ana sayfa özeti) ----------
   /kat-planlari sayfasındaki imza bölümün önizlemesi: üç kat üst üste,
   yükseklikleri gerçek brüt m² oranını taşır. */
.stack { display: flex; flex-direction: column; gap: .25rem; }
.stack-floor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1.35rem;
  border-radius: 3px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line);
  color: var(--ink);
  transition: border-left-color .35s var(--ease), background-color .35s var(--ease), transform .35s var(--ease);
}
.stack-floor:hover,
.stack-floor:focus-visible {
  border-left-color: var(--bronze);
  background: var(--cream);
  transform: translateX(3px);
}
.stack-name { font-family: var(--font-display); font-size: 1.15rem; }
.stack-meta { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- Mesafe ekseni ----------
   Ana sayfada ve /lokasyon'da aynı bileşen; işaretleme ve hesap
   includes/mesafe-ekseni.php içinde, tek kaynakta.

   Önceki hâli beş durağı eşit genişlikte sütunlara yayan bir raydı.
   Ama sayılar eşit değil: 3 · 5 · 25 · 30 · 45. Aradaki 5 → 25
   sıçraması verinin asıl söylediği şeydir — günlük olan her şey ilk
   beş dakikanın içindedir, gerisi planlanan bir yoldur. Eşit sütun bu
   boşluğu tam olarak gizliyordu.

   Eksen 0'dan en uzak durağa uzanır ve her durak kendi dakikasının
   oranında durur. Ölçüm kaydırmaya bağlıdır (initTimeline): okuma
   eyleminin kendisi yolculuk olur. Sahil hemen gelir, sonra uzun bir
   sessizlik, sonra köprü ve şehir, en sonda havalimanı. Aradaki
   boşluk bir grafik değil, kaydırarak geçilen zamandır.

   --ilerleme : ölçüm başının yeri, 0–1 (JS yazar)
   --x        : durağın eksendeki yeri, yüzde
   --yakin    : yakın kümenin bittiği yer, yüzde
   .is-deep   : koyu zeminli bölüm (/lokasyon)

   Dar ekranda eksen bir çubuk listesine iner: beş etiket 375px'e yan
   yana sığmıyor, ama oran orada uzunlukla taşınabiliyor. Beş çubuk
   birlikte büyür, her biri kendi değerinde durur. */
.tline { --ilerleme: 0; }

.tline-stops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.375rem;
}

.tline-stop { display: grid; gap: .55rem; }

.tline-in {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.tline-time {
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  line-height: 1;
  color: var(--muted);
  transition: color .35s var(--ease);
}

.tline-stop.is-gecildi .tline-time { color: var(--ink); }

.tline-unit {
  font-size: .5em;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
}

.tline-name {
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Dar ekran: her durak kendi çubuğunu taşır. Dolgu ortak ilerlemeyi
   izler ama kendi değerini geçemez — min() tam olarak bunu söyler. */
.tline-bar {
  position: relative;
  display: block;
  height: 2px;
  background: var(--line);
}

.tline-bar > span {
  position: absolute;
  left: 0;
  top: -1px;
  height: 4px;
  width: min(calc(var(--ilerleme) * 100%), var(--x));
  background: var(--emerald);
}

/* Koyu zeminde eksen (/lokasyon). Palet sözleşmesi gereği aksan altına
   döner: altın koyu zümrütte 9,2:1 verir, açık zeminde metin olamazdı. */
.tline.is-deep .tline-time { color: rgba(250, 250, 248, .42); }
.tline.is-deep .tline-stop.is-gecildi .tline-time { color: var(--gold); }
.tline.is-deep .tline-unit,
.tline.is-deep .tline-name { color: rgba(250, 250, 248, .62); }
.tline.is-deep .tline-bar { background: var(--line-light); }
.tline.is-deep .tline-bar > span { background: var(--gold); }

/* Eksen, ölçüm başı ve noktalar yalnızca geniş ekranda vardır. */
.tline-axis,
.tline-fill,
.tline-cursor,
.tline-dot { display: none; }

@media (min-width: 768px) {
  .tline {
    position: relative;
    height: 11rem;
  }

  /* Yakın küme bir çizgi değil, bir alandır: ilk beş dakika krem bir
     bölge olarak durur, gerisi boş kâğıt. Bölümün tezi ("günlük hayat
     ilk beş dakikada") tam olarak bu iki yüzeyin oranıdır. */
  .tline::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--yakin);
    background: var(--cream);
    border-radius: 3px;
  }

  .tline-axis {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--line);
  }

  /* Eksenin sıfır noktası: kısa bir dikey çentik. Yazıya gerek yok,
     mesafelerin nereden ölçüldüğünü işaretin kendisi söylüyor. */
  .tline-axis::before {
    content: "";
    position: absolute;
    left: 0;
    top: -7px;
    width: 1px;
    height: 15px;
    background: var(--emerald);
  }

  /* Ölçülmüş bölüm. Kaydırmaya bağlı olduğu için geçiş süresi yok:
     hareketi parmak yönetir, zamanlayıcı değil. */
  .tline-fill {
    display: block;
    position: absolute;
    left: 0;
    top: calc(50% - 1.5px);
    height: 4px;
    width: calc(var(--ilerleme) * 100%);
    background: var(--emerald);
  }

  /* Ölçüm başı: eksende ilerleyen dikey imleç. İlk altıda bir yol
     boyunca belirir — calc opaklığı 1'de kendiliğinden sınırlar,
     bunun için JS'e gerek yok. */
  .tline-cursor {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--ilerleme) * 100%);
    width: 1px;
    background: var(--emerald);
    opacity: calc(var(--ilerleme) * 6);
    transform: translateX(-50%);
  }

  .tline-stops { display: block; }

  .tline-stop {
    position: absolute;
    left: var(--x);
    top: 0;
    bottom: 0;
    width: 0;
    display: block;
  }

  .tline-bar { display: none; }

  /* Nokta imleç oradan geçtiğinde canlanır: geçiş bir olaydır. */
  .tline-dot {
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    width: 11px;
    height: 11px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: var(--paper);
    transform: translate(-50%, -50%) scale(1);
    transition: border-color .3s var(--ease), background-color .3s var(--ease),
                transform .4s cubic-bezier(.34, 1.56, .64, 1);
  }

  .tline-stop.is-gecildi .tline-dot {
    border-color: var(--emerald);
    transform: translate(-50%, -50%) scale(1.25);
  }

  /* Dolu nokta = günlük mesafe, boş nokta = planlanan yol. */
  .tline-stop[data-yakin="1"].is-gecildi .tline-dot { background: var(--emerald); }

  /* Etiketler eksenin altında ve üstünde dönüşümlü durur; 3 ile 5
     dakika yan yana sığmayacak kadar yakın. */
  .tline-stop::before {
    content: "";
    position: absolute;
    left: 0;
    width: 1px;
    height: 14px;
    background: var(--line);
    transform: translateX(-50%);
  }

  .tline-stop[data-yon="ust"]::before { bottom: calc(50% + 7px); }
  .tline-stop[data-yon="alt"]::before { top: calc(50% + 7px); }

  .tline-in {
    position: absolute;
    left: 0;
    width: max-content;
    display: block;
    text-align: center;
    transform: translateX(-50%);
  }

  .tline-stop[data-yon="ust"] .tline-in { bottom: calc(50% + 21px); }
  .tline-stop[data-yon="alt"] .tline-in { top: calc(50% + 21px); }

  /* Hangi etiketin sağa yaslanacağını PHP işaretler (gerekçeler orada). */
  .tline-stop[data-hiza="sag"] .tline-in {
    transform: translateX(-100%);
    text-align: right;
  }

  .tline-name { display: block; margin-top: .4rem; }

  /* Koyu zeminde: krem alan altın bir sise, çizgiler altın hatta döner.
     Nokta dolgusu bölümün zeminiyle aynı olmalı ki boş halka boş okunsun
     — .section-dark zemini var(--emerald). */
  .tline.is-deep::before { background: rgba(232, 190, 135, .09); }
  .tline.is-deep .tline-axis { background: var(--line-light); }
  .tline.is-deep .tline-axis::before,
  .tline.is-deep .tline-fill,
  .tline.is-deep .tline-cursor { background: var(--gold); }
  .tline.is-deep .tline-stop::before { background: var(--line-light); }
  .tline.is-deep .tline-dot { border-color: var(--line-light); background: var(--emerald); }
  .tline.is-deep .tline-stop.is-gecildi .tline-dot { border-color: var(--gold); }
  .tline.is-deep .tline-stop[data-yakin="1"].is-gecildi .tline-dot { background: var(--gold); }
}

/* ---------- Parsel planı (/lokasyon) ----------
   Uydu görüntüsü ile parsel katmanı aynı kutuyu paylaşır; en–boy oranı
   görselin kendi ölçüsünden (--oran) kurulur, böylece yüzde koordinatlar
   her ekran boyutunda hizada kalır.

   Harita gösterir, liste yönetir: parseller görüntüde küçük kalır ve dar
   ekranda dokunulamaz; asıl denetim sağdaki liste düğmeleridir. İkisi
   initParcel ile birbirini işaret eder.

   Bölüm yalnız koyu zeminde kullanılır (.section-dark), renkler ona göre. */
.parsel {
  display: grid;
  gap: 1.75rem;
}

.parsel-frame {
  position: relative;
  margin: 0;
  aspect-ratio: var(--oran, 1.3);
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--line-light);
  background: var(--emerald-deep);
}

/* Fotoğraf ve katman aynı sahnenin içindedir: birlikte ölçeklendikleri
   için yakınlaştırma hizayı bozamaz. Odak bloğun merkezidir. */
.parsel-scene {
  position: absolute;
  inset: 0;
  transform: scale(var(--zoom, 1));
  transform-origin: var(--odak-x, 50%) var(--odak-y, 50%);
}

.parsel-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.parsel-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Altlıkta sınırlar zaten çizili olduğu için (TKGM ekran görüntüsü)
   poligonlar varsayılan olarak GÖRÜNMEZDİR: aynı sınırı ikinci kez
   çizmek ikisini de okunmaz yapardı. Katmanın işi vurgulamak.
   fill:transparent — none değil; none olsaydı tıklanamazlardı. */
.parsel-shape {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
  pointer-events: all;
  transition: fill .25s var(--ease), stroke .25s var(--ease);
}

.parsel-shape:hover,
.parsel-shape.is-vurgulu {
  fill: rgba(232, 190, 135, .3);
  stroke: var(--gold);
}

.parsel-shape.is-secili {
  fill: rgba(232, 190, 135, .46);
  stroke: var(--gold);
  stroke-width: 3;
}

/* Bir parsel seçiliyken diğerlerinin üstü karartılır — vurgu, çizgiyle
   değil ışıkla yapılır; altlıktaki kırmızı sınırlar bozulmaz. */
.parsel.is-odakli .parsel-shape:not(.is-secili) { fill: rgba(0, 25, 22, .55); }

/* Sınırsız bir altlık kullanılırsa katman sınırları da çizer. */
.parsel.is-cizili .parsel-shape {
  fill: rgba(232, 190, 135, .12);
  stroke: var(--gold);
  stroke-width: 1.5;
}

.parsel.is-cizili.is-odakli .parsel-shape:not(.is-secili) { fill: rgba(232, 190, 135, .05); }

.parsel-ada {
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Tapu künyesi — TKGM formunun alan sırasıyla. Etiket solda, değer
   sağda: göz yukarıdan aşağı okuyup formu aynı sırada doldurabilsin. */
.parsel-kunye {
  margin: 1.25rem 0 0;
  display: grid;
  gap: 1px;
  background: var(--line-light);
  border-block: 1px solid var(--line-light);
}

.parsel-kunye > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  background: var(--emerald);
}

.parsel-kunye dt {
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250, 250, 248, .5);
}

.parsel-kunye dd {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--paper);
}

/* Ada ve parsel sayıdır — rakam yüzü kuralı burada da geçerli. */
.parsel-kunye > div:nth-last-child(-n+2) dd {
  font-family: var(--font-body);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
}

.parsel-ada-alt { margin-top: 2rem; }

.parsel-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--line-light);
  border-block: 1px solid var(--line-light);
}

.parsel-row {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  background: var(--emerald);
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background-color .2s var(--ease), padding-inline .2s var(--ease);
}

.parsel-row:hover,
.parsel-row:focus-visible,
.parsel-row.is-secili {
  background: var(--emerald-soft);
  padding-inline: .75rem;
}

.parsel-no {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  font-size: 1.0625rem;
  color: rgba(250, 250, 248, .62);
  transition: color .2s var(--ease);
}

.parsel-row:hover .parsel-no,
.parsel-row:focus-visible .parsel-no,
.parsel-row.is-secili .parsel-no { color: var(--gold); }

.parsel-not {
  font-size: .8125rem;
  color: rgba(250, 250, 248, .55);
}

.parsel-toplam {
  margin-top: 1.25rem;
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(250, 250, 248, .55);
}

.parsel-ipucu {
  margin-top: .75rem;
  font-size: .8125rem;
  color: rgba(250, 250, 248, .45);
  max-width: 26rem;
}

@media (min-width: 1024px) {
  .parsel {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: 3rem;
    align-items: start;
  }
}

/* ---------- Donatı kartı — koyu zemin (ana sayfa) ----------
   Bölüm önceden on bir eşit satırdı; küçük ikon, ince çizgi, küçük
   metin. Vitrin değil döküm gibi okunuyordu. Kart yüzeyi, iri altın
   ölçü rakamı ve Marcellus başlık ağırlık veriyor.

   Ölçü rakamı sayfanın üst kısmındaki ölçü şeridiyle aynı dili
   konuşur: donatı bir isim değil, ölçülmüş bir mekân. */
.amenity-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  background: var(--emerald-soft);
  border: 1px solid var(--line-light);
  border-radius: 4px;
  color: var(--paper);
  transition: border-color .45s var(--ease), transform .45s var(--ease),
              background-color .45s var(--ease), box-shadow .45s var(--ease);
}
.amenity-tile:hover,
.amenity-tile:focus-visible {
  border-color: rgba(232, 190, 135, .48);
  background: #17332f;
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(0, 25, 22, .35);
}

.amenity-tile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.amenity-tile-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 3px;
  background: rgba(232, 190, 135, .1);
  border: 1px solid rgba(232, 190, 135, .24);
  color: var(--gold);
  transition: background-color .45s var(--ease), border-color .45s var(--ease);
}
.amenity-tile:hover .amenity-tile-icon { background: rgba(232, 190, 135, .16); border-color: rgba(232, 190, 135, .45); }

.amenity-tile-measure {
  padding-top: .5rem;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1;
  color: var(--gold);
  text-align: right;
  white-space: nowrap;
}
.amenity-tile-title {
  margin-top: 1.6rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.25;
}
.amenity-tile-text {
  margin-top: .7rem;
  font-size: .9rem;
  line-height: 1.65;
  color: rgba(250, 250, 248, .62);
}

/* Öne çıkmayan donatılar: sayılır ama vurgulanmaz. */
.amenity-more {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .75rem 1.5rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-light);
}
.amenity-more-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  flex: none;
}
.amenity-more-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.35rem;
  font-size: .9375rem;
}
/* Ayraç olarak nokta: madde işareti koymadan liste olduğunu söyler. */
.amenity-more-list li + li::before {
  content: "·";
  margin-right: 1.35rem;
  color: var(--bronze);
}
.amenity-more-list a {
  color: rgba(250, 250, 248, .72);
  transition: color .3s var(--ease);
}
.amenity-more-list a:hover { color: var(--gold); }

/* ---------- Donatı kartları ---------- */
.amenity {
  position: relative;
  padding: 2rem 1.75rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}
.amenity:hover {
  transform: translateY(-4px);
  border-color: var(--bronze);
  box-shadow: 0 18px 44px rgba(9, 33, 29, .1);
}
/* Açık zeminde ölçü zümrüttür: altın beyaz üzerinde 1,7:1 verir. */
.amenity-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.amenity-measure {
  padding-top: .65rem;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--emerald);
  white-space: nowrap;
}

.amenity-title {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  line-height: 1.25;
}
.amenity-text { margin-top: .6rem; font-size: .9375rem; line-height: 1.65; color: var(--muted); }

/* ---------- Galeri ---------- */
.filter-bar { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.filter-bar::-webkit-scrollbar { display: none; }
.filter-btn {
  flex: none;
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: 999px;
  font-size: .9rem;
  color: var(--muted);
  border: 1px solid var(--line);
  transition: color .3s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease);
}
.filter-btn:hover { color: var(--ink); background: var(--cream); border-color: var(--bronze); }
.filter-btn[aria-pressed="true"] { background: var(--emerald); color: var(--gold); border-color: var(--emerald); }

/* ---------- Galeri ızgarası ----------
   Önce her karo 4/3'e zorlanıyor, üstelik her altıncısı 4/6.2 DİKEY bir
   hücreye düşüyordu. Yatay bir kare orada ortasından kesiliyordu — dron
   fotoğraflarında bu, çerçevenin yarısını atmak demek.

   Izgara yerine sütun (masonry): karo yüksekliği görselin kendi oranından
   gelir, hiçbir şey kırpılmaz. Yatay yatay, dikey dikey durur. Görsel
   çeşitliliğini artık zorlanmış bir "öne çıkan karo" değil, oranların
   kendisi sağlıyor.

   Sütun düzeninde okuma sırası aşağı doğrudur; bir galeride sıra bilgi
   taşımadığı için bu bir kayıp değil. */
.gallery-grid {
  columns: 2;
  column-gap: .5rem;
}
@media (min-width: 768px)  { .gallery-grid { columns: 3; column-gap: .75rem; } }
@media (min-width: 1200px) { .gallery-grid { columns: 4; } }

.gallery-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  background: var(--cream);
  margin-bottom: .5rem;
  /* Karo sütun sınırında ikiye bölünmesin. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  transition: opacity .45s var(--ease);
}
@media (min-width: 768px) { .gallery-item { margin-bottom: .75rem; } }

/* Oran görselin kendi width/height özniteliklerinden gelir; height:auto
   onu korur. object-fit'e gerek yok — kırpılacak bir şey kalmadı. */
.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .9s var(--ease);
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item.is-hidden { display: none; }

/* Video kutucuğu. Poster üzerinde bir oynat rozeti durur — hareketli
   içeriğin durgun bir kareden ayırt edilmesi gerekir, yoksa ziyaretçi
   videoyu hiç fark etmez. */
.gallery-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(9, 33, 29, .72);
  color: var(--paper);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}

.gallery-item.is-video:hover .gallery-play {
  transform: scale(1.08);
  background: rgba(232, 190, 135, .92);
  color: var(--emerald-deep);
}

/* Oynat simgesi optik olarak ortalanır: üçgenin ağırlık merkezi
   geometrik merkezinin solundadır. */
.gallery-play svg { margin-left: 3px; }

/* ---------- İç mekân ızgarası ----------
   Dört sütun, iki satır. Izgara eşit hücre ister; eşit hücre de bir
   miktar kırpma demektir — şeritteki "her kare kendi oranında" kuralı
   burada geçerli olamaz.

   Zararı en aza indirmek için hücre oranı sabit yazılmaz: gösterilen
   karelerin medyan oranı PHP'de hesaplanıp --hucre olarak verilir.
   Kareler hep aynı orandaysa kırpma sıfırdır.

   Dar ekranda dört sütun 90px'lik karelere iner; orada iki sütun. */
.icmekan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .625rem;
}

@media (min-width: 768px) {
  .icmekan-grid { grid-template-columns: repeat(4, 1fr); gap: .75rem; }
}

.icmekan-item {
  position: relative;
  aspect-ratio: var(--hucre, 1.3333);
  padding: 0;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  background: var(--emerald-deep);
  cursor: zoom-in;
}

.icmekan-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease);
}

.icmekan-item:hover img,
.icmekan-item:focus-visible img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
  .icmekan-item:hover img,
  .icmekan-item:focus-visible img { transform: none; }
}

/* ---------- Galeri şeridi (ana sayfa) ----------
   Yatay kaydırılan vitrin. Kütüphane yok: scroll-snap dokunmatikte
   parmakla, masaüstünde touchpad ile zaten çalışır; oklar yalnız
   fareyle gezenler için var ve dokunmatikte hiç basılmaz.

   Karo YÜKSEKLİĞİ sabit, GENİŞLİĞİ serbest. Böylece her kare kendi
   oranında durur — /galeri'de olduğu gibi burada da hiçbir şey
   kırpılmaz. Eşit yükseklik şeridi bir arada tutar, değişen genişlik
   ritmi verir; zorlanmış bir kare ızgaradan daha canlı okunur.

   --yer / --tut : çubuğun konumu ve uzunluğu, yüzde (JS yazar) */
.serit-track {
  display: flex;
  gap: .75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

/* Kendi çubuğumuz var; tarayıcınınki iki kez anlatırdı. */
.serit-track::-webkit-scrollbar { display: none; }

.serit-track:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 4px;
  border-radius: 4px;
}

.serit-item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  height: clamp(210px, 28vw, 360px);
  padding: 0;
  border: 0;
  border-radius: 3px;
  overflow: hidden;
  background: var(--paper);
  cursor: zoom-in;
}

.serit-item img {
  display: block;
  height: 100%;
  width: auto;          /* oran görselden gelir; kırpma yok */
  transition: transform .9s var(--ease);
}

.serit-item:hover img,
.serit-item:focus-visible img { transform: scale(1.04); }

.serit-alt {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1.25rem;
}

.serit-bar {
  position: relative;
  flex: 1;
  height: 2px;
  background: var(--line);
  border-radius: 999px;
}

.serit-bar > span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--yer, 0%);
  width: var(--tut, 100%);
  background: var(--emerald);
  border-radius: 999px;
}

.serit-nav { display: flex; gap: .5rem; flex: none; }

.serit-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
}

.serit-btn:hover:not([disabled]) { background: var(--emerald); border-color: var(--emerald); color: var(--paper); }
.serit-btn[disabled] { opacity: .3; cursor: default; }

/* Dokunmatikte oklar gereksiz — parmak zaten kaydırıyor. */
@media (hover: none) {
  .serit-nav { display: none; }
  .serit-alt { margin-top: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .serit-track { scroll-behavior: auto; }
  .serit-item:hover img,
  .serit-item:focus-visible img { transform: none; }
}

/* ---------- Proje alanı / dron (ana sayfa) ----------
   Tek büyük kapak: bölüm "render değil, arazinin kendisi" diyor —
   iddiayı küçük kutucuklarla değil tek bir geniş kareyle taşımak
   gerekir. Videoya tıklanınca galerideki ışık kutusu açılır. */
.dron-kapak {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: 6px;
  background: var(--emerald-deep);
  aspect-ratio: 16 / 9;
  cursor: pointer;
  box-shadow: 0 30px 80px rgba(0, 25, 22, .45);
}

.dron-kapak.is-durgun { cursor: default; }

.dron-kapak img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease);
}

.dron-kapak:not(.is-durgun):hover img { transform: scale(1.03); }

.dron-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(250, 250, 248, .16);
  border: 1px solid rgba(250, 250, 248, .5);
  color: var(--paper);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease);
}

.dron-play svg { margin-left: 4px; }

.dron-kapak:hover .dron-play,
.dron-kapak:focus-visible .dron-play {
  transform: scale(1.09);
  background: var(--gold);
  border-color: var(--gold);
  color: var(--emerald-deep);
}

.dron-etiket {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: rgba(9, 33, 29, .74);
  color: var(--paper);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Işık kutusunda video, fotoğrafla aynı sınırlar içinde durur. */
.lb-video {
  max-height: 74svh;
  max-width: min(100%, 1200px);
  width: auto;
  border-radius: 3px;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

@media (prefers-reduced-motion: reduce) {
  .dron-kapak:not(.is-durgun):hover img { transform: none; }
}

/* Lightbox */
.lb {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  background: rgba(0, 25, 22, .92);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.lb[hidden] { display: none; }
.lb.is-open { opacity: 1; }
.lb-figure {
  max-width: min(92vw, 1200px);
  max-height: 82svh;
  transform: scale(.97);
  transition: transform .35s var(--ease);
}
.lb.is-open .lb-figure { transform: none; }
.lb-figure img {
  max-height: 74svh;
  width: auto;
  border-radius: 3px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.lb-caption { margin-top: 1rem; text-align: center; color: rgba(250, 250, 248, .78); font-size: .9rem; }
.lb-btn {
  position: absolute;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--gold);
  background: rgba(232, 190, 135, .12);
  border: 1px solid rgba(232, 190, 135, .3);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.lb-btn:hover { background: rgba(232, 190, 135, .24); color: var(--paper); }
.lb-close { top: max(18px, env(safe-area-inset-top)); right: 18px; }
.lb-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 18px; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lb-prev { left: 12px; }
  .lb-next { right: 12px; }
}

/* ---------- Zarf: CTA ---------- */
.cta-final {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(6rem, 18vh, 11rem) 0;
  background: var(--emerald-deep);
  color: var(--paper);
}
.cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.cta-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg, rgba(0, 25, 22, .95) 10%, rgba(14, 38, 36, .85) 55%, rgba(20, 44, 43, .72) 100%),
    linear-gradient(to top, rgba(0, 25, 22, .74), transparent 55%);
}

/* CTA içindeki telefon numarası — birincil dönüşüm bu. */
.cta-phone {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--gold);
  transition: color .3s var(--ease);
}
.cta-phone svg { color: var(--gold); flex: none; transition: transform .3s var(--ease); }
.cta-phone:hover { color: var(--paper); }
.cta-phone:hover svg { transform: scale(1.08); }

/* ---------- Footer ----------
   Palet notu footer'ı zümrüde ayırır; sayfa koyu bir zeminde biter. */
.site-footer {
  background: var(--emerald);
  color: var(--paper);
  border-top: 1px solid var(--line-light);
}
.footer-heading {
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  margin-bottom: 1rem;
}
.footer-list { display: flex; flex-direction: column; gap: .55rem; font-size: .95rem; }
.footer-list a { color: rgba(250, 250, 248, .84); transition: color .3s var(--ease); }
.footer-list a:hover { color: var(--gold); }
.footer-label { display: block; font-size: .8125rem; color: rgba(250, 250, 248, .56); }
/* Tailwind'in text-muted yardımcı sınıfı koyu footer'da okunmaz kalır. */
.site-footer .text-muted { color: rgba(250, 250, 248, .62); }

.social-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.social-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line-light);
  color: var(--paper);
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              color .35s var(--ease), transform .35s var(--ease);
}
.social-btn:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: translateY(-2px);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid var(--line-light);
  font-size: .8125rem;
  color: rgba(250, 250, 248, .62);
}
.footer-disclaimer {
  padding-top: 1rem;
  font-size: .75rem;
  line-height: 1.6;
  color: rgba(250, 250, 248, .52);
  max-width: 46rem;
}

/* ---------- Yüzen aksiyonlar ---------- */
.wa-float {
  position: fixed;
  left: 22px;
  bottom: 22px;
  z-index: 70;
  width: 56px;
  height: 56px;
  display: none;
  place-items: center;
  border-radius: 999px;
  background: var(--wa);
  color: #fff;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .38), 0 2px 8px rgba(9, 33, 29, .16);
  transition: transform .4s var(--ease), background-color .3s var(--ease), box-shadow .4s var(--ease);
}
@media (min-width: 1024px) { .wa-float { display: grid; } }
.wa-float:hover {
  transform: translateY(-3px);
  background: var(--wa-deep);
  box-shadow: 0 16px 34px rgba(37, 211, 102, .45), 0 2px 8px rgba(9, 33, 29, .18);
}

/* Buton sola alındığı için ipucu da sağ tarafa açılır. */
.wa-tip {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  white-space: nowrap;
  padding: .5rem .85rem;
  border-radius: 999px;
  background: var(--emerald);
  color: var(--paper);
  font-size: .8125rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.wa-float:hover .wa-tip,
.wa-float:focus-visible .wa-tip { opacity: 1; transform: translateY(-50%); }

.mobile-bar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  padding: .5rem;
  border-radius: 999px;
  background: rgba(0, 25, 22, .84);
  border: 1px solid var(--line-light);
  box-shadow: 0 10px 32px rgba(0, 25, 22, .3);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
  backdrop-filter: blur(28px) saturate(150%);
  transform: translateY(0);
  transition: transform .45s var(--ease), opacity .45s var(--ease);
}
@media (min-width: 1024px) { .mobile-bar { display: none; } }
.mobile-bar.is-tucked { transform: translateY(140%); opacity: 0; }
.mobile-bar-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--paper);
  background: rgba(232, 190, 135, .12);
}
.mobile-bar-btn.is-primary { background: var(--gold); color: var(--ink); }
/* WhatsApp yeşili üzerine beyaz yazı 1,98:1 kalır — okunmaz. Marka rengini
   bozmadan AA'yı geçmek için metin koyu bırakıldı (9:1). */
.mobile-bar-btn.is-whatsapp { background: var(--wa); color: var(--ink); }
.mobile-bar-btn.is-whatsapp:active { background: var(--wa-deep); }

/* ---------- Formlar ---------- */
.field { display: block; }
.field-label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: .45rem;
}
.field-req { color: var(--emerald); }
.field-input,
.field-select,
.field-textarea {
  width: 100%;
  min-height: 52px;
  padding: .85rem 1rem;
  border-radius: 3px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 1rem;
  color: var(--ink);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field-textarea { min-height: 140px; resize: vertical; }
.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  outline: none;
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px rgba(14, 38, 36, .12);
}
.field-help { margin-top: .4rem; font-size: .8125rem; color: var(--muted); }
.field-error { margin-top: .4rem; font-size: .8125rem; color: #b3261e; }
.has-error .field-input,
.has-error .field-select,
.has-error .field-textarea { border-color: #b3261e; }
.honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
  padding: 1rem 1.15rem;
  border-radius: 3px;
  font-size: .95rem;
  border: 1px solid;
}
.alert-error { background: #fdf3f2; border-color: rgba(179, 38, 30, .25); color: #8c1d18; }
.alert-success { background: #eef4f0; border-color: rgba(14, 38, 36, .25); color: #0b3a30; }

/* ---------- Akordeon ---------- */
.acc-item { border-top: 1px solid var(--line-soft); }
.acc-item:last-child { border-bottom: 1px solid var(--line-soft); }
.acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.35rem 0;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.acc-sign { flex: none; width: 22px; height: 22px; position: relative; }
.acc-sign::before,
.acc-sign::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--bronze);
  transition: transform .4s var(--ease), opacity .3s var(--ease);
}
.acc-sign::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.acc-sign::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.acc-trigger[aria-expanded="true"] .acc-sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.acc-panel { overflow: hidden; height: 0; transition: height .45s var(--ease); }
.acc-panel-inner { padding-bottom: 1.4rem; color: var(--muted); line-height: 1.7; max-width: 46rem; }

/* ---------- Hukuki metinler ----------
   Uzun metin sayfaları: sakin, okunaklı, dar ölçü.
   Numaralandırma burada süs değil — maddeler atıf için kullanılır. */
.legal-toc { position: static; }
@media (min-width: 1024px) {
  .legal-toc {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    max-height: calc(100svh - var(--nav-h) - 48px);
    overflow-y: auto;
    padding-right: .5rem;
  }
}
.legal-toc-list {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  font-size: .9rem;
}
.legal-toc-list a {
  display: flex;
  gap: .7rem;
  padding: .5rem .65rem;
  border-radius: 3px;
  color: var(--muted);
  line-height: 1.4;
  transition: color .3s var(--ease), background-color .3s var(--ease);
}
.legal-toc-list a:hover { color: var(--ink); background: var(--cream); }
.legal-toc-no { color: var(--emerald); font-weight: 700; font-size: .8125rem; flex: none; }
.legal-toc-docs a { color: var(--ink); }

/* min-width:0 olmadan grid çocuğu içeriği kadar genişler ve
   geniş tablolar sayfayı yatay kaydırır. */
.legal-body { max-width: 46rem; min-width: 0; }
.legal-toc { min-width: 0; }
.legal-section { padding-block: 2.25rem; border-top: 1px solid var(--line-soft); }
.legal-section:first-child { border-top: 0; padding-top: 0; }

.legal-body h2 {
  display: flex;
  gap: .9rem;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  font-weight: 400;
  line-height: 1.25;
}
.legal-section-no {
  font-family: var(--font-body);
  color: var(--emerald);
  font-size: .875rem;
  font-weight: 700;
  flex: none;
}
.legal-body h3 {
  margin-top: 1.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.legal-body p {
  margin-top: 1rem;
  line-height: 1.75;
  color: #2c3b37;
}
.legal-body a { color: var(--emerald); text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { color: var(--bronze); }
.legal-body code {
  font-size: .875em;
  padding: .1rem .35rem;
  border-radius: 3px;
  background: var(--cream);
  color: var(--ink);
}
.legal-body ul,
.legal-body ol {
  margin-top: 1rem;
  padding-left: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  line-height: 1.7;
  color: #2c3b37;
}
.legal-body ul { list-style: disc; }
.legal-body ol { list-style: decimal; }
.legal-body li::marker { color: var(--bronze); }

.legal-note {
  margin-top: 1.25rem;
  padding: 1rem 1.15rem;
  border-radius: 3px;
  border-left: 2px solid var(--bronze);
  background: var(--cream);
  color: #2c3b37;
  font-size: .95rem;
  line-height: 1.65;
}

.legal-table-wrap {
  margin-top: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
}
.legal-body table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: .9375rem;
}
.legal-body thead th {
  background: var(--cream);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.legal-body th,
.legal-body td {
  padding: .85rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
  line-height: 1.6;
}
.legal-body tbody th { font-weight: 700; color: var(--ink); }
.legal-body td { color: #2c3b37; }
.legal-body tr:last-child th,
.legal-body tr:last-child td { border-bottom: 0; }

.legal-contact {
  margin-top: 3rem;
  padding: 1.75rem;
  border-radius: 3px;
  background: var(--paper);
  border: 1px solid var(--line-soft);
}

/* Rızaya bağlı gömülü içerik yer tutucusu */
.map-gate {
  display: grid;
  place-items: center;
  text-align: center;
  padding: 3rem 1.5rem;
  min-height: 340px;
}

/* ---------- Faaliyet alanları (kurumsal) ----------
   Kutulu kart yerine hairline'la bölünmüş tek blok: bunlar dört ayrı
   şirket değil, tek bir grubun dört kolu. */
.roster {
  border: 1px solid var(--line-light);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 768px) {
  .roster { display: grid; grid-template-columns: 1fr 1fr; }
}

.roster-item {
  padding: clamp(1.75rem, 3vw, 2.4rem);
  border-top: 1px solid var(--line-light);
  transition: background-color .4s var(--ease);
}
.roster-item:first-child { border-top: 0; }
@media (min-width: 768px) {
  /* İlk satırın üst çizgisi yok; sağ sütun sola çizgiyle bağlanır. */
  .roster-item:nth-child(-n + 2) { border-top: 0; }
  .roster-item:nth-child(2n) { border-left: 1px solid var(--line-light); }
}
.roster-item:hover { background: var(--emerald-soft); }

.roster-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 4px;
  background: rgba(232, 190, 135, .14);
  color: var(--gold);
}
.roster-role {
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--gold);
}
.roster-text {
  margin-top: .55rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: rgba(250, 250, 248, .68);
  max-width: 28rem;
}

/* ---------- İletişim kanal kartı ---------- */
.contact-card {
  padding: 1.75rem;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.contact-card:hover { transform: translateY(-3px); border-color: var(--bronze); }
.contact-label { margin-top: 1.6rem; font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.contact-value { margin-top: .5rem; display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }

/* ---------- Çerez rızası ---------- */
.cc-banner {
  position: fixed;
  z-index: 130;
  left: 12px;
  right: 12px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  padding: 1.15rem 1.25rem;
  border-radius: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 16px 44px rgba(0, 25, 22, .22);
  animation: cc-gir .45s var(--ease) both;
}
/* Masaüstünde sağ altta durur: sol alt köşe WhatsApp butonuna ayrılmıştır. */
@media (min-width: 1024px) {
  .cc-banner {
    right: 22px;
    left: auto;
    bottom: 22px;
    max-width: 27rem;
    padding: 1.4rem 1.5rem;
  }
}
.cc-banner[hidden] { display: none; }
.cc-banner.is-gone { animation: cc-cik .3s var(--ease) both; }
@keyframes cc-gir { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes cc-cik { to { opacity: 0; transform: translateY(16px); } }

.cc-title { font-weight: 700; letter-spacing: -.01em; }
.cc-text {
  margin-top: .5rem;
  font-size: .875rem;
  line-height: 1.6;
  color: #2c3b37;
}
.cc-text a { color: var(--emerald); text-decoration: underline; text-underline-offset: 2px; }

.cc-actions {
  margin-top: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
/* Kabul ve ret aynı ağırlıkta — birini öne çıkarmak karanlık desendir. */
.cc-btn {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 1.05rem;
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.cc-btn-primary {
  background: var(--emerald);
  color: var(--gold);
  border: 1px solid var(--emerald);
}
.cc-btn-primary:hover { background: var(--emerald-deep); border-color: var(--emerald-deep); }
.cc-btn-quiet {
  flex: 0 0 auto;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
}
.cc-btn-quiet:hover { color: var(--ink); background: var(--cream); }

/* ---- Ayar penceresi ---- */
.cc-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: end center;
  background: rgba(0, 25, 22, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .25s var(--ease);
}
@media (min-width: 640px) { .cc-modal { place-items: center; } }
.cc-modal[hidden] { display: none; }
.cc-modal.is-open { opacity: 1; }

.cc-modal-panel {
  width: min(100%, 40rem);
  max-height: 88svh;
  overflow-y: auto;
  background: var(--paper);
  border-radius: 6px 6px 0 0;
  padding: 1.5rem;
  transform: translateY(24px);
  transition: transform .3s var(--ease);
}
@media (min-width: 640px) {
  .cc-modal-panel { border-radius: 6px; padding: 1.9rem; transform: scale(.97); }
}
.cc-modal.is-open .cc-modal-panel { transform: none; }

.cc-modal-head { display: flex; align-items: flex-start; gap: 1rem; }
.cc-modal-title { font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; }
.cc-modal-lead { margin-top: .5rem; font-size: .875rem; line-height: 1.6; color: var(--muted); }
.cc-close {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: var(--muted);
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.cc-close:hover { background: var(--cream); color: var(--ink); }

.cc-list { margin-top: 1.5rem; }
.cc-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--line-soft);
}
.cc-item-title { font-weight: 700; letter-spacing: -.01em; font-size: .95rem; }
.cc-item-desc { margin-top: .3rem; font-size: .8125rem; line-height: 1.6; color: var(--muted); }
.cc-locked {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-size: .75rem;
  font-weight: 700;
  white-space: nowrap;
}

.cc-switch { flex: none; cursor: pointer; display: block; padding-top: .15rem; position: relative; }
.cc-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.cc-switch-track {
  display: block;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: rgba(9, 33, 29, .2);
  padding: 3px;
  transition: background-color .3s var(--ease);
}
.cc-switch-thumb {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .3s var(--ease);
}
.cc-switch input:checked + .cc-switch-track { background: var(--emerald); }
.cc-switch input:checked + .cc-switch-track .cc-switch-thumb { transform: translateX(18px); }
.cc-switch input:focus-visible + .cc-switch-track {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
}

/* Bağlantılar üstte, üç seçenek altta tam genişlikte:
   dar panelde butonların kesilmesini önler. */
.cc-modal-foot {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cc-modal-links { font-size: .8125rem; color: var(--muted); display: flex; gap: .5rem; flex: none; }
.cc-modal-links a { color: var(--emerald); text-decoration: underline; text-underline-offset: 2px; }

/* Üç seçenek de aynı genişlikte: hiçbiri diğerinden kolay olmamalı. */
.cc-modal-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  width: 100%;
}
@media (min-width: 480px) {
  .cc-modal-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cc-modal-actions .cc-btn {
  flex: none;
  width: 100%;
  padding: 0 .75rem;
  white-space: normal;
  line-height: 1.25;
}
.cc-stamp { margin-top: 1rem; font-size: .75rem; color: var(--muted); }

/* Footer hukuki bağlantı sırası */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line-light);
  font-size: .8125rem;
}
.footer-legal a,
.footer-legal button {
  color: rgba(250, 250, 248, .68);
  transition: color .3s var(--ease);
}
.footer-legal a:hover,
.footer-legal button:hover { color: var(--gold); }

/* ---------- Sayfa geçişleri ----------
   Navbar ve footer yerinde kalır; yalnız #icerik değişir.
   Destekleyen tarayıcılarda View Transitions API, diğerlerinde
   aşağıdaki .is-leaving / .is-entering sınıfları kullanılır. */
#icerik { view-transition-name: sayfa; }

/* Kök katmanın kendi geçişi kapatılır — yoksa sabit navbar da soluyor. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; }

::view-transition-old(sayfa) {
  animation: sayfa-cikis .18s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(sayfa) {
  animation: sayfa-giris .3s var(--ease) both;
}
@keyframes sayfa-cikis {
  to { opacity: 0; }
}
@keyframes sayfa-giris {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* View Transitions olmayan tarayıcılar için elle geçiş. */
#icerik.is-leaving {
  opacity: 0;
  transition: opacity .17s cubic-bezier(.4, 0, 1, 1);
}
#icerik.is-entering {
  animation: sayfa-giris .3s var(--ease) both;
}

/* Yavaş bağlantıda üstte beliren ince ilerleme çubuğu. */
.route-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 150;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  pointer-events: none;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.route-progress.is-active { opacity: 1; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; filter: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }

/* ---------- Hareket azaltma ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; filter: none; }
  .mobile-nav-link { opacity: 1; transform: none; }
  #icerik { view-transition-name: none; }
  #icerik.is-leaving { opacity: 1; }
  .route-progress { display: none; }
  .floor > * { opacity: 1; }
  .hero-media { transform: none !important; }

  /* Mesafe ekseni animasyonsuz ama ölçülü gelir: eksen tam boyunda,
     duraklar görünür, çubuklar kendi oranlarında. Nokta ve etiketleri
     ortalayan dönüşümler konumlandırmadır, hareket değil — onlara
     dokunulmaz. */
  /* Mesafe ekseni: kaydırmaya bağlı ölçüm initTimeline() içinde
     doğrudan tam değere kurulur. Burada yalnızca nokta canlanmasının
     yaylı geçişi düzleştirilir; ortalama dönüşümü konumlandırmadır,
     hareket değil — ona dokunulmaz. */
  .tline-stop.is-gecildi .tline-dot { transform: translate(-50%, -50%); }
}