/* Gezgin İnşaat kopyası için tasarım katmanı (hesaplama sayfasıyla aynı dil).
   React yapısına dokunmaz; yalnızca <html> üzerindeki data-gust / data-gezgin-sayfa durumlarına göre çalışır.
   Durumları assets/gezgin-ekle.js belirler:
     data-gust="seffaf"  sayfanın en üstü, arkada koyu fotoğraf var: header şeffaf, her şey beyaz
     data-gust="cam"     aşağı kaydırıldı ya da açık renkli sayfa: ortada yüzen cam kapsül */

html[data-gust] {
  --gz-yay: cubic-bezier(.34, 1.25, .5, 1);
  --gz-koyu: #17181b;
  --gz-altin-acik: #f1c75a;
}

/* ---------- Header: ortak ---------- */
html[data-gust] header {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  padding: 10px 12px 0 !important;
  transition: padding .6s var(--gz-yay) !important;
}
html[data-gust] header > div:first-child {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  height: 64px !important;
  padding: 0 10px 0 18px !important;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / .7);
  background: linear-gradient(135deg, rgb(255 255 255 / .7), rgb(255 255 255 / .45));
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / .95),
    inset 0 -1px 1px rgb(255 255 255 / .3),
    inset 0 0 18px rgb(255 255 255 / .25),
    0 12px 32px -12px rgb(17 18 20 / .28),
    0 1px 2px rgb(17 18 20 / .06);
  transition: max-width .6s var(--gz-yay), height .6s var(--gz-yay), padding .6s var(--gz-yay), border-radius .6s var(--gz-yay),
    background .45s ease, border-color .45s ease, box-shadow .45s ease, -webkit-backdrop-filter .45s ease, backdrop-filter .45s ease;
}
html[data-gust] header > div:first-child > a:first-child img {
  height: 44px !important;
  max-width: 150px !important;
  transition: filter .5s ease, height .6s var(--gz-yay) !important;
}
html[data-gust] header nav a { transition: color .4s ease !important; }

/* Cama geçerken üzerinden bir kez ışık süzülür */
html[data-gust] header > div:first-child::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .75) 50%, transparent 70%) no-repeat;
  background-size: 40% 100%;
  background-position: -60% 0;
  opacity: 0;
}
html[data-gust=cam].gz-parla header > div:first-child::after { animation: gz-parilti .9s ease-out .15s both; }
@keyframes gz-parilti {
  0% { background-position: -60% 0; opacity: 0; }
  20% { opacity: 1; }
  100% { background-position: 160% 0; opacity: 0; }
}

