/* ═══ ERSOY TENTE — "Gölge Hattı" ═══════════════════════════
   Konsept: sayfa güneş/gölge ritmiyle akar. Lacivert = gölge,
   beyaz = açıklık, buz mavisi = vurgu. Lamel çizgisi tek motif. */

:root {
  --lacivert:      oklch(0.26 0.055 265);
  --lacivert-koyu: oklch(0.205 0.05 265);
  --gece:          oklch(0.16 0.03 265);
  --gun:           oklch(0.985 0.004 250);
  --gun-golge:     oklch(0.94 0.008 255);
  --gunes:         oklch(0.86 0.038 254);
  --gunes-koyu:    oklch(0.38 0.085 263);
  --murekkep:      oklch(0.24 0.03 265);
  --soluk:         oklch(0.44 0.025 265);
  --bulut:         oklch(0.93 0.01 260);
  --bulut-soluk:   oklch(0.78 0.02 262);

  --z-ust: 300; --z-menu: 350; --z-isikkutu: 400; --z-imlec: 500;

  --govde: 'Archivo', system-ui, sans-serif;
  --ff-ease: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out-expo'ya yakın */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
#sistemler, #surec, #galeri, #iletisim { scroll-margin-top: 6.5rem; }
body {
  font-family: var(--govde);
  font-variation-settings: 'wdth' 100;
  color: var(--murekkep);
  background: var(--gun);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* Başlık sesi: geniş gövdeli, sıkı, BÜYÜK — tabela dili */
h1, h2, h3 {
  font-variation-settings: 'wdth' 122;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 1.04;
  text-wrap: balance;
}
h2 { font-size: clamp(2rem, 5.2vw, 3.6rem); }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.45rem); }
p { text-wrap: pretty; }

::selection { background: var(--gunes); color: var(--lacivert-koyu); }
:focus-visible { outline: 3px solid var(--gunes-koyu); outline-offset: 2px; }

/* ── Düğmeler ─────────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.62em 1.3em;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ff-ease), background 0.25s, color 0.25s;
}
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.1s; }
.btn--iri { padding: 0.85em 1.7em; font-size: 1.05rem; }
.btn--gunes { background: var(--gunes); color: var(--lacivert-koyu); }
.btn--gunes:hover { background: oklch(0.79 0.055 255); transform: translateY(-2px); }
.btn--beyaz { background: transparent; color: #fff; border-color: rgba(255,255,255,0.65); }
.btn--beyaz:hover { background: rgba(255,255,255,0.12); border-color: #fff; transform: translateY(-2px); }
.btn--cizgi { background: transparent; color: inherit; border-color: currentColor; }
.btn--cizgi:hover { transform: translateY(-2px); }

/* ── Üst bar ──────────────────────────────────────────── */
.ust {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-ust);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
  padding: 0.9rem clamp(1rem, 4vw, 3rem);
  color: #fff;
  /* Parlak hero bölgelerinde okunurluk için kalıcı üst scrim */
  background: linear-gradient(180deg, oklch(0.205 0.05 265 / 0.6), transparent);
  transition: background 0.35s, box-shadow 0.35s, padding 0.35s;
}
.ust.dolu {
  background: var(--gun);
  color: var(--murekkep);
  box-shadow: 0 8px 30px -18px oklch(0.26 0.055 265 / 0.45);
  padding-block: 0.55rem;
}
.ust.dolu .dil { border-color: oklch(0.26 0.055 265 / 0.4); }
.ust.dolu .dil:hover { background: oklch(0.26 0.055 265 / 0.07); border-color: var(--lacivert); }
.marka { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.marka__isaret { width: 30px; height: 30px; color: var(--gunes); flex: none; }
/* Açılışta tek seferlik panjur selamı (0.5s gecikmeli, ~0.9s'de biter) */
.marka .marka__isaret path {
  transform-origin: left center;
  animation: lamelSelam 0.7s var(--ff-ease) 0.5s backwards;
}
.marka .marka__isaret path:nth-child(2) { animation-delay: 0.58s; }
.marka .marka__isaret path:nth-child(3) { animation-delay: 0.66s; }
@keyframes lamelSelam {
  45%  { transform: scaleY(0.22); }
  100% { transform: none; }
}
/* Logo hover: lameller panjur gibi kırpar (bakım sayfasındaki nefesin hover hâli) */
.marka:hover .marka__isaret path {
  animation: lamelKirp 0.6s var(--ff-ease);
  transform-origin: left center;
}
.marka:hover .marka__isaret path:nth-child(2) { animation-delay: 0.07s; }
.marka:hover .marka__isaret path:nth-child(3) { animation-delay: 0.14s; }
@keyframes lamelKirp {
  45%  { transform: scaleY(0.22); }
  100% { transform: none; }
}
.marka__yazi {
  font-variation-settings: 'wdth' 122;
  font-weight: 800; font-size: 1.15rem; letter-spacing: 0.02em;
}
.marka__yazi i { font-style: normal; font-weight: 300; margin-left: 0.35em; }
.ust__nav { display: flex; gap: clamp(0.8rem, 2vw, 1.6rem); margin-inline: auto; }
.ust__nav a {
  text-decoration: none; font-weight: 600; font-size: 0.93rem;
  opacity: 0.85; transition: opacity 0.2s;
  padding-block: 0.3rem;
}
.ust__nav a:hover { opacity: 1; }
.ust__eylem { display: flex; gap: 0.6rem; align-items: center; }
.ust__menu { display: none; }

/* Dil geçişi */
.dil {
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,0.55);
  padding: 0.55em 0.8em;
  transition: border-color 0.2s, background 0.2s;
}
.dil:hover { border-color: #fff; background: rgba(255,255,255,0.1); }
.mobilmenu .dil { font-size: 1.05rem; }

.mobilmenu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--gun); color: var(--murekkep);
  flex-direction: column; justify-content: center; align-items: center; gap: 1.6rem;
  font-size: 1.5rem;
}
.mobilmenu .dil { border-color: oklch(0.26 0.055 265 / 0.45); }
.mobilmenu:not([hidden]) { display: flex; }
.mobilmenu a { text-decoration: none; font-weight: 700; }
/* Kapatma butonu overlay'İN İÇİNDE yaşar: header'ın stacking context'i
   onu örtemez (hamburger X'i bu yüzden görünmüyordu) */
.mobilmenu__kapat {
  position: absolute; top: 0.5rem; right: 0.7rem;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: none; border: 0; color: inherit;
  font-size: 2.4rem; line-height: 1; cursor: pointer;
}

/* Mobil sabit WhatsApp aksiyonu: hero geçilince belirir */
.mobilcta {
  position: fixed; right: 1rem; bottom: 1rem; z-index: var(--z-ust);
  display: none;
  width: 54px; height: 54px;
  align-items: center; justify-content: center;
  /* Lacivert + sarı: beyaz, sarı ve koyu zeminlerin hepsinde seçilir */
  background: var(--lacivert-koyu); color: var(--gunes);
  box-shadow: 0 12px 30px -12px rgb(0 0 0 / 0.55);
  opacity: 0; translate: 0 14px; pointer-events: none;
  transition: opacity 0.3s, translate 0.3s var(--ff-ease);
}
.mobilcta svg { width: 26px; height: 26px; }
.mobilcta.gor { opacity: 1; translate: none; pointer-events: auto; }
.mobilcta { transition: opacity 0.3s, translate 0.3s var(--ff-ease), scale 0.15s; }

/* ── Kaydırma ilerleme çizgisi ─────────────────────────────
   CSS scroll-driven animation: JS yok, kompozitörde çalışır.
   Desteklemeyen tarayıcıda hiç görünmez. */
.ilerleme { display: none; }
@supports (animation-timeline: scroll()) {
  .ilerleme {
    display: block;
    position: fixed; inset: 0 0 auto 0; z-index: calc(var(--z-ust) + 1);
    height: 3px;
    background: var(--gunes-koyu); /* beyaz header üstünde de seçilir */
    transform-origin: left;
    transform: scaleX(0);
    animation: ilerle linear both;
    animation-timeline: scroll(root);
    pointer-events: none;
  }
}
@keyframes ilerle { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Kapak (sabit fotoğraf: paneller üstünden kayar) ──── */
.kapak {
  position: relative; min-height: 100svh;
  display: grid; align-items: end;
  color: #fff; overflow: hidden;
  background: var(--lacivert-koyu);
  clip-path: inset(0); /* sabit fotoğrafı bölüme kırpar */
}
.kapak__foto {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100vh; height: 100lvh;
  object-fit: cover; object-position: 62% 40%;
  /* Açılışta tek seferlik yavaş yaklaşma (yalnız transform — mobil dostu) */
  animation: kapakYaklas 2.2s var(--ff-ease) both;
}
@keyframes kapakYaklas {
  from { transform: scale(1.07); }
  to   { transform: none; }
}
.kapak__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(10deg, oklch(0.205 0.05 265 / 0.92) 0%, oklch(0.205 0.05 265 / 0.35) 45%, transparent 72%),
    linear-gradient(180deg, oklch(0.205 0.05 265 / 0.55) 0%, transparent 26%);
}
/* Lamel gölgesi: kapağın üzerinden yavaşça kayan şerit gölgeler */
.kapak__golge {
  position: absolute; inset: -20% -40%;
  background: repeating-linear-gradient(
    115deg,
    transparent 0 150px,
    oklch(0.2 0.05 265 / 0.09) 150px 235px
  );
  animation: golgeKay 38s linear infinite;
  pointer-events: none;
}
@keyframes golgeKay {
  from { transform: translateX(0); }
  to   { transform: translateX(340px); }
}
.kapak__icerik {
  position: relative; z-index: 1;
  padding: clamp(1.2rem, 5vw, 4rem);
  padding-bottom: clamp(3.2rem, 8vh, 6rem);
  max-width: 62rem;
}
.kapak__baslik {
  font-size: clamp(3.2rem, 10.5vw, 6rem);
  animation: yukar 0.9s var(--ff-ease) 0.15s backwards;
}
.kapak__alt {
  max-width: 46ch; margin-top: 1.1rem;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  color: var(--bulut);
  animation: yukar 0.9s var(--ff-ease) 0.32s backwards;
}
.kapak__alt strong { color: var(--gunes); font-weight: 700; }
.kapak__cta {
  display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem;
  animation: yukar 0.9s var(--ff-ease) 0.48s backwards;
}
.kapak__kunye {
  position: absolute; right: clamp(1rem, 3vw, 2.5rem); bottom: 1rem; z-index: 1;
  font-size: 0.78rem; color: rgba(255,255,255,0.78);
}
@keyframes yukar {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* ── Tel-kafes filigranlar: pergola wireframe (özgün üretim) ── */
.tekcizim {
  position: absolute; pointer-events: none; z-index: 0; height: auto;
  /* alt kenara doğru zemine erir (referans doku) */
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 97%);
}
.tanit { position: relative; overflow: hidden; }
.tanit .tekcizim {
  right: clamp(-6rem, -3vw, 0rem); bottom: -12%;
  width: min(780px, 54vw);
  opacity: 0.55;
}
.tanit__ic { position: relative; z-index: 1; }
.iletisim { position: relative; overflow: hidden; }
.iletisim .tekcizim {
  left: 34%; bottom: -8%;
  width: min(640px, 52vw);
  opacity: 0.35;
  filter: brightness(0.5); /* sarı zeminde koyu iz */
}
.iletisim__sol, .iletisim__form { position: relative; z-index: 1; }
@media (max-width: 900px) { .tekcizim { display: none; } }

/* ── Tanıt (güneş) ────────────────────────────────────── */
.tanit { padding: clamp(3.5rem, 9vw, 7rem) clamp(1.2rem, 5vw, 4rem); }
.tanit__ic { max-width: 60rem; margin-inline: auto; }
.tanit__soz {
  font-size: clamp(1.35rem, 2.9vw, 2.1rem);
  font-weight: 500; line-height: 1.42;
  max-width: 30em;
}
.tanit__soz em { font-style: normal; box-shadow: inset 0 -0.45em var(--gunes); }
.tanit__adimlar {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: 0.5rem 0; margin-top: 2.4rem;
}
.tanit__adimlar li {
  font-variation-settings: 'wdth' 118;
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  color: var(--murekkep); letter-spacing: 0.03em;
  display: flex; align-items: center;
}
.tanit__adimlar strong { color: var(--gunes-koyu); font-weight: 800; margin-right: 0.28em; }
.tanit__adimlar li + li::before {
  content: ''; width: 34px; height: 2px; background: var(--gunes-koyu);
  margin-inline: 0.9rem; transform: skewX(-30deg);
}

