/* ============================================================
   MAKEA Bilişim — 3D Laptop Giriş Deneyimi (intro.css)
   Sahne + ekran içi giriş (splash) + orijinal sayfa uyum katmanı.
   Orijinal sayfa stilleri eklentinin kendi CSS'inden gelir;
   bu dosya ona DOKUNMAZ, yalnızca 3D açıkken takas hizası için
   iki kural ekler (bkz. en alt: UYUM KATMANI).
   ============================================================ */

:root {
  --mk-green: #1dce8f;
  --mk-green-dark: #0ea36d;
  --mk-green-deep: #0b3b2b;
  --mk-ink: #12241c;
  --mk-muted: #5c6662;
  --mk-bg1: #f4fcf8;
  --mk-bg2: #e9f8f1;
  --mk-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: var(--mk-font);
  color: var(--mk-ink);
  background: #ffffff;
  overflow-x: hidden;
}

/* ------------------------------------------------------------
   3D SAHNE — yalnızca JS 3D'yi uygun gördüğünde (body.mk3d-on)
   ------------------------------------------------------------ */

#mk3d-wrap { display: none; }

body.mk3d-on #mk3d-wrap {
  display: block;
  width: 100vw;                 /* tema dar kapsayıcıda bile tam genişlik */
  margin-left: calc(50% - 50vw);
  height: 200vh;                /* 100vh pin + 100vh geçiş mesafesi */
  position: relative;
  z-index: 30;
}

#mk3d-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh; /* mobilde adres çubuğu gizlenince altta sayfa şeridi görünmesin */
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(29, 206, 143, .16), transparent 42%),
    linear-gradient(140deg, var(--mk-bg1), var(--mk-bg2));
}

#mk3d-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#mk3d-stage > .mk3d-css3d {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

#mk3d-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 13px;
  letter-spacing: .22em;
  font-weight: 700;
  color: var(--mk-green-dark);
  text-transform: uppercase;
  animation: mkPulse 1.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes mkPulse { 50% { opacity: .35; } }

#mk3d-hint {
  position: absolute;
  left: 50%;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mk-green-deep);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}

#mk3d-hint i {
  width: 22px;
  height: 34px;
  border: 2px solid var(--mk-green-dark);
  border-radius: 12px;
  position: relative;
}

#mk3d-hint i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 3px;
  background: var(--mk-green-dark);
  animation: mkWheel 1.4s ease-in-out infinite;
}

@keyframes mkWheel {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ------------------------------------------------------------
   LAPTOP EKRANINDAKİ GİRİŞ (SPLASH) — 1176x800 px, CSS3D ile
   ölçeklenir. Ekran asıl sayfaya açılan bir portaldır: burada
   yalnızca logo + eyebrow + "İLÇE İÇİN DOĞRU SERVİSİ TERCİH
   ETTİNİZ" animasyonu oynar; h1/intro/butonlar gerçek sayfadadır.
   ------------------------------------------------------------ */

.mk3d-hero {
  width: 1176px;
  height: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 80px;
  background:
    radial-gradient(circle at 88% 12%, rgba(29, 206, 143, .20), transparent 46%),
    radial-gradient(circle at 8% 88%, rgba(29, 206, 143, .12), transparent 40%),
    linear-gradient(140deg, var(--mk-bg1), var(--mk-bg2));
  font-family: var(--mk-font);
  color: var(--mk-ink);
  opacity: 0;
  transition: opacity .3s ease;
  backface-visibility: hidden;
  overflow: hidden;
}

.mk3d-hero.is-live { opacity: 1; }

.mk3d-logo {
  display: block;
  height: 92px;
  width: auto;
  margin: 0 0 34px;
}

.mk3d-eyebrow {
  display: block;
  margin-bottom: 26px;
  color: var(--mk-green-dark);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .18em;
}

.mk3d-hero-line {
  margin: 0;
  max-width: 980px;
  color: var(--mk-green-dark);
  font-size: 52px;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.28;
}

.mk3d-hero-line .w { display: inline-block; }

.mk3d-hero-line .dist { position: relative; }

.mk3d-hero-line .dist::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  height: 6px;
  width: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--mk-green), #7fe9c6);
  transform: scaleX(0);
  transform-origin: left;
}

.mk3d-cap {
  margin: 40px 0 0;
  color: var(--mk-muted);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .15em;
}

/* Giriş animasyonu — .is-live eklenince sırayla oynar */
.mk3d-hero .a { opacity: 0; }
.mk3d-hero.is-live .a {
  animation: mkUp .55s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: var(--d, 0s);
}

.mk3d-hero.is-live .mk3d-hero-line .w {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(5px);
  animation: mkFade .55s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: var(--d);
}

.mk3d-hero.is-live .mk3d-hero-line .dist::after { animation: mkUline .6s ease-out 1.35s forwards; }

@keyframes mkUp {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mkFade {
  from { opacity: 0; transform: translateY(16px); filter: blur(5px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes mkUline { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .mk3d-hero .a,
  .mk3d-hero.is-live .a,
  .mk3d-hero.is-live .mk3d-hero-line .w {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .mk3d-hero.is-live .mk3d-hero-line .dist::after { transform: scaleX(1); animation: none; }
}

/* ------------------------------------------------------------
   UYUM KATMANI — orijinal sayfaya dokunmaz; yalnızca 3D aktifken
   (body.mk3d-on) geçiş takasının hizasını ayarlar:
   sahne 200vh tutar, sayfa 100vh yukarı çekilir ki zoom bitiminde
   sayfanın başı tam viewport üstüne gelsin; ardından sahne
   scroll ile yukarı kayar ve sayfa normal akışına döner.
   ------------------------------------------------------------ */

body.mk3d-on .makea-service-page { margin-top: -100vh; }

/* BeTheme mobil/tablette body'ye overflow-x:hidden verir; html'de de aynı
   kural olduğundan body kendi scroll container'ı olur ve #mk3d-stage'in
   position:sticky pinlemesi kırılır (sahne kayar, portal bozulur).
   "clip" scroll container oluşturmaz: sticky çalışır, yatay taşma yine
   engellenir (html'deki overflow-x:hidden zaten viewport'u korur). */
body.mk3d-on { overflow-x: visible !important; overflow-x: clip !important; }