/*
 * index3 — Altın logo sahnesi
 *
 * Logo bir <img> olarak değil, logonun alfa kanalıyla maskelenmiş katmanlar
 * olarak çizilir. Böylece çizimin içini dövme altın gradyanıyla doldurup
 * üzerinde ışık gezdirebiliyoruz.
 */

:root {
  --logo-url: url('logo.png');
  --mx: 50%;     /* imlecin logo üzerindeki yeri — ışık huzmesi bunu izler */
  --my: 40%;
  --rx: 0deg;    /* fareyle gelen hafif 3B eğim */
  --ry: 0deg;
}

html { height: 100%; overflow: hidden; }

body.splash3 {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #04060a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

/* ----------------------------------------------------------------
 * Arka plan
 * ---------------------------------------------------------------- */

#fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1100px;
}

/* Logonun arkasındaki sıcak ışık — imlece göre hafifçe kayar */
.halo {
  position: absolute;
  width: min(1250px, 155vw);
  height: min(1250px, 155vw);
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255, 196, 84, 0.16),
    rgba(216, 150, 44, 0.06) 48%,
    transparent 72%);
  transform: translate(calc((var(--mx) - 50%) * 0.12), calc((var(--my) - 50%) * 0.12));
  animation: halo 9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes halo {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 1; }
}

/* Yavaş dönen ışık yelpazesi */
.rays {
  position: absolute;
  width: min(900px, 118vw);
  height: min(900px, 118vw);
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(255, 208, 116, 0.13) 24deg, transparent 60deg,
    transparent 150deg, rgba(255, 208, 116, 0.09) 178deg, transparent 214deg,
    transparent 300deg, rgba(255, 208, 116, 0.11) 328deg, transparent 356deg);
  border-radius: 50%;
  filter: blur(38px);
  animation: spin 42s linear infinite;
  pointer-events: none;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------
 * Logo katmanları
 * ---------------------------------------------------------------- */

/*
 * Eğim ile giriş animasyonu ayrı elemanlarda duruyor: ikisi de transform
 * kullanıyor ve animasyon her zaman düz bildirimi ezdiği için aynı elemanda
 * olsalardı fare eğimi hiç çalışmazdı.
 */
.mark {
  position: relative;
  width: clamp(250px, 60vw, 780px);
  aspect-ratio: 8 / 3;             /* logo yüklenince JS gerçek oranı yazar */
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
}

/*
 * Varsayılan hâli görünür. Giriş animasyonu yalnızca JS sayfanın gerçekten
 * görüntülendiğini doğrulayınca eklenir — animasyonlar duraklatılırsa
 * (arka plan sekmesi, güç tasarrufu) logo opacity:0'da donup kaybolmasın.
 */
.mark-in {
  position: absolute;
  inset: 0;
  opacity: 1;
}

.mark-in.intro {
  animation: enter 1.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes enter {
  from { opacity: 0; transform: scale(1.08) translateY(10px); filter: blur(22px); }
  to   { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* Katmanların hepsi aynı maskeyi kullanır: logonun kendi şekli */
.layer {
  position: absolute;
  inset: 0;
  -webkit-mask-image: var(--logo-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--logo-url);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  pointer-events: none;
}

/* 1) Dövme altın dolgu */
.gold {
  background: linear-gradient(102deg,
    #7a5a18 0%, #b2872a 12%, #e8c96b 24%, #fff6d2 33%,
    #edd489 41%, #c9a03c 54%, #8a6620 68%, #d9b455 82%,
    #f3e2a6 91%, #9d7726 100%);
  background-size: 260% 100%;
  animation: metal 9s ease-in-out infinite;
  filter: drop-shadow(0 0 30px rgba(255, 184, 66, 0.28));
}

@keyframes metal {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}

/* 2) Üzerinden geçen keskin ışık */
.sheen {
  background: linear-gradient(104deg,
    transparent 40%, rgba(255, 255, 255, 0.9) 49%,
    rgba(255, 255, 255, 0.55) 53%, transparent 62%);
  background-size: 280% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  animation: sheen 6.5s ease-in-out 2.1s infinite;
}

@keyframes sheen {
  0%        { background-position: -170% 0; }
  48%, 100% { background-position: 280% 0; }
}

/* 3) İmleci izleyen ışık lekesi */
/* Not: circle'ın yarıçapı yüzde kabul etmez, ellipse kullanılmalı. */
.spot {
  background: radial-gradient(ellipse 32% 76% at var(--mx) var(--my),
    rgba(255, 245, 214, 0.75), rgba(255, 214, 130, 0.22) 45%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.85;
}

/* 4) Zeminde yansıma — logo maskesi + aşağı doğru sönen gradyan kesişimi */
.reflection {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 100%;
  margin-top: 2%;
  background: linear-gradient(102deg, #8a6620, #e8c96b 30%, #fff6d2 42%, #c9a03c 62%, #8a6620);
  transform: scaleY(-1);
  opacity: 0.17;
  filter: blur(1.5px);
  pointer-events: none;

  -webkit-mask-image: var(--logo-url), linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent 58%);
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, center;
  -webkit-mask-size: contain, 100% 100%;
  -webkit-mask-composite: source-in;
  mask-image: var(--logo-url), linear-gradient(to top, rgba(0, 0, 0, 0.95), transparent 58%);
  mask-repeat: no-repeat, no-repeat;
  mask-position: center, center;
  mask-size: contain, 100% 100%;
  mask-composite: intersect;
}

/* Maske desteklemeyen tarayıcılarda düz logo */
.plain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: invert(1) drop-shadow(0 0 26px rgba(255, 184, 66, 0.3));
}

/* Logo dosyası yoksa firma adı yazıyla görünür */
.mark-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: clamp(28px, 7.5vw, 78px);
  font-weight: 800;
  letter-spacing: 0.17em;
  background: linear-gradient(102deg, #b2872a, #fff6d2 40%, #c9a03c 70%, #f3e2a6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

/* ----------------------------------------------------------------
 * Üst kaplamalar
 * ---------------------------------------------------------------- */

/* Köşeleri karartır. closest-side kullanınca logonun kenarlarına kadar
   giriyordu; farthest-corner ile karartma sadece köşelerde kalıyor. */
.vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(farthest-corner at 50% 50%, transparent 42%, rgba(0, 0, 0, 0.8) 100%);
  pointer-events: none;
}

/* İnce film gren dokusu — düz siyahı canlandırır */
.grain {
  position: fixed;
  inset: -120px;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.7s steps(4) infinite;
}

@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-38px, 22px); }
  50%  { transform: translate(26px, -30px); }
  75%  { transform: translate(-18px, -16px); }
  100% { transform: translate(0, 0); }
}

/* ----------------------------------------------------------------
 * Hareket hassasiyeti
 * ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .rays, .halo, .gold, .sheen, .grain, .mark-in { animation: none; }
  .mark-in { opacity: 1; }
}