/* ── Üçlü panel (koyu · keşif · sarı) ─────────────────── */
.uclu { padding: 0 clamp(1.2rem, 4vw, 3rem) clamp(3rem, 7vw, 5rem); background: var(--gun); }
.uclu__izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.1rem; max-width: 80rem; margin-inline: auto;
}
.uclu__kart {
  position: relative; overflow: hidden;
  padding: 1.9rem 1.7rem; display: grid; gap: 0.9rem; align-content: start;
}
.uclu__kart h3 { font-size: 1.3rem; }
.uclu__kart--koyu { background: var(--gece); color: var(--bulut); }
.uclu__kart--koyu h3 { color: #fff; }
.uclu__kart--koyu ul { list-style: none; display: grid; gap: 0.55rem; margin-top: 0.3rem; }
.uclu__kart--koyu li { position: relative; padding-left: 1.15rem; font-size: 0.93rem; }
.uclu__kart--koyu li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 10px; height: 2.5px; background: var(--gunes); transform: skewX(-30deg);
}
.uclu__halkalar { display: flex; margin-bottom: 0.3rem; }
.uclu__halkalar img {
  width: 90px; height: 90px; border-radius: 50%; object-fit: cover;
  border: 4px solid var(--gece);
}
.uclu__halkalar img + img { margin-left: -22px; }
.uclu__kart--acik {
  background: var(--gun); border: 1px solid var(--bulut);
  padding-right: min(46%, 15rem); min-height: 300px;
}
.uclu__kart--acik h3 { font-size: 1.15rem; }
.uclu__ust { font-size: 0.82rem; font-weight: 600; color: var(--soluk); }
.uclu__cta {
  justify-self: start; font-weight: 700; color: var(--murekkep);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
  transition: color 0.2s;
}
.uclu__cta:hover { color: var(--gunes-koyu); }
.uclu__ekip {
  position: absolute; right: 0; bottom: 0;
  width: 46%; height: 84%; object-fit: cover; object-position: center top;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24%);
  mask-image: linear-gradient(90deg, transparent, #000 24%);
}
.uclu__kart--sari { background: var(--gunes); color: var(--lacivert-koyu); }
.uclu__sayi {
  font-variation-settings: 'wdth' 122; font-weight: 800;
  font-size: 3.6rem; line-height: 1;
}
.uclu__kart--sari h3 { margin-top: -0.6rem; }
.uclu__kart--sari p { font-size: 0.95rem; max-width: 34ch; }
.uclu__cipler { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.uclu__cipler span {
  background: var(--gun); padding: 0.45em 0.9em;
  font-size: 0.85rem; font-weight: 700;
}

/* ── Sistemler: lamel akordeonu ───────────────────────── */
.sistemler {
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.2rem, 4vw, 3rem);
  background: var(--gun-golge);
}
.sistemler__bas { max-width: 60rem; margin: 0 auto 2.2rem; }
.sistemler__bas p { color: var(--soluk); margin-top: 0.6rem; max-width: 52ch; }
.lameller {
  display: flex; gap: 6px;
  height: clamp(420px, 62vh, 560px);
  max-width: 90rem; margin-inline: auto;
}
.lamel {
  position: relative; overflow: hidden;
  flex: 1; min-width: 0;
  background: var(--lacivert-koyu);
  transition: flex 0.65s var(--ff-ease);
  cursor: pointer;
}
.lamel.acik { flex: 4.2; cursor: default; }
.lamel img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0.55;
  transition: opacity 0.5s, transform 0.9s var(--ff-ease);
  transform: scale(1.06);
}
.lamel.acik img { opacity: 1; transform: none; }
.lamel__kapak {
  position: absolute; inset: 0; z-index: 2;
  background: none; border: 0; cursor: inherit;
  display: block; width: 100%;
  color: #fff; font: inherit;
}
.lamel__ad {
  position: absolute; left: 0.9rem; bottom: 0.9rem;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-variation-settings: 'wdth' 116;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 1rem; white-space: nowrap;
  text-shadow: 0 1px 8px rgb(0 0 0 / 0.55);
  transition: opacity 0.3s;
}
.lamel.acik .lamel__ad { opacity: 0; }
.lamel__detay {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: 1.4rem 1.5rem 1.3rem;
  background: linear-gradient(transparent, oklch(0.18 0.045 265 / 0.88) 42%);
  color: #fff;
  opacity: 0; translate: 0 12px;
  transition: opacity 0.45s 0.2s, translate 0.45s 0.2s var(--ff-ease);
  pointer-events: none;
}
.lamel.acik .lamel__detay { opacity: 1; translate: none; z-index: 3; } /* incele linki kapak butonunun ÜSTÜNE çıkar */
.lamel__detay p { margin-top: 0.4rem; font-size: 0.95rem; color: var(--bulut); max-width: 52ch; }
.lamel__incele {
  display: inline-block; margin-top: 0.7rem; pointer-events: auto;
  font-size: 0.88rem; font-weight: 700; color: var(--gunes);
  text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.lamel.acik .lamel__detay { pointer-events: auto; }
.sistemler__not {
  max-width: 60rem; margin: 1.4rem auto 0;
  font-size: 0.9rem; color: var(--soluk);
}

/* ── Saha / İhracat (güneş: beyaz zemin) ──────────────── */
.saha {
  background: var(--gun);
  color: var(--murekkep);
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.2rem, 4vw, 3rem);
  /* üst kenar: lamel dişi */
  border-top: 10px solid var(--gunes);
}
.saha__bas { max-width: 60rem; margin: 0 auto 2.8rem; }
.saha__bas h2 { color: var(--murekkep); }
.saha__bas p { margin-top: 0.8rem; max-width: 56ch; color: var(--soluk); }
.surec {
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
  max-width: 80rem; margin-inline: auto;
}
.surec__adim img { aspect-ratio: 4 / 4.6; object-fit: cover; width: 100%; }
.surec__yazi { padding-top: 0.8rem; }
.surec__yazi b {
  display: block;
  font-variation-settings: 'wdth' 118;
  text-transform: uppercase; font-size: 0.98rem; color: var(--gunes);
  letter-spacing: 0.02em;
}
.surec__yazi span { font-size: 0.92rem; color: var(--soluk); }
.saha__kanit {
  display: grid; grid-template-columns: minmax(260px, 420px) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  max-width: 80rem; margin: 3.5rem auto 0;
}
.saha__kanit figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.saha__kanit figcaption { font-size: 0.82rem; color: var(--soluk); padding-top: 0.5rem; }
.saha__ulkeler h3 { color: var(--murekkep); }
.saha__ulkeler ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 1rem;
}
.saha__ulkeler li {
  border: 1.5px solid oklch(0.78 0.03 262);
  padding: 0.35em 0.9em; font-size: 0.92rem; font-weight: 600;
}
.saha__ulkeler.reveal.in li { animation: ulkeGir 0.62s var(--ff-ease) both; }
.saha__ulkeler.reveal.in li:nth-child(2) { animation-delay: 55ms; }
.saha__ulkeler.reveal.in li:nth-child(3) { animation-delay: 110ms; }
.saha__ulkeler.reveal.in li:nth-child(4) { animation-delay: 165ms; }
.saha__ulkeler.reveal.in li:nth-child(5) { animation-delay: 220ms; }
.saha__ulkeler.reveal.in li:nth-child(6) { animation-delay: 275ms; }
.saha__ulkeler.reveal.in li:nth-child(7) { animation-delay: 330ms; }
.saha__ulkeler.reveal.in li:nth-child(8) { animation-delay: 385ms; }
.saha__ulkeler.reveal.in li:nth-child(9) { animation-delay: 440ms; }
.saha__ulkeler.reveal.in li:nth-child(10) { animation-delay: 495ms; }
@keyframes ulkeGir {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.saha__ulkeler p { margin-top: 1.1rem; font-size: 0.95rem; color: var(--soluk); max-width: 48ch; }

/* ── Sabit fotoğraf perdeleri ─────────────────────────────
   Bölüm clip-path ile pencereye dönüşür; içindeki position:fixed
   fotoğraf viewport'a çakılı kalır — paneller üstünden kayar.
   GPU-kompozit: mobilde de akıcıdır (background-attachment değil). */
.perde {
  position: relative; clip-path: inset(0);
  min-height: 74vh;
  display: grid; align-items: end; justify-items: start;
  background: var(--lacivert-koyu);
}
.perde__foto {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100vh; height: 100lvh;
  object-fit: cover;
}
.perde::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(185deg, transparent 45%, oklch(0.16 0.03 265 / 0.6));
  pointer-events: none;
}
.perde__soz {
  position: relative; z-index: 1;
  margin: 0 clamp(1.2rem, 5vw, 4rem) clamp(2rem, 6vh, 3.5rem);
  color: #fff;
  font-variation-settings: 'wdth' 122;
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem); line-height: 1.1;
  max-width: 17em; text-wrap: balance;
  text-shadow: 0 2px 26px rgb(0 0 0 / 0.5);
}

/* ── Gece (sabit gece fotoğrafı üzerinde panel) ───────── */
.gece {
  color: var(--bulut);
  padding: clamp(3rem, 7vw, 6rem) clamp(1.2rem, 4vw, 3rem);
}
.gece--perde {
  position: relative; clip-path: inset(0);
  min-height: 82vh;
  display: grid; align-items: center; justify-items: start;
  background: var(--gece);
}
.gece__yazi {
  position: relative; z-index: 1;
  max-width: 34rem;
  background: oklch(0.16 0.03 265 / 0.78);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.gece__yazi h2 { color: var(--gunes); }
.gece__yazi p { margin-top: 0.9rem; color: var(--bulut); }
.gece__cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.7rem; }

/* ── Galeri ───────────────────────────────────────────── */
.galeri { padding: clamp(3rem, 7vw, 5.5rem) clamp(1.2rem, 4vw, 3rem); }
.galeri__bas { max-width: 60rem; margin: 0 auto 2rem; }
.galeri__bas p { color: var(--soluk); margin-top: 0.6rem; }
.galeri__izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
  gap: 8px; max-width: 90rem; margin-inline: auto;
}
.kare-sarici { position: relative; min-width: 0; }
.kare {
  position: relative;
  border: 0; padding: 0; background: var(--lacivert-koyu);
  cursor: zoom-in; overflow: hidden; display: block; width: 100%;
  font: inherit; color: inherit; text-align: left;
}
/* Duotone perde: kareler hafif lacivert tonda durur, hover'da renk açılır */
.kare::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: oklch(0.26 0.055 265 / 0.28);
  transition: opacity 0.45s;
  pointer-events: none;
}
.kare:hover::before, .kare:focus-visible::before { opacity: 0; }
.kare img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1;
  filter: saturate(0.72);
  transition: transform 0.7s var(--ff-ease), filter 0.5s, opacity 0.4s;
}
.kare:hover img, .kare:focus-visible img { transform: scale(1.045); filter: none; }
/* Proje künyesi */
.kare__yazi {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 2.4rem 1.1rem 1rem;
  background: linear-gradient(transparent, oklch(0.18 0.045 265 / 0.88));
  color: #fff;
}
.kare__yazi b {
  display: block;
  font-variation-settings: 'wdth' 118;
  font-weight: 700; text-transform: uppercase;
  font-size: 0.94rem; letter-spacing: 0.02em; line-height: 1.25;
}
.kare__yazi span {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--gunes);
}
.kare__instagram {
  position: absolute; top: 0.85rem; right: 0.85rem; z-index: 3;
  padding: 0.48em 0.72em;
  background: var(--lacivert-koyu); color: #fff;
  border: 1px solid oklch(0.86 0.038 254 / 0.72);
  font-size: 0.75rem; font-weight: 700; line-height: 1;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s var(--ff-ease);
}
.kare__instagram:hover, .kare__instagram:focus-visible {
  background: var(--lacivert); transform: translateY(-2px);
}

.isikkutu {
  border: 0; padding: 0; background: transparent;
  max-width: min(94vw, 1100px); max-height: 92vh;
  margin: auto;
}
.isikkutu[open] { animation: kutuGir 0.35s var(--ff-ease); }
.isikkutu::backdrop { background: oklch(0.14 0.03 265 / 0.9); }
.isikkutu[open]::backdrop { animation: solGir 0.35s ease; }
@keyframes kutuGir { from { opacity: 0; transform: scale(0.96); } }
@keyframes solGir { from { opacity: 0; } }
.isikkutu img { max-height: 88vh; width: auto; max-width: 100%; margin-inline: auto; }
.isikkutu__kapat {
  position: fixed; top: 0.5rem; right: 0.8rem; z-index: 1;
  background: none; border: 0; color: #fff; font-size: 2.6rem;
  cursor: pointer; line-height: 1;
  padding: 0.35rem 0.6rem; /* ≥44px dokunma hedefi */
}

