/* =========================================================
   Görsel efekt stilleri — hepsi html.fx altında çalışır.
   effects.js kapalıysa bu dosyanın etkisi olmaz.
   ========================================================= */

/* ---------- Shader ---------- */
.fx .fx-shader {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.45), #000 55%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,.45), #000 55%);
  opacity: 0;
  animation: fx-fade 1.4s .2s forwards;
}

/* ---------- 3D logo ---------- */
.fx .fx-logo { position: relative; aspect-ratio: 1; transform-style: preserve-3d; will-change: transform; }
.fx .fx-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.fx .fx-logo-layer { filter: brightness(.22) saturate(1.3); }
.fx .fx-logo-face { transform: translateZ(1px); filter: drop-shadow(0 14px 30px rgba(0,0,0,.55)); }
.fx .fx-logo::after {
  content: ""; position: absolute; inset: 0; transform: translateZ(2px);
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 48%, transparent 58%);
  background-size: 300% 100%;
  background-position: var(--sheen, 50%) 0;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ---------- Başlık girişi ---------- */
.fx .fx-word { display: inline-block; white-space: nowrap; }
.fx .fx-ch {
  display: inline-block; opacity: 0;
  transform: translateX(-.6em) skewX(-20deg);
  animation: fx-ch .65s cubic-bezier(.2,.8,.2,1) calc(150ms + var(--i) * 26ms) forwards;
}
.fx .outline .fx-ch { -webkit-text-stroke: inherit; }
.fx .hero .kicker, .fx .hero-lead, .fx .hero .actions, .fx .countdown,
.fx .tc-meta, .fx .tc-intro {
  opacity: 0; animation: fx-up .7s cubic-bezier(.2,.7,.2,1) forwards;
}
.fx .hero .kicker, .fx .tc-meta { animation-delay: .05s; }
.fx .hero-lead, .fx .tc-intro { animation-delay: .55s; }
.fx .hero .actions, .fx .countdown { animation-delay: .7s; }
.fx .strip { animation: fx-up .7s .85s cubic-bezier(.2,.7,.2,1) both; }
.fx .tc-ghost { animation: fx-ghost 1.2s .1s cubic-bezier(.2,.7,.2,1) both; }

/* ---------- Kaydırınca belirme ---------- */
.fx .fx-r {
  opacity: 0; translate: 0 26px;
  transition: opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--d, 0) * 80ms);
}
.fx .fx-r.is-in { opacity: 1; translate: 0 0; }
.fx .sh.fx-r { translate: none; }
.fx .sh h2 { clip-path: inset(0 100% 0 0); transition: clip-path .9s cubic-bezier(.7,0,.2,1) .1s; }
.fx .sh.is-in h2 { clip-path: inset(-10% -5% -15% 0); }
.fx .gps li.fx-r { translate: -30px 0; }
.fx .gps li.is-in { translate: 0 0; }
.fx .road-stop.fx-r .road-card { transform: translateX(-30px); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.fx .road-stop.is-right.fx-r .road-card { transform: translateX(30px); }
.fx .road-stop.is-in .road-card { transform: none; }
.fx .file.fx-r { translate: 0 40px; }
.fx .file.is-in { translate: 0 0; }

/* ---------- Eğilen kartlar ---------- */
.fx [data-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .7s ease, translate .7s cubic-bezier(.2,.7,.2,1);
}
.fx [data-tilt].fx-r { transition-delay: 0s, calc(var(--d, 0) * 80ms), calc(var(--d, 0) * 80ms); }
.fx [data-tilt].is-tilt { z-index: 2; transition-duration: .08s, .7s, .7s; }
.fx .file::after, .fx .channel::after, .fx .pit::after, .fx .spot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.16), transparent 45%);
  opacity: 0; transition: opacity .3s;
}
.fx .is-tilt::after { opacity: 1; }

/* ---------- 3D bayrak ---------- */
.fx .has-flag { overflow: hidden; }
.fx-flag {
  position: absolute; right: 0; top: 50%; translate: 0 -50%; z-index: 0;
  width: min(28vw, 400px); aspect-ratio: 4 / 3;
  pointer-events: none; opacity: 0; animation: fx-fade 1s .5s forwards;
}
.fx-flag canvas { width: 100% !important; height: 100% !important; display: block; }
.fx .hero.has-flag .hero-in { padding-right: min(16vw, 230px); }

/* ---------- Keyframes ---------- */
@keyframes fx-fade { to { opacity: 1; } }
@keyframes fx-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fx-ch { to { opacity: 1; transform: none; } }
@keyframes fx-ghost { from { opacity: 0; transform: translateX(80px); } to { opacity: .22; transform: none; } }

@media (max-width: 860px) {
  .fx-flag { top: calc(var(--hud) + 16px); bottom: auto; translate: none; width: 44vw; }
  .fx .hero.has-flag .hero-in { padding-right: 0; }
}