/* =====================================================
   ydiji — Ana Sayfa Stilleri
   Koyu zemin + altın vurgu, tasarım görseline sadık
   ===================================================== */

:root {
  --renk-zemin: #0a0908;        /* Ana koyu arka plan */
  --renk-zemin-rgb: 10, 9, 8;   /* Degrade harmanlama için */
  --renk-metin: #f2ede6;        /* Kırık beyaz metin */
  --renk-metin-soluk: #b9b1a6;  /* İkincil metin */
  --renk-altin: #d9a253;        /* Altın vurgu rengi */
  --renk-altin-koyu: #a97c3e;   /* Kenarlık / hover tonu */
  --font-ana: "Poppins", system-ui, -apple-system, sans-serif;
  --font-serif: "Marcellus", "Times New Roman", serif;   /* Projeler — Canela (horizonte) karşılığı */
  --font-mono: "IBM Plex Mono", ui-monospace, monospace; /* Projeler — Apercu Mono karşılığı */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ana);
  background: var(--renk-zemin);
  color: var(--renk-metin);
  overflow-x: hidden;
  min-height: 100vh;
}

/* ================= ÜST MENÜ ================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem clamp(1.5rem, 5vw, 4.5rem);
  /* Hero artık beyaz (cover.html): menü arkasını hafifçe beyazlatarak okunurluğu koru */
  background: linear-gradient(to bottom, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0));
}

.logo img {
  height: 42px;
  width: auto;
  display: block;
}

/* Cam (glassmorphism) menü — dört köşesi eşit yarıçaplı, hafif büyütülmüş kapsül.
   site-header'ın içinde logodan bağımsız, ekranın tam ortasında durur. */
.site-nav {
  /* Beyaz hero üzerinde koyu mürekkep; mobil koyu panelde krem ile ezilir */
  --nav-ikon: #1b1b1d;
  --nav-etiket: #5a5a5e;

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 560px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0 2.4rem;
  border-radius: 30px;
  border: 1.5px solid rgba(17, 17, 18, .16);
  background: rgba(255, 255, 255, .45);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.site-nav a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .4rem .5rem;
  border-radius: 14px;
  color: var(--nav-ikon);
  text-decoration: none;
  transition: background .3s ease;
}

.nav-ikon {
  width: 20px;
  height: 20px;
  color: var(--nav-ikon);
  opacity: .7;
  transition: opacity .3s ease, color .3s ease, transform .3s ease;
}

.nav-etiket {
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nav-etiket);
  transition: color .3s ease;
}

/* Cam menü butonlarına hover: hafif vurgu + altın ikon/etiket */
.site-nav a:hover {
  background: rgba(17, 17, 18, .05);
}

.site-nav a:hover .nav-ikon {
  opacity: 1;
  color: var(--renk-altin);
  transform: translateY(-2px);
}

.site-nav a:hover .nav-etiket {
  color: var(--renk-altin);
}

/* Mobil menü düğmesi (masaüstünde gizli) */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
  z-index: 110;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  /* Beyaz hero üzerinde koyu; menü açılınca (koyu panel) krem olur */
  background: #1b1b1d;
  transition: transform .3s ease, opacity .3s ease, background .3s ease;
}

.nav-toggle.acik span {
  background: var(--renk-metin);
}

/* ================= HERO ================= */

.hero {
  /* Sticky: hizmetler bölümü hero'nun üzerine perde gibi kayar */
  position: sticky;
  top: 0;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* Katmanlar (cover.html) yüklenene dek koyu zemin parlamasın */
  background: #fff;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 clamp(1.5rem, 5vw, 4.5rem);
  max-width: 720px;
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.01em;
}

.hero h1 .accent {
  color: var(--renk-altin);
}

.hero-sub {
  margin-top: 1.8rem;
  font-size: clamp(.9rem, 1.4vw, 1.05rem);
  font-weight: 300;
  line-height: 1.7;
  color: var(--renk-metin-soluk);
}

/* CTA düğmesi — ince altın kenarlıklı, tasarımdaki gibi sade */
.btn-cta {
  display: inline-block;
  margin-top: 2.6rem;
  padding: .85rem 2.2rem;
  border: 1px solid var(--renk-altin-koyu);
  border-radius: 4px;
  color: var(--renk-metin);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  background: rgba(217, 162, 83, .06);
  transition: background .35s ease, border-color .35s ease, color .35s ease;
}

.btn-cta:hover {
  background: var(--renk-altin);
  border-color: var(--renk-altin);
  color: var(--renk-zemin);
}

/* ============ ARKA PLAN: KATMANLI KAPAK (cover.html + yndex.html) ============ */

.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 1;
}

/* İki tam ekran katman üst üste: her ikisi de kendi sayfasında animasyonlu.
   pointer-events yok — kaydırma ve menü etkileşimi hero'da kalır. */
.hero-katman {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
  background: transparent;
}

/* Arka katman: beyaz zemin + ortada ydiji imzası + palet animasyonu */
.hero-kapak {
  z-index: 1;
  background: #fff;
}

/* Ön katman: şeffaf zeminli, salınan yapraklar */
.hero-yapraklar {
  z-index: 2;
}

