/* Palladium Ataşehir sosyal medya motion serisi: vaka sayfası (2026-10-16, vaka serisi). Çerçeve sitenin (site.css); burası işin kendi dili.
   Renkler Tayfun'un Behance sunumundaki renk noktalarından ve afiş videolarının kendi karelerinden ölçüldü:
     Kapak, konsept, künye : sunumun zemini #050511, logo halesi #023eb6, etiket mavisi (sunumdaki #0044cd'nin dark zeminde okunur tonu)
     Yaz Konserleri        : mavi #0044cd, pembe #ff0080, sarı #ffcc00; zemin videonun mavi-mor degradesinin koyusu (#15458c -> #5e3386)
     Yeni Yıl Coşkusu      : kırmızı #cc0001, beyaz, lacivert #003466
     Çocuk Atölyeleri      : turuncu #fe9900, yeşil #00cc99, beyaz; yazı koyu (#04150f, turuncu üstünde 10:1)
   Yazı: Montserrat (Black başlık, ExtraLight büyük satır, Medium metin, Bold Italic slogan), fonts/ içinde, tam dosyalardan Latin + Türkçe alt küme.
   Hareket (palladium.js): yalnız transform ve opacity; hiçbir şey clip-path ile canlanmaz; döngü yok (videolar hariç: ekranda oynar, dışında durur).
   Bu dosyanın varsayılanı hareketsiz, tam okunur sayfadır (azaltılmış hareket, betik yok): afişler ilk karede durur. */
