/* PAYON Ekran · Tanıtım sahnesi (tanitim.js). Sinema: kelime açılışlı mesaj + menü turu. Sade (ya da hareketi azalt): yalnız yumuşak geçiş. */
.s-tanitim.tn { position: absolute; inset: 0; display: block; padding: 0; background: #0A1A30; overflow: hidden; }
.tn-k { position: absolute; inset: 0; overflow: hidden; color: #fff; }
.tn-cik { animation: tnCik .9s ease forwards; pointer-events: none; }
@keyframes tnCik { to { opacity: 0; } }
/* giriş efektleri (sırayla): iris, kayma, yakınlaşma */
.tn-g-iris { animation: tnIris 1s var(--ease) both; z-index: 2; }
@keyframes tnIris { from { clip-path: circle(0% at 50% 55%); } to { clip-path: circle(150% at 50% 55%); } }
.tn-g-kay { animation: tnKay .9s var(--ease) both; z-index: 2; }
@keyframes tnKay { from { transform: translateX(8%); opacity: 0; } to { transform: none; opacity: 1; } }
.tn-g-yakin { animation: tnYakin 1s var(--ease) both; z-index: 2; }
@keyframes tnYakin { from { transform: scale(1.08); opacity: 0; } to { transform: none; opacity: 1; } }
.tn-g-sol { animation: tnSol .8s ease both; z-index: 2; }
@keyframes tnSol { from { opacity: 0; } to { opacity: 1; } }

/* ---- mesaj ---- */
.tn-mesaj { display: grid; place-content: center; text-align: center; padding: 6vw; background: hsl(var(--h) 55% 11%); }
.tn-aurora { position: absolute; inset: -20%; filter: blur(8vmin); opacity: .85; }
.tn-aurora i { position: absolute; border-radius: 50%; width: 60vmax; height: 60vmax; animation: tnAk 16s ease-in-out infinite alternate; }
.tn-aurora i:nth-child(1) { background: hsl(var(--h) 80% 38%); left: -12%; top: -30%; }
.tn-aurora i:nth-child(2) { background: hsl(calc(var(--h) + 55) 85% 42%); right: -18%; top: 5%; animation-duration: 21s; animation-delay: -6s; }
.tn-aurora i:nth-child(3) { background: hsl(calc(var(--h) - 40) 70% 30%); left: 20%; bottom: -45%; animation-duration: 25s; animation-delay: -12s; }
@keyframes tnAk { to { transform: translate(10vw, 8vh) scale(1.15) rotate(18deg); } }
.tn-kor { position: absolute; inset: 0; pointer-events: none; }
.tn-kor s { position: absolute; bottom: -4vh; left: calc(var(--n) * 13%); width: .7vmin; height: .7vmin; border-radius: 50%; background: #FFD79A; opacity: 0; box-shadow: 0 0 1.4vmin #F0A23B; animation: tnKor calc(7s + var(--n) * 1.3s) linear infinite; animation-delay: calc(var(--n) * -1.7s); }
@keyframes tnKor { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(calc(var(--n) * 1.2vw), -105vh); opacity: 0; } }
.tn-mekan { position: relative; font: 800 clamp(16px, 2vw, 32px)/1 "Barlow Condensed", sans-serif; letter-spacing: .38em; text-transform: uppercase; color: #FFD79A; margin-bottom: 3.5vh; opacity: 0; animation: tnYuk 1s .15s var(--ease) forwards; }
.tn-yazi { position: relative; margin: 0 auto; max-width: 20ch; font: 800 clamp(48px, 8vw, 150px)/1.02 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .02em; text-wrap: balance; text-shadow: 0 .4vmin 3vmin rgba(0, 0, 0, .35); }
.tn-boy-o .tn-yazi { font-size: clamp(40px, 6.4vw, 118px); max-width: 24ch; }
.tn-boy-u .tn-yazi { font-size: clamp(32px, 4.6vw, 84px); max-width: 30ch; line-height: 1.12; }
.tn-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.tn-w b { display: inline-block; font-weight: inherit; transform: translateY(110%) rotate(4deg); filter: blur(10px); opacity: 0; animation: tnKelime 1.1s calc(.45s + var(--i) * .16s) var(--ease) forwards; }
@keyframes tnKelime { to { transform: none; filter: blur(0); opacity: 1; } }
.tn-cizgi { position: relative; height: .6vmin; margin: 4vh auto 0; width: 0; border-radius: 1vmin; background: linear-gradient(90deg, transparent, #F0A23B, #FFD79A, #F0A23B, transparent); animation: tnCizgi 1.6s 1.1s var(--ease) forwards; }
@keyframes tnCizgi { to { width: min(46vw, 640px); } }
.tn-sayac { position: absolute; bottom: 5vh; left: 0; right: 0; display: flex; justify-content: center; gap: 1vmin; }
.tn-sayac i { width: 1vmin; height: 1vmin; border-radius: 50%; background: rgba(255, 255, 255, .28); }
.tn-sayac i.on { background: #FFD79A; box-shadow: 0 0 1.6vmin #F0A23B; }
@keyframes tnYuk { from { transform: translateY(2vh); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- bölüm kapağı ---- */
.tn-bolum { display: grid; place-content: center; text-align: center; background: hsl(var(--h) 50% 10%); }
.tn-bolum-bg { position: absolute; inset: -6%; background: linear-gradient(135deg, hsl(var(--h) 70% 30%), hsl(calc(var(--h) + 40) 65% 18%)) center/cover; filter: blur(2.2vmin) saturate(1.15); transform: scale(1.12); animation: tnKen 12s ease-out forwards; opacity: .75; }
@keyframes tnKen { to { transform: scale(1); } }
.tn-bolum-ort { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 50%, rgba(8, 18, 34, .25), rgba(8, 18, 34, .82)); }
.tn-bno { position: absolute; top: 4vh; left: 5vw; font: 800 clamp(30px, 5vw, 90px)/1 "Barlow Condensed", sans-serif; color: transparent; -webkit-text-stroke: .15vmin rgba(255, 255, 255, .6); letter-spacing: .06em; opacity: 0; animation: tnYuk .9s .2s var(--ease) forwards; }
.tn-bno span { font-size: .55em; opacity: .7; }
.tn-bad { position: relative; margin: 0; font: 800 clamp(64px, 12vw, 230px)/.95 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 .6vmin 4vmin rgba(0, 0, 0, .5); animation: tnBad 1.4s .1s var(--ease) both; }
@keyframes tnBad { from { letter-spacing: .5em; opacity: 0; filter: blur(16px); } to { letter-spacing: .02em; opacity: 1; filter: blur(0); } }
.tn-bad2 { position: relative; margin-top: 1.5vh; font: 600 clamp(22px, 3.2vw, 56px)/1.1 "Barlow Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #FFD79A; opacity: 0; animation: tnYuk 1s .8s var(--ease) forwards; }
.tn-bn { position: relative; margin: 2vh 0 0; font: 600 clamp(18px, 2vw, 34px)/1 "Barlow Condensed", sans-serif; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .7); opacity: 0; animation: tnYuk 1s 1s var(--ease) forwards; }

/* ---- liste sayfası: solda vitrin, sağda satırlar ---- */
.tn-liste { display: grid; grid-template-columns: 42% 1fr; background: hsl(var(--h) 45% 9%); }
.tn-sol { position: relative; overflow: hidden; }
.tn-vitrin { position: absolute; inset: 0; }
.tn-foto { position: absolute; inset: 0; background: linear-gradient(150deg, hsl(var(--h) 65% 30%), hsl(calc(var(--h) + 50) 60% 16%)) center/cover; opacity: 0; transition: opacity 1.2s ease; transform: scale(1.1); }
.tn-foto.on { opacity: 1; animation: tnKen2 9s ease-out forwards; }
@keyframes tnKen2 { to { transform: scale(1); } }
.tn-foto.yok::after { content: attr(data-h); position: absolute; inset: 0; display: grid; place-content: center; font: 800 36vmin/1 "Barlow Condensed", sans-serif; color: rgba(255, 255, 255, .16); }
.tn-sol::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, hsl(var(--h) 45% 9%)), linear-gradient(0deg, rgba(5, 12, 24, .75), transparent 40%); pointer-events: none; }
.tn-etiket { position: absolute; z-index: 1; left: 4vw; bottom: 5vh; font: 800 clamp(30px, 4.4vw, 80px)/1 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 .4vmin 2vmin rgba(0, 0, 0, .6); }
.tn-etiket span { display: block; margin-top: 1vh; font-size: .36em; letter-spacing: .3em; color: #FFD79A; }
.tn-sag { list-style: none; margin: 0; padding: 5vh 4.5vw 5vh 1.5vw; display: flex; flex-direction: column; justify-content: center; gap: clamp(8px, 1.8vh, 26px); }
.tn-r { display: flex; align-items: baseline; gap: 1.4vw; padding: 1.4vh 1.6vw; border-radius: 1.2vmin; opacity: 0; transform: translateX(6vw); animation: tnSatir .9s calc(.25s + var(--i) * .18s) var(--ease) forwards; transition: background .6s ease, transform .6s var(--ease); }
@keyframes tnSatir { to { opacity: 1; transform: none; } }
.tn-r.aktif { background: linear-gradient(90deg, hsl(var(--h) 70% 40% / .35), transparent); transform: translateX(1vw) scale(1.015); }
.tn-ra { display: flex; flex-direction: column; min-width: 0; }
.tn-ra b { font: 800 clamp(26px, 3.6vw, 68px)/1.04 "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .03em; }
.tn-ra em { font: 600 clamp(15px, 1.7vw, 30px)/1.2 "Barlow", sans-serif; font-style: normal; color: #FFD79A; letter-spacing: .06em; }
.tn-ra small { margin-top: .4vh; font: 500 clamp(13px, 1.4vw, 24px)/1.3 "Barlow", sans-serif; color: rgba(255, 255, 255, .62); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tn-nk { flex: 1; min-width: 2vw; border-bottom: .3vmin dotted rgba(255, 255, 255, .3); transform: translateY(-.6vmin); }
.tn-rf { font: 800 clamp(26px, 3.6vw, 68px)/1 "Barlow Condensed", sans-serif; color: #F0A23B; letter-spacing: .02em; white-space: nowrap; }
.tn-r.bitti .tn-ra b, .tn-r.bitti .tn-rf { opacity: .45; text-decoration: line-through; }
.tn-r.bitti .tn-rf { text-decoration: none; font-size: .6em; letter-spacing: .2em; text-transform: uppercase; color: #fff; }
@media (orientation: portrait) {
  .tn-liste { grid-template-columns: 1fr; grid-template-rows: 34% 1fr; }
  .tn-sol::after { background: linear-gradient(0deg, hsl(var(--h) 45% 9%), transparent 60%); }
  .tn-sag { padding: 2vh 5vw 4vh; }
  .tn-etiket { left: 5vw; bottom: 3vh; }
}
/* sade / hareketi azalt: hareket yok */
.tn-sade .tn-aurora i, .tn-sade .tn-kor s, .tn-sade .tn-bolum-bg, .tn-sade .tn-foto.on { animation: none; }
.tn-sade .tn-kor { display: none; }
.tn-sade .tn-w b, .tn-sade .tn-mekan, .tn-sade .tn-bno, .tn-sade .tn-bad, .tn-sade .tn-bad2, .tn-sade .tn-bn, .tn-sade .tn-r { animation: none; opacity: 1; transform: none; filter: none; }
.tn-sade .tn-cizgi { animation: none; width: min(46vw, 640px); }
.tn-sade .tn-r.aktif { transform: none; }
@media (prefers-reduced-motion: reduce) { .tn-aurora i, .tn-kor s, .tn-bolum-bg, .tn-foto.on { animation: none; } }