/* "ydiji creative" (galeri, beyaz #F1F0EE) yaklaştıkça hero'nun altını aynı
   beyaza harmanlar — hero'nun canlı rengi (ör. mercan) galerinin beyazına
   aniden sıçramadan, kademeli geçer. Opaklık scrollGuncelle() içinde
   galeri'nin --gecis ilerlemesiyle birebir senkron güncellenir (main.js). */
.hero-gecis-beyaz {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(241, 240, 238, 1) 0%, rgba(241, 240, 238, 0) 100%);
  opacity: 0;
  pointer-events: none;
}

/* ============ GİRİŞ ANİMASYONLARI ============ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  animation: revealUp .9s ease forwards;
}

.delay-1 { animation-delay: .25s; }
.delay-2 { animation-delay: .5s; }

@keyframes revealUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hareket azaltma tercihi olan kullanıcılar için animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ============ ÜST MENÜ GİZLENMESİ ============ */

/* Aşağı inince üst menü kaybolur, yerini nav-cip alır */
.site-header {
  transition: transform .45s ease, opacity .45s ease;
}

.site-header.gizli {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* ============ STICKY İKON MENÜSÜ (nav-cip) ============ */

.nav-cip {
  position: fixed;
  top: 1.1rem;
  left: 50%;
  transform: translate(-50%, -180%);
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.nav-cip.gorunur {
  transform: translate(-50%, 0);
}

.cip-dugme {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(217, 162, 83, .4);
  background: rgba(var(--renk-zemin-rgb), .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.cip-dugme:hover {
  border-color: var(--renk-altin);
  box-shadow: 0 0 26px rgba(217, 162, 83, .28);
  transform: scale(1.05);
}

.cip-dugme img {
  width: 26px;
  height: 26px;
  display: block;
}

.cip-nav {
  display: flex;
  gap: 1.5rem;
  padding: .7rem 1.5rem;
  border-radius: 999px;
  border: 1px solid rgba(217, 162, 83, .3);
  background: rgba(var(--renk-zemin-rgb), .9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
}

.nav-cip.acik .cip-nav {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.cip-nav a {
  color: var(--renk-metin);
  text-decoration: none;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .3s ease;
}

.cip-nav a:hover {
  color: var(--renk-altin);
}

/* ================= HİZMETLER ================= */

.hizmetler {
  position: relative;
  z-index: 8; /* En son bölüm: projelerin üzerine perde gibi kayar */
  /* Hafif şeffaf siyah: arkadaki katman (sticky hero) çok az hissedilir */
  background: rgba(var(--renk-zemin-rgb), .9);
  min-height: 100vh;
  padding: clamp(5.5rem, 14vh, 10rem) clamp(1.5rem, 5vw, 4.5rem);
  overflow: hidden;
}

/* --- Arka plan: kıvrımlı yollarda akan yazılar (tasarım1.mp4 efekti) --- */

.akis {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.akis-yazi {
  font-family: var(--font-ana);
  font-size: 42px;
  font-weight: 500;
  letter-spacing: .7em; /* Videodaki gibi seyrek harfler */
  text-transform: uppercase;
}

/* Yazı renkleri: sarı ve beyaz (not1.md) */
.akis-yazi-altin { fill: var(--renk-altin); opacity: .6; }
.akis-yazi-beyaz { fill: var(--renk-metin); opacity: .42; }
.akis-yazi-soluk { fill: var(--renk-altin); opacity: .26; }

/* --- İçerik --- */

.hizmetler-ic {
  position: relative;
  z-index: 2;
  max-width: 1150px;
  margin: 0 auto;
}

.bolum-etiket {
  color: var(--renk-altin);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}

.bolum-baslik {
  font-size: clamp(2rem, 4.5vw, 3.3rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.bolum-alt {
  margin-top: 1.2rem;
  color: var(--renk-metin-soluk);
  font-weight: 300;
  font-size: clamp(.9rem, 1.3vw, 1.05rem);
}

.hizmet-listesi {
  margin-top: clamp(3rem, 7vh, 5rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 5rem);
}

.hizmet {
  border-top: 1px solid rgba(217, 162, 83, .28);
  padding-top: 1.6rem;
  transition: border-color .4s ease;
}

.hizmet:hover {
  border-color: var(--renk-altin);
}

.hizmet-no {
  display: block;
  color: var(--renk-altin);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .2em;
  margin-bottom: .9rem;
}

.hizmet-baslik {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  font-weight: 500;
  line-height: 1.3;
}

.hizmet-aciklama {
  margin-top: .8rem;
  color: var(--renk-metin-soluk);
  font-weight: 300;
  font-size: .92rem;
  line-height: 1.75;
}

/* ================= GALERİ (Projeler ve Görsellerimiz) ================= */

.galeri {
  --yc-bg: #F1F0EE;    /* ydiji-creative-studio.html şablonundaki zemin */
  --yc-ink: #111112;
  --yc-grey: #8d8d8f;
  --yc-ease: cubic-bezier(.22, .9, .24, 1);

  position: relative;
  z-index: 4; /* Hero'nun üzerine kayar, projelerin altında kalır */
  background: var(--yc-bg); /* Şablondaki gibi beyaz zemin korunuyor */
  min-height: 100vh;
  overflow: hidden;
}

/* Arka plan yazısı: "ydiji" + "creative" — tam ortada belirir, ayrılır,
   kartlar büyümeye başlar başlamaz hızla kaybolur (yc-t-out) — kartlarla
   asla üst üste görünmemesi için kısa bir geçiş süresi kullanılır */
.yc-arkayazi {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: opacity .25s ease;
}

.galeri.yc-t-out .yc-arkayazi {
  opacity: 0;
}

.yc-arkayazi h2 {
  display: flex;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 8.6vw, 6.6rem);
  letter-spacing: -.01em;
  text-transform: lowercase;
  white-space: nowrap;
  color: var(--yc-ink);
}

/* Şablondaki gibi: önce iki kelime birlikte belirir (t-in), sonra sağa-sola ayrılır (t-split) */
.yc-bw {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  transition: transform 1.1s var(--yc-ease), opacity .7s ease;
}

.galeri.yc-t-in .yc-bw {
  opacity: 1;
  transform: translateY(0);
}

.yc-bw:first-child {
  margin-right: .28em;
}

.galeri.yc-t-split .yc-bw:first-child {
  transform: translateX(calc(-1 * min(34vw, 360px)));
}

.galeri.yc-t-split .yc-bw:last-child {
  transform: translateX(min(34vw, 360px));
}

/* --- Kart destesi --- */

.yc-deck {
  position: absolute;
  inset: 0;
  z-index: 2;
  touch-action: pan-y; /* Yatay sürükleme kartları gezdirir, dikey sayfayı kaydırır */
  cursor: grab;
  outline: none;
}

.yc-deck.yc-suruklen {
  cursor: grabbing;
}

.yc-card {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .14);
  will-change: transform, width;
  user-select: none;
  cursor: pointer;
}

.yc-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.yc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .45));
  pointer-events: none;
}

.yc-card .yc-tag {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .3s ease;
}

.yc-card.yc-merkez .yc-tag {
  opacity: 1;
}

/* --- Sıradaki proje küçük kartı --- */

.yc-new {
  position: absolute;
  left: clamp(1rem, 4vw, 2.5rem);
  bottom: clamp(1.2rem, 5vh, 2.5rem);
  z-index: 5;
  width: 78px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s ease, transform .7s var(--yc-ease);
}

.galeri.yc-ui-in .yc-new {
  opacity: 1;
  transform: none;
}

.yc-new-lbl {
  padding: .32rem .7rem;
  border-radius: 999px;
  background: linear-gradient(#fff, #ececec);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--yc-ink);
}

.yc-new-thumb {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 14px 30px rgba(0, 0, 0, .14);
  background: #ddd;
}

.yc-new-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- İpucu yazısı --- */

.yc-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 4vh, 1.6rem);
  transform: translateX(-50%);
  z-index: 5;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--yc-grey);
  opacity: 0;
  transition: opacity .7s ease;
}

.galeri.yc-ui-in .yc-hint {
  opacity: 1;
  animation: ycIpucuSon 4s 2.5s forwards;
}

@keyframes ycIpucuSon {
  to { opacity: 0; visibility: hidden; }
}

/* ================= PROJELER (hero-projects) ================= */
/* Horizonte tarzı: bej eskiz zemin, tam ekran 2'li ızgara */

.hero-projects {
  --kroki-zemin: #e9e5dc;   /* Horizonte bej zemini */
  --kroki-cizgi: #c9c3b3;   /* Eskiz çizgi rengi */
  --kroki-metin: #33312a;   /* Koyu gri-kahve metin */
  --kroki-ayrac: rgba(63, 60, 50, .22); /* Hücre ayırıcı çizgiler */

  position: relative;
  z-index: 6; /* Hizmetlerin üzerine perde gibi kayar */
  background: var(--kroki-zemin);
  color: var(--kroki-metin);
  overflow: hidden;
}

/* Eskiz arka planı: pattern tüm bölüm boyunca döşenir */
.kroki {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.kroki path {
  fill: none;
  stroke: var(--kroki-cizgi);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Izgara: yan yana 2 proje, her satır tam ekran --- */

.proje-izgara {
  position: relative;
  z-index: 2;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 100vh;
}

.proje {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
}

/* İnce ayırıcılar: ortada dikey, satırlar arasında yatay */
.proje:nth-child(even) {
  border-left: 1px solid var(--kroki-ayrac);
}

.proje:nth-child(n+3) {
  border-top: 1px solid var(--kroki-ayrac);
}

/* Tek kalan son proje tam genişlik kaplar */
.proje:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* --- Hover'da hücreyi dolduran görsel --- */

.proje-foto {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .6s ease, transform 1.2s cubic-bezier(.22, 1, .36, 1);
  /* Görsel dosyası eklenene kadar görünen yer tutucu zemin */
  background: linear-gradient(160deg, #ddd2b8, #bb9660);
}

/* Arka dolgu: aynı medyanın bulanık "ambilight" kopyası hücreyi doldurur */
.proje-foto .foto-fon {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(20px) brightness(.5) saturate(1.1);
  transform: scale(1.15);
}

/* Medyanın kendisi: kendi oranında, kırpılmadan, çerçeveli */
.proje-foto img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 84%;
  max-height: 74%;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .5);
  display: block;
}

/* Proje videoları: hücreyi kenara kadar tam dolduracak şekilde kırpılır
   (video zaten hücre oranına göre ölçeklenerek hazırlandı, boşluk bırakmaz) */
.proje-foto video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dosya henüz yoksa kırık resim ikonu görünmesin (yer tutucu kalır) */
.proje.resim-yok .proje-foto img {
  display: none;
}

/* Yazı okunsun diye üzerine çok hafif koyu perde */
.proje-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(22, 18, 12, .16);
}

/* --- Hücre yazısı: ortalanmış serif ad + altında küçük mono etiket --- */

.proje-yazi {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 1.5rem;
  transition: opacity .5s ease;
}

.proje-ad {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.8vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kroki-metin);
  transition: color .5s ease;
}

.proje-sec {
  display: block;
  margin-top: 1.3rem;
  font-family: var(--font-mono);
  font-size: .6rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #6d685a;
  transition: color .5s ease;
}

@media (hover: hover) {
  .proje:hover .proje-foto {
    opacity: 1;
    transform: scale(1);
  }

  /* Medya açılınca yazı kaybolsun, çakışmasın */
  .proje:hover .proje-yazi {
    opacity: 0;
    pointer-events: none;
  }
}

/* Dokunmatik cihazlar: önce bej tasarım görünür, dokununca medya açılır (JS .acik ekler) */
.proje.acik .proje-foto {
  opacity: 1;
  transform: scale(1);
}

/* Medya açıkken yazı gizli; tekrar dokunup tasarıma dönünce geri gelir */
.proje.acik .proje-yazi {
  opacity: 0;
  pointer-events: none;
}

/* ================= VERİLER (kayan bant + istatistik kartları) ================= */

.veriler {
  position: relative;
  z-index: 7; /* Projelerin üzerine kayar, hizmetlerin altında kalır */
  /* Hafif şeffaf siyah: arkadaki katman çok az hissedilir */
  background: rgba(var(--renk-zemin-rgb), .9);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Akışkan iz tuvali: tüm bölümün arkasında */
.akiskan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
}

/* --- Kayan yazı bandı (marquee) --- */

.kayan-bant {
  position: relative;
  z-index: 2;
  overflow: hidden;
  background: var(--renk-altin);
  color: var(--renk-zemin);
  padding: .95rem 0;
}

.bant-ic {
  display: flex;
  width: max-content;
  animation: bantKay 24s linear infinite;
}

.bant-grup {
  white-space: nowrap;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

@keyframes bantKay {
  to { transform: translateX(-50%); }
}

/* --- İstatistik kart destesi (Swipe Stack) --- */

.deste-tasiyici {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  padding: clamp(3rem, 8vh, 5rem) 1.5rem;
  perspective: 1000px;
}

/* Deste kutusu: kartlar sağa yelpaze açtığı için genişliği JS ayarlar */
.kart-destesi {
  position: relative;
}

.veri-karti {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: 1.5rem;
  background: linear-gradient(170deg, #1a150d, #14110c 60%);
  border: 1px solid rgba(217, 162, 83, .45);
  border-radius: 30px; /* not6: cardRadius 4/20 */
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  user-select: none;
  touch-action: none;
  overflow: hidden;
}

/* Yazı okunsun diye görselin üzerine yumuşak koyu perde */
.veri-karti::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 9, 8, .12), rgba(10, 9, 8, .5));
  pointer-events: none;
}