/* ---------- Header: en üstte, koyu fotoğrafın üstünde ---------- */
html[data-gust=seffaf] header { padding: 0 !important; }
html[data-gust=seffaf] header > div:first-child {
  max-width: 100%;
  height: 80px !important;
  padding: 0 clamp(16px, 4vw, 64px) !important;
  border-radius: 0;
  border-color: transparent;
  background: transparent;
  -webkit-backdrop-filter: blur(0) saturate(100%);
  backdrop-filter: blur(0) saturate(100%);
  box-shadow: none;
}
html[data-gust=seffaf] header > div:first-child > a:first-child img {
  height: 56px !important;
  max-width: 180px !important;
  filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgb(0 0 0 / .35)) !important;
}
html[data-gust=seffaf] header nav a { color: rgb(255 255 255 / .85) !important; }
html[data-gust=seffaf] header nav a:hover { color: #fff !important; }
html[data-gust=seffaf] header nav a.text-primary { color: var(--gz-altin-acik) !important; }
html[data-gust=seffaf] header nav a::after { background: var(--gz-altin-acik) !important; }
html[data-gust=seffaf] header button[aria-label] { color: #fff !important; }

/* ---------- "Hesapla" düğmesi (gezgin-ekle.js ekler) ---------- */
.gz-hesapla {
  display: inline-flex; align-items: center; gap: 8px; line-height: 1; white-space: nowrap;
  border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none;
  padding: 10px 16px; background: var(--gz-koyu, #17181b); color: #fff !important;
  transition: background-color .5s ease, color .5s ease, transform .2s ease, box-shadow .2s ease;
}
.gz-hesapla::after { display: none !important; }
.gz-hesapla:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgb(17 18 20 / .4); }
.gz-hesapla:active { transform: translateY(1px) scale(.98); }
.gz-hesapla[data-gezgin-hesapla=mobil] { padding: 8px 12px; font-size: 13px; margin-right: 6px; }
html[data-gust=seffaf] .gz-hesapla { background: #fff; color: var(--gz-koyu) !important; }

/* ---------- Ana sayfa: hesaplama sayfasındaki gibi koyu fotoğraf, açık yazı ---------- */
html[data-gezgin-sayfa=ana] main > div > section:first-child img { filter: grayscale(.2) brightness(.8) !important; }
html[data-gezgin-sayfa=ana] main > div > section:first-child > div:first-child > div:last-child {
  background: linear-gradient(90deg, rgb(10 11 13 / .82) 0%, rgb(10 11 13 / .55) 45%, rgb(10 11 13 / .2) 100%),
    linear-gradient(0deg, rgb(10 11 13 / .45), transparent 40%) !important;
}
html[data-gezgin-sayfa=ana] main > div > section:first-child h1 {
  color: #fff !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
html[data-gezgin-sayfa=ana] main > div > section:first-child h1 + p,
html[data-gezgin-sayfa=ana] main > div > section:first-child p { color: rgb(255 255 255 / .85) !important; }
html[data-gezgin-sayfa=ana] main > div > section:first-child a:not(.gold-gradient) {
  color: #fff !important;
  border-color: rgb(255 255 255 / .45) !important;
}
html[data-gezgin-sayfa=ana] main > div > section:first-child .max-w-3xl > div:first-child span { color: var(--gz-altin-acik) !important; }

/* Öne çıkan projeler: gizlenen proje sonrası kalan 3 kart tek sırada */
@media (min-width: 1024px) {
  html[data-gezgin-sayfa=ana] section.bg-surface-container-highest .grid[class~="md:grid-cols-2"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2rem !important;
  }
}

/* Mobilde "20+ yıllık tecrübe" rozeti ekran dışına taşmasın */
@media (max-width: 767px) {
  html[data-gezgin-sayfa=ana] [class~="-right-6"][class~="-bottom-10"] { right: 0 !important; }
}

/* Proje sayfalarında fotoğraf, şeffaf header'ın arkasına kadar uzanır */
html[data-gezgin-sayfa=proje] main { margin-top: -81px; }
html[data-gezgin-sayfa=proje] main > :first-child > section:first-child,
html[data-gezgin-sayfa=proje] main > section:first-child { padding-top: 81px; box-sizing: content-box; }
html[data-gezgin-sayfa=proje] main > :first-child > section:first-child { box-sizing: border-box; padding-top: calc(8rem + 81px); }

@media (prefers-reduced-motion: reduce) {
  html[data-gust] header, html[data-gust] header > div:first-child, html[data-gust] header img { transition: none !important; }
  html[data-gust] header > div:first-child::after { animation: none !important; }
}

/* Footer logosu: kutusu 52px, görsel daha büyük olduğu için alttaki "İletişim" başlığının üstüne taşıyordu */
html[data-gust] footer .grid > div:first-child a > div { max-height: none !important; }
html[data-gust] footer .grid > div:first-child img { height: 72px !important; width: auto !important; max-width: 100%; }

/* Orijinal tasarımcı bağlantısı yerine "Made by Grove" (gezgin-ekle.js ekler) */
footer a[href^="https://sedminadijital.com"] { display: none !important; }
/* "Made by Grove" imzası */
.gz-imza { display: inline-flex; align-items: baseline; gap: 6px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgb(82 82 91 / .75); white-space: nowrap; }
.gz-imza a {
  position: relative; font-family: ui-serif, Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700;
  font-size: 17px; letter-spacing: .01em; text-transform: none; text-decoration: none;
  background: linear-gradient(100deg, #775a19 0%, #c5a059 35%, #f3dc9a 50%, #c5a059 65%, #775a19 100%);
  background-size: 250% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  transition: background-position .9s cubic-bezier(.2, .8, .2, 1);
}
.gz-imza a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, #775a19, #c5a059); transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.gz-imza a:hover { background-position: 0 0; }
.gz-imza a:hover::after, .gz-imza a:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .gz-imza a, .gz-imza a::after { transition: none; } }