/* ── İletişim (güneş bloğu: sarı zemin) ───────────────── */
.iletisim {
  background: var(--gunes); color: var(--lacivert-koyu);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.2rem, 5vw, 4rem);
  max-width: 100%;
}
.iletisim__sol h2 { color: var(--lacivert-koyu); max-width: 14em; }
.iletisim__sol address { font-style: normal; margin-top: 1.6rem; display: grid; gap: 1rem; }
.iletisim__sol a { color: var(--lacivert-koyu); font-weight: 700; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.iletisim__form { display: grid; gap: 1rem; align-content: start; max-width: 30rem; }
.iletisim__form label { display: grid; gap: 0.35rem; font-size: 0.9rem; font-weight: 700; }
.iletisim__form input, .iletisim__form select {
  font: inherit; font-size: 16px; /* iOS zoom koruması */
  padding: 0.7em 0.9em;
  background: var(--gun);
  color: var(--murekkep); border: 1.5px solid oklch(0.62 0.12 82);
  border-radius: 0;
}
.iletisim__form input:focus, .iletisim__form select:focus {
  outline: 2.5px solid var(--lacivert-koyu); outline-offset: 1px; border-color: transparent;
}
/* Sarı zeminde birincil buton tersine döner: lacivert dolgu */
.iletisim .btn--gunes { background: var(--lacivert-koyu); color: #fff; }
.iletisim .btn--gunes:hover { background: var(--lacivert); transform: translateY(-2px); }
.iletisim__not { font-size: 0.8rem; color: oklch(0.36 0.06 265); }

/* ── Müşteri görüşleri ────────────────────────────────── */
.gorusler { padding: clamp(3rem, 7vw, 5.5rem) clamp(1.2rem, 4vw, 3rem); background: var(--gun-golge); }
.gorusler__bas { max-width: 60rem; margin: 0 auto 2rem; }
.gorusler__izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem; max-width: 80rem; margin-inline: auto;
}
.gorus {
  background: var(--lacivert-koyu); color: var(--bulut);
  padding: 1.6rem 1.5rem 1.3rem;
  display: grid; gap: 1rem; align-content: space-between;
}
.gorus blockquote { font-size: 1.02rem; line-height: 1.55; }
.gorus blockquote::before { content: ''; display: block; width: 34px; height: 3px; background: var(--gunes); margin-bottom: 0.9rem; transform: skewX(-30deg); }
.gorus figcaption { font-weight: 700; font-size: 0.88rem; color: var(--gunes); }

/* ── SSS ──────────────────────────────────────────────── */
.sss { padding: clamp(3rem, 7vw, 5.5rem) clamp(1.2rem, 4vw, 3rem); }
.sss__bas { max-width: 60rem; margin: 0 auto 1.6rem; }
.sss__bas p { color: var(--soluk); margin-top: 0.6rem; }
.sss__liste { max-width: 60rem; margin-inline: auto; border-top: 1px solid var(--bulut); }
.sss__oge { border-bottom: 1px solid var(--bulut); }
.sss__oge summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 0.2rem;
  font-weight: 700; font-size: 1.02rem;
}
.sss__oge summary::-webkit-details-marker { display: none; }
.sss__oge summary::after {
  content: ''; flex: none; width: 16px; height: 3px;
  background: var(--gunes-koyu); transform: skewX(-30deg);
  transition: transform 0.3s var(--ff-ease);
}
.sss__oge[open] summary::after { transform: skewX(-30deg) rotate(90deg); }
.sss__cevap { padding: 0 0.2rem 1.2rem; color: var(--soluk); max-width: 65ch; }

/* ── Blog vitrini + yazı kartı ────────────────────────── */
.blogv { padding: clamp(3rem, 7vw, 5.5rem) clamp(1.2rem, 4vw, 3rem); background: var(--gun-golge); }
.blogv__bas { max-width: 80rem; margin: 0 auto 1.8rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.8rem 1.4rem; }
.blogv__bas p { color: var(--soluk); margin-right: auto; }
.blogv__izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem; max-width: 80rem; margin-inline: auto;
}
.yazikart {
  display: grid; gap: 0.55rem; align-content: start;
  background: var(--gun); padding: 1.4rem 1.3rem 1.2rem;
  text-decoration: none;
  border: 1px solid var(--bulut);
  transition: border-color 0.25s, transform 0.25s var(--ff-ease);
}
.yazikart:hover { border-color: var(--gunes-koyu); transform: translateY(-3px); }
.yazikart time { font-size: 0.78rem; font-weight: 600; color: var(--soluk); letter-spacing: 0.03em; text-transform: uppercase; }
.yazikart b { font-variation-settings: 'wdth' 116; font-size: 1.12rem; line-height: 1.3; text-wrap: balance; }
.yazikart p { font-size: 0.92rem; color: var(--soluk); }
.yazikart span { font-size: 0.85rem; font-weight: 700; color: var(--gunes-koyu); }

/* ── Blog sayfaları ───────────────────────────────────── */
.yazi-sayfa { background: var(--gun); }
.yazi-sayfa .ust { position: sticky; }
.yazi { max-width: 46rem; margin-inline: auto; padding: clamp(2rem, 5vw, 3.5rem) 1.2rem 4rem; }
.yazi__bas { margin-bottom: 1.8rem; }
.yazi__bas time { font-size: 0.82rem; font-weight: 600; color: var(--soluk); text-transform: uppercase; letter-spacing: 0.04em; }
.yazi__bas h1 { font-size: clamp(1.9rem, 5vw, 3rem); margin-top: 0.5rem; }
.yazi__bas p { color: var(--soluk); margin-top: 0.7rem; }
.yazi__kapak { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 1.6rem; }
.yazi__govde { display: grid; gap: 1rem; font-size: 1.02rem; max-width: 65ch; }
.yazi__govde h2 { font-size: 1.4rem; margin-top: 0.8rem; }
.yazi__govde a { color: var(--gunes-koyu); font-weight: 600; }
.yazi__govde img { width: 100%; }
.yazi__izgara { margin-top: 0.5rem; }
/* Sistem detay sayfası parçaları */
.sistem__ozellikler { list-style: none; display: grid; gap: 0.55rem; }
.sistem__ozellikler li { position: relative; padding-left: 1.2rem; }
.sistem__ozellikler li::before {
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 11px; height: 2.5px; background: var(--gunes-koyu); transform: skewX(-30deg);
}
.sistem__teknik { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.sistem__teknik th, .sistem__teknik td { border-bottom: 1px solid var(--bulut); padding: 0.55em 0.2em; text-align: left; }
.sistem__teknik th { color: var(--soluk); font-weight: 600; width: 40%; }
.yazi__bos { color: var(--soluk); }
.yazi-sayfa .yazi__izgara { max-width: none; }

/* ── Alt ──────────────────────────────────────────────── */
.alt {
  background: var(--gece); color: var(--bulut-soluk);
  text-align: center; padding: 2.5rem 1.2rem 2.8rem;
  font-size: 0.9rem;
}
.alt p { max-width: 78ch; margin-inline: auto; }
.alt__don { margin-top: 1.1rem; }
.alt__don a {
  display: inline-block; padding: 0.5em 0.9em;
  text-decoration: none; font-weight: 600; color: var(--bulut);
  border: 1.5px solid oklch(0.32 0.04 265);
  transition: border-color 0.2s;
}
.alt__don a:hover { border-color: var(--gunes-koyu); }
.alt .marka__isaret { margin: 0 auto 0.8rem; }
.alt__mini { margin-top: 0.6rem; font-size: 0.75rem; opacity: 0.75; }

/* İmza: Atabay Yazılım — işaret ayraç görevi görür */
.alt__imza {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  max-width: 60rem; margin: 1.8rem auto 0; padding-top: 1.2rem;
  border-top: 1px solid oklch(0.26 0.035 265);
  font-size: 0.72rem;
}
.alt__imza svg { width: 14px; height: 14px; flex: none; }
.alt__imza b {
  font-weight: 800; font-variation-settings: 'wdth' 122;
  text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 0.76rem; color: var(--bulut);
}

/* ── Kaydırma açığa çıkışları ─────────────────────────────
   TUZAK NOTU: içerik görünürlüğü ASLA JS'e bağlanmaz. .reveal
   varsayılan hâliyle GÖRÜNÜR; .in eklenince yalnız animasyon
   oynar. IO hiç ateşlenmezse sayfa yine tam okunur. */
.reveal.in { animation: yukar 0.7s var(--ff-ease) both; }
/* Süreç adımları: kısa kardeş kademesi (--i HTML'de) */
.surec__adim.reveal.in { animation-delay: calc(var(--i, 0) * 90ms); }

/* ── Özel imleç (yalnız masaüstü) ──────────────────────────
   Nokta = eğik lamel çubuğu, halka = köşeli kare çerçeve.
   pointer:fine + hover dışında JS hiç kurulmaz; bu bloklar da
   yalnız .ozel-imlec (JS ekler) varken devrededir. */
/* Dış katman yalnız konum taşır (JS transform); iç katman nefes/açılma
   animasyonlarını taşır — ikisi çakışmaz. */
.imlec-nokta, .imlec-halka, .imlec-dalga {
  position: fixed; left: 0; top: 0; z-index: var(--z-imlec);
  pointer-events: none;
}
.imlec-nokta i {
  display: block; width: 18px; height: 4px;
  background: var(--gunes);
  /* lacivert kontur: sarı zeminde de açık zeminde de seçilir */
  box-shadow: 0 0 0 1px oklch(0.24 0.04 265 / 0.55);
  transform: skewX(-30deg); /* JS hızla scaleX ekler */
}
.imlec-halka svg {
  display: block; width: 38px; height: 38px;
  color: rgba(255, 255, 255, 0.9);
  mix-blend-mode: difference;
  animation: imlecNefes 3.6s ease-in-out infinite;
  transition: scale 0.35s var(--ff-ease), rotate 0.45s var(--ff-ease),
              color 0.3s, opacity 0.2s;
}
@keyframes imlecNefes { 50% { scale: 1.07; } }
.imlec-etkin .imlec-halka svg {
  animation: none;
  scale: 1.5; rotate: 90deg;
  color: var(--gunes);
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 1px oklch(0.24 0.04 265 / 0.7));
}
.imlec-bas .imlec-halka svg { scale: 0.8; transition-duration: 0.12s; }
.imlec-etkin.imlec-bas .imlec-halka svg { scale: 1.2; }
/* Tıklama dalgası: tek atımlık yayılan kare */
.imlec-dalga {
  width: 38px; height: 38px;
  border: 1.5px solid var(--gunes-koyu);
  animation: imlecDalga 0.55s var(--ff-ease) both;
}
@keyframes imlecDalga {
  from { opacity: 0.9; scale: 0.5; }
  to   { opacity: 0; scale: 1.9; }
}
.imlec-metin .imlec-nokta, .imlec-metin .imlec-halka { opacity: 0; }
@media (pointer: fine) and (hover: hover) {
  .ozel-imlec, .ozel-imlec a, .ozel-imlec button,
  .ozel-imlec .lamel, .ozel-imlec .kare, .ozel-imlec label { cursor: none; }
  .ozel-imlec input, .ozel-imlec select, .ozel-imlec textarea { cursor: auto; }
}
/* Başlık açılışı: varsayılan hâli GÖRÜNÜR, .in yalnız süs animasyonu oynatır */
.reveal.in h2 { animation: baslikAc 0.85s var(--ff-ease) both; }
@keyframes baslikAc {
  from { clip-path: inset(0 0 100% 0); transform: translateY(16px); }
  to   { clip-path: inset(-20% 0); transform: none; }
}

