/* ═══════════════════════════════════════════════════════════════
   v18.8 TEMA KATMANI — Yapı Hizmetleri hareket dili
   İmza: "şantiye planı" atmosferi (hero'da akan marka degradesi +
   soluk teknik çizim ızgarası + süzülen yapı blokları).
   Kurallar: sıfır ek indirme, yalnızca CSS; kullanıcı "hareketi
   azalt" dediyse TÜM hareket kapanır; buton/kart odağı bozulmaz.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1) HERO ATMOSFERİ ── */
.hero { position: relative; overflow: hidden; }

/* Akan marka degradesi (çok yavaş, dikkat çelmeden nefes alır) */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(115deg,
    rgba(79, 70, 229, 0.16), rgba(14, 165, 233, 0.10),
    rgba(79, 70, 229, 0.06), rgba(234, 88, 12, 0.08),
    rgba(79, 70, 229, 0.16));
  background-size: 340% 340%;
  animation: temaAkis 26s ease-in-out infinite;
  pointer-events: none;
}

/* Teknik çizim ızgarası (şantiye planı hissi; neredeyse görünmez) */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(79, 70, 229, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 70, 229, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 75% at 50% 40%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 40%, #000 30%, transparent 100%);
  pointer-events: none;
}

.hero > .container { position: relative; z-index: 1; }

/* Mevcut hero-shapes'e süzülme davranışı (yapı blokları) */
.hero-shapes { z-index: 0; }
.hero-shapes .shape {
  animation: temaSuzul 14s ease-in-out infinite;
  will-change: transform;
}
.hero-shapes .shape-2 { animation-duration: 18s; animation-delay: -6s; }
.hero-shapes .shape-3 { animation-duration: 22s; animation-delay: -11s; }

@keyframes temaAkis {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes temaSuzul {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-22px) rotate(3deg); }
}

/* ── 2) PARÇA PARÇA GİRİŞ (stagger) ── */
/* Sayfa yüklenince hero çocukları sırayla belirir */
.tema-giris .hero-title, .tema-giris .hero-subtitle, .tema-giris .hero-desc,
.tema-giris .hero-actions, .tema-giris .hero-stats {
  opacity: 0;
  transform: translateY(18px);
  animation: temaBelir 0.65s cubic-bezier(0.22, 0.8, 0.3, 1) forwards;
}
.tema-giris .hero-subtitle { animation-delay: 0.12s; }
.tema-giris .hero-desc { animation-delay: 0.22s; }
.tema-giris .hero-actions { animation-delay: 0.34s; }
.tema-giris .hero-stats { animation-delay: 0.48s; }

/* Kaydırmayla görünen bölümlerde çocuklar kademeli belirir
   (mevcut .animate-on-scroll.is-visible mekanizmasının üstüne) */
.tema-kademe > * { opacity: 0; transform: translateY(16px); }
.tema-kademe.is-visible > * {
  animation: temaBelir 0.55s cubic-bezier(0.22, 0.8, 0.3, 1) forwards;
}
.tema-kademe.is-visible > *:nth-child(1) { animation-delay: 0.05s; }
.tema-kademe.is-visible > *:nth-child(2) { animation-delay: 0.13s; }
.tema-kademe.is-visible > *:nth-child(3) { animation-delay: 0.21s; }
.tema-kademe.is-visible > *:nth-child(4) { animation-delay: 0.29s; }
.tema-kademe.is-visible > *:nth-child(5) { animation-delay: 0.37s; }
.tema-kademe.is-visible > *:nth-child(6) { animation-delay: 0.45s; }
.tema-kademe.is-visible > *:nth-child(n+7) { animation-delay: 0.52s; }

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