@font-face { font-family: "PD Mont"; src: url("fonts/mont-extralight.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "PD Mont"; src: url("fonts/mont-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "PD Mont"; src: url("fonts/mont-bolditalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "PD Mont"; src: url("fonts/mont-black.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

.pd {
  --pd-gece: #050511; --pd-hale: #023eb6; --pd-mavi: #3d7bff; --pd-beyaz: #fff; --pd-sis: rgba(255, 255, 255, .72);
  --pd-font: "PD Mont", "Montserrat", system-ui, sans-serif;
  --pd-bosluk: clamp(96px, 17vh, 176px);
  --pd-peek: clamp(96px, 16vh, 150px);
  background: var(--pd-gece); color: var(--pd-beyaz); font: 500 17px/1.7 var(--pd-font);
  overflow-x: clip;
}
.pd *, .pd *::before, .pd *::after { box-sizing: border-box; }
.pd img, .pd video { display: block; -webkit-user-drag: none; user-select: none; }
.pd .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ortak yazı */
.pd-b { position: relative; padding: var(--pd-bosluk) var(--margin, 24px); }
.pd-no { display: flex; align-items: baseline; gap: 12px; margin: 0 0 clamp(14px, 2.2vw, 26px); font: 500 12px/1.2 var(--pd-font); letter-spacing: .22em; text-transform: uppercase; color: var(--no, var(--pd-mavi)); }
.pd-no b { font-weight: 900; color: inherit; }
.pd-no span::before { content: ''; display: inline-block; width: 7px; height: 8px; margin-right: 10px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pd-h2 { margin: 0; font: 900 clamp(34px, min(4.8vw, 8.4vh), 78px)/1.02 var(--pd-font); letter-spacing: -.02em; text-transform: uppercase; color: var(--h, var(--pd-beyaz)); text-wrap: balance; }

/* ---------- 00 kapak ---------- */
.pd-kapak { position: relative; background: radial-gradient(60% 74% at 50% 24%, #0a1f5c 0%, rgba(10, 31, 92, 0) 72%), var(--pd-gece); overflow: clip; }
.pd-kapak-st { display: grid; place-items: end center; height: calc(100svh - var(--nav-h, 72px) - var(--pd-peek)); min-height: 400px; padding: 0 var(--margin, 24px); }
/* sahne: kapağın içindeki en/boy sabit kutu; ölçüler cqw (sahne genişliği) cinsinden, her ekranda aynı kompozisyon */
.pd-sahne { position: relative; width: min(100%, 1480px, calc((100svh - var(--nav-h, 72px) - var(--pd-peek)) * 1.72)); aspect-ratio: 1.72; container-type: inline-size; }
.pd-h1 { position: absolute; z-index: 1; left: 2.2cqw; top: 1.6cqw; margin: 0; font: 200 12.6cqw/.96 var(--pd-font); letter-spacing: .03em; text-transform: uppercase; color: var(--pd-beyaz); }
.pd-ln { display: block; overflow: hidden; padding: 0 0 .06em; }
.pd-ln > span { display: block; }
.pd-marka { position: absolute; z-index: 1; right: 2.6cqw; top: 3.4cqw; width: 26cqw; display: grid; justify-items: end; gap: 1.8cqw; text-align: right; }
.pd-logo { width: 19cqw; height: auto; filter: drop-shadow(0 0 2.2cqw rgba(61, 123, 255, .35)); }
.pd-etiket { margin: 0; font: 900 clamp(9px, 1.2cqw, 16px)/1.3 var(--pd-font); letter-spacing: .3em; text-transform: uppercase; color: var(--pd-mavi); }
.pd-sira { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.pd-ka { position: absolute; bottom: 0; left: calc(var(--x) * 1cqw - var(--w) * .5cqw); z-index: var(--z); width: calc(var(--w) * 1cqw); height: auto; aspect-ratio: 1; object-fit: cover; background: #111;
  border-radius: 2.4cqw; box-shadow: 0 2.4cqw 5cqw rgba(0, 0, 0, .55), 0 0 0 .12cqw rgba(255, 255, 255, .1); transform-origin: 50% 100%; transform: translateY(var(--dy, 0cqw)) rotate(var(--r, 0deg)); }
.pd-ka-1 { --x: 21.5; --w: 28; --z: 2; --r: -5deg; --dy: 5.5cqw; --s: 1; }
.pd-ka-2 { --x: 50; --w: 33; --z: 4; --r: 0deg; --dy: 0cqw; --s: 0; }
.pd-ka-3 { --x: 78.5; --w: 28; --z: 2; --r: 5deg; --dy: 5.5cqw; --s: 1; }
@media (max-width: 760px) {
  .pd { --pd-peek: 84px; }
  .pd-kapak-st { padding: 0 12px; }
  .pd-sahne { width: 100%; height: 100%; aspect-ratio: auto; }
  .pd-h1 { font-size: 19.5cqw; left: 5cqw; top: 5cqw; }
  .pd-marka { right: auto; left: 5.4cqw; top: 54cqw; width: 70cqw; justify-items: start; text-align: left; gap: 3.4cqw; }
  .pd-logo { width: 38cqw; }
  .pd-etiket { font-size: 3cqw; }
  .pd-ka { border-radius: 4.6cqw; }
  .pd-ka-1 { --x: 8; --w: 54; --dy: 8cqw; }
  .pd-ka-2 { --x: 52; --w: 78; }
  .pd-ka-3 { --x: 94; --w: 54; --dy: 8cqw; }
}

/* kapak açılışı: bir kez, sitenin yükleme perdesi (#ld) kalkınca (palladium.js .pd-acik koyar). Bekleme hali .motion'a bağlı; betik hiç
   çalışmazsa pdBekle 6 s sonra biter ve her şey yerinde görünür. Yalnız transform ve opacity */
@keyframes pdBekle { from, to { opacity: 0; } }
@keyframes pdYuk { from { transform: translateY(106%); } to { transform: none; } }
@keyframes pdCik { from { opacity: 0; transform: translateY(calc(var(--dy, 0cqw) + 38cqw)) rotate(var(--r, 0deg)); } to { opacity: 1; transform: translateY(var(--dy, 0cqw)) rotate(var(--r, 0deg)); } }
@keyframes pdSol { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.motion .pd:not(.pd-acik) :is(.pd-ln > span, .pd-ka, .pd-marka > *) { animation: pdBekle 6s linear; }
.motion .pd-acik .pd-ln > span { animation: pdYuk 1.3s var(--emph, cubic-bezier(.16, 1, .3, 1)) backwards; animation-delay: calc(.1s + var(--d, 0) * .14s); }
.motion .pd-acik .pd-ka { animation: pdCik 1.4s var(--emph, cubic-bezier(.16, 1, .3, 1)) backwards; animation-delay: calc(.5s + var(--s, 0) * .12s); }
.motion .pd-acik .pd-marka > * { animation: pdSol 1s var(--emph, cubic-bezier(.16, 1, .3, 1)) backwards; animation-delay: 1.2s; }
.motion .pd-acik .pd-marka > :nth-child(2) { animation-delay: 1.34s; }
.pd-sahne-js :is(.pd-h1, .pd-sira) { will-change: transform; }

/* ---------- konsept ---------- */
.pd-konsept { padding-top: clamp(40px, 6vh, 64px); }
.pd-konsept-ic { max-width: 1180px; margin: 0 auto; }
.pd-lede { max-width: 22em; margin: 0; font: 200 clamp(30px, 4.1vw, 64px)/1.2 var(--pd-font); letter-spacing: -.01em; text-wrap: balance; }
.pd-gov { max-width: 46ch; margin: clamp(32px, 6vh, 64px) 0 0 auto; font: 500 clamp(16px, 1.3vw, 20px)/1.75 var(--pd-font); color: var(--pd-sis); text-wrap: pretty; }
@media (max-width: 760px) { .pd-gov { margin-left: 0; } }

/* ---------- etkinlik sahneleri ---------- */
.pd-ev { position: relative; display: grid; align-items: center; min-height: 100svh; padding: var(--pd-bosluk) var(--margin, 24px); background: var(--z); color: var(--y); overflow: clip; }
.pd-ev-yaz { --z: linear-gradient(176deg, #0a2a63 0%, #2a2170 55%, #4a1f66 100%); --y: #fff; --h: #ffcc00; --no: #ffcc00; --b: #ff0080; --mut: rgba(255, 255, 255, .78); --cizgi: rgba(255, 255, 255, .26); --dev: rgba(255, 255, 255, .06); --soz: #ff0080; }
.pd-ev-yilbasi { --z: #cc0001; --y: #fff; --h: #fff; --no: #fff; --b: #003466; --mut: rgba(255, 255, 255, .84); --cizgi: rgba(255, 255, 255, .34); --dev: rgba(0, 0, 0, .1); --soz: #003466; }
.pd-ev-cocuk { --z: #fe9900; --y: #04150f; --h: #04150f; --no: #04150f; --b: #00cc99; --mut: rgba(4, 21, 15, .82); --cizgi: rgba(4, 21, 15, .28); --dev: rgba(255, 255, 255, .22); --soz: #fff; }
.pd-dev { position: absolute; z-index: 0; left: 3vw; bottom: clamp(20px, 4vh, 48px); margin: 0; width: max-content; font: 900 var(--f, 8vw)/.9 var(--pd-font); letter-spacing: -.03em; white-space: nowrap; color: var(--dev); pointer-events: none; user-select: none; }
.pd-ev-yaz .pd-dev { --f: 8.6vw; }
.pd-ev-yilbasi .pd-dev { --f: 7.6vw; }
.pd-ev-cocuk .pd-dev { --f: 7.2vw; }
.pd-ev-ic { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 6vh, 56px); align-items: center; width: 100%; max-width: 1320px; margin: 0 auto; }
.pd-ev-afis { position: relative; margin: 0; width: min(100%, 520px); justify-self: center; transform: rotate(var(--r, -2deg)); }
.pd-ev-afis::before { content: ''; position: absolute; inset: 0; z-index: 0; border-radius: 28px; background: var(--b); transform: translate(5%, 4.5%) rotate(4deg); }
.pd-ters .pd-ev-afis { --r: 2deg; }
.pd-ters .pd-ev-afis::before { transform: translate(-5%, 4.5%) rotate(-4deg); }
.pd-afis-v { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 28px; background: #111; box-shadow: 0 40px 80px -32px rgba(0, 0, 0, .65); }
.pd-ev-m { min-width: 0; }
.pd-ev .pd-no { color: var(--no); }
.pd-soz { margin: clamp(24px, 4.4vh, 40px) 0 0; padding: 2px 0 2px 20px; border-left: 6px solid var(--soz); }
.pd-soz p { margin: 0; max-width: 20em; font: 700 italic clamp(20px, 1.9vw, 30px)/1.25 var(--pd-font); text-transform: uppercase; text-wrap: balance; }
.pd-sat { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 28px; margin: clamp(28px, 5vh, 48px) 0 0; border-top: 1px solid var(--cizgi); }
.pd-sat div { padding: 16px 0 17px; border-bottom: 1px solid var(--cizgi); }
.pd-sat dt { font: 500 12px/1.3 var(--pd-font); letter-spacing: .2em; text-transform: uppercase; color: var(--mut); }
.pd-sat dd { margin: 6px 0 0; font: 900 clamp(17px, 1.5vw, 22px)/1.25 var(--pd-font); text-transform: uppercase; }
.pd-not { margin: clamp(18px, 3vh, 28px) 0 0; font: 500 15px/1.55 var(--pd-font); color: var(--mut); }
.pd-pal { display: flex; flex-wrap: wrap; gap: 14px 22px; margin: clamp(24px, 4vh, 40px) 0 0; padding: 0; list-style: none; }
.pd-pal li { display: flex; align-items: center; gap: 10px; }
.pd-pal-s { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--cizgi); }
.pd-pal-t { font: 500 11px/1.35 var(--pd-font); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.pd-pal-t b { display: block; font-weight: 900; letter-spacing: .06em; color: var(--y, #fff); }
@media (min-width: 900px) {
  .pd-ev-ic { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 120px); }
  .pd-ev-afis { width: min(100%, 540px, 74svh); justify-self: center; }
  .pd-ters .pd-ev-afis { grid-column: 2; grid-row: 1; }
  .pd-ters .pd-ev-m { grid-column: 1; grid-row: 1; }
}
@media (max-width: 760px) {
  .pd-ev { min-height: 0; }
  .pd-dev { top: clamp(26px, 5vh, 52px); bottom: auto; font-size: 15vw !important; line-height: .86; white-space: normal; width: 90vw; }
  .pd-ev-ic { padding-top: 16vw; }
  .pd-ev-afis::before, .pd-afis-v { border-radius: 22px; }
}

/* ---------- künye ---------- */
.pd-kunye { background: var(--pd-gece); border-top: 1px solid rgba(255, 255, 255, .12); }
.pd-kunye-ic { max-width: 1180px; margin: 0 auto; }
.pd-ust { margin-bottom: clamp(32px, 6vh, 64px); }
.pd-kunye-lede { max-width: 28ch; margin: 0 0 clamp(36px, 7vh, 72px); font: 200 clamp(24px, 2.6vw, 38px)/1.3 var(--pd-font); text-wrap: pretty; }
.pd-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 0; border-top: 1px solid rgba(255, 255, 255, .22); }
.pd-dl div { padding: 18px 20px 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .22); }
.pd-dl dt { font: 500 12px/1.3 var(--pd-font); letter-spacing: .2em; text-transform: uppercase; color: var(--pd-mavi); }
.pd-dl dd { margin: 8px 0 0; font: 500 16px/1.5 var(--pd-font); }
.pd-don { display: inline-flex; align-items: center; gap: 8px; margin-top: clamp(32px, 6vh, 56px); font: 500 14px/1 var(--pd-font); color: var(--pd-beyaz); text-decoration: none; }
.pd-don svg { width: 18px; height: 18px; }
.pd-don:hover span { text-decoration: underline; text-underline-offset: .25em; }
.pd-don:focus-visible { outline: 2px solid var(--pd-mavi); outline-offset: 4px; border-radius: 4px; }

/* ---------- sabit etiket: sitenin üst menü adası gizliyken ya da küçük hapken görünür ---------- */
.pd-sabit { position: fixed; z-index: 45; top: 18px; left: var(--margin, 24px); display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 2 * var(--margin, 24px)); height: 34px; padding: 0 15px 0 11px; border-radius: 999px; background: rgba(5, 5, 17, .9); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 4px 14px rgba(0, 0, 0, .4); font: 500 12px/1 var(--pd-font, system-ui); color: #fff; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateY(-12px); }
.pd-sabit a { display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; letter-spacing: .02em; }
.pd-sabit a svg { width: 15px; height: 15px; }
.pd-sabit a:hover span { text-decoration: underline; text-underline-offset: .25em; }
.pd-sabit a:focus-visible { outline: 2px solid #3d7bff; outline-offset: 4px; border-radius: 4px; }
.pd-sabit-ad { padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .24); font-weight: 900; }
.pd-sabit-k { font-size: 11px; letter-spacing: .1em; color: rgba(255, 255, 255, .72); }
.pd-sabit.on { opacity: 1; visibility: visible; transform: none; }
.motion .pd-sabit { transition: opacity .25s linear, transform .45s var(--emph, ease), visibility 0s linear .25s; }
.motion .pd-sabit.on { transition-delay: 0s; }
@media (max-width: 1180px) { .pd-sabit-k { display: none; } }
.pd-sabit.on.alt { transform: translateY(50px); }

/* ---------- bir kez belirmeler (palladium.js .pd-js koyar; betik yoksa her şey yerinde) ---------- */
.pd-js.motion .pd-rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--emph, ease), transform .7s var(--emph, ease); transition-delay: calc(var(--d, 0) * 90ms); }
.pd-js.motion .pd-rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .motion .pd-sabit { transition: none; }
  .pd-js.motion .pd-rv { opacity: 1; transform: none; transition: none; }
  .motion .pd:not(.pd-acik) :is(.pd-ln > span, .pd-ka, .pd-marka > *), .motion .pd-acik :is(.pd-ln > span, .pd-ka, .pd-marka > *) { animation: none; }
}

/* ---------- 2026-10-21 sade sunum (Kurallar 87): the three events are one stage of the shared assets/sahne.js + sahne.css (bar, panel,
   full screen, stacking come from there). Here only Palladium's own layout of an event inside the stage. Without the script the events
   stay stacked as above. Previous (page-only) version: _arsiv/2026-10-21-palladium-sade/ ---------- */
.pd-afis-b { position: relative; z-index: 1; display: block; width: 100%; padding: 0; border: 0; border-radius: 28px; background: none; }
.pd-afis-b:focus-visible { outline: 3px solid var(--y, #fff); outline-offset: 6px; }
.pd-olaylar { --sh-font: var(--pd-font); --sh-cam: rgba(10, 12, 32, .55); --sh-cam-k: rgba(10, 12, 32, .92); }
.pd-olaylar.sh-on .pd-ev { padding: calc(var(--nav-h, 72px) + 20px) var(--margin, 24px) 120px; }
.pd-olaylar.sh-on .pd-ev-afis { width: min(100%, 520px, calc(100svh - var(--nav-h, 72px) - 200px)); }
.pd-olaylar.sh-on .pd-dev { transform: translateX(calc((var(--lp, .5) - .5) * -8vw)); }
.pd .sh-sheet { --cizgi: rgba(255, 255, 255, .2); --mut: rgba(255, 255, 255, .72); --y: #fff; }
.pd .sh-sheet .pd-sat { grid-template-columns: 1fr; margin-top: 0; }
.pd .sh-sheet .pd-sat div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; }
.pd .sh-sheet .pd-sat dd { margin: 0; font-size: 15px; text-align: right; }
.pd .sh-sheet .pd-pal { margin-top: 18px; }
.pd .sh-sheet .pd-not { font-size: 14px; }
@media (max-width: 760px) {
  .pd-olaylar.sh-on .pd-ev { padding: calc(var(--nav-h, 64px) + 12px) 18px 104px; align-items: start; }
  .pd-olaylar.sh-on .pd-ev-ic { padding-top: 0; gap: 26px; }
  .pd-olaylar.sh-on .pd-ev-afis { width: min(80vw, calc(100svh - var(--nav-h, 64px) - 420px)); min-width: 200px; }
  .pd-olaylar.sh-on .pd-dev { top: auto; bottom: 92px; font-size: 17vw !important; }
  .pd-olaylar.sh-on .pd-h2 { font-size: clamp(30px, 9vw, 40px); }
  .pd-olaylar.sh-on .pd-soz { margin-top: 16px; }
  .pd-olaylar.sh-on .pd-soz p { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .pd-olaylar.sh-on .pd-dev { transform: none; } }