/* ── Arapça / sağdan sola yerleşim ───────────────────── */
html[dir="rtl"] {
  --govde: 'Noto Kufi Arabic', Tahoma, Arial, sans-serif;
}
html[dir="rtl"] body { line-height: 1.8; }
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
}
html[dir="rtl"] .marka__yazi,
html[dir="rtl"] .dil[lang="tr"],
html[dir="rtl"] .dil[lang="en"],
html[dir="rtl"] [dir="ltr"] {
  font-family: 'Archivo', system-ui, sans-serif;
}
html[dir="rtl"] .marka,
html[dir="rtl"] .marka__yazi { direction: ltr; }
html[dir="rtl"] .dil { letter-spacing: 0; }
html[dir="rtl"] .ilerleme { transform-origin: right; }
html[dir="rtl"] .kapak__scrim { transform: scaleX(-1); }
html[dir="rtl"] .kapak__kunye { right: auto; left: clamp(1rem, 3vw, 2.5rem); }
html[dir="rtl"] .uclu__kart--koyu li { padding-left: 0; padding-right: 1.15rem; }
html[dir="rtl"] .uclu__kart--koyu li::before { left: auto; right: 0; }
html[dir="rtl"] .uclu__halkalar img + img { margin-left: 0; margin-right: -22px; }
html[dir="rtl"] .uclu__kart--acik { padding-right: 1.7rem; padding-left: min(46%, 15rem); }
html[dir="rtl"] .uclu__ekip {
  right: auto; left: 0;
  -webkit-mask-image: linear-gradient(270deg, transparent, #000 24%);
  mask-image: linear-gradient(270deg, transparent, #000 24%);
}
html[dir="rtl"] .lamel__ad { left: auto; right: 0.9rem; }
html[dir="rtl"] .kare { text-align: right; }
html[dir="rtl"] .kare__instagram { right: auto; left: 0.85rem; }
html[dir="rtl"] .isikkutu__kapat,
html[dir="rtl"] .mobilmenu__kapat { right: auto; left: 0.8rem; }
html[dir="rtl"] .mobilcta { right: auto; left: 1rem; }
html[dir="rtl"] .blogv__bas p { margin-right: 0; margin-left: auto; }
html[dir="rtl"] .sistem__ozellikler li { padding-left: 0; padding-right: 1.2rem; }
html[dir="rtl"] .sistem__ozellikler li::before { left: auto; right: 0; }
html[dir="rtl"] .sistem__teknik th,
html[dir="rtl"] .sistem__teknik td { text-align: right; }

/* ══════════════════════════════════════════════════════════════
   MÜŞTERİ ODAKLI LACİVERT SİSTEM — 2026
   Dış mekânı ürün kataloğu gibi değil, yaşanacak bir sonuç gibi anlatır.
   ══════════════════════════════════════════════════════════════ */
:root {
  --lacivert: #102b50;
  --lacivert-koyu: #07182f;
  --gece: #040d1c;
  --gun: #f5f3ee;
  --gun-golge: #e9edf2;
  --gunes: #dceaff;
  --gunes-koyu: #7da8df;
  --murekkep: #10243e;
  --soluk: #627084;
  --bulut: #e9f0fa;
  --cizgi: rgba(16, 43, 80, 0.14);
  --kart-golge: 0 28px 80px rgba(7, 24, 47, 0.13);
  --yaricap: 24px;
}

html { scroll-padding-top: 6rem; background: var(--gece); }
body { background: var(--gun); color: var(--murekkep); overflow-x: clip; }
body::selection { background: var(--lacivert); color: #fff; }
h1, h2, h3 { letter-spacing: -0.045em; text-transform: none; }
h2 { font-size: clamp(2.45rem, 5vw, 5.5rem); line-height: 0.96; }
.tekcizim { opacity: 0.025 !important; }
.imlec-nokta, .imlec-halka, .imlec-dalga { display: none !important; }
html.ozel-imlec, html.ozel-imlec * { cursor: auto; }

.btn {
  min-height: 3rem; border-radius: 6px; letter-spacing: -0.01em;
  transition: transform .25s var(--ff-ease), background-color .25s, border-color .25s, color .25s;
}
.btn--gunes { background: var(--gunes); color: var(--lacivert-koyu); }
.btn--gunes:hover { background: #fff; color: var(--lacivert-koyu); }

/* Yüzen, sade navigasyon */
.ust {
  position: fixed; top: 14px; left: clamp(12px, 2vw, 28px); right: clamp(12px, 2vw, 28px);
  width: auto; height: 68px; padding: 0 14px 0 20px; z-index: 100;
  color: #fff; border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  background: rgba(4,13,28,.52); box-shadow: 0 14px 45px rgba(2,8,18,.16);
  backdrop-filter: blur(18px) saturate(125%); -webkit-backdrop-filter: blur(18px) saturate(125%);
}
.ust.dolu { background: rgba(4,13,28,.9); color: #fff; border-color: rgba(255,255,255,.1); }
.ust.dolu .dil { color: #fff; border-color: rgba(255,255,255,.2); }
.marka__isaret { color: var(--gunes); }
.marka__yazi { letter-spacing: .08em; }
.marka__yazi i { color: #a9bedc; }
.ust__nav { gap: clamp(.7rem, 1.8vw, 1.5rem); }
.ust__nav a { color: inherit; opacity: .72; font-size: .78rem; letter-spacing: .025em; }
.ust__nav a:hover { color: var(--gunes); opacity: 1; }
.ust__eylem .btn { min-height: 2.35rem; padding: .58em .95em; font-size: .75rem; }
.ust__eylem .btn--cizgi { color: #fff; border-color: rgba(255,255,255,.32); }
.ust__eylem .dil { color: #fff; border-color: rgba(255,255,255,.22); }

/* Hero: ürün değil, müşterinin elde edeceği yaşam alanı */
.kapak {
  min-height: 100svh; height: auto; display: flex; align-items: flex-end;
  position: relative; isolation: isolate; overflow: hidden; background: var(--gece);
}
.kapak__foto {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 58% 50%; animation: none; transform: none; filter: saturate(.9) contrast(1.03);
}
.kapak__golge { display: none; }
.kapak__scrim {
  position: absolute; inset: 0; clip-path: none; transform: none;
  background:
    linear-gradient(90deg, rgba(3,11,24,.92) 0%, rgba(3,11,24,.73) 34%, rgba(3,11,24,.16) 72%),
    linear-gradient(0deg, rgba(3,11,24,.72) 0%, transparent 42%);
}
.kapak__icerik {
  position: relative; inset: auto; z-index: 3; width: min(100%, 92rem); margin-inline: auto;
  padding: clamp(10rem, 18vh, 14rem) clamp(1.25rem, 5vw, 5rem) clamp(3rem, 7vh, 5.5rem);
}
.kapak__etiket, .iletisim__etiket {
  display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.25rem;
  color: #cfe1fa; font-size: .72rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase;
}
.kapak__etiket::before, .iletisim__etiket::before {
  content: ''; width: 2.4rem; height: 1px; background: currentColor;
}
.kapak__baslik {
  max-width: 12ch; color: #fff; font-size: clamp(3.25rem, 7.2vw, 7.8rem);
  line-height: .9; letter-spacing: -.075em; text-shadow: 0 6px 30px rgba(0,0,0,.16);
}
.kapak__alt { max-width: 47rem; margin-top: 1.5rem; color: rgba(237,244,255,.86); font-size: clamp(1rem, 1.6vw, 1.22rem); line-height: 1.6; }
.kapak__alt strong { color: #fff; }
.kapak__cta { margin-top: 2rem; gap: .8rem; }
.kapak__cta .btn { min-height: 3.35rem; padding-inline: 1.45rem; }
.kapak__guven {
  display: flex; flex-wrap: wrap; gap: 0; width: fit-content; margin-top: clamp(2.3rem, 5vh, 4rem);
  list-style: none; border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2);
}
.kapak__guven li { min-width: 10.5rem; display: grid; gap: .15rem; padding: .9rem 1.4rem .9rem 0; }
.kapak__guven li + li { padding-left: 1.4rem; border-left: 1px solid rgba(255,255,255,.2); }
.kapak__guven b { color: #fff; font-size: .88rem; }
.kapak__guven span { color: #9fb1c9; font-size: .72rem; }
.kapak__kunye { right: 2rem; bottom: 1.3rem; color: rgba(255,255,255,.48); letter-spacing: .04em; }

/* Değer önermesi */
.tanit { padding: clamp(5rem, 10vw, 10rem) clamp(1.25rem, 5vw, 5rem); background: var(--gun); }
.tanit__ic { max-width: 82rem; }
.tanit__soz { max-width: 27ch; margin: 0; font-size: clamp(2.25rem, 4.6vw, 5rem); line-height: 1.08; letter-spacing: -.055em; }
.tanit__soz em { color: var(--lacivert); box-shadow: none; font-style: normal; }

/* Güven ve teklif kartları */
.uclu { padding: 0 clamp(1.25rem, 4vw, 4rem) clamp(5rem, 9vw, 9rem); background: var(--gun); }
.uclu__izgara { max-width: 88rem; display: grid; grid-template-columns: 1.12fr 1fr .88fr; gap: 1rem; }
.uclu__kart { min-height: 27rem; padding: clamp(1.5rem, 3vw, 2.6rem); border-radius: var(--yaricap); box-shadow: none; overflow: hidden; }
.uclu__kart h3 { font-size: clamp(1.55rem, 2.5vw, 2.4rem); line-height: 1; }
.uclu__kart--koyu { background: linear-gradient(145deg, #0b2242, #061429); }
.uclu__kart--koyu p { color: #aebbd0; }
.uclu__kart--koyu li { color: #eaf1fb; }
.uclu__halkalar { margin-bottom: auto; }
.uclu__halkalar img { width: 3.4rem; height: 3.4rem; border: 2px solid #16345b; filter: saturate(.82); }
.uclu__kart--acik { background: #e8edf4; color: var(--lacivert-koyu); }
.uclu__kart--acik::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #e8edf4 22%, rgba(232,237,244,.88) 48%, rgba(232,237,244,.05)); pointer-events: none; }
.uclu__kart--acik > *:not(.uclu__ekip) { position: relative; z-index: 2; }
.uclu__kart--acik h3 { max-width: 15ch; font-size: clamp(1.55rem, 2.2vw, 2.2rem); }
.uclu__ekip {
  width: 68%; height: 100%; opacity: .76;
  object-position: 58% center;
  filter: saturate(.78) contrast(1.02);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%);
  mask-image: linear-gradient(90deg, transparent, #000 34%);
}
.uclu__kart--sari { background: #dce9f8; color: var(--lacivert-koyu); }
.uclu__sayi { font-size: clamp(6rem, 11vw, 9rem); color: #0c2a52; opacity: 1; }
.uclu__cipler span { border-color: rgba(7,24,47,.22); background: rgba(255,255,255,.36); }

/* Çözümler: yüksek kaliteli, okunabilir kartlar */
.sistemler { padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 4vw, 4rem); background: var(--lacivert-koyu); color: #fff; }
.sistemler__bas { max-width: 88rem; margin-bottom: 3rem; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(18rem,.65fr); gap: 2rem; align-items: end; }
.sistemler__bas h2 { color: #fff; max-width: 11ch; }
.sistemler__bas p { max-width: 38rem; margin: 0; color: #9cadc4; font-size: 1.05rem; line-height: 1.65; }
.lameller { max-width: 88rem; height: auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.lamel {
  min-width: 0; height: clamp(30rem, 48vw, 40rem); position: relative; flex: none; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--yaricap); background: #09172b; cursor: default;
}
.lamel img { width: 100%; height: 100%; opacity: .92; transform: none; filter: saturate(.86); transition: transform .65s var(--ff-ease), filter .4s; }
.lamel:hover img { transform: scale(1.035); filter: saturate(1); }
.lamel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,13,28,.15), rgba(4,13,28,.06) 40%, rgba(4,13,28,.92)); pointer-events: none; }
.lamel__kapak { inset: 0 auto auto 0; width: 100%; height: auto; display: flex; justify-content: space-between; align-items: center; padding: 1.25rem; z-index: 3; background: transparent; border: 0; color: #fff; }
.lamel__no { color: #b9cae0; font-size: .68rem; font-weight: 800; letter-spacing: .14em; }
.lamel__ad { position: static; opacity: 1; writing-mode: horizontal-tb; transform: none; color: #fff; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.lamel__detay { inset: auto 1.5rem 1.5rem 1.5rem; opacity: 1; translate: none; z-index: 3; pointer-events: auto; }
.lamel__detay h3 { display: none; }
.lamel__detay p { max-width: 39rem; margin: 0; color: #d5dfec; font-size: clamp(.92rem, 1.25vw, 1.06rem); line-height: 1.6; }
.lamel__incele { display: inline-flex; align-items: center; min-height: 2.7rem; margin-top: 1.1rem; padding: .6rem .9rem; border: 1px solid rgba(255,255,255,.28); border-radius: 5px; color: #fff; font-size: .75rem; letter-spacing: .03em; }
.lamel__incele:hover { background: #fff; color: var(--lacivert-koyu); border-color: #fff; }
.sistemler__not { max-width: 88rem; margin-top: 1.5rem; padding: 1rem 1.15rem; border: 1px solid rgba(255,255,255,.1); border-radius: 9px; background: rgba(255,255,255,.035); color: #9cadc4; }

/* Müşteri yolculuğu */
.saha { padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 4vw, 4rem); background: #e9edf2; }
.saha__bas { max-width: 88rem; margin-bottom: 3.2rem; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(18rem,.7fr); gap: 2rem; align-items: end; }
.saha__bas h2 { max-width: 11ch; }
.saha__bas p { max-width: 39rem; margin: 0; font-size: 1.04rem; line-height: 1.7; }
.surec { max-width: 88rem; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem; }
.surec__adim { overflow: hidden; border: 1px solid var(--cizgi); border-radius: 18px; background: rgba(255,255,255,.72); box-shadow: 0 14px 45px rgba(7,24,47,.055); }
.surec__adim img { aspect-ratio: 4 / 3.35; filter: saturate(.72); transition: filter .3s, transform .5s var(--ff-ease); }
.surec__adim:hover img { filter: saturate(1); transform: scale(1.025); }
.surec__yazi { min-height: 10.5rem; display: grid; align-content: start; gap: .7rem; padding: 1.25rem; }
.surec__yazi b { color: var(--lacivert); font-size: .78rem; letter-spacing: .05em; }
.surec__yazi span { color: var(--soluk); line-height: 1.55; }
.saha__kanit { max-width: 88rem; margin-top: clamp(3.5rem, 7vw, 7rem); gap: 0; border-radius: var(--yaricap); overflow: hidden; background: var(--lacivert-koyu); color: #fff; }
.saha__kanit figure { min-width: 0; }
.saha__kanit figure img { height: 100%; aspect-ratio: 4/3; filter: saturate(.68) contrast(1.03); }
.saha__kanit figcaption { padding: .65rem 1rem; color: #9eb0c9; background: #08172c; }
.saha__ulkeler { display: grid; align-content: center; padding: clamp(2rem, 5vw, 5rem); }
.saha__ulkeler h3 { color: #fff; font-size: clamp(1.8rem, 3vw, 3rem); }
.saha__ulkeler ul { margin-top: 1.4rem; }
.saha__ulkeler li { border-color: rgba(220,234,255,.34); color: #dceaff; }
.saha__ulkeler p { color: #9eb0c9; line-height: 1.65; }

/* Akşam kullanım senaryosu */
.gece {
  min-height: min(88svh, 58rem); margin: clamp(.7rem, 2vw, 1.5rem); border-radius: 28px;
  overflow: hidden; background: var(--gece); box-shadow: var(--kart-golge);
}
.gece--perde { position: relative; display: flex; align-items: flex-end; }
.gece--perde::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,11,24,.91), rgba(3,11,24,.52) 44%, rgba(3,11,24,.1)); }
.gece .perde__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.gece__yazi { position: relative; inset: auto; z-index: 2; max-width: 52rem; padding: clamp(2rem, 7vw, 7rem); }
.gece__yazi h2 { color: #fff; }
.gece__yazi p { max-width: 38rem; color: #c5d2e3; font-size: 1.05rem; line-height: 1.7; }

/* Referanslar */
.galeri { padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 4vw, 4rem); background: var(--gun); }
.galeri__bas { max-width: 88rem; margin-bottom: 2.8rem; display: grid; grid-template-columns: 1fr .65fr; gap: 2rem; align-items: end; }
.galeri__bas h2 { max-width: 9ch; }
.galeri__bas p { max-width: 38rem; margin: 0; line-height: 1.65; }
.galeri__izgara { max-width: 88rem; display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 1rem; }
.kare-sarici { display: flex; grid-column: span 4; border-radius: 18px; overflow: hidden; background: var(--lacivert-koyu); }
.kare-sarici:first-child { grid-column: span 7; }
.kare-sarici:nth-child(2) { grid-column: span 5; }
.kare { min-height: 28rem; height: 100%; }
.kare-sarici:first-child .kare, .kare-sarici:nth-child(2) .kare { min-height: 36rem; }
.kare::before { background: linear-gradient(180deg, transparent 45%, rgba(3,11,24,.88)); }
.kare img { position: absolute; inset: 0; aspect-ratio: auto; filter: saturate(.77) contrast(1.02); }
.kare:hover img { filter: saturate(1); transform: scale(1.025); }
.kare__yazi { padding: 1.35rem; }
.kare__yazi b { font-size: 1.05rem; }
.kare__instagram { border-radius: 5px; background: rgba(4,13,28,.82); backdrop-filter: blur(8px); }

/* İletişim: sonuç odaklı final */
.iletisim {
  width: calc(100% - clamp(1.4rem, 4vw, 3rem)); max-width: 92rem; margin: 0 auto clamp(.7rem,2vw,1.5rem);
  padding: clamp(2rem, 6vw, 6rem); gap: clamp(2.5rem, 7vw, 7rem); border-radius: 28px;
  background: linear-gradient(145deg, #0d2b52, #06152b); color: #fff;
}
.iletisim__etiket { color: #bcd2ee; }
.iletisim__sol h2 { max-width: 11ch; color: #fff; }
.iletisim__sol address { color: #b8c5d7; }
.iletisim__sol a { color: #fff; }
.iletisim__form { max-width: 34rem; padding: clamp(1.4rem, 3vw, 2.2rem); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.055); box-shadow: 0 24px 60px rgba(0,0,0,.13); }
.iletisim__form label { color: #d9e3f0; }
.iletisim__form input, .iletisim__form select { min-height: 3.3rem; border: 1px solid rgba(255,255,255,.17); border-radius: 7px; background: rgba(2,9,20,.42); color: #fff; }
.iletisim__form select option { color: var(--murekkep); background: #fff; }
.iletisim__form input:focus, .iletisim__form select:focus { border-color: #cfe1fa; outline: 3px solid rgba(207,225,250,.12); }
.iletisim .btn--gunes { background: var(--gunes); color: var(--lacivert-koyu); }
.iletisim .btn--gunes:hover { background: #fff; color: var(--lacivert-koyu); }
.iletisim__not { color: #9eafc6; line-height: 1.5; }
.alt { padding: 4rem 1.25rem; background: var(--gece); color: #93a6c0; }
.alt .marka__isaret { color: var(--gunes); }

/* Kurumsal footer */
.alt--ana {
  position: relative; overflow: hidden; padding: 0; background: #041020;
  color: #9fb0c6; text-align: start; font-size: .9rem;
}
.alt--ana::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .42;
  background:
    radial-gradient(circle at 8% 0%, rgba(61,125,196,.24), transparent 25rem),
    linear-gradient(rgba(169,202,239,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169,202,239,.035) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
  mask-image: linear-gradient(to bottom, #000, transparent 88%);
}
.alt__kapsayici {
  position: relative; z-index: 1; width: min(100%, 96rem); margin-inline: auto;
  padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 3.5rem) 0;
}
.alt__cta {
  display: grid; grid-template-columns: minmax(17rem, .78fr) minmax(35rem, 1.22fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(1.6rem, 4vw, 3rem);
  border: 1px solid rgba(180,211,244,.16); border-radius: 24px;
  background: linear-gradient(135deg, rgba(20,62,108,.88), rgba(8,31,60,.9));
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}
.alt__cta-metin h2 {
  max-width: 14ch; margin-top: .7rem; color: #fff;
  font-size: clamp(2rem, 4vw, 4rem); line-height: .96; letter-spacing: -.055em;
}
.alt__cta-metin > p { max-width: 44ch; margin-top: 1rem; color: #b7c7da; line-height: 1.65; }
.alt--ana .iletisim__etiket { color: #bcd2ee; }
.alt--ana .iletisim__form {
  display: grid; gap: 1rem; width: 100%; max-width: none; padding: clamp(1.1rem, 2.5vw, 1.6rem);
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  background: rgba(2,12,27,.32); box-shadow: none;
}
.iletisim__alanlar { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .8rem; }
.alt--ana .iletisim__form label { min-width: 0; color: #d9e3f0; }
.alt--ana .iletisim__form input,
.alt--ana .iletisim__form select {
  width: 100%; min-height: 3.15rem; border: 1px solid rgba(255,255,255,.17); border-radius: 8px;
  background: rgba(2,9,20,.48); color: #fff;
}
.alt--ana .iletisim__form select option { color: var(--murekkep); background: #fff; }
.alt--ana .iletisim__form input:focus,
.alt--ana .iletisim__form select:focus { border-color: #cfe1fa; outline: 3px solid rgba(207,225,250,.12); }
.iletisim__aksiyon { display: flex; align-items: center; gap: 1rem; }
.alt--ana .iletisim__aksiyon .btn { flex: none; }
.alt--ana .iletisim__not { max-width: 35ch; margin: 0; color: #8fa3bd; line-height: 1.45; }
.alt--ana .btn--gunes { background: var(--gunes); color: var(--lacivert-koyu); }
.alt--ana .btn--gunes:hover { background: #fff; color: var(--lacivert-koyu); }
.alt__ana {
  display: grid; grid-template-columns: minmax(18rem, 1.45fr) repeat(2, minmax(9rem, .68fr)) minmax(17rem, 1.15fr);
  gap: clamp(2rem, 4vw, 4rem); padding: clamp(3.5rem, 7vw, 6.5rem) 0;
}
.alt__marka { display: inline-flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; }
.alt--ana .alt__marka .marka__isaret { width: 2.6rem; height: 2.6rem; margin: 0; color: #cfe1fa; }
.alt__marka > span { display: grid; gap: .1rem; }
.alt__marka strong { color: #fff; font-size: 1rem; letter-spacing: .12em; }
.alt__marka small { color: #788ea8; font-size: .62rem; letter-spacing: .14em; }
.alt__marka-kol > p { max-width: 31rem; margin-top: 1.35rem; color: #93a6bf; line-height: 1.7; }
.alt__whatsapp {
  display: inline-flex; align-items: center; gap: .55rem; width: fit-content; margin-top: 1.35rem;
  color: #d9e9ff; font-weight: 800; text-decoration: none;
}
.alt__whatsapp::before { content: ''; width: .55rem; height: .55rem; border-radius: 50%; background: #52d696; box-shadow: 0 0 0 5px rgba(82,214,150,.1); }
.alt__whatsapp:hover { color: #fff; }
.alt__kol { display: grid; align-content: start; gap: .72rem; }
.alt__kol h3 { margin-bottom: .4rem; color: #fff; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.alt__kol > a { width: fit-content; color: #91a5bf; line-height: 1.45; text-decoration: none; transition: color .25s, translate .25s; }
.alt__kol > a:hover { color: #fff; translate: .22rem 0; }
html[dir="rtl"] .alt__kol > a:hover { translate: -.22rem 0; }
.alt__iletisim address { display: grid; gap: .8rem; color: #9fb0c6; font-style: normal; line-height: 1.55; }
.alt__iletisim address p { margin: 0; }
.alt__iletisim address b { color: #fff; }
.alt__iletisim address a { width: fit-content; color: #d3e2f5; text-decoration-color: rgba(211,226,245,.34); text-underline-offset: .22rem; }
.alt__iletisim address a:hover { color: #fff; text-decoration-color: currentColor; }
.alt__taban {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.5rem; padding: 1.1rem 0 1.5rem;
  border-top: 1px solid rgba(178,207,240,.12); color: #7489a3; font-size: .74rem;
}
.alt--ana p { max-width: none; margin-inline: 0; }
.alt__diller { display: flex; gap: .35rem; margin-inline-start: auto; }
.alt__diller a {
  display: grid; place-items: center; min-width: 2.15rem; min-height: 2.15rem; border: 1px solid rgba(180,211,244,.14);
  border-radius: 6px; color: #8297b0; font-size: .67rem; font-weight: 800; text-decoration: none;
}
.alt__diller a:hover, .alt__diller a[aria-current="page"] { border-color: rgba(207,225,250,.5); background: rgba(207,225,250,.08); color: #fff; }
.alt--ana a.alt__don {
  display: inline-block; margin: 0; padding: .5em .75em; border: 1px solid rgba(180,211,244,.14);
  border-radius: 6px; color: #9fb2ca; font-weight: 700; text-decoration: none;
}
.alt--ana a.alt__don:hover { border-color: rgba(207,225,250,.5); color: #fff; }
.alt--ana .alt__imza { max-width: none; margin: 0; padding: 0; border: 0; color: #7388a1; }
.alt--ana .alt__imza svg { color: #8da4bf; }

@media (max-width: 1100px) {
  .alt__cta { grid-template-columns: 1fr; }
  .alt__cta-metin h2 { max-width: 18ch; }
  .alt__ana { grid-template-columns: 1.4fr 1fr 1fr; }
  .alt__iletisim { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid rgba(178,207,240,.12); }
  .alt__iletisim address { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .alt--ana .alt__taban { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 720px) {
  .alt__kapsayici { padding: .7rem .7rem 0; }
  .alt__cta { gap: 1.5rem; padding: 1.35rem; border-radius: 18px; }
  .alt__cta-metin h2 { font-size: clamp(2rem, 10vw, 3rem); }
  .iletisim__alanlar { grid-template-columns: 1fr; }
  .iletisim__aksiyon { align-items: stretch; flex-direction: column; }
  .alt--ana .iletisim__aksiyon .btn { width: 100%; }
  .alt__ana { grid-template-columns: 1fr 1fr; gap: 2.3rem 1.2rem; padding: 3rem .45rem; }
  .alt__marka-kol, .alt__iletisim { grid-column: 1 / -1; }
  .alt__iletisim address { grid-template-columns: 1fr; }
  .alt__taban {
    align-items: flex-start; flex-direction: column; padding-inline: .45rem;
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
  }
  .alt__diller { margin-inline-start: 0; }
  .alt--ana .alt__imza { justify-content: flex-start; }
  html[dir="rtl"] .alt--ana .alt__imza { justify-content: flex-end; }
}

@media (max-width: 420px) {
  .alt__ana { grid-template-columns: 1fr; }
  .alt__marka-kol, .alt__iletisim { grid-column: auto; }
}

html[dir="rtl"] .kapak__scrim { transform: none; background: linear-gradient(270deg, rgba(3,11,24,.92) 0%, rgba(3,11,24,.72) 36%, rgba(3,11,24,.14) 74%), linear-gradient(0deg, rgba(3,11,24,.72), transparent 42%); }
html[dir="rtl"] .kapak__guven li { padding: .9rem 0 .9rem 1.4rem; }
html[dir="rtl"] .kapak__guven li + li { padding-right: 1.4rem; padding-left: 1.4rem; border-left: 0; border-right: 1px solid rgba(255,255,255,.2); }
html[dir="rtl"] .gece--perde::after { background: linear-gradient(270deg, rgba(3,11,24,.91), rgba(3,11,24,.52) 44%, rgba(3,11,24,.1)); }
html[dir="rtl"] .uclu__kart--acik::after { background: linear-gradient(270deg, #e8edf4 22%, rgba(232,237,244,.88) 48%, rgba(232,237,244,.05)); }

/* ── Mobil ────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Mobil animasyon diyeti: tam-ekran katman animasyonları telefonu yorar.
     Kayan gölge statik dokuya döner, hero yaklaşması kapanır; kısa tek
     seferlik girişler (yukar, kademe) kalır. */
  .kapak__foto { animation: none; }
  .kapak__golge { animation: none; }
  /* Kaydırma açığa-çıkışları mobilde kapalı: metin "sonradan yükleniyor"
     hissi veriyordu. İçerik zaten varsayılan görünür; animasyon hiç oynamaz.
     DİKKAT: h2'nin AYRI başlık animasyonu (baslikAc) var — o da kapatılmalı. */
  .reveal.in, .reveal.in h2, .saha__ulkeler.reveal.in li { animation: none; }

  .ust__nav, .ust__eylem { display: none; }
  .mobilcta { display: flex; }
  .ust__menu {
    display: grid; gap: 5px; margin-left: auto;
    align-content: center; justify-items: center;
    width: 44px; height: 44px; /* dokunma hedefi */
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  .ust__menu span { width: 26px; height: 2.5px; background: currentColor; transition: transform 0.3s, opacity 0.3s; }
  .ust__menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .ust__menu[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .ust__menu[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

  .lameller { flex-direction: column; height: auto; }
  /* Panjur gibi süzülerek açılır (masaüstündeki flex geçişinin mobil karşılığı) */
  .lamel { min-height: 64px; flex: none; transition: min-height 0.55s var(--ff-ease); }
  .lamel.acik { min-height: 380px; flex: none; }
  /* Dokunma geri bildirimi: karta basılıyken duotone perde kalkar */
  .kare:active::before { opacity: 0; transition-duration: 0.15s; }
  .kare:active img { filter: none; }
  .mobilcta:active { scale: 0.9; }
  .lamel__ad { writing-mode: horizontal-tb; transform: none; left: 1rem; top: 50%; bottom: auto; translate: 0 -50%; }
  .lamel.acik .lamel__ad { opacity: 0; }

  .gece--perde { min-height: 64vh; }
  .perde { min-height: 52vh; }
  .gece__yazi { justify-self: start; }
  .saha__kanit { grid-template-columns: 1fr; }
  .kapak__kunye { display: none; }
}

@media (max-width: 900px) {
  .yazi-sayfa .ust { gap: 0.7rem; }
  .yazi-sayfa .ust__eylem {
    display: flex;
    gap: 0.35rem;
    margin-inline-start: auto;
  }
  .yazi-sayfa .ust__eylem .btn { display: none; }
  .yazi-sayfa .ust__eylem .dil { padding: 0.45em 0.62em; font-size: 0.7rem; }
  html[dir="rtl"] .ust__menu { margin-left: 0; margin-right: auto; }
  html[dir="rtl"] .lamel__ad { left: auto; right: 1rem; }
}

/* ── Hareket azaltma ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kapak__golge, .kapak__foto { animation: none; }
  .kapak__baslik, .kapak__alt, .kapak__cta { animation: none; }
  .lamel, .lamel img, .lamel__detay, .kare img, .kare::before, .btn, .mobilcta, .imlec-halka,
  .alt__kol > a { transition: none; }
  .reveal.in, .reveal.in h2, .saha__ulkeler.reveal.in li { animation: none; }
  .marka .marka__isaret path, .isikkutu[open], .isikkutu[open]::backdrop { animation: none; }
  .imlec-nokta, .imlec-halka, .imlec-dalga { display: none; }
  .ilerleme { display: none; }
}

/* Son mobil düzen: yeni kart sisteminin eski akordeon kurallarından etkilenmesini önler. */
@media (max-width: 900px) {
  h2 { font-size: clamp(2.3rem, 11vw, 4.4rem); }
  .ust { top: 10px; left: 10px; right: 10px; height: 60px; padding: 0 8px 0 15px; }
  .marka__yazi { font-size: .86rem; }
  .ust__menu { color: #fff; }

  .kapak { min-height: 100svh; }
  .kapak__foto { object-position: 63% 50%; }
  .kapak__scrim { background: linear-gradient(0deg, rgba(3,11,24,.95) 0%, rgba(3,11,24,.7) 46%, rgba(3,11,24,.2) 82%); }
  .kapak__icerik { padding: 8.5rem 1.15rem 2.1rem; }
  .kapak__etiket { margin-bottom: 1rem; font-size: .64rem; }
  .kapak__baslik { max-width: none; font-size: clamp(2.65rem, 13.3vw, 4rem); line-height: .91; }
  .kapak__alt { max-width: 34rem; font-size: .95rem; line-height: 1.55; }
  .kapak__cta { display: grid; grid-template-columns: 1fr; width: min(100%, 25rem); }
  .kapak__cta .btn { width: 100%; }
  .kapak__guven { width: 100%; display: grid; grid-template-columns: repeat(3,1fr); margin-top: 2rem; }
  .kapak__guven li { min-width: 0; padding: .75rem .65rem .75rem 0; }
  .kapak__guven li + li { padding-left: .65rem; }
  .kapak__guven b { font-size: .72rem; }
  .kapak__guven span { font-size: .62rem; line-height: 1.25; }

  .tanit { padding: 5.5rem 1.15rem; }
  .tanit__soz { font-size: clamp(2.05rem, 9vw, 3.4rem); }
  .uclu { padding: 0 1.05rem 5.5rem; }
  .uclu__izgara { grid-template-columns: 1fr; }
  .uclu__kart { min-height: 23rem; }
  .uclu__kart--acik { min-height: 26rem; }
  .uclu__kart--sari { min-height: 22rem; }

  .sistemler, .saha, .galeri { padding: 5.5rem 1.05rem; }
  .sistemler__bas, .saha__bas, .galeri__bas { display: grid; grid-template-columns: 1fr; gap: 1.2rem; margin-bottom: 2.2rem; }
  .sistemler__bas p, .saha__bas p, .galeri__bas p { margin: 0; }
  .lameller { display: grid; grid-template-columns: 1fr; gap: .9rem; height: auto; }
  .lamel, .lamel.acik { min-height: 0; height: 31rem; flex: none; border-radius: 18px; }
  .lamel__kapak { inset: 0 auto auto 0; height: auto; padding: 1.05rem; }
  .lamel__ad { position: static; inset: auto; translate: none; opacity: 1; }
  .lamel__detay { inset: auto 1.05rem 1.05rem; opacity: 1; translate: none; }

  .surec { grid-template-columns: 1fr; }
  .surec__adim { display: grid; grid-template-columns: minmax(8rem,.8fr) minmax(0,1.2fr); }
  .surec__adim img { width: 100%; height: 100%; aspect-ratio: auto; }
  .surec__yazi { min-height: 10rem; }
  .saha__kanit { grid-template-columns: 1fr; border-radius: 18px; }
  .saha__kanit figure img { aspect-ratio: 16/10; }
  .saha__ulkeler { padding: 2rem 1.2rem 2.3rem; }

  .gece { min-height: 43rem; margin: .7rem; border-radius: 18px; }
  .gece--perde::after { background: linear-gradient(0deg, rgba(3,11,24,.95), rgba(3,11,24,.52) 62%, rgba(3,11,24,.08)); }
  .gece__yazi { padding: 2rem 1.3rem; }
  .gece__yazi p { font-size: .96rem; }

  .galeri__izgara { grid-template-columns: 1fr; }
  .kare-sarici, .kare-sarici:first-child, .kare-sarici:nth-child(2) { grid-column: auto; }
  .kare, .kare-sarici:first-child .kare, .kare-sarici:nth-child(2) .kare { min-height: 25rem; }

  .iletisim { width: calc(100% - 1.4rem); margin: 0 .7rem .7rem; padding: 3.5rem 1.15rem; grid-template-columns: 1fr; border-radius: 18px; }
  .iletisim__form { width: 100%; padding: 1.15rem; }

  html[dir="rtl"] .kapak__scrim { background: linear-gradient(0deg, rgba(3,11,24,.95) 0%, rgba(3,11,24,.7) 46%, rgba(3,11,24,.2) 82%); }
  html[dir="rtl"] .kapak__guven li { padding: .75rem 0 .75rem .65rem; }
  html[dir="rtl"] .kapak__guven li + li { padding-right: .65rem; padding-left: .65rem; }
}

/* ── HAREKET SİSTEMİ 2026 ────────────────────────────────
   Mobilde ve masaüstünde yalnız kompozitör dostu transform + opacity.
   İçerik JS çalışmasa bile görünür kalır; animasyon sadece .in ile oynar. */
:root { --ff-sakin: cubic-bezier(.22, 1, .36, 1); }
.kapak__icerik {
  width: 100%; max-width: none; margin-inline: 0;
  padding-inline: clamp(1.25rem, 5vw, 5rem);
}
.kapak__baslik { max-width: 13.5ch; font-size: clamp(3.25rem, 6.3vw, 7.2rem); }

@keyframes heroFotoGir {
  from { opacity: 1; transform: scale(1.032); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes heroIcerikGir {
  from { opacity: 1; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes bolumGir {
  from { opacity: 1; transform: translate3d(0, 24px, 0) scale(.992); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes bolumGirMobil {
  from { opacity: 1; transform: translate3d(0, 18px, 0) scale(.996); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes medyaYerles {
  from { transform: scale(1.045); }
  to { transform: scale(1); }
}
@keyframes menuGir {
  from { opacity: 1; transform: translate3d(0, -10px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes menuBaglantiGir {
  from { opacity: 1; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes cizgiCek {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes kartVurgu {
  from { box-shadow: inset 0 1px 0 rgba(255,255,255,0); }
  to { box-shadow: inset 0 1px 0 rgba(255,255,255,.16); }
}
@keyframes chatVurgu {
  0%, 20% { opacity: 0; transform: scale(.88); }
  42% { opacity: .26; }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes ulkeGir {
  from { opacity: 1; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.kapak__foto { animation: heroFotoGir 1.9s var(--ff-sakin) both; }
.kapak__etiket { animation: heroIcerikGir .9s var(--ff-sakin) .14s both; }
.kapak__baslik { animation: heroIcerikGir 1.15s var(--ff-sakin) .28s both; }
.kapak__alt { animation: heroIcerikGir 1.05s var(--ff-sakin) .48s both; }
.kapak__cta { animation: heroIcerikGir 1.05s var(--ff-sakin) .66s both; }
.kapak__guven { animation: heroIcerikGir 1.05s var(--ff-sakin) .82s both; }
.kapak__baslik { color: #fff; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kapak__baslik {
    background: linear-gradient(118deg, #fff 0%, #fff 72%, #c9ddf6 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.kapak__etiket::before {
  transform-origin: left center;
  animation: cizgiCek 1.15s var(--ff-sakin) .12s both;
}
html[dir="rtl"] .kapak__etiket::before { transform-origin: right center; }

.reveal.in {
  animation: bolumGir 1.05s var(--ff-sakin) backwards;
  animation-delay: calc(var(--reveal-order, 0) * 95ms);
}
.reveal.in h2 { animation: none; }
.lamel.reveal.in > img,
.surec__adim.reveal.in img,
.kare-sarici.reveal.in .kare img {
  animation: medyaYerles 1.35s var(--ff-sakin);
}
.saha__ulkeler.reveal.in li { animation-name: ulkeGir; animation-duration: .78s; animation-timing-function: var(--ff-sakin); }

/* Başlık çizgileri: parlamadan, yavaşça çizilen bölüm imzası. */
.reveal.in h2::after,
.saha__ulkeler.reveal.in h3::after {
  content: ''; display: block; width: clamp(3rem, 7vw, 6.5rem); height: 2px; margin-top: 1.05rem;
  background: linear-gradient(90deg, #9dbce2, transparent);
  transform-origin: left center; animation: cizgiCek 1.2s var(--ff-sakin) .22s both;
}
html[dir="rtl"] .reveal.in h2::after,
html[dir="rtl"] .saha__ulkeler.reveal.in h3::after {
  background: linear-gradient(270deg, #9dbce2, transparent); transform-origin: right center;
}

/* Sistem başlığının altında tek seferlik, ince teknik hat. */
.lamel__kapak::after {
  content: ''; position: absolute; left: 1.25rem; right: 1.25rem; bottom: 0;
  height: 1px; background: linear-gradient(90deg, rgba(220,234,255,.72), rgba(220,234,255,0));
  transform: scaleX(0); transform-origin: left center;
}
.lamel.reveal.in .lamel__kapak::after { animation: cizgiCek 1.35s var(--ff-sakin) .28s both; }
html[dir="rtl"] .lamel__kapak::after {
  background: linear-gradient(270deg, rgba(220,234,255,.72), rgba(220,234,255,0));
  transform-origin: right center;
}

/* Kontrollü etkileşimler: yalnız hover destekleyen cihazlarda. */
.uclu__kart, .surec__adim, .kare-sarici {
  transition: transform .65s var(--ff-sakin), box-shadow .65s var(--ff-sakin), border-color .45s;
}
.kare__yazi { transition: transform .65s var(--ff-sakin); }
@media (hover: hover) and (pointer: fine) {
  .uclu__kart:hover, .surec__adim:hover {
    transform: translate3d(0, -6px, 0);
    box-shadow: 0 26px 65px rgba(7,24,47,.13);
  }
  .kare-sarici:hover { transform: translate3d(0, -5px, 0); box-shadow: 0 24px 60px rgba(7,24,47,.16); }
  .kare-sarici:hover .kare__yazi { transform: translate3d(0, -4px, 0); }
}

/* Düğme üzerinde sadece etkileşim sırasında görünen yumuşak ışık izi. */
.btn { position: relative; isolation: isolate; overflow: hidden; }
.btn::after {
  content: ''; position: absolute; inset: -45% auto -45% -55%; z-index: 0; pointer-events: none;
  width: 38%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  transform: skewX(-18deg) translateX(-220%);
  transition: transform .95s var(--ff-sakin);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover::after { transform: skewX(-18deg) translateX(520%); }
}

@media (max-width: 900px) {
  /* Sabit blur katmanı kaydırma sırasında düşük donanımlı telefonları yormasın. */
  .ust {
    background: rgba(4,13,28,.92);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .kapak__icerik { width: 100%; margin: 0; padding-inline: 1.15rem; }
  .kapak__baslik {
    max-width: none; font-size: clamp(2.65rem, 13.3vw, 4rem);
    animation-duration: 1s; animation-timing-function: var(--ff-sakin); animation-delay: .24s;
  }
  .kapak__foto { animation: heroFotoGir 1.45s var(--ff-sakin) both; }
  .kapak__etiket { animation-duration: .75s; animation-timing-function: var(--ff-sakin); animation-delay: .1s; }
  .kapak__alt { animation-duration: .9s; animation-timing-function: var(--ff-sakin); animation-delay: .4s; }
  .kapak__cta { animation-duration: .9s; animation-timing-function: var(--ff-sakin); animation-delay: .56s; }
  .kapak__guven { animation-duration: .9s; animation-timing-function: var(--ff-sakin); animation-delay: .7s; }

  .reveal.in {
    animation: bolumGirMobil .82s var(--ff-sakin) backwards;
    animation-delay: calc(var(--reveal-order, 0) * 70ms);
  }
  .lamel.reveal.in > img,
  .surec__adim.reveal.in img,
  .kare-sarici.reveal.in .kare img { animation-duration: 1.05s; }

  .mobilmenu:not([hidden]) { animation: menuGir .45s var(--ff-sakin) both; }
  .mobilmenu:not([hidden]) > a {
    animation: menuBaglantiGir .6s var(--ff-sakin) both;
  }
  .mobilmenu:not([hidden]) > a:nth-of-type(1) { animation-delay: .08s; }
  .mobilmenu:not([hidden]) > a:nth-of-type(2) { animation-delay: .14s; }
  .mobilmenu:not([hidden]) > a:nth-of-type(3) { animation-delay: .2s; }
  .mobilmenu:not([hidden]) > a:nth-of-type(4) { animation-delay: .26s; }
  .mobilmenu:not([hidden]) > a:nth-of-type(5) { animation-delay: .32s; }
  .mobilmenu:not([hidden]) > a:nth-of-type(6) { animation-delay: .38s; }
  .mobilmenu:not([hidden]) > a:nth-of-type(7) { animation-delay: .44s; }
}

@media (prefers-reduced-motion: reduce) {
  .kapak__foto, .kapak__etiket, .kapak__baslik, .kapak__alt,
  .kapak__cta, .kapak__guven, .reveal.in, .reveal.in h2,
  .lamel.reveal.in > img, .surec__adim.reveal.in img,
  .kare-sarici.reveal.in .kare img, .saha__ulkeler.reveal.in li,
  .mobilmenu:not([hidden]), .mobilmenu:not([hidden]) > a {
    animation: none !important;
  }
  .kapak__etiket::before, .reveal.in h2::after,
  .saha__ulkeler.reveal.in h3::after, .lamel.reveal.in .lamel__kapak::after,
  .proje-chat__ac::before { animation: none !important; transform: none; }
}

/* ── PROJE ASİSTANI ────────────────────────────────────── */
.proje-chat {
  position: fixed; right: 1.25rem; bottom: 1.25rem;
  z-index: calc(var(--z-isikkutu) - 8);
  font-family: var(--govde); color: var(--murekkep);
}
.proje-chat__ac {
  position: relative; isolation: isolate;
  min-height: 3.5rem; display: inline-flex; align-items: center; gap: .7rem;
  padding: .75rem 1rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  background: #071a35; color: #fff; box-shadow: 0 18px 46px rgba(2,9,20,.28);
  font: inherit; font-size: .82rem; font-weight: 750; cursor: pointer;
  transition: transform .25s var(--ff-ease), background-color .25s, opacity .2s;
}
.proje-chat__ac::before {
  content: ''; position: absolute; inset: -1px; z-index: -1; border: 1px solid #83a9d7;
  border-radius: inherit; pointer-events: none;
  animation: chatVurgu 2.1s var(--ff-sakin) 2.2s both;
}
.proje-chat__ac:hover { transform: translateY(-2px); background: #0d2d57; }
.proje-chat__ac:active { transform: scale(.97); }
.proje-chat-acik .proje-chat__ac { opacity: 0; pointer-events: none; }
.proje-chat__ac svg {
  width: 1.35rem; height: 1.35rem; fill: none; stroke: #dce9f8;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.proje-chat__panel {
  position: absolute; right: 0; bottom: 4.65rem;
  width: min(25rem, calc(100vw - 2rem)); height: min(40rem, calc(100dvh - 7rem));
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 22px;
  background: #f5f3ee; box-shadow: 0 28px 80px rgba(2,9,20,.32);
  animation: projeChatGir .52s var(--ff-sakin) both;
}
.proje-chat__panel[hidden] { display: none; }
@keyframes projeChatGir {
  from { opacity: 1; transform: translate3d(0, 16px, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.proje-chat__bas {
  min-height: 4.7rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem; background: linear-gradient(135deg, #0d2b52, #06152b); color: #fff;
}
.proje-chat__kimlik { min-width: 0; display: flex; align-items: center; gap: .75rem; }
.proje-chat__isaret {
  width: 2.55rem; height: 2.55rem; flex: none; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: #dce9f8; color: #071a35;
  font-size: .9rem; font-weight: 850;
}
.proje-chat__kimlik div { min-width: 0; display: grid; gap: .12rem; }
.proje-chat__kimlik strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.proje-chat__kimlik div > span {
  display: flex; align-items: center; gap: .38rem; color: #b7c8dd; font-size: .68rem; line-height: 1.3;
}
.proje-chat__kimlik div > span::before {
  content: ''; width: .42rem; height: .42rem; flex: none; border-radius: 50%; background: #7fd4a6;
  box-shadow: 0 0 0 3px rgba(127,212,166,.12);
}
.proje-chat__kapat {
  width: 2.6rem; height: 2.6rem; flex: none; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: transparent; color: #fff;
  font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.proje-chat__kapat:hover { background: rgba(255,255,255,.1); }
.proje-chat__mesajlar {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
  padding: 1rem; background:
    radial-gradient(circle at 100% 0, rgba(205,223,246,.45), transparent 34%),
    #f5f3ee;
}
.proje-chat__satir { display: grid; gap: .25rem; margin-bottom: .85rem; }
.proje-chat__etiket { color: #6d7887; font-size: .62rem; font-weight: 720; letter-spacing: .025em; }
.proje-chat__balon {
  width: fit-content; max-width: 88%; margin: 0; padding: .78rem .88rem; border-radius: 15px 15px 15px 4px;
  background: #fff; color: #162338; box-shadow: 0 8px 24px rgba(7,24,47,.07);
  font-size: .83rem; line-height: 1.52; text-wrap: pretty;
}
.proje-chat__satir--kullanici { justify-items: end; }
.proje-chat__satir--kullanici .proje-chat__balon {
  border-radius: 15px 15px 4px 15px; background: #0d2b52; color: #fff;
}
.proje-chat__secenekler { display: flex; flex-wrap: wrap; gap: .45rem; margin: .1rem 0 1rem; }
.proje-chat__secenek {
  min-height: 2.55rem; padding: .55rem .72rem; border: 1px solid #b6c6da; border-radius: 999px;
  background: rgba(255,255,255,.82); color: #0b2344; font: inherit; font-size: .72rem; font-weight: 720;
  text-align: start; cursor: pointer; transition: border-color .2s, background-color .2s, transform .2s var(--ff-ease);
}
.proje-chat__secenek:hover { border-color: #0d2b52; background: #e4edf8; transform: translateY(-1px); }
.proje-chat__secenekler:not(.proje-chat__secenekler--aktif) .proje-chat__secenek { opacity: .48; pointer-events: none; }
.proje-chat__form {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .5rem;
  padding: .8rem; border-top: 1px solid #d9dde3; background: rgba(255,255,255,.92);
}
.proje-chat__input {
  width: 100%; min-width: 0; min-height: 3rem; padding: .72rem .82rem;
  border: 1px solid #c7ced8; border-radius: 10px; background: #fff; color: #13213a;
  font: inherit; font-size: .82rem;
}
.proje-chat__input:focus { border-color: #0d2b52; outline: 3px solid rgba(13,43,82,.1); }
.proje-chat__gonder {
  min-height: 3rem; padding: .65rem .85rem; border: 0; border-radius: 10px;
  background: #0d2b52; color: #fff; font: inherit; font-size: .75rem; font-weight: 760; cursor: pointer;
}
.proje-chat__gonder:hover { background: #154273; }

html[dir="rtl"] .proje-chat { right: auto; left: 1.25rem; }
html[dir="rtl"] .proje-chat__panel { right: auto; left: 0; }
html[dir="rtl"] .proje-chat__balon { border-radius: 15px 15px 4px 15px; }
html[dir="rtl"] .proje-chat__satir--kullanici .proje-chat__balon { border-radius: 15px 15px 15px 4px; }

@media (max-width: 900px) {
  .proje-chat { right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .proje-chat-wa-gor .proje-chat { right: 5.6rem; }
  .proje-chat__ac {
    width: 3.4rem; height: 3.4rem; min-height: 0; justify-content: center; padding: 0;
    border-radius: 50%; background: #0d2b52;
  }
  .proje-chat__ac span {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .proje-chat__ac svg { width: 1.45rem; height: 1.45rem; }
  .proje-chat__panel {
    position: fixed; left: .7rem; right: .7rem; bottom: calc(.7rem + env(safe-area-inset-bottom));
    width: auto; height: min(44rem, calc(100dvh - 1.4rem - env(safe-area-inset-bottom)));
    max-height: none; border-radius: 20px;
  }
  .proje-chat-acik .mobilcta { opacity: 0; pointer-events: none; }
  .proje-chat__mesajlar { padding: .9rem; }
  .proje-chat__balon { max-width: 92%; font-size: .82rem; }
  .proje-chat__secenek { min-height: 2.7rem; }
  html[dir="rtl"] .proje-chat { right: auto; left: 1rem; }
  html[dir="rtl"] .proje-chat-wa-gor .proje-chat { right: auto; left: 5.6rem; }
  html[dir="rtl"] .proje-chat__panel { right: .7rem; left: .7rem; }
  .kapak__icerik { padding-bottom: 5.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .proje-chat__panel { animation: none; }
  .proje-chat__ac, .proje-chat__secenek { transition: none; }
}

/* ── SİSTEM DETAY SAYFALARI ───────────────────────────── */
.ust__eylem .btn { min-width: max-content; white-space: nowrap; }
.sistem-sayfa { background: #f5f3ee; }
.sistem-sayfa .ust {
  position: sticky; top: 0; left: auto; right: auto; height: auto;
  padding: .8rem clamp(1rem, 4vw, 3rem); border-radius: 0;
  background: #071a35; color: #fff; box-shadow: 0 12px 40px rgba(2,9,20,.16);
}
.sistem-sayfa .ust.dolu .dil { border-color: rgba(255,255,255,.28); }
.sistem-sayfa .ust__nav a { color: #d6e1ee; }
.sistem-sayfa h2 { font-size: clamp(2.5rem, 5vw, 5.3rem); line-height: .94; letter-spacing: -.045em; }
.sistem-hero {
  width: min(100%, 100rem); min-height: 45rem; margin-inline: auto;
  display: grid; grid-template-columns: minmax(0,.85fr) minmax(28rem,1.15fr); align-items: stretch;
  padding: clamp(1.2rem, 3vw, 2.6rem); gap: clamp(1.4rem, 3vw, 3rem);
}
.sistem-hero__icerik { align-self: center; padding: clamp(1.2rem, 4vw, 4rem); }
.sistem-ekmek { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-bottom: clamp(2.5rem, 6vw, 5rem); color: #66758a; font-size: .78rem; }
.sistem-ekmek a { text-underline-offset: .25em; }
.sistem-ustetiket { margin: 0 0 .8rem; color: #5279a9; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.sistem-hero h1 { max-width: 10ch; font-size: clamp(3.4rem, 6vw, 6.6rem); line-height: .88; letter-spacing: -.055em; }
.sistem-kullanim { margin-top: 1.35rem; color: #526174; font-size: .9rem; font-weight: 680; }
.sistem-ozet { max-width: 48rem; margin-top: 1rem; color: #344257; font-size: clamp(1rem, 1.4vw, 1.18rem); line-height: 1.65; }
.sistem-hero__aksiyon { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.sistem-hero__aksiyon .btn--cizgi { border-color: #8b98a9; color: #132d50; }
.sistem-guven { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; margin-top: clamp(2.6rem, 5vw, 4.5rem); list-style: none; border-block: 1px solid #d6d9dd; }
.sistem-guven li { padding: .9rem 1rem .9rem 0; color: #43536a; font-size: .75rem; font-weight: 700; line-height: 1.35; }
.sistem-guven li + li { padding-inline-start: 1rem; border-inline-start: 1px solid #d6d9dd; }
.sistem-hero__gorsel { min-height: 38rem; overflow: hidden; border-radius: 30px; background: #dce6f1; }
.sistem-hero__gorsel img { width: 100%; height: 100%; object-fit: cover; }

.sistem-bilgi,
.sistem-kullanimlar,
.sistem-surec,
.sistem-projeler,
.sistem-sss,
.sistem-diger { padding: clamp(5rem, 9vw, 9rem) clamp(1.15rem, 5vw, 5rem); }
.sistem-bilgi { display: grid; grid-template-columns: minmax(18rem,.8fr) minmax(22rem,1.2fr); gap: clamp(2rem, 7vw, 8rem); background: #fff; }
.sistem-bilgi__bas { max-width: 38rem; }
.sistem-bilgi__govde { max-width: 50rem; color: #435066; font-size: clamp(1.05rem, 1.45vw, 1.24rem); line-height: 1.75; }
.sistem-bilgi__govde p + p { margin-top: 1.2rem; }
.sistem-ozellikler { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; }
.sistem-ozellikler article { min-height: 12rem; display: grid; align-content: space-between; gap: 2rem; padding: 1.25rem; border: 1px solid #d9dfe6; border-radius: 18px; background: #f5f3ee; }
.sistem-ozellikler span { color: #7595bd; font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.sistem-ozellikler p { max-width: 22ch; color: #112c4e; font-size: 1rem; font-weight: 760; line-height: 1.4; }
.sistem-teknik { grid-column: 1 / -1; margin-top: 1rem; padding: clamp(1.3rem, 3vw, 2.4rem); border-radius: 18px; background: #e8eef5; }
.sistem-teknik h3 { margin-bottom: 1rem; }
.sistem-teknik table { width: 100%; border-collapse: collapse; }
.sistem-teknik th, .sistem-teknik td { padding: .8rem 0; border-bottom: 1px solid #cbd6e2; text-align: start; }
.sistem-teknik th { width: 40%; color: #53657c; }

.sistem-kullanimlar { display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; align-items: start; background: #071a35; color: #fff; }
.sistem-kullanimlar .sistem-ustetiket { color: #9ebde2; }
.sistem-kullanimlar ul { display: flex; flex-wrap: wrap; gap: .7rem; list-style: none; }
.sistem-kullanimlar li { padding: .8rem 1rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #e9f0f8; font-weight: 720; }
.sistem-kullanimlar > p { grid-column: 2; max-width: 48rem; color: #99abc1; }

.sistem-bolum-bas { max-width: 90rem; margin: 0 auto 2.8rem; display: grid; grid-template-columns: minmax(0,1fr) minmax(18rem,.55fr); gap: 2rem; align-items: end; }
.sistem-bolum-bas > p { max-width: 40rem; color: #5f6f83; line-height: 1.7; }
.sistem-surec { background: #e9eff6; }
.sistem-surec__izgara { max-width: 90rem; margin-inline: auto; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; list-style: none; }
.sistem-surec__izgara li { overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 20px 55px rgba(8,27,53,.08); }
.sistem-surec__izgara img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.sistem-surec__izgara div { min-height: 13rem; display: grid; align-content: start; gap: .65rem; padding: 1.25rem; }
.sistem-surec__izgara span { color: #6b8eb9; font-size: .68rem; font-weight: 850; letter-spacing: .12em; }
.sistem-surec__izgara b { color: #0b274a; font-size: 1rem; text-transform: uppercase; }
.sistem-surec__izgara p { color: #5b6879; font-size: .9rem; line-height: 1.55; }

.sistem-projeler { background: #f5f3ee; }
.sistem-projeler__izgara { max-width: 90rem; margin-inline: auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; }
.sistem-projeler__izgara article { position: relative; min-height: 31rem; overflow: hidden; border-radius: 22px; background: #0a1d38; }
.sistem-projeler__izgara img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.04); transition: transform .55s var(--ff-ease), filter .4s; }
.sistem-projeler__izgara article::after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent,rgba(2,9,20,.9)); }
.sistem-projeler__izgara div { position: absolute; z-index: 1; inset: auto 1.2rem 1.2rem; display: grid; gap: .15rem; color: #fff; }
.sistem-projeler__izgara b { font-size: 1.05rem; text-transform: uppercase; }
.sistem-projeler__izgara span { color: #c2d0e0; font-size: .78rem; }
.sistem-projeler__izgara article:hover img { transform: scale(1.035); filter: saturate(1) contrast(1.02); }
.sistem-proje-not { max-width: 90rem; margin: 1rem auto 0; color: #6b7685; font-size: .82rem; }

.sistem-sss { background: #fff; }
.sistem-sss__liste { max-width: 90rem; margin-inline: auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; }
.sistem-sss details { padding: 1.3rem; border: 1px solid #d9e0e8; border-radius: 16px; background: #f7f8fa; }
.sistem-sss summary { color: #0c294e; font-weight: 800; cursor: pointer; }
.sistem-sss details p { margin-top: 1rem; color: #5b6878; line-height: 1.65; }
.sistem-diger { background: #071a35; color: #fff; }
.sistem-diger .sistem-ustetiket { color: #99b9df; }
.sistem-diger__izgara { max-width: 90rem; margin-inline: auto; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; }
.sistem-diger__izgara > a { overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.04); text-decoration: none; }
.sistem-diger__izgara img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.sistem-diger__izgara div { display: grid; gap: .55rem; padding: 1.1rem; }
.sistem-diger__izgara b { text-transform: uppercase; }
.sistem-diger__izgara span { color: #aebed1; font-size: .86rem; line-height: 1.55; }

.sistem-kapanis { margin: clamp(.7rem, 2vw, 1.5rem); padding: clamp(4rem, 9vw, 8rem) clamp(1.3rem, 6vw, 6rem); border-radius: 28px; background: linear-gradient(135deg,#0c315d,#06152b); color: #fff; text-align: center; }
.sistem-kapanis .sistem-ustetiket { color: #a9c5e7; }
.sistem-kapanis h2 { max-width: 14ch; margin-inline: auto; }
.sistem-kapanis > p:not(.sistem-ustetiket) { max-width: 50rem; margin: 1.2rem auto 0; color: #b7c6d8; }
.sistem-kapanis > div { display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.sistem-alt { display: grid; justify-items: center; gap: 1rem; }
.sistem-alt__marka { color: #fff; text-decoration: none; }
.sistem-alt__marka .marka__isaret { margin: 0; }
.sistem-alt__wa { color: #dce9f8; font-weight: 760; text-underline-offset: .25em; }

html[dir="rtl"] .sistem-guven li { padding: .9rem 0 .9rem 1rem; }
html[dir="rtl"] .sistem-guven li + li { padding-inline-start: 1rem; }

/* İletişim katmanı: tek mobil giriş, içerik kadar büyüyen panel. */
.proje-chat__panel { height: auto; max-height: min(40rem, calc(100dvh - 7rem)); }
.proje-chat__mesajlar { max-height: 29rem; }

@media (max-width: 900px) {
  .tanit { padding: 4.2rem 1.15rem; }
  .tanit__soz { font-size: clamp(1.9rem, 7.8vw, 2.8rem); line-height: 1.08; letter-spacing: -.045em; }
  .uclu { padding-bottom: 4.2rem; }
  .uclu__kart { min-height: auto; padding: 1.4rem; }
  .uclu__kart--koyu { min-height: 20rem; }
  .uclu__kart--acik { min-height: 21rem; }
  .uclu__kart--sari { min-height: 17rem; }
  .lamel, .lamel.acik { height: 28rem; }
  .kare, .kare-sarici:first-child .kare, .kare-sarici:nth-child(2) .kare { min-height: 22rem; }

  .proje-chat-hazir .mobilcta { opacity: 0; pointer-events: none; }
  .proje-chat-wa-gor .proje-chat, .proje-chat { right: 1rem; }
  html[dir="rtl"] .proje-chat-wa-gor .proje-chat, html[dir="rtl"] .proje-chat { right: auto; left: 1rem; }
  .proje-chat__panel {
    height: auto; max-height: calc(100dvh - 1.4rem - env(safe-area-inset-bottom));
    grid-template-rows: auto minmax(0,auto) auto;
  }
  .proje-chat__mesajlar { max-height: calc(100dvh - 12rem); }

  .sistem-sayfa .ust { top: 0; left: 0; right: 0; height: 64px; padding: 0 .8rem; }
  .sistem-sayfa .ust__nav { display: none; }
  .sistem-sayfa .ust__eylem { display: flex; gap: .35rem; margin-inline-start: auto; }
  .sistem-sayfa .ust__eylem .btn { display: none; }
  .sistem-sayfa .ust__eylem .dil { padding: .45em .62em; font-size: .7rem; }
  .sistem-sayfa h2 { font-size: clamp(2.25rem, 10.4vw, 3.5rem); }
  .sistem-hero { min-height: 0; grid-template-columns: 1fr; padding: .75rem; gap: .8rem; }
  .sistem-hero__icerik { padding: 3.2rem .55rem 1.2rem; }
  .sistem-ekmek { margin-bottom: 2.5rem; }
  .sistem-hero h1 { max-width: 11ch; font-size: clamp(2.9rem, 13vw, 4.1rem); }
  .sistem-hero__aksiyon { display: grid; }
  .sistem-hero__aksiyon .btn { width: 100%; text-align: center; }
  .sistem-guven { grid-template-columns: 1fr; }
  .sistem-guven li, html[dir="rtl"] .sistem-guven li { padding: .75rem 0; }
  .sistem-guven li + li, html[dir="rtl"] .sistem-guven li + li { padding-inline-start: 0; border-inline-start: 0; border-top: 1px solid #d6d9dd; }
  .sistem-hero__gorsel { order: -1; min-height: 20rem; border-radius: 20px; }
  .sistem-hero__gorsel img { aspect-ratio: 4/3; }
  .sistem-bilgi, .sistem-kullanimlar, .sistem-surec, .sistem-projeler, .sistem-sss, .sistem-diger { padding: 4.5rem 1rem; }
  .sistem-bilgi { grid-template-columns: 1fr; gap: 2rem; }
  .sistem-ozellikler { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .sistem-ozellikler article { min-height: 10.5rem; padding: 1rem; }
  .sistem-ozellikler p { font-size: .9rem; }
  .sistem-kullanimlar { grid-template-columns: 1fr; gap: 1.6rem; }
  .sistem-kullanimlar > p { grid-column: auto; }
  .sistem-bolum-bas { grid-template-columns: 1fr; gap: 1rem; margin-bottom: 2rem; }
  .sistem-surec__izgara, .sistem-projeler__izgara, .sistem-diger__izgara {
    margin-inline: -1rem; padding-inline: 1rem; display: grid; grid-auto-flow: column;
    grid-template-columns: none; grid-auto-columns: min(84vw,22rem); gap: .7rem;
    overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: none;
  }
  .sistem-surec__izgara::-webkit-scrollbar, .sistem-projeler__izgara::-webkit-scrollbar, .sistem-diger__izgara::-webkit-scrollbar { display: none; }
  .sistem-surec__izgara li, .sistem-projeler__izgara article, .sistem-diger__izgara > a { scroll-snap-align: start; }
  .sistem-surec__izgara div { min-height: 11rem; }
  .sistem-projeler__izgara article { min-height: 25rem; }
  .sistem-sss__liste { grid-template-columns: 1fr; }
  .sistem-kapanis { border-radius: 20px; }
}

@media (max-width: 420px) {
  .sistem-ozellikler { grid-template-columns: 1fr; }
  .sistem-ozellikler article { min-height: 8.5rem; }
}