/* hareket.css — hareket dili. Referanslardan ölçüldü (4 Eylül):
   earcouture.jp  easeOutExpo cubic-bezier(.19,1,.22,1), 0.3–1 s, arkada
                  sürekli akan ışık, dev dikey manşet, sabitlenen sahneler
   size.swiss     her öğe 0.5 s ile kayarak girer (541 geçiş), kartlarda hover
   Renk yok; yalnız belirteç. Azaltılmış harekette her şey durur. */

:root {
  --es-cikis: cubic-bezier(0.19, 1, 0.22, 1);      /* easeOutExpo */
  --es-yumusak: cubic-bezier(0.165, 0.84, 0.44, 1); /* easeOutQuart */
  --sure-belir: 1.05s;
  --sure-hover: 0.55s;
}

/* belirme: bilesenler.css'teki temel kuralın üstüne süre/eşleme */
.js-var [data-belir] {
  transition: opacity var(--sure-belir) var(--es-cikis), transform var(--sure-belir) var(--es-cikis);
  transform: translateY(34px);
}
.js-var [data-belir="acik"] { transform: none; }

/* kart kalkışı — yalnız gerçek fare */
@media (hover: hover) and (pointer: fine) {
  .kanit-kart, .mesele-kart, .kupur, .galeri-oge, .video-kart, .kanit-kare, .soz-kart,
  .ozet-kart, .proje-kart, .gazete-sayfa a, .gz-kutu, .gz-foto figure {
    transition: transform var(--sure-hover) var(--es-yumusak), box-shadow var(--sure-hover) var(--es-yumusak), border-color 0.4s ease;
  }
  .kanit-kart:hover, .mesele-kart:hover, .kupur:hover, .soz-kart:hover, .ozet-kart:hover, .proje-kart:hover, .gz-kutu:hover {
    transform: translateY(-6px);
    box-shadow: var(--golge), inset 0 0 0 1px var(--vurgu);
  }
  .galeri-oge:hover, .video-kart:hover, .kanit-kare:hover, .gz-foto figure:hover { transform: translateY(-4px) scale(1.012); }
  .galeri-oge img, .kanit-kare img, .gz-foto img, .video-kutu img, .video-kutu video { transition: transform 1.2s var(--es-cikis), filter 0.6s ease; }
  .galeri-oge:hover img, .kanit-kare:hover img, .gz-foto figure:hover img { transform: scale(1.06); }
}

/* sürekli ışık — arkada, dokunulmaz */
.isik-katmani { position: fixed; inset: -20%; z-index: -1; pointer-events: none; overflow: hidden; }
.isik {
  position: absolute; width: 58vmax; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, var(--isik) 0%, transparent 62%);
  filter: blur(48px); opacity: 0.85; will-change: transform;
  animation: isik-dolas 26s var(--es-yumusak) infinite alternate;
}
.isik-1 { left: -10%; top: 5%; }
.isik-2 { right: -12%; top: 35%; animation-duration: 34s; animation-delay: -9s; }
.isik-3 { left: 30%; bottom: -15%; animation-duration: 40s; animation-delay: -21s; opacity: 0.55; }
@keyframes isik-dolas {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(9vw, -6vh, 0) scale(1.15); }
  100% { transform: translate3d(-6vw, 8vh, 0) scale(0.95); }
}

/* dev dikey manşet — earcouture: yazı doku olur */
.dev-yazi {
  position: absolute; inset-block-start: 0; inset-inline-end: -0.08em; z-index: 0;
  writing-mode: vertical-rl; text-orientation: mixed;
  font-family: var(--yazi-ekran); font-weight: 500;
  font-size: clamp(5rem, 17vw, 15rem); line-height: 1; letter-spacing: 0.06em;
  color: transparent; -webkit-text-stroke: 1px var(--cizgi-guclu);
  opacity: 0.32; pointer-events: none; user-select: none; white-space: nowrap;
  transform: translate3d(0, var(--dev-kayma, 0px), 0);
}

/* sahne: tam ekran, içeriği ortalı; sabitleme GSAP ile (sahne.js) */
.sahne { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; isolation: isolate; }
.sahne-fon { position: absolute; inset: 0; z-index: -1; }
.sahne-fon img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(0.55); }
.sahne-fon::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--zemin) 70%, transparent) 0%, transparent 22%, transparent 78%, var(--zemin) 100%),
    linear-gradient(90deg, var(--zemin) 0%, color-mix(in srgb, var(--zemin) 88%, transparent) 34%,
      color-mix(in srgb, var(--zemin) 40%, transparent) 62%, color-mix(in srgb, var(--zemin) 12%, transparent) 100%); }
.sahne-fon img { object-position: 74% 32%; }
/* Patron (5 Eylül): rapor açılışındaki fotoğraf sağa yanaşsın, Başkan görünsün.
   Fon kutusu soldan %16 içeri alınır (görsel sağa kayar), sağ taraftaki perde açılır. */
