/* ==========================================================================
   THE ROVE TUZLA — site.css
   Tasarım sistemi: Cinzel (başlık) + Inter (gövde), krem zemin, lacivert
   tipografi, altın hairline. Tüm hareket prefers-reduced-motion'a saygılıdır.
   ========================================================================== */

/* --- Yazı tipleri (kendi sunucumuzdan; üçüncü taraf CDN yok) -------------- */
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/cinzel-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/cinzel-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/inter-lat.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/inter-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Cal Sans — yalnızca ana sayfadaki hero kampanya sloganı için (bkz.
   .h1-hero). Tek ağırlık (SemiBold), tam Türkçe karakter desteği (İ ı Ş ş
   Ğ ğ Ç ç Ö ö Ü ü doğrulandı) — tek dosya, alt küme ayrımı gerekmiyor
   çünkü sitenin geri kalanında kullanılmıyor. */
@font-face {
  font-family: "Cal Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/CalSans-SemiBold.woff2") format("woff2");
}

/* --- Değişkenler --------------------------------------------------------- */
:root {
  --paper: #faf8f4;
  --paper-2: #f1ede6;
  --deep: #0d1b3e;
  --navy: #1a3a76;
  --gold: #bd9a5e;
  --gold-soft: #d8bd8c;
  --ink: #1b2438;
  --muted: #6c6a6a;
  --line: rgba(26, 58, 118, 0.14);
  --line-light: rgba(255, 255, 255, 0.22);
  --err: #b3261e;

  --serif: "Cinzel", "Iowan Old Style", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --wrap: 1360px;
  --gut: clamp(20px, 4.2vw, 64px);
  --band: clamp(64px, 8vw, 132px);
  --head-h: 78px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(0.97rem, 0.94rem + 0.16vw, 1.06rem);
  line-height: 1.72;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video { max-width: 100%; }
img { height: auto; display: block; }

a { color: inherit; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 200;
  background: var(--deep);
  color: #fff;
  padding: 10px 18px;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip:focus { top: 16px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* --- Tipografi ----------------------------------------------------------- */
.h1, .h2, .h3 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--navy);
  margin: 0;
  letter-spacing: 0.015em;
  text-wrap: balance;
}

.h1 {
  font-size: clamp(2.3rem, 1.45rem + 3.4vw, 4.3rem);
  line-height: 1.12;
}
.h2 {
  font-size: clamp(1.75rem, 1.25rem + 2.1vw, 3rem);
  line-height: 1.2;
}
.h3 {
  font-size: clamp(1.35rem, 1.1rem + 1.05vw, 2.05rem);
  line-height: 1.28;
}
.h2-light, .h1-light { color: #fff; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.eyebrow-light { color: var(--gold-soft); }

.lead {
  font-size: clamp(1.02rem, 0.97rem + 0.32vw, 1.22rem);
  line-height: 1.68;
  color: #3d4457;
  max-width: 62ch;
  margin: 0;
  font-weight: 350;
}
.lead-light { color: rgba(255, 255, 255, 0.84); }

.rule {
  width: 68px;
  height: 1px;
  background: var(--gold);
  margin: 26px 0;
  border: 0;
}
.rule-gold { background: var(--gold); }
.sec-head-c .rule { margin-inline: auto; }

.center { text-align: center; }
.mt { margin-top: 28px; }

.fineprint {
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 74ch;
  margin: 22px 0 0;
}

.link-more {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.link-more:hover { color: var(--gold); border-color: var(--navy); }

/* --- Düğmeler ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
    border-color 0.22s var(--ease);
}
.btn small {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  opacity: 0.7;
  text-transform: none;
}
.btn-sm { padding: 10px 18px; font-size: 0.72rem; }
.btn-block { width: 100%; }

.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--deep); }

.btn-out { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-out:hover { background: var(--navy); color: #fff; }

.btn-light { background: #fff; color: var(--deep); }
.btn-light:hover { background: var(--gold); color: var(--deep); }

.btn-ghost {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.16); }

/* Kampanya CTA'sı — "BİLGİ ALIN" sekmesiyle aynı kırmızı, aynı paneli açtığı
   için bilinçli olarak aynı renk. */
.btn-campaign { background: #c0272d; color: #fff; border: 0; }
.btn-campaign:hover { background: #9e1f24; }

/* --- Üst bilgi ----------------------------------------------------------- */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--head-h);
  display: flex;
  align-items: center;
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.site-head::before {
  content: "";
  position: absolute;
  inset: 0 0 -34px 0;
  background: linear-gradient(to bottom, rgba(6, 13, 32, 0.78) 0%,
    rgba(6, 13, 32, 0.46) 55%, rgba(6, 13, 32, 0) 100%);
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
/* Parlak renderların üzerinde menü kaybolmasın diye ince bir gölge; şerit
   opaklaştığında kaldırılır. */
.site-head:not(.is-stuck) .nav a,
.site-head:not(.is-stuck) .lang,
.site-head:not(.is-stuck) .brand-l {
  text-shadow: 0 1px 12px rgba(6, 13, 32, 0.85);
}
.site-head:not(.is-stuck) .brand-l {
  filter: drop-shadow(0 1px 10px rgba(6, 13, 32, 0.7));
}
.site-head.is-stuck {
  background: rgba(250, 248, 244, 0.94);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.site-head.is-stuck::before { opacity: 0; }

.head-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: block; flex: none; line-height: 0; }
.brand img {width: auto;height: 45px;object-fit: contain;}
.brand-d { display: none; }
.site-head.is-stuck .brand-l { display: none; }
.site-head.is-stuck .brand-d { display: block; }

.nav ul {
  display: flex;
  gap: clamp(14px, 1.8vw, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  display: block;
  padding: 6px 0;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
  border-bottom: 1px solid transparent;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.nav a:hover { color: #fff; border-color: var(--gold); }
.nav a[aria-current="page"] { color: var(--gold-soft); border-color: var(--gold); }
.site-head.is-stuck .nav a { color: var(--navy); }
.site-head.is-stuck .nav a:hover { color: var(--gold); }
.site-head.is-stuck .nav a[aria-current="page"] { color: var(--gold); }

.head-side { display: flex; align-items: center; gap: 14px; flex: none; }

.lang {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.lang:hover { color: #fff; border-color: var(--gold); }
.site-head.is-stuck .lang { color: var(--muted); }
.site-head.is-stuck .lang:hover { color: var(--navy); }

.head-call {
  border-color: rgba(255, 255, 255, 0.42);
  color: #fff;
  background: rgba(6, 13, 32, 0.22);
  white-space: nowrap;
}
.head-call:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.site-head.is-stuck .head-call { border-color: var(--navy); color: var(--navy); }
.site-head.is-stuck .head-call:hover { background: var(--navy); color: #fff; }

.burger {
  display: none;
  width: 42px; height: 42px;
  padding: 0;
  background: none;
  border: 1px solid var(--line-light);
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 11px;
  width: 18px; height: 1px;
  background: #fff;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 23px; }
.site-head.is-stuck .burger { border-color: var(--line); }
.site-head.is-stuck .burger span { background: var(--navy); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

/* --- Mobil çekmece ------------------------------------------------------- */
.drawer {
  position: fixed;
  inset: var(--head-h) 0 0 0;
  z-index: 88;
  background: var(--deep);
  padding: 40px var(--gut) 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow-y: auto;
}
.drawer[hidden] { display: none; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer li + li { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.drawer a {
  display: block;
  padding: 18px 0;
  font-family: var(--serif);
  font-size: 1.35rem;
  color: #fff;
  text-decoration: none;
}
.drawer a[aria-current="page"] { color: var(--gold-soft); }
.drawer-foot { display: grid; gap: 12px; margin-top: 40px; }
.drawer-foot .lang { color: rgba(255, 255, 255, 0.7); text-align: center; }

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--head-h) + 24px);
  padding-bottom: 26px;
  overflow: hidden;
  isolation: isolate;
}

/* .hero-media kendi yığın bağlamını kurar; örtü onun İÇİNDE slaytların üstünde
   olmalı. (Negatif z-index verilirse slaytların arkasına düşer ve hiçbir işe
   yaramaz — ilk denemede olan buydu.) */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.slides { list-style: none; margin: 0; padding: 0; height: 100%; }
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s var(--ease);
}
.slide.is-on { opacity: 1; }
.slide picture, .slide img { width: 100%; height: 100%; }
.slide img {
  object-fit: cover;
  transform: scale(1.045);
  transition: transform 9s linear;
}
.slide.is-on img { transform: scale(1); }

/* Renderlar çok parlak (beyaz cepheler, açık gökyüzü). Beyaz tipografinin her
   slaytta okunaklı kalması için örtü belirgin: soldan güçlü, ortada açılan,
   üstte menü için ayrı bir kararma. */
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg, rgba(6, 13, 32, 0.86) 0%, rgba(6, 13, 32, 0.68) 28%,
      rgba(6, 13, 32, 0.26) 50%, rgba(6, 13, 32, 0.06) 68%,
      rgba(6, 13, 32, 0.3) 100%),
    linear-gradient(to bottom, rgba(6, 13, 32, 0.58) 0%, rgba(6, 13, 32, 0.08) 16%,
      rgba(6, 13, 32, 0) 46%, rgba(6, 13, 32, 0.45) 100%);
}

.hero-in {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding-block: 24px;
}

/* Her slaydın kendi kampanya metni/rozetleri (.cslide) var; görselle
   BİRLİKTE solup beliriyor — .slide ile birebir aynı fade mekanizması,
   site.js'teki slider() ikisini aynı index'te toggluyor. min-height,
   kampanyalar arasında metin uzunluğu farkı yüzünden CTA düğmesinin zıplayıp
   durmaması için en uzun kampanyaya göre sabit bir yükseklik ayırıyor. */
/* min-height, hero-badges'in kendi boyutuyla BİREBİR aynı clamp() — rozet
   kümesi her zaman en uzun içerik olduğu için (metin hiçbir kampanyada onu
   geçmiyor), fazladan boşluk bırakmadan CTA'yı eski (rozetsiz) konumuna
   yakın tutuyor. Daha büyük bir değer her şeyi gereksiz yukarı iter. */
.cslides { position: relative; list-style: none; margin: 0; padding: 0;
  min-height: clamp(320px, 33vw, 480px); }
.cslide {
  position: absolute;
  inset: 0;
  opacity: 0;
  display: grid;
  /* İletişim formu artık sağ kenardaki açılır panelde — ama kampanya
     rozetleri için ikinci, içeriğe göre daralan bir sütun var. */
  grid-template-columns: 1fr auto;
  column-gap: clamp(24px, 4vw, 64px);
  align-items: center;
  transition: opacity 1.5s var(--ease);
}
.cslide.is-on { opacity: 1; }

.hero-bar { position: relative; z-index: 2; }

.hero-copy { max-width: 820px; }
/* Kampanya sloganı — Cal Sans, kalın/dolu bir vurgu fontu, Cinzel'in
   aksine geniş harf aralığı istemiyor. Boyut kasıtlı olarak büyük tutuldu
   (önceki değerin ~2 katı) — "dolu dolu, göz dolduran" bir kampanya
   hissi için. */
.h1-hero {
  color: #fff;
  font-family: "Cal Sans", var(--sans);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.02;
  font-size: clamp(3.3rem, 2.2rem + 4vw, 5.3rem);
  text-shadow: 0 2px 26px rgba(6, 13, 32, 0.45);
}
.hero-copy .lead { margin-top: 18px; max-width: 46ch; line-height: 1.45; }
.hero-copy .lead strong { color: #fff; font-weight: 700; }

.hero-kicker {
  display: inline-block;
  margin: 18px 0 0;
  font-family: var(--sans);
  font-size: clamp(0.85rem, 0.25vw + 0.8rem, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffc069;
  text-shadow: 0 2px 12px rgba(6, 13, 32, 0.6);
}

.hero-actions,
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 24px 0 0;
}

.hero-phone-inline {
  display: none;
}

.hero-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.hero-side-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.hero-brand-tag {
  display: block;
  font-family: "Cinzel", serif;
  font-size: clamp(0.78rem, 0.2vw + 0.72rem, 0.92rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 2px 10px rgba(6, 13, 32, 0.6);
  text-align: center;
}

.hero-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #fff;
  font-family: var(--sans);
  font-size: clamp(1rem, 0.35vw + 0.95rem, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 8px 20px;
  background: rgba(6, 13, 32, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px -6px rgba(0, 0, 0, 0.5);
  transition: all 0.3s var(--ease);
}
.hero-phone-inline {
  display: none;
}
.hero-phone:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffc069;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.6);
}
.hero-phone svg {
  color: #ffc069;
  flex-shrink: 0;
}

/* Kampanya rozetleri — "36 AY TAKSİT / %0 FAİZ / %20'YE VARAN İNDİRİM" üç
   örtüşen daire halinde, başlığın sağında. Tipografi marka sistemine
   (Inter) sadık kalıyor, sadece zeminler kampanya için canlı renkli —
   bilinçli tasarım kararı (bkz. content.py HERO). */
.hero-badges {
  position: relative;
  flex: none;
  width: clamp(320px, 33vw, 480px);
  height: clamp(320px, 33vw, 480px);
}
/* Rozet zeminleri kendi renk skalası içinde durmadan hafifçe kayan bir
   gradyan — köşeden köşeye ışık geçişi gibi, "enerjik" ama sakin bir hareket.
   prefers-reduced-motion altında (bkz. dosya sonu) tüm animasyonlar zaten
   global olarak durduruluyor. */
@keyframes badgeShift {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
.hbadge {
  position: absolute;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* align-items:center BİLEREK kullanılmıyor — flex item'lar içeriğe göre
     genişlik alır ve dairenin dışına taşabilir (uzun İngilizce kelimeler
     ör. "INSTALMENTS" bunu gösterdi). stretch + text-align:center ile
     genişlik daireye sabitlenip metin normal şekilde satır kırıyor. */
  justify-content: center;
  text-align: center;
  padding: 0 16%;
  border-radius: 50%;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 20px 40px -16px rgba(6, 13, 32, 0.6);
  font-family: var(--sans);
  line-height: 1.1;
  background-size: 230% 230%;
  animation: badgeShift 7s ease-in-out infinite;
}
.hbadge strong { font-weight: 700; }
.hbadge small {
  display: block;
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.9;
  margin-top: 5px;
  /* "INSTALMENTS" gibi kırılma noktası olmayan uzun İngilizce kelimeler
     dairenin dışına taşıyordu — gerekirse kelime ortasından kırılsın. */
  overflow-wrap: break-word;
}
/* Büyük değerin ÜSTÜNDE duran üçüncü, daha küçük satır (örn. "PEŞİN
   ALIMLARDA") — post-etiketten (.hbadge small) daha ufak, çünkü genelde
   daha uzun bir ifade. */
.hbadge-pre {
  font-size: 0.42em;
  line-height: 1.15;
  margin: 0 0 4px;
}
.hbadge:nth-child(1) {
  width: 56%; height: 56%;
  top: 0; left: 0;
  background: linear-gradient(135deg, #ffc069, #ff9142 40%, #d9273f 80%, #ff9142);
  z-index: 1;
  padding: 0 10%;
  animation-duration: 6s;
}
.hbadge:nth-child(1) strong { font-size: clamp(2.1rem, 1.35vw + 1.65rem, 2.7rem); }
.hbadge:nth-child(1) small { margin-top: 3px; }
.hbadge:nth-child(2) {
  width: 70%; height: 70%;
  bottom: 0; right: 0;
  background: linear-gradient(135deg, #c4b5fd, #8b5cf6 40%, #3b82f6 80%, #8b5cf6);
  z-index: 2;
  padding: 0 8%;
  animation-duration: 8s;
  animation-delay: -2.5s;
}
.hbadge:nth-child(2) strong { font-size: clamp(3.75rem, 3vw + 2.55rem, 5.1rem); }
.hbadge:nth-child(3) {
  width: 46%; height: 46%;
  left: 0; bottom: 0;
  background: linear-gradient(135deg, #67e8f9, #06b6d4 40%, #2563eb 80%, #06b6d4);
  z-index: 3;
  padding: 0 6%;
  animation-duration: 7s;
  animation-delay: -4s;
}
.hbadge:nth-child(3) strong { font-size: clamp(1.38rem, 0.53vw + 1.2rem, 1.58rem); }

/* Kampanyaya özel rozet ayarları — .cslide-c0/1/2, hero() içinde her
   slayda kampanya index'ine göre ekleniyor. Bazı rozetlerde "pre" etiketi
   yok (daha az metin, dairede boş alan kalıyor) ya da tek/iki haneli kısa
   bir sayı var — bu durumlarda o rakam kendi dairesine göre büyütülüyor. */
/* 1. kampanya (Banka yok...) — Yatay Mimari Konsept / 6.000 m² Peyzaj / Sabiha Gökçen rozetleri */
.cslide-c0 .hbadge:nth-child(1) strong {
  font-size: clamp(1.05rem, 0.4vw + 0.92rem, 1.32rem);
  line-height: 1.15;
}
.cslide-c0 .hbadge:nth-child(1) small {
  font-size: clamp(1.05rem, 0.4vw + 0.92rem, 1.32rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 1;
  margin-top: 4px;
  line-height: 1.15;
}
.cslide-c0 .hbadge:nth-child(2) strong {
  font-size: clamp(2.4rem, 1.8vw + 1.8rem, 3.4rem);
}
.cslide-c0 .hbadge:nth-child(2) small {
  font-size: clamp(1.05rem, 0.4vw + 0.92rem, 1.32rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 1;
  margin-top: 6px;
}
.cslide-c0 .hbadge:nth-child(3) strong {
  font-size: clamp(0.92rem, 0.35vw + 0.8rem, 1.15rem);
  line-height: 1.15;
}
/* 2. kampanya (Zaman Sizin İçin...) — 4 rozetli özel yerleşim */
.cslide-c1 .hbadge:nth-child(1) {
  width: 50%; height: 50%;
  top: 0; left: 0;
  background: linear-gradient(135deg, #ffc069, #ff9142 40%, #d9273f 80%, #ff9142);
  z-index: 1;
  padding: 0 6%;
  animation-duration: 6s;
}
.cslide-c1 .hbadge:nth-child(1) strong { font-size: clamp(2.35rem, 1.6vw + 1.8rem, 3.15rem); line-height: 1; }
.cslide-c1 .hbadge:nth-child(1) small { font-size: clamp(0.72rem, 0.25vw + 0.65rem, 0.9rem); font-weight: 700; letter-spacing: 0.12em; margin-top: 4px; }

.cslide-c1 .hbadge:nth-child(2) {
  width: 54%; height: 54%;
  top: 0; right: 0;
  background: linear-gradient(135deg, #c4b5fd, #8b5cf6 40%, #3b82f6 80%, #8b5cf6);
  z-index: 2;
  padding: 0 6%;
  animation-duration: 8s;
  animation-delay: -2.5s;
}
.cslide-c1 .hbadge:nth-child(2) strong { font-size: clamp(2.1rem, 1.4vw + 1.6rem, 2.85rem); line-height: 1; }
.cslide-c1 .hbadge:nth-child(2) small { font-size: clamp(0.72rem, 0.25vw + 0.65rem, 0.9rem); font-weight: 700; letter-spacing: 0.12em; margin-top: 4px; }

.cslide-c1 .hbadge:nth-child(3) {
  width: 48%; height: 48%;
  bottom: 0; left: 0;
  background: linear-gradient(135deg, #67e8f9, #06b6d4 40%, #2563eb 80%, #06b6d4);
  z-index: 3;
  padding: 0 5%;
  animation-duration: 7s;
  animation-delay: -4s;
}
.cslide-c1 .hbadge:nth-child(3) strong { font-size: clamp(2.6rem, 1.8vw + 2rem, 3.5rem); line-height: 1; }
.cslide-c1 .hbadge:nth-child(3) small { font-size: clamp(0.72rem, 0.25vw + 0.65rem, 0.9rem); font-weight: 700; letter-spacing: 0.12em; margin-top: 4px; }

.cslide-c1 .hbadge:nth-child(4) {
  width: 58%; height: 58%;
  bottom: 0; right: 0;
  background: linear-gradient(135deg, #fcd34d, #f59e0b 40%, #ea580c 80%, #f59e0b);
  z-index: 4;
  padding: 0 6%;
  animation-duration: 7.5s;
  animation-delay: -1.5s;
}
.cslide-c1 .hbadge:nth-child(4) .hbadge-pre { font-size: clamp(0.58rem, 0.18vw + 0.52rem, 0.72rem); line-height: 1.15; margin: 0 0 3px; font-weight: 600; opacity: 0.95; }
.cslide-c1 .hbadge:nth-child(4) strong { font-size: clamp(1.22rem, 0.5vw + 1.05rem, 1.58rem); font-weight: 800; line-height: 1.1; }
.cslide-c1 .hbadge:nth-child(4) small { font-size: clamp(0.68rem, 0.2vw + 0.62rem, 0.85rem); font-weight: 700; letter-spacing: 0.1em; margin-top: 3px; }
/* 3. kampanya (Formül Basit!) — 4 rozetli özel yerleşim */
.cslide-c2 .hbadge:nth-child(1) {
  width: 52%; height: 52%;
  top: 0; left: 0;
  background: linear-gradient(135deg, #ffc069, #ff9142 40%, #d9273f 80%, #ff9142);
  z-index: 1;
  padding: 0 6%;
  animation-duration: 6s;
}
.cslide-c2 .hbadge:nth-child(1) strong { font-size: clamp(1.2rem, 0.45vw + 1.05rem, 1.55rem); font-weight: 800; line-height: 1.1; }
.cslide-c2 .hbadge:nth-child(1) small { font-size: clamp(0.65rem, 0.2vw + 0.58rem, 0.82rem); font-weight: 700; letter-spacing: 0.08em; margin-top: 4px; line-height: 1.15; }

.cslide-c2 .hbadge:nth-child(2) {
  width: 54%; height: 54%;
  top: 0; right: 0;
  background: linear-gradient(135deg, #c4b5fd, #8b5cf6 40%, #3b82f6 80%, #8b5cf6);
  z-index: 2;
  padding: 0 6%;
  animation-duration: 8s;
  animation-delay: -2.5s;
}
.cslide-c2 .hbadge:nth-child(2) strong { font-size: clamp(2.2rem, 1.5vw + 1.7rem, 2.95rem); line-height: 1; }
.cslide-c2 .hbadge:nth-child(2) small { font-size: clamp(1.15rem, 0.45vw + 1rem, 1.45rem); font-weight: 800; letter-spacing: 0.12em; margin-top: 4px; }

.cslide-c2 .hbadge:nth-child(3) {
  width: 48%; height: 48%;
  bottom: 0; left: 0;
  background: linear-gradient(135deg, #67e8f9, #06b6d4 40%, #2563eb 80%, #06b6d4);
  z-index: 3;
  padding: 0 5%;
  animation-duration: 7s;
  animation-delay: -4s;
}
.cslide-c2 .hbadge:nth-child(3) strong { font-size: clamp(2.35rem, 1.6vw + 1.8rem, 3.15rem); line-height: 1; }
.cslide-c2 .hbadge:nth-child(3) small { font-size: clamp(1.15rem, 0.45vw + 1rem, 1.45rem); font-weight: 800; letter-spacing: 0.12em; margin-top: 4px; }

.cslide-c2 .hbadge:nth-child(4) {
  width: 58%; height: 58%;
  bottom: 0; right: 0;
  background: linear-gradient(135deg, #fcd34d, #f59e0b 40%, #ea580c 80%, #f59e0b);
  z-index: 4;
  padding: 0 5%;
  animation-duration: 7.5s;
  animation-delay: -1.5s;
}
.cslide-c2 .hbadge:nth-child(4) strong { font-size: clamp(4.6rem, 3.2vw + 3.6rem, 6.2rem); line-height: 0.92; font-weight: 800; }
.cslide-c2 .hbadge:nth-child(4) small { font-size: clamp(1.15rem, 0.45vw + 1rem, 1.45rem); font-weight: 800; letter-spacing: 0.12em; margin-top: 2px; }

.hero-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.dots { display: flex; gap: 10px; }
.dot {
  width: 34px; height: 3px;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background 0.3s var(--ease);
}
.dot::before {
  content: "";
  position: absolute;
  inset: -10px 0;
}
.dot { position: relative; }
.dot.is-on { background: var(--gold); }
.scroll-hint {
  margin: 0;
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* --- İletişim formu — ortak (page/drawer ikisi de beyaz zeminli) ---------
   Tek canlı "koyu zemin" varyantı (eski hero cam kartı) kaldırıldı; form
   artık yalnızca beyaz/krem zeminlerde kullanılıyor, o yüzden temel
   kurallar doğrudan açık tema — varyant başına tekrar eden renk override'ı
   gerekmiyor. */
.cform-head { margin-bottom: 20px; }
.cform-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  margin: 0;
  color: var(--navy);
}
.cform-lead {
  margin: 8px 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--muted);
}

.fields { display: grid; gap: 14px; }
.cform-page .fields { grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.cform-page .span2 { grid-column: 1 / -1; }

.field { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 0.71rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field textarea,
.field select {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 12px 14px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input::placeholder { color: #a8a8a8; }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--gold);
  background: #fff;
}

/* Özel select oku */
.sel { position: relative; display: block; }
.sel::after {
  content: "";
  position: absolute;
  right: 15px; top: 50%;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
  opacity: 0.6;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
}
.field select option { color: #1b2438; background: #fff; }

/* Onay kutusu */
.field.check {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
}
.field.check input {
  flex: none;
  width: 18px; height: 18px;
  margin: 3px 0 0;
  accent-color: var(--gold);
}
.field.check label {
  flex: 1;
  font-size: 0.76rem;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--muted);
}
.field.check label a { color: inherit; text-underline-offset: 3px; }
.field.check .err { flex-basis: 100%; }

/* Hata mesajları — yalnızca kullanıcı etkileşiminden sonra görünür */
.err {
  display: none;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--err);
}

.field :is(input, select, textarea):user-invalid { border-color: var(--err); }
.field :is(input, select, textarea):user-invalid ~ .err { display: block; }
.field .sel:has(select:user-invalid) + .err { display: block; }
.field .sel:has(select:user-invalid) select { border-color: var(--err); }

/* Bal küpü — bota görünür, insana değil */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.cform button[type="submit"] { margin-top: 22px; }

.cform-wa {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}
.cform-wa:hover { color: var(--navy); }

.cform-status:empty { display: none; }
.cform-status {
  margin-top: 18px;
  padding: 16px 18px;
  border-left: 2px solid var(--gold);
  background: var(--paper-2);
  font-size: 0.88rem;
  line-height: 1.55;
}
.cform-status strong { display: block; font-weight: 600; margin-bottom: 4px; }
.cform-status.is-err { border-color: var(--err); }
.cform.is-sending button[type="submit"] { opacity: 0.6; pointer-events: none; }

/* --- Şeritler ------------------------------------------------------------ */
.band { padding-block: var(--band); }
.band-tight { padding-block: clamp(40px, 5vw, 76px); }
.band-alt { background: var(--paper-2); }
.band-dark { background: var(--deep); color: rgba(255, 255, 255, 0.8); }

.sec-head { max-width: 760px; margin-bottom: clamp(36px, 4vw, 60px); }
.sec-head-c { margin-inline: auto; text-align: center; }

/* --- Rakamlar ------------------------------------------------------------ */
.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.facts li {
  background: var(--paper);
  padding: clamp(22px, 3vw, 38px) 18px;
  text-align: center;
}
.band-alt .facts li { background: var(--paper-2); }
.fact-v {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.8rem);
  line-height: 1.1;
  color: var(--navy);
}
.fact-v small {
  font-size: 0.42em;
  margin-left: 4px;
  color: var(--gold);
}
.fact-k {
  display: block;
  margin-top: 10px;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- İkili yerleşim ------------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}
.split-copy .lead { margin-bottom: 26px; }
.split-media img { width: 100%; }

/* --- Öne çıkan bloklar (zigzag) ------------------------------------------ */
.features { display: grid; gap: clamp(56px, 7vw, 110px); }
.feature {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 76px);
  align-items: center;
}
.feature.flip .feature-media { order: 2; }
.feature-body p { color: #3d4457; margin: 0; max-width: 54ch; }
.feature-media img { width: 100%; }

/* --- Daire tipi kartları ------------------------------------------------- */
.tcards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 30px);
}
.tcard {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.tcard:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 22px 48px -28px rgba(26, 58, 118, 0.42);
}
/* Üç planın en-boy oranı birbirinden çok farklı (1:1, 1,7:1, 1,64:1); kap sabit
   oranda kalır, çizim içine ortalanır. Böylece kartlar aynı yükseklikte durur. */
.tcard-plan {
  position: relative;
  display: block;
  padding: clamp(16px, 2.2vw, 26px);
  background: #fff;
  aspect-ratio: 4 / 3;
  /* Esnek öğelerde min-height:auto, kare planın kabı gerdirip kartları farklı
     yükseklikte bırakıyor — sıfırlanmalı. */
  min-height: 0;
  border-bottom: 1px solid var(--line);
}
/* Mutlak konum, kabın iç kutusuna (padding box) göre çözülür; margin:auto ile
   çizim hem yatay hem dikey ortalanır. */
.tcard-plan img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.tcard-body { display: block; padding: 24px 26px 26px; }
.tcard-name {
  display: block;
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--navy);
  line-height: 1;
}
.tcard-area {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.92rem;
  color: var(--ink);
}
.tcard-area b { font-weight: 600; }
.tcard-area small {
  margin-left: auto;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.tcard-go {
  display: block;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* --- Vitrin (tam genişlik görsel + metin) -------------------------------- */
.showcase { position: relative; isolation: isolate; }
.showcase picture, .showcase img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: -2;
}
.showcase img { object-fit: cover; }
.showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(6, 13, 32, 0.86) 0%, rgba(6, 13, 32, 0.66) 34%,
      rgba(6, 13, 32, 0.24) 62%, rgba(6, 13, 32, 0.1) 100%),
    linear-gradient(to bottom, rgba(6, 13, 32, 0.24), rgba(6, 13, 32, 0.06));
}
.showcase-in {
  padding-block: clamp(88px, 13vw, 190px);
  max-width: var(--wrap);
}
.showcase-in .h2 { max-width: 16ch; text-shadow: 0 2px 22px rgba(6, 13, 32, 0.5); }
.showcase-in .lead { max-width: 44ch; }
.showcase-in .lead { margin-block: 22px 32px; }

.hero-wide img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* --- Sosyal donatı kartları ---------------------------------------------- */
.acards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
/* Proje sayfasındaki tam ızgara: 6 kart, 4'lü satırda 4 üstte + 2 altta
   yarım kalıyordu — 3 sütuna sabitlenince 3 üstte + 3 altta tam dolar. */
.acards-3 { grid-template-columns: repeat(3, 1fr); }
.acard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.acard-body { padding: 20px 2px 0; }
.acard-t {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--navy);
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}
.acard-body p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--muted);
}

/* --- Neden (numaralı liste) ---------------------------------------------- */
.why {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 46px);
}
.why-item { display: flex; gap: 18px; }
.why-n {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--gold);
  line-height: 1.5;
  flex: none;
}
.why-t {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.1rem;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: 0.03em;
}
.why-item p { margin: 0; font-size: 0.9rem; line-height: 1.62; }
.plainlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.plainlist .why-t { color: var(--navy); }
.plainlist p { margin: 0; color: var(--muted); font-size: 0.92rem; }

/* --- Sayfa başlığı ------------------------------------------------------- */
.page-head {
  padding-top: calc(var(--head-h) + clamp(52px, 7vw, 108px));
  padding-bottom: clamp(40px, 5vw, 72px);
  background: var(--deep);
  color: #fff;
}
.page-head .h1 { color: #fff; max-width: 20ch; }
.page-head .eyebrow { color: var(--gold-soft); }
.page-head .lead { color: rgba(255, 255, 255, 0.78); }
.page-head .rule { background: var(--gold); }

/* --- Karşılaştırma tablosu ----------------------------------------------- */
.table-scroll { overflow-x: auto; }
.cmp {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}
.cmp th, .cmp td {
  padding: 18px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.cmp thead th {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--navy);
}
.cmp tbody th {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3rem;
  color: var(--navy);
}

/* --- Daire tipi detayı --------------------------------------------------- */
.tdetails { display: grid; gap: clamp(56px, 7vw, 108px); }
.tdetail {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 76px);
  align-items: start;
  scroll-margin-top: calc(var(--head-h) + 32px);
}
.tdetail.flip .tdetail-plan { order: 2; }
.tdetail-plan {
  background: #fff;
  border: 1px solid var(--line);
  padding: clamp(20px, 3vw, 44px);
  display: grid;
  place-items: center;
}
.tdetail-plan img {
  width: 100%;
  height: auto;
  max-height: 62vh;
  object-fit: contain;
}
.cap {
  margin: 16px 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.tdetail-name { font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem); }

.metrics { display: flex; gap: clamp(24px, 4vw, 56px); flex-wrap: wrap; }
.mk {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.mv {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.15rem);
  color: var(--navy);
  line-height: 1;
}
.mv small { font-size: 0.44em; margin-left: 5px; color: var(--gold); }

.rooms { width: 100%; border-collapse: collapse; margin-top: 12px; }
.rooms td {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.rooms .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--navy); }
.note { color: var(--muted); font-size: 0.92rem; margin: 22px 0 26px; max-width: 46ch; }

/* --- Galeri -------------------------------------------------------------- */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.tab {
  padding: 10px 20px;
  background: transparent;
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  transition: all 0.2s var(--ease);
}
.tab:hover { border-color: var(--navy); color: var(--navy); }
.tab.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }

.gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 20px);
}
.gcell[hidden] { display: none; }
.gbtn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.gbtn img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.gbtn:hover img { transform: scale(1.04); }
.gcap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 34px 14px 12px;
  background: linear-gradient(to top, rgba(8, 16, 38, 0.78), transparent);
  color: #fff;
  font-size: 0.76rem;
  text-align: left;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.gbtn:hover .gcap, .gbtn:focus-visible .gcap { opacity: 1; }

/* --- Işık kutusu --------------------------------------------------------- */
.lb {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 100vw;
  max-height: 100dvh;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.lb::backdrop { background: rgba(6, 12, 28, 0.94); }
.lb[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
.lb-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  max-height: 100dvh;
  padding: 20px 0;
}
.lb-fig img {
  max-width: 100%;
  max-height: 78dvh;
  width: auto;
  object-fit: contain;
}
.lb-fig figcaption {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-align: center;
}
.lb-count { color: rgba(255, 255, 255, 0.45); margin-left: 8px; }
.lb-nav, .lb-x {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.lb-nav { font-size: 2.6rem; line-height: 1; padding: 20px clamp(8px, 2vw, 26px); }
.lb-nav:hover, .lb-x:hover { color: #fff; }
.lb-x {
  position: absolute;
  top: 14px; right: 18px;
  font-size: 2.2rem;
  line-height: 1;
  z-index: 2;
  width: 44px; height: 44px;
}

/* --- Harita -------------------------------------------------------------- */
.mapwrap { background: var(--deep); }
.mapfig { margin: 0; }
.mapsvg {
  display: block;
  width: 100%;
  height: clamp(340px, 58vh, 620px);
}
.mapwrap-short .mapsvg { height: clamp(260px, 36vh, 380px); }
.map-thumb { line-height: 0; }
.map-thumb a { display: block; }
.map-thumb .mapsvg { height: clamp(280px, 34vw, 420px); }

/* --- CTA şeridi ---------------------------------------------------------- */
.cta-band { background: var(--deep); padding-block: clamp(56px, 7vw, 104px); }
.cta-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 5vw, 72px);
  flex-wrap: wrap;
}
.cta-in > div { max-width: 620px; }
.cta-in .lead { margin-top: 18px; max-width: none; }
.cta-acts { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* --- İletişim sayfası ---------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.cside-block + .cside-block {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.cside-v {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink);
}
.cside-v a { text-decoration: none; border-bottom: 1px solid var(--gold); }
.cside-block .btn + .btn { margin-top: 10px; }

/* --- Düz metin sayfası --------------------------------------------------- */
.prose { max-width: 74ch; }
.prose-sec + .prose-sec { margin-top: 40px; }
.prose-sec p { margin: 14px 0 0; color: #3d4457; }

/* --- Alt bilgi ----------------------------------------------------------- */
.site-foot {
  background: var(--deep);
  color: rgba(255, 255, 255, 0.68);
  padding-top: clamp(56px, 7vw, 92px);
  font-size: 0.9rem;
}
.foot-in {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
  padding-bottom: clamp(40px, 5vw, 68px);
}
.foot-brand img { width: 190px; height: auto; }
.foot-tag {
  margin: 18px 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.foot-h {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin: 0 0 14px;
}
.foot-col p { margin: 0 0 8px; line-height: 1.65; }
.foot-col a { text-decoration: none; transition: color 0.2s var(--ease); }
.foot-col a:hover { color: #fff; }
.foot-links { list-style: none; margin: 0; padding: 0; }
.foot-links li { margin-bottom: 8px; }

.foot-bot {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 26px 30px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 22px;
  flex-wrap: wrap;
}
.disclaimer {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.42);
  max-width: 68ch;
}
.copy { margin: 0; font-size: 0.74rem; color: rgba(255, 255, 255, 0.42); white-space: nowrap; }
.copy a { color: rgba(255, 255, 255, 0.6); }

/* --- Yüzen WhatsApp ------------------------------------------------------ */
.wa-float {
  position: fixed;
  right: clamp(14px, 2vw, 26px);
  bottom: clamp(14px, 2vw, 26px);
  z-index: 80;
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s var(--ease);
}
.wa-float:hover { transform: scale(1.07); }

/* --- Açılır bilgi paneli (BİLGİ ALIN) --------------------------------------
   Sekme + panel TEK sabit sarmalayıcı içinde birlikte kayar (sekme panelin
   sol kenarına "yapışık" kalır, panel açılırken/kapanırken onunla gelir).
   Kapalıyken sarmalayıcı sağa `--drawer-w` kadar öteleniyor — yalnızca
   sekmenin genişliği kadarı görünür kalır; açılınca 0'a döner.

   BİLİNÇLİ TASARIM: arka planı karartıp tıklamayı engelleyen bir katman
   YOK. `.is-blurred` sınıfı yalnızca `filter: blur()` uygular — bu
   hit-testing'i etkilemediği için fare tekerleği/dokunmatik kaydırma ve
   arkadaki linkler olduğu gibi çalışmaya devam eder; site "scroll"
   özelliğini kaybetmez. Kapatma: X düğmesi, Esc, panelin dışına tıklama.

   `.is-blurred` header/main/footer'a TEK TEK, ORTAK BİR SARMALAYICIYA
   DEĞİL uygulanıyor (site.js). Sebep: `filter`, uygulandığı elemanı
   `position:fixed` alt öğeler için yeni bir konumlama referansı yapar —
   sabit başlığı ortak bir div'e sarıp o div'i bulanıklaştırsaydık, başlık
   artık viewport'a değil o div'e göre sabitlenir ve kaydırmada yerinde
   kalmayı bırakırdı. Bu yüzden wa-float de BİLEREK footer'ın dışında,
   bulanıklaşan alanların dışında ayrı bir kardeş eleman. */
.is-blurred { filter: blur(6px); transition: filter 0.35s var(--ease); }

.info-tab-wrap {
  --tab-w: 46px;
  --drawer-w: min(400px, 92vw);
  position: fixed;
  inset: 0 0 0 auto;
  width: calc(var(--tab-w) + var(--drawer-w));
  z-index: 96;
  display: flex;
  pointer-events: none;              /* boş alanlar tıklamayı geçirsin */
  transform: translateX(var(--drawer-w));
  transition: transform 0.45s var(--ease), opacity 0.25s var(--ease);
}
.info-tab-wrap.is-open { transform: translateX(0); }

/* Sekme `position:fixed` olduğu için ekranda hep aynı yükseklikte kalır —
   footer'a kadar kaydırılınca footer'ın kendi içeriğinin/"Bilgi Alın"
   düğmesinin üzerine binip karışık görünüyordu. Footer görünüme girince
   (panel kapalıyken) yumuşakça kaybolur; site.js tetikler. */
.info-tab-wrap.is-near-footer { opacity: 0; pointer-events: none; }

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

.info-tab {
  pointer-events: auto;
  align-self: center;
  flex: none;
  width: var(--tab-w);
  padding: 22px 0;
  background: #c0272d;
  color: #fff;
  border: 0;
  cursor: pointer;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: -6px 0 20px -10px rgba(6, 13, 32, 0.5);
  transition: background 0.2s var(--ease);
}
.info-tab:hover, .info-tab:focus-visible { background: #9e1f24; }
.info-tab span { display: block; }

.info-tab-drawer {
  pointer-events: auto;
  flex: none;
  width: var(--drawer-w);
  height: 100%;
  background: #fff;
  box-shadow: -18px 0 50px -20px rgba(6, 13, 32, 0.35);
  overflow-y: auto;
  position: relative;
  padding: clamp(30px, 4vw, 46px) clamp(22px, 3vw, 34px) clamp(22px, 3vw, 34px);
}
.info-tab-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
}
.info-tab-close:hover { color: var(--navy); }

@media (max-width: 640px) {
  .info-tab-wrap { --tab-w: 42px; --drawer-w: min(360px, 90vw); }
  .info-tab { font-size: 0.7rem; letter-spacing: 0.16em; }
}

/* --- Kaydırma ile beliriş -------------------------------------------------
   Gizli başlangıç durumu yalnızca .js altında geçerli; JS çalışmazsa içerik
   olduğu gibi görünür kalır. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* --- Sayfa geçişleri (destekleyen tarayıcıda) ---------------------------- */
@view-transition { navigation: auto; }

/* ==========================================================================
   Duyarlı davranış
   ========================================================================== */
@media (max-width: 1180px) {
  .acards { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .nav, .head-call { display: none; }
  .burger { display: block; }
  .foot-in { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --head-h: 66px; }

  .brand img {height: 35px;}

  /* Mobilde başlık şeridi görselin üzerinde saydam degrade yerine düz
     lacivert zeminde durur — kaydırılmadan önce de sonra da okunaklı. */
  .site-head:not(.is-stuck) { background: #0d1b3e; }
  .site-head:not(.is-stuck)::before { display: none; }

  /* Kampanya sloganı ve rozetleri mobilde de masaüstündeki gibi render'ların
     ÜZERİNDE duruyor — ayrı, düz lacivert bir şerit değil. Bu yüzden
     hero-media'ya artık mobilde özel bir davranış (position:relative +
     sabit yükseklik) VERİLMİYOR; temel kural (position:absolute; inset:0)
     masaüstüyle birebir aynı şekilde geçerli kalıyor, section'ın tamamını
     (sabit başlığın altında kalan pay dahil) kaplıyor. */
  .hero { padding-bottom: 34px; }

  .hero-in { padding-block: 0; }
  /* Masaüstünde metin/rozetler yan yana (2 sütun), mobilde alt alta —
     kampanyalar arasında en uzun içeriğe göre sabit bir yükseklik. */
  .cslides { min-height: 600px; }
  .cslide {
    grid-template-columns: 1fr;
    row-gap: 26px;
    align-items: start;
  }
  .hero-copy { max-width: none; }
  .h1-hero { font-size: clamp(2.3rem, 7.2vw + 0.8rem, 3.1rem); }
  /* Masaüstündeki büyütme dar ekranda taşardı — rozet kümesi burada
     kendi ölçeğinde (viewport genişliğine göre) büyütülüyor. */
  .hero-badges { width: clamp(240px, 66vw, 290px); height: clamp(240px, 66vw, 290px); }
  .hbadge:nth-child(1) strong { font-size: clamp(1.6rem, 3.2vw + 0.8rem, 2.08rem); }
  .hbadge:nth-child(2) strong { font-size: clamp(2.72rem, 5.6vw + 1.28rem, 3.52rem); }
  .hbadge:nth-child(3) strong { font-size: clamp(1.04rem, 2.08vw + 0.64rem, 1.28rem); }
  /* Kampanyaya özel rozet büyütmeleri — masaüstündeki mantığın mobil
     karşılığı (bkz. yukarıdaki .cslide-c1/.cslide-c2 açıklaması). */
  .cslide-c0 .hbadge:nth-child(1) strong { font-size: clamp(1.3rem, 2.6vw + 0.7rem, 1.7rem); }
  .cslide-c0 .hbadge:nth-child(2) strong { font-size: clamp(1.7rem, 3.4vw + 1rem, 2.2rem); }
  .cslide-c0 .hbadge:nth-child(3) strong { font-size: clamp(0.78rem, 1.5vw + 0.5rem, 0.95rem); line-height: 1.15; }
  .cslide-c1 .hbadge:nth-child(1) { width: 50%; height: 50%; top: 0; left: 0; padding: 0 4%; }
  .cslide-c1 .hbadge:nth-child(1) strong { font-size: clamp(1.6rem, 3.2vw + 0.8rem, 2.1rem); line-height: 1; }
  .cslide-c1 .hbadge:nth-child(1) small { font-size: clamp(0.58rem, 1.1vw + 0.35rem, 0.72rem); }
  .cslide-c1 .hbadge:nth-child(2) { width: 54%; height: 54%; top: 0; right: 0; padding: 0 4%; }
  .cslide-c1 .hbadge:nth-child(2) strong { font-size: clamp(1.45rem, 2.9vw + 0.75rem, 1.85rem); line-height: 1; }
  .cslide-c1 .hbadge:nth-child(2) small { font-size: clamp(0.58rem, 1.1vw + 0.35rem, 0.72rem); }
  .cslide-c1 .hbadge:nth-child(3) { width: 48%; height: 48%; bottom: 0; left: 0; padding: 0 4%; }
  .cslide-c1 .hbadge:nth-child(3) strong { font-size: clamp(1.8rem, 3.6vw + 0.9rem, 2.35rem); line-height: 1; }
  .cslide-c1 .hbadge:nth-child(3) small { font-size: clamp(0.58rem, 1.1vw + 0.35rem, 0.72rem); }
  .cslide-c1 .hbadge:nth-child(4) { width: 58%; height: 58%; bottom: 0; right: 0; padding: 0 4%; }
  .cslide-c1 .hbadge:nth-child(4) .hbadge-pre { font-size: clamp(0.44rem, 0.8vw + 0.28rem, 0.54rem); line-height: 1.1; margin-bottom: 2px; }
  .cslide-c2 .hbadge:nth-child(1) { width: 52%; height: 52%; top: 0; left: 0; padding: 0 4%; }
  .cslide-c2 .hbadge:nth-child(1) strong { font-size: clamp(0.92rem, 1.8vw + 0.58rem, 1.18rem); line-height: 1.1; }
  .cslide-c2 .hbadge:nth-child(1) small { font-size: clamp(0.52rem, 1vw + 0.32rem, 0.65rem); }
  .cslide-c2 .hbadge:nth-child(2) { width: 54%; height: 54%; top: 0; right: 0; padding: 0 4%; }
  .cslide-c2 .hbadge:nth-child(2) strong { font-size: clamp(1.45rem, 2.9vw + 0.75rem, 1.85rem); line-height: 1; }
  .cslide-c2 .hbadge:nth-child(2) small { font-size: clamp(0.85rem, 1.6vw + 0.52rem, 1.08rem); font-weight: 800; }
  .cslide-c2 .hbadge:nth-child(3) { width: 48%; height: 48%; bottom: 0; left: 0; padding: 0 4%; }
  .cslide-c2 .hbadge:nth-child(3) strong { font-size: clamp(1.6rem, 3.2vw + 0.8rem, 2.1rem); line-height: 1; }
  .cslide-c2 .hbadge:nth-child(3) small { font-size: clamp(0.85rem, 1.6vw + 0.52rem, 1.08rem); font-weight: 800; }
  .cslide-c2 .hbadge:nth-child(4) { width: 58%; height: 58%; bottom: 0; right: 0; padding: 0 4%; }
  .cslide-c2 .hbadge:nth-child(4) strong { font-size: clamp(2.8rem, 5.6vw + 1.4rem, 3.8rem); line-height: 0.92; font-weight: 800; }
  .cslide-c2 .hbadge:nth-child(4) small { font-size: clamp(0.85rem, 1.6vw + 0.52rem, 1.08rem); font-weight: 800; }
  .hero-side { align-items: flex-start; }

  .hero-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
  }
  .hero-actions .btn-campaign {
    flex: 0 0 auto;
    padding: 8px 14px;
    font-size: clamp(0.74rem, 1.8vw + 0.35rem, 0.84rem);
    letter-spacing: 0.08em;
  }
  .hero-phone-inline {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    font-size: clamp(0.72rem, 1.8vw + 0.35rem, 0.82rem);
    padding: 8px 12px;
    letter-spacing: 0.02em;
  }
  .hero-phone-inline svg {
    width: 13px;
    height: 13px;
  }
  .cslide-c0 .hero-phone-desktop {
    display: none;
  }

  /* Metin artık dört bir yanı render'la çevrili — hangi slaytta olursa olsun
     okunaklı kalması gerekiyor. `.hero-in` (flex:1 1 auto) kampanya
     metnini/rozetlerini/CTA'yı hep BAŞLIĞIN HEMEN ALTINA yığıyor (aradaki
     boşluk hero-bar'dan önce büyüyüp gidiyor) — yani örtü, alttan çok
     ÜSTTE (header'ın altında) koyu olmalı. Alttaki koyulaşma noktalarını
     (dots'un oturduğu şerit) da koruyoruz, ortadaki saf görsel alanı
     olduğu gibi bırakıyoruz. */
  .hero-veil {
    background: linear-gradient(to bottom,
      rgba(6, 13, 32, 0.72) 0%,
      rgba(6, 13, 32, 0.4) 24%,
      rgba(6, 13, 32, 0.18) 46%,
      rgba(6, 13, 32, 0.22) 66%,
      rgba(6, 13, 32, 0.9) 100%);
  }

  /* Rozetlerin örtüşen daire düzeni masaüstüyle birebir aynı korunuyor —
     mobilde ayrı bir yatay şerit YOK, sadece konteyner clamp()'in alt
     sınırına (200px) düşerek küçülüyor. */
  .hero-badges { justify-self: start; }
  /* hero-media artık masaüstüyle aynı şekilde tüm section'ı kapladığı için
     hero-bar da normal akışta, badge'lerin hemen altında kalıyor — ayrı bir
     mutlak konumlamaya gerek yok. scroll-hint dar ekranda gereksiz. */
  .scroll-hint { display: none; }

  .split, .feature, .tdetail, .contact-grid { grid-template-columns: 1fr; }
  .feature.flip .feature-media, .tdetail.flip .tdetail-plan { order: 0; }
  .split-media, .feature-media { order: -1; }
  .tcards { grid-template-columns: 1fr; }
  .tcard-plan { aspect-ratio: 16 / 9; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .cta-in { flex-direction: column; align-items: flex-start; }
  .lb[open] { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .lb-nav {
    position: absolute;
    bottom: 16px;
    font-size: 2rem;
  }
  .lb-prev { left: 12px; }
  .lb-next { right: 12px; }
}

@media (max-width: 620px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .acards { grid-template-columns: 1fr; }
  .cform-page .fields { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr; }
  .foot-bot { flex-direction: column; }
  .copy { white-space: normal; }
  .gcap { opacity: 1; font-size: 0.7rem; }
  .btn { width: 100%; }
  .hero-actions .btn, .hero-cta .btn, .cta-acts .btn { width: auto; }
}

/* --- Hareket azaltma ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .slide img { transform: none; }
  @view-transition { navigation: none; }
}

/* --- Baskı --------------------------------------------------------------- */
@media print {
  .site-head, .drawer, .wa-float, .cta-band, .cform, .lb,
  .info-tab-wrap { display: none !important; }
  body { background: #fff; }
  .page-head { background: #fff; color: #000; }
  .page-head .h1 { color: #000; }
}