/* ═══ ERSOY TENTE — "Gölge Hattı" ═══════════════════════════
   Konsept: sayfa güneş/gölge ritmiyle akar. Lacivert = gölge,
   beyaz = güneş, sarı = ışık vurgusu. 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.84 0.155 88);
  --gunes-koyu:    oklch(0.72 0.15 80);
  --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; }
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.88 0.15 90); 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 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 {
  position: relative;
  border: 0; padding: 0; background: var(--lacivert-koyu);
  cursor: zoom-in; overflow: hidden; display: block;
  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);
}

.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; }
}

/* ── 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 { 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; }
}

/* ── 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 { transition: none; }
  .reveal.in, .reveal.in h2 { animation: none; }
  .marka .marka__isaret path, .isikkutu[open], .isikkutu[open]::backdrop { animation: none; }
  .imlec-nokta, .imlec-halka, .imlec-dalga { display: none; }
  .ilerleme { display: none; }
}