/* ── 3) YUMUŞAK SAYFA GEÇİŞİ ── */
body { animation: temaSayfaGel 0.35s ease-out; }
body.tema-cikis {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.22s ease-in, transform 0.22s ease-in;
}
@keyframes temaSayfaGel {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── 4) MİKRO DOKUNUŞLAR ── */
.btn { transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
.btn:active { transform: scale(0.97); }
.btn-cta, .btn-primary { position: relative; overflow: hidden; }

/* ── 5) HAREKETİ AZALT: her şey kapanır ── */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .hero-shapes .shape { animation: none !important; }
  .tema-giris .hero-title, .tema-giris .hero-subtitle, .tema-giris .hero-desc,
  .tema-giris .hero-actions, .tema-giris .hero-stats,
  .tema-kademe > *, .tema-kademe.is-visible > * {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  body, body.tema-cikis { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}


/* ── 6) v18.9 CANLI ZEMİN (saate senkron; menüler değişse de akış "hiç durmaz") ──
   Doz ayarı: --tema-doz (0 = kapalı, 1 = tam). Faz, js/tema.js tarafından
   cihaz saatine bağlanır; her sayfa aynı kareden devam eder. */
:root { --tema-doz: 0.5; }

.tema-zemin {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: var(--tema-doz);
}
.tema-zemin .tz-akis {
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
    rgba(79, 70, 229, 0.10), rgba(14, 165, 233, 0.06),
    rgba(79, 70, 229, 0.03), rgba(234, 88, 12, 0.05),
    rgba(79, 70, 229, 0.10));
  background-size: 340% 340%;
  animation: temaAkis 48s ease-in-out infinite;
}
.tema-zemin .tz-izgara {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(79, 70, 229, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 70, 229, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
}
.tema-zemin .tz-blok {
  position: absolute; border-radius: 18px;
  background: rgba(79, 70, 229, 0.05);
  animation: temaSuzul 30s ease-in-out infinite;
}
.tema-zemin .tz-blok:nth-child(3) { width: 220px; height: 220px; top: 12%; left: -60px; }
.tema-zemin .tz-blok:nth-child(4) { width: 150px; height: 150px; top: 62%; right: -40px; animation-duration: 38s; background: rgba(14, 165, 233, 0.05); }
.tema-zemin .tz-blok:nth-child(5) { width: 90px; height: 90px; top: 38%; right: 18%; animation-duration: 26s; background: rgba(234, 88, 12, 0.045); }

/* Destekleyen tarayıcılarda sayfadan sayfaya ERİME geçişi (MPA view transition) */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  .tema-zemin .tz-akis, .tema-zemin .tz-blok { animation: none !important; }
}


/* ── 7) v19.1 ZEMİN VİDEOSU: tüm public sayfaların arkasında kesintisiz film ──
   Perde şiddeti: --tema-video-perde (0 = video çıplak, 1 = tamamen örtülü). */
:root { --tema-video-perde: 0.45; }

.tema-zemin .tz-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.tema-zemin .tz-video.oynuyor { opacity: 1; }

/* Okunabilirlik perdesi: video ile içerik arasında yumuşak beyaz örtü */
.tema-zemin .tz-ortu {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, calc(var(--tema-video-perde) - 0.08)),
    rgba(255, 255, 255, var(--tema-video-perde)) 45%,
    rgba(255, 255, 255, calc(var(--tema-video-perde) + 0.10)));
}

/* Ana sayfa hero'su videoyu biraz daha çıplak göstersin diye hero'nun kendi
   arka planı şeffaflaştırılır (degrade + ızgara zaten tema katmanında var) */
.tema-giris .hero { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .tema-zemin .tz-video { display: none !important; }
}


/* ── 8) v19.2 VİDEO OYNARKEN DEKOR SADELEŞİR ──
   Film varken eski süs katmanları (beyaz daire/bloklar, ızgaralar) gizlenir;
   video oynamıyorsa (hareket-azalt, veri tasarrufu, hata) hepsi geri gelir. */
body.tema-video-oynuyor .hero-shapes { display: none; }
body.tema-video-oynuyor .tema-zemin .tz-blok { display: none; }
body.tema-video-oynuyor .tema-zemin .tz-izgara { opacity: 0.35; }
body.tema-video-oynuyor .hero::after { opacity: 0.3; }
body.tema-video-oynuyor .hero::before { opacity: 0.5; }