.veri-karti > * {
  position: relative;
}

/* --- Kart arka planları: her istatistiğe farklı, site paletiyle uyumlu doku --- */

.veri-karti-amber {
  background:
    radial-gradient(circle at 20% 15%, #f0b35f 0%, transparent 55%),
    radial-gradient(circle at 85% 30%, #8a4d15 0%, transparent 60%),
    radial-gradient(circle at 50% 100%, #d9a253 0%, transparent 60%),
    #1a1006;
}

.veri-karti-bakir {
  background:
    radial-gradient(circle at 80% 12%, #e2795a 0%, transparent 55%),
    radial-gradient(circle at 15% 45%, #7a2e1d 0%, transparent 60%),
    radial-gradient(circle at 60% 105%, #f0b35f 0%, transparent 60%),
    #1c0e08;
}

.veri-karti-bal {
  background:
    radial-gradient(circle at 30% 18%, #ffd98a 0%, transparent 55%),
    radial-gradient(circle at 92% 60%, #e08b1f 0%, transparent 60%),
    radial-gradient(circle at 8% 100%, #9a5b10 0%, transparent 55%),
    #201305;
}

.veri-karti-zeytin {
  background:
    radial-gradient(circle at 75% 18%, #cdbf6a 0%, transparent 55%),
    radial-gradient(circle at 18% 70%, #55552a 0%, transparent 60%),
    radial-gradient(circle at 92% 105%, #d9a253 0%, transparent 55%),
    #15140a;
}

.veri-sayi {
  font-size: clamp(2.6rem, 4vw, 3.4rem);
  font-weight: 600;
  color: #fdf3e3;
  letter-spacing: .02em;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
}

.veri-emoji {
  font-size: clamp(3.4rem, 5vw, 4.4rem);
}

.veri-etiket {
  color: rgba(242, 237, 230, .88);
  font-size: .95rem;
  font-weight: 300;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}

.deste-ipucu {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--renk-metin-soluk);
}

/* ================= TARİFELER (3B küp karusel) ================= */

.tarifeler {
  position: relative;
  z-index: 10; /* Hizmetlerin üzerine kayar, iletişimin altında kalır */
  /* Hafif şeffaf siyah: arkadaki katman çok az hissedilir */
  background: rgba(var(--renk-zemin-rgb), .9);
  min-height: 100vh;
  padding: clamp(5.5rem, 14vh, 10rem) clamp(1.5rem, 5vw, 4.5rem);
  overflow: hidden;
}

.tarifeler-ic {
  max-width: 1150px;
  margin: 0 auto;
}

/* Küp taşıyıcı: perspektif burada; taşma görünür kalmalı
   (yan yüzler dönüş sırasında kutunun dışına taşar) */
.kup-tasiyici {
  margin-top: clamp(3rem, 8vh, 5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  perspective-origin: 50% 50%;
  outline: none;
  touch-action: pan-y; /* Yatay kaydırma küpü çevirir, dikey sayfayı kaydırır */
}

.kup-sahne {
  position: relative;
  transform-style: preserve-3d; /* Olmazsa yüzler tek düzleme yapışır */
}

.kup-yuz {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  overflow: hidden;
  /* Yüz sınırları dönüşte belli olsun diye ince iç gölge */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}

/* --- Tarife kartı (yüzün kendisi kart) --- */

.tarife {
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: #14110c;
  border: 1px solid rgba(217, 162, 83, .3);
  border-radius: 14px;
}

/* Yazı okunsun diye dokunun üzerine yumuşak koyu perde */
.tarife::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 9, 8, .22), rgba(10, 9, 8, .58));
  pointer-events: none;
}

/* Kart içeriği perdenin ve filigranın üzerinde kalsın */
.tarife > * {
  position: relative;
  z-index: 1;
}

/* Köşede dev, silik iskambil filigranı (canlı sitedeki paket simgeleri) */
.tarife::after {
  position: absolute;
  right: -1rem;
  bottom: -2.2rem;
  font-size: 11rem;
  line-height: 1;
  color: rgba(217, 162, 83, .12);
  pointer-events: none;
}

.tarife-maca::after  { content: "♠"; }
.tarife-kupa::after  { content: "♥"; }
.tarife-karo::after  { content: "♦"; }
.tarife-sinek::after { content: "♣"; }

/* --- Paket kademesine göre dokular --- */

/* Başlangıç: yumuşak amber şafak */
.tarife-maca {
  background:
    radial-gradient(circle at 18% 12%, rgba(240, 179, 95, .5) 0%, transparent 55%),
    radial-gradient(circle at 90% 90%, rgba(138, 77, 21, .6) 0%, transparent 60%),
    #16110a;
}

/* Profesyonel: en zengin altın (En Popüler) */
.tarife-kupa {
  background:
    radial-gradient(circle at 75% 10%, rgba(255, 207, 120, .55) 0%, transparent 55%),
    radial-gradient(circle at 15% 55%, rgba(217, 162, 83, .4) 0%, transparent 60%),
    radial-gradient(circle at 60% 110%, rgba(154, 91, 16, .7) 0%, transparent 60%),
    #1c1408;
}

/* Kurumsal: derin bronz/bakır */
.tarife-karo {
  background:
    radial-gradient(circle at 80% 15%, rgba(226, 121, 90, .4) 0%, transparent 55%),
    radial-gradient(circle at 10% 80%, rgba(122, 46, 29, .55) 0%, transparent 60%),
    #180d08;
}

/* Özel Proje: isli, koyu zeytin-altın */
.tarife-sinek {
  background:
    radial-gradient(circle at 70% 85%, rgba(205, 191, 106, .35) 0%, transparent 55%),
    radial-gradient(circle at 20% 15%, rgba(85, 85, 42, .5) 0%, transparent 60%),
    #121107;
}

.tarife-populer {
  border-color: rgba(217, 162, 83, .8);
  /* Işıltı halesi + yüz kenarı çizgisi */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), 0 0 70px rgba(217, 162, 83, .28);
}

.tarife-rozet {
  position: absolute;
  top: 1.3rem;
  right: 1.3rem;
  padding: .35rem .8rem;
  border-radius: 999px;
  background: var(--renk-altin);
  color: var(--renk-zemin);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.tarife-ad {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 500;
  letter-spacing: .04em;
}

.tarife-fiyat {
  margin-top: .9rem;
  color: var(--renk-altin);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 500;
}

.tarife-birim {
  color: var(--renk-metin-soluk);
  font-size: .8em;
}

.tarife-ozellikler {
  list-style: none;
  margin-top: 1.4rem;
  flex: 1;
}

.tarife-ozellikler li {
  position: relative;
  padding: .5rem 0 .5rem 1.6rem;
  color: var(--renk-metin-soluk);
  font-size: .92rem;
  font-weight: 300;
  border-bottom: 1px solid rgba(242, 237, 230, .07);
}

.tarife-ozellikler li:last-child {
  border-bottom: none;
}

/* Altın onay işareti */
.tarife-ozellikler li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--renk-altin);
}

.tarife-buton {
  margin-top: 1.4rem;
  text-align: center;
}

/* ================= İLETİŞİM ================= */
/* iPad Pro - Combo.svg tasarımı: beyaz zemin üzerinde iki iPad çerçevesi
   (img/ipad-yatay.svg + img/ipad-dikey.svg). Yatay iPad'in ekranında
   iletişim kartları, dikey iPad'in ekranında mesaj formu durur. */

.iletisim {
  position: relative;
  z-index: 12; /* En son bölüm: tarifelerin üzerine kayar */
  background: #fff; /* Kombo tasarımındaki beyaz kanvas */
  color: #111112;
  min-height: 100vh;
  padding: clamp(5.5rem, 14vh, 10rem) clamp(1.5rem, 5vw, 4.5rem) clamp(4rem, 8vh, 6rem);
  overflow: hidden;
}

/* Beyaz zeminde başlıklar koyu mürekkebe döner */
.iletisim .bolum-baslik {
  color: #111112;
}

.iletisim .bolum-alt {
  color: #55555a;
}

.iletisim-ic {
  max-width: 1150px;
  margin: 0 auto;
}

/* --- İki iPad'li sahne --- */

.iletisim-sahne {
  margin-top: clamp(3rem, 7vh, 5rem);
  display: grid;
  grid-template-columns: 1.28fr .84fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

/* cqw birimleri (ekran içi yazı/boşluk ölçüleri) iPad genişliğine bağlansın */
.ipad {
  position: relative;
  container-type: inline-size;
}

.ipad-cerceve {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 26px 48px rgba(17, 17, 18, .22));
}

/* Ekran alanları: ayıklanan SVG viewBox'ına göre hesaplanan yüzdeler */
.ipad-yatay .ipad-ekran {
  left: 3.719%;
  top: 4.846%;
  width: 92.753%;
  height: 90.558%;
}

.ipad-dikey .ipad-ekran {
  left: 4.476%;
  top: 3.72%;
  width: 90.672%;
  height: 92.752%;
}

.ipad-ekran {
  position: absolute;
  display: flex;
  background: #0b0a09;
  border-radius: clamp(6px, 1.5cqw, 12px);
  overflow: hidden;
}

/* Cama vuran hafif ışık */
.ipad-ekran::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 42%);
}

/* --- İletişim kartları (yatay iPad ekranında 2x2) --- */

.iletisim-kartlar {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: clamp(.5rem, 1.7cqw, 1rem);
  padding: clamp(.6rem, 2cqw, 1.2rem);
  min-width: 0;
}

.iletisim-karti {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(.35rem, 1.1cqw, .7rem);
  padding: clamp(.7rem, 2.4cqw, 1.4rem) clamp(.65rem, 2cqw, 1.2rem);
  border-radius: clamp(8px, 2.2cqw, 16px);
  color: var(--renk-metin);
  text-decoration: none;
  overflow: hidden;
  position: relative;
  min-width: 0;
  transition: transform .35s ease, box-shadow .35s ease;
}

.iletisim-karti:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .55);
}

/* Yazı okunsun diye dokunun üzerine hafif koyu perde */
.iletisim-karti::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 9, 8, .1), rgba(10, 9, 8, .55));
  pointer-events: none;
}