/* overflow hidden: GSAP görseli 1.08 büyütüyor, kutunun soluna taşan şerit perdenin dışında kalıyordu (ölçüldü: dikey çizgi) */
.rapor-acilis .sahne-fon { inset-inline-start: 16%; overflow: hidden; }
.rapor-acilis .sahne-fon::after { background:
    linear-gradient(180deg, color-mix(in srgb, var(--zemin) 70%, transparent) 0%, transparent 22%, transparent 78%, var(--zemin) 100%),
    linear-gradient(90deg, var(--zemin) 0%, color-mix(in srgb, var(--zemin) 92%, transparent) 22%,
      color-mix(in srgb, var(--zemin) 30%, transparent) 48%, transparent 70%); }
:root[data-tema="acik"] .rapor-acilis .sahne-fon::after { background:
    linear-gradient(180deg, color-mix(in srgb, var(--zemin) 70%, transparent) 0%, transparent 22%, transparent 78%, var(--zemin) 100%),
    linear-gradient(90deg, var(--zemin) 0%, color-mix(in srgb, var(--zemin) 96%, transparent) 26%,
      color-mix(in srgb, var(--zemin) 62%, transparent) 52%, color-mix(in srgb, var(--zemin) 28%, transparent) 75%, color-mix(in srgb, var(--zemin) 12%, transparent) 100%); }
:root[data-tema="acik"] .sahne-fon::after { background:
    linear-gradient(180deg, color-mix(in srgb, var(--zemin) 70%, transparent) 0%, transparent 22%, transparent 78%, var(--zemin) 100%),
    linear-gradient(90deg, var(--zemin) 0%, color-mix(in srgb, var(--zemin) 94%, transparent) 42%,
      color-mix(in srgb, var(--zemin) 62%, transparent) 68%, color-mix(in srgb, var(--zemin) 25%, transparent) 100%); }

/* kaydırma ipucu */
.kaydir-ipucu { position: absolute; inset-inline-start: 50%; inset-block-end: 1.6rem; translate: -50% 0;
  width: 1px; height: 3.2rem; background: linear-gradient(180deg, var(--vurgu), transparent); opacity: 0.8;
  animation: ipucu 2.2s var(--es-yumusak) infinite; }
@keyframes ipucu { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

@media print { .isik-katmani, .kaydir-ipucu, .dev-yazi { display: none !important; } .sahne { min-height: auto; } }

@media (prefers-reduced-motion: reduce) {
  .isik { animation: none; }
  .kaydir-ipucu { animation: none; }
  .dev-yazi { transform: none; }
  .js-var [data-belir] { transition: none; transform: none; }
}

/* ---------- marka parıltısı ----------
   Patronun elindeki 4 sn'lik logo videosu yerine: ışık CANLI metnin
   üstünden geçer. Gerekçe: ad metin olarak kalır (Kural 2 — görünürlük
   yalnız ad/unvan/şehir üzerinden kurulabiliyor, adı resme gömmek onu
   kapatır), renk iki temada da belirteçten gelir ve dosya boyutu sıfırdır.
   YALNIZ ÜST BAR: alt bilgideki marka --metin-sonuk ile boyanıyor,
   `color: transparent` currentColor'ı yok ettiği için oraya taşınmaz. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .ust .marka,
  .ust .marka span {
    /* İKİ katman: üstte gezen ışık, altta TABAN renk. Tek katmanla
       denendi ve yazının çoğu ŞEFFAF kaldı — 260%'lik görsel `no-repeat`
       ile 150% konumunda kutunun yalnız %20'sini kaplıyor, gerisinde
       boyanacak arka plan kalmıyor. Taban katmanı zemini garantiler. */
    background-image:
      linear-gradient(100deg,
        transparent 0 34%,
        var(--parilti-isik) 50%,
        transparent 66% 100%),
      linear-gradient(var(--parilti-taban), var(--parilti-taban));
    background-size: 210% 100%, 100% 100%;
    background-position: 150% 0, 0 0;   /* durgun hâlde ışık kadrajın dışında */
    background-repeat: no-repeat, no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: marka-parilti 1900ms var(--es-yumusak) 500ms 1 both;
  }
  .ust .marka      { --parilti-taban: var(--metin); --parilti-isik: var(--parilti); }
  .ust .marka span { --parilti-taban: var(--vurgu); --parilti-isik: var(--metin); }
}
@keyframes marka-parilti {
  from { background-position: 150% 0, 0 0; }
  to   { background-position: -50% 0, 0 0; }
}

/* Azaltılmış hareket kuralı parıltı bloğunun SONRASINA yazılmalı: önce
   yazılınca kaynak sırası yüzünden eziliyordu (ölçüldü — reduced-motion
   bağlamında animationName hâlâ marka-parilti dönüyordu). Taban katmanı
   her hâlde boyandığı için animasyon kapanınca yazı normal rengiyle
   durur, şeffaf kalmaz. */
@media (prefers-reduced-motion: reduce) {
  .ust .marka, .ust .marka span { animation: none; }
}