/* ── 9) v19.3 CAM PANEL: video/zemin üstünde yüzen içerik bölümleri ──
   Kullanım: bölüme .tema-panel sınıfı ver; hero istatistik kartlarıyla
   aynı dil (yarı saydam beyaz + buğu + yumuşak köşe + ince çerçeve). */
.tema-panel {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-2xl, 20px);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
  padding: clamp(20px, 4vw, 40px);
}


/* ── 10) v19.4 SİTE GENELİ UYUM: film zemin üstünde tipografi ve bölümler ──
   Kural: yalnızca body.tema-video-oynuyor iken devreye girer; video yoksa
   site eski görünümünde kalır (hiçbir cihazda bozulma riski yok). */

/* Başlıklar: arkadaki filme karşı beyaz ışıma + koyu mürekkep */
body.tema-video-oynuyor h1,
body.tema-video-oynuyor .section-title,
body.tema-video-oynuyor .hero-title {
  color: var(--color-gray-900, #0f172a);
  text-shadow: 0 2px 22px rgba(255, 255, 255, 0.95), 0 0 3px rgba(255, 255, 255, 0.9);
}

/* Alt başlık ve gri açıklama metinleri: kontrast koyulaştırma + hafif ışıma */
body.tema-video-oynuyor .section-subtitle,
body.tema-video-oynuyor .hero-subtitle,
body.tema-video-oynuyor .hero-desc,
body.tema-video-oynuyor .mk-hero p,
body.tema-video-oynuyor .page-content > .container > header p {
  color: var(--color-gray-700, #334155);
  text-shadow: 0 1px 14px rgba(255, 255, 255, 0.9);
}

/* Sayfa başlığı blokları (mk-hero gibi) hafif cam şerit olur */
body.tema-video-oynuyor .mk-hero,
body.tema-video-oynuyor .sec-hero,
body.tema-video-oynuyor .page-hero {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-2xl, 20px);
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Harita sarmalayıcıları cam panel diline girer */
body.tema-video-oynuyor .mk-map-wrap,
body.tema-video-oynuyor #kapasiteMap {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--radius-2xl, 20px);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
  padding: 10px;
}
body.tema-video-oynuyor .mk-map-wrap #mkMap { border-radius: calc(var(--radius-2xl, 20px) - 6px); }

/* Sonuç sayacı satırları çıplak metin yerine küçük rozet olur */
body.tema-video-oynuyor .results-count,
body.tema-video-oynuyor .mk-count {
  display: inline-block;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 8px 16px;
  color: var(--color-gray-700, #334155);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

/* Filtre çubukları ve boş durum kutuları: aynı cam dil */
body.tema-video-oynuyor .filter-bar,
body.tema-video-oynuyor .mk-filtre,
body.tema-video-oynuyor .empty-state {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-2xl, 20px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

/* Kartlar (vitrin, makine, hizmet) filme karşı hafif saydamlık + buğu kazanır */
body.tema-video-oynuyor .provider-card,
body.tema-video-oynuyor .mk-card,
body.tema-video-oynuyor .service-card,
body.tema-video-oynuyor .stat-card {
  background: rgba(255, 255, 255, 0.90);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

/* Footer filme karşı tam koyu kalsın (okunurluk) */
body.tema-video-oynuyor .footer { position: relative; z-index: 1; }


/* ── 11) v19.5 HAFİF MOD (operatör + takip panelleri) ──
   Videosuz: yalnız degrade zemin + cam kartlar. İş ekranı hızlı ve pil dostu kalır. */
body.tema-hafif { background: var(--color-gray-50, #f8fafc); }
body.tema-hafif .odp-kart,
body.tema-hafif .tracker-container,
body.tema-hafif #makinePanel > div > div {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body.tema-hafif .navbar { position: sticky; top: 0; z-index: 50; }