.iletisim-karti > * {
  position: relative;
}

/* Veriler bölümündeki dokulu kart paletiyle tutarlı */
.iletisim-karti-amber {
  background:
    radial-gradient(circle at 20% 15%, #f0b35f 0%, transparent 55%),
    radial-gradient(circle at 85% 30%, #8a4d15 0%, transparent 60%),
    radial-gradient(circle at 50% 100%, #d9a253 0%, transparent 60%),
    #1a1006;
}

.iletisim-karti-bakir {
  background:
    radial-gradient(circle at 80% 12%, #e2795a 0%, transparent 55%),
    radial-gradient(circle at 15% 45%, #7a2e1d 0%, transparent 60%),
    radial-gradient(circle at 60% 105%, #f0b35f 0%, transparent 60%),
    #1c0e08;
}

.iletisim-karti-bal {
  background:
    radial-gradient(circle at 30% 18%, #ffd98a 0%, transparent 55%),
    radial-gradient(circle at 92% 60%, #e08b1f 0%, transparent 60%),
    radial-gradient(circle at 8% 100%, #9a5b10 0%, transparent 55%),
    #201305;
}

.iletisim-karti-zeytin {
  background:
    radial-gradient(circle at 75% 18%, #cdbf6a 0%, transparent 55%),
    radial-gradient(circle at 18% 70%, #55552a 0%, transparent 60%),
    radial-gradient(circle at 92% 105%, #d9a253 0%, transparent 55%),
    #15140a;
}

.iletisim-ikon {
  width: clamp(15px, 3.2cqw, 26px);
  height: clamp(15px, 3.2cqw, 26px);
  color: var(--renk-altin);
}

.iletisim-etiket {
  font-family: var(--font-mono);
  font-size: clamp(.5rem, 1.5cqw, .64rem);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242, 237, 230, .75);
}

.iletisim-deger {
  font-size: clamp(.68rem, 2.1cqw, 1rem);
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: break-word;
}

/* --- İletişim formu (dikey iPad ekranında) --- */

.iletisim-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: transparent; /* Ekranın kendisi koyu — form ekranı doldurur */
  padding: clamp(1rem, 5.5cqw, 2rem);
  overflow-y: auto;
}

.iletisim-form h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--renk-metin);
  font-size: clamp(1.05rem, 5cqw, 1.6rem);
}

.iletisim-form > p {
  margin-top: .5rem;
  color: var(--renk-metin-soluk);
  font-weight: 300;
  font-size: clamp(.66rem, 2.9cqw, .88rem);
  line-height: 1.55;
}

.form-satir {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.form-alan {
  margin-top: clamp(.7rem, 2.8cqw, 1.1rem);
  display: flex;
  flex-direction: column;
  gap: clamp(.28rem, 1.2cqw, .5rem);
}

.form-alan label {
  font-family: var(--font-mono);
  font-size: clamp(.52rem, 2.2cqw, .64rem);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--renk-metin-soluk);
}

.form-alan input,
.form-alan textarea {
  font-family: var(--font-ana);
  font-size: clamp(.72rem, 3cqw, .92rem);
  color: var(--renk-metin);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(217, 162, 83, .25);
  border-radius: 10px;
  padding: clamp(.45rem, 2cqw, .7rem) clamp(.55rem, 2.4cqw, .9rem);
  resize: vertical;
  min-width: 0;
  transition: border-color .3s ease, background .3s ease;
}

.form-alan input::placeholder,
.form-alan textarea::placeholder {
  color: rgba(242, 237, 230, .35);
}

.form-alan input:focus,
.form-alan textarea:focus {
  outline: none;
  border-color: var(--renk-altin);
  background: rgba(255, 255, 255, .07);
}

.form-eylemler {
  margin-top: clamp(.9rem, 3.4cqw, 1.5rem);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(.5rem, 2cqw, .9rem);
}

.form-buton {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: clamp(.55rem, 2.4cqw, .85rem) clamp(.7rem, 3cqw, 1.4rem);
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-ana);
  font-size: clamp(.6rem, 2.6cqw, .8rem);
  font-weight: 500;
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s ease;
}

.form-buton svg {
  width: clamp(13px, 3cqw, 18px);
  height: clamp(13px, 3cqw, 18px);
  flex: none;
}

.form-buton-wa {
  background: #25D366;
  color: #08210f;
}

.form-buton-wa:hover {
  background: #2fe377;
  transform: translateY(-2px);
}

.form-buton-mail {
  background: rgba(217, 162, 83, .06);
  border-color: var(--renk-altin-koyu);
  color: var(--renk-metin);
}

.form-buton-mail:hover {
  background: var(--renk-altin);
  border-color: var(--renk-altin);
  color: var(--renk-zemin);
  transform: translateY(-2px);
}

/* ================= ALT BİLGİ (FOOTER) ================= */

.site-footer {
  position: relative;
  z-index: 12;
  /* Hafif şeffaf siyah: arkadaki katman çok az hissedilir */
  background: rgba(13, 12, 10, .93);
  border-top: 1px solid rgba(217, 162, 83, .18);
  padding: clamp(3rem, 6vh, 4rem) clamp(1.5rem, 5vw, 4.5rem) 1.6rem;
}

.footer-ust {
  max-width: 1150px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
}

.footer-logo img {
  height: 36px;
  width: auto;
  display: block;
}

.footer-aciklama {
  margin-top: 1.1rem;
  max-width: 34ch;
  color: var(--renk-metin-soluk);
  font-weight: 300;
  font-size: .88rem;
  line-height: 1.7;
}

.footer-sosyal {
  margin-top: 1.4rem;
  display: flex;
  gap: .7rem;
}

.sosyal-link {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(217, 162, 83, .3);
  color: var(--renk-metin-soluk);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.sosyal-link svg {
  width: 17px;
  height: 17px;
}

.sosyal-link:hover {
  background: var(--renk-altin);
  border-color: var(--renk-altin);
  color: var(--renk-zemin);
}

.footer-sutun h4 {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--renk-altin);
  margin-bottom: 1.1rem;
}

.footer-sutun ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.footer-sutun a,
.footer-iletisim-listesi li {
  color: var(--renk-metin-soluk);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 300;
  transition: color .3s ease;
}

.footer-sutun a:hover {
  color: var(--renk-altin);
}

.footer-alt {
  max-width: 1150px;
  margin: clamp(2rem, 5vh, 3rem) auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(242, 237, 230, .08);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .8rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .04em;
  color: rgba(242, 237, 230, .45);
}

.footer-alt a {
  color: rgba(242, 237, 230, .65);
  text-decoration: none;
}

.footer-alt a:hover {
  color: var(--renk-altin);
}

.footer-yapim span {
  color: var(--renk-altin);
}

/* --- Kommakomma tarzı bölüm geçişleri --- */
/* Her bölüm bir öncekinin üzerine yuvarlak köşeli perde gibi kayar;
   alttaki bölüm geride küçülüp kararır.
   --gecis  (0→1): bölümün kendisi görünüme kayarken (köşe yarıçapı)
   --kapanis(0→1): sonraki bölüm bunun üzerine kayarken (küçülme + kararma)
   İkisi de JS ile scroll'a bağlı güncellenir. */

@media (prefers-reduced-motion: no-preference) {
  .galeri,
  .hero-projects,
  .veriler,
  .hizmetler,
  .tarifeler,
  .iletisim {
    border-radius: calc((1 - var(--gecis, 1)) * 40px) calc((1 - var(--gecis, 1)) * 40px) 0 0;
  }

  .galeri,
  .hero-projects,
  .veriler,
  .hizmetler,
  .tarifeler {
    transform: translateY(calc(var(--kapanis, 0) * -8vh)) scale(calc(1 - var(--kapanis, 0) * .06));
  }

  .galeri::after,
  .hero-projects::after,
  .veriler::after,
  .hizmetler::after,
  .tarifeler::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 13;
    background: var(--renk-zemin);
    opacity: calc(var(--kapanis, 0) * .75);
    pointer-events: none;
  }

  /* İletişim girişi: beyaz perde tarifelerin üzerine kayarken iPad'ler
     hafif eğik ve aşağıdan gelir, --gecis 1'e yaklaştıkça yerine oturur;
     ekran içerikleri de aynı ilerlemeyle "açılır" (güç düğmesi hissi). */
  .ipad-yatay {
    transform: translateY(calc((1 - var(--gecis, 1)) * 16vh))
               rotate(calc((1 - var(--gecis, 1)) * -5deg));
  }

  .ipad-dikey {
    transform: translateY(calc((1 - var(--gecis, 1)) * 26vh))
               rotate(calc((1 - var(--gecis, 1)) * 6deg));
  }

  .ipad-ekran > * {
    opacity: calc(var(--gecis, 1) * var(--gecis, 1));
  }
}

/* ============ KAYDIRMA ANİMASYONLARI ============ */

/* Görünüme girince yumuşak yükselme */
.reveal-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}

.reveal-scroll.gorunur {
  opacity: 1;
  transform: translateY(0);
}

/* Harf harf giriş (data-harf) — videodaki dağınık harflerin yerine oturması */
[data-harf] .harf {
  display: inline-block;
  opacity: 0;
  transform: translateY(.65em) rotate(12deg) scale(.85);
  transition: opacity .5s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--i) * 38ms);
}

[data-harf].harf-acik .harf {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
}

/* Lenis yumuşak kaydırma ile çakışmayı önle */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

/* Hareket azaltma tercihi: kaydırma animasyonlarını kapat */
@media (prefers-reduced-motion: reduce) {
  .reveal-scroll,
  [data-harf] .harf {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .bant-ic {
    animation: none;
  }
}

/* ================= MOBİL ================= */

/* Dar masaüstü: kapsül menü logoya binmesin diye bir tık daralır */
@media (max-width: 1000px) {
  .site-nav {
    width: 500px;
    height: 88px;
    border-radius: 27px;
  }
}

@media (max-width: 820px) {
  .nav-toggle {
    display: flex;
  }

  /* Mobil menü: tam ekran koyu panel — masaüstündeki cam kapsül sıfırlanır */
  .site-nav {
    /* Koyu panelde krem ikon/etiket */
    --nav-ikon: var(--renk-metin);
    --nav-etiket: var(--renk-metin-soluk);

    position: fixed;
    inset: 0;
    transform: none;
    width: auto;
    height: auto;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.2rem;
    background: rgba(var(--renk-zemin-rgb), .97);
    opacity: 0;
    visibility: hidden;
    transition: opacity .35s ease, visibility .35s ease;
  }

  .site-nav.acik {
    opacity: 1;
    visibility: visible;
  }

  .site-nav a {
    padding: 0;
    border-radius: 0;
  }

  .site-nav a:hover {
    background: none;
  }

  .nav-ikon {
    width: 26px;
    height: 26px;
  }

  .nav-etiket {
    font-size: 1rem;
    letter-spacing: .04em;
  }

  /* Menü açıkken düğme X'e dönüşür */
  .nav-toggle.acik span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.acik span:nth-child(2) { opacity: 0; }
  .nav-toggle.acik span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .logo img {
    height: 34px;
  }

  /* Hizmetler: tek sütun, akan yazılar biraz daha silik */
  .hizmet-listesi {
    grid-template-columns: 1fr;
  }

  .akis-yazi-altin { opacity: .4; }
  .akis-yazi-beyaz { opacity: .28; }
  .akis-yazi-soluk { opacity: .18; }

  .cip-nav {
    gap: 1.1rem;
    padding: .6rem 1.1rem;
  }

  .cip-nav a {
    font-size: .62rem;
  }

  /* Projeler: mobilde tek sütun, daha kısa hücreler */
  .proje-izgara {
    grid-template-columns: 1fr;
    grid-auto-rows: 58vh;
  }

  .proje:nth-child(even) {
    border-left: none;
  }

  .proje:nth-child(n+2) {
    border-top: 1px solid var(--kroki-ayrac);
  }

  /* ydiji creative: küçük ekranda kart destesi ve arka yazı daralır */
  .yc-arkayazi h2 {
    font-size: clamp(1.8rem, 11vw, 3.2rem);
  }

  .yc-new {
    width: 62px;
  }

  /* İletişim: iPad'ler alt alta, dikey iPad (form) ortalanır */
  .iletisim-sahne {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .ipad-dikey {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
  }

  /* Alt bilgi: sütunlar alt alta */
  .footer-ust {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .footer-alt {
    flex-direction: column;
    align-items: flex-start;
  }
}