/* ═══════════════════════════════════════════════════════════════ TİYATROL — "Çam & Mercan" (Pine & Coral) tasarım sistemi Koyu çam yeşili kulis + fildişi kağıt + mercan reflektör vurgusu. Çapraz kesimli bölümler, organik "blob" görsel çerçeveleri ve bilet-koparma motifli takvim kartları — sahne kimliğine özgü, önceki iki tasarımdan (lacivert/altın, bordo/pudra) kasıtlı olarak farklı bir renk ve şekil dili. ═══════════════════════════════════════════════════════════════ */ :root { --pine-deep: #081712; --pine: #0F2318; --pine-mid: #1B3A26; --pine-line: rgba(242,236,217,.14); --pine-line-strong: rgba(242,236,217,.28); --ivory: #F2ECD9; --ivory-2: #EAE1C8; --ivory-dim: rgba(242,236,217,.7); --ivory-faint: rgba(242,236,217,.42); --ink: #12201A; --ink-dim: rgba(18,32,26,.64); --ink-faint: rgba(18,32,26,.42); --ink-line: rgba(18,32,26,.14); --coral: #E85C3F; --coral-deep: #C1432A; --coral-light: #F0876F; --sage: #8FB29C; --wine: #4A0D16; --wine-deep: #2A070C; --near-black: #0C0405; --serif: 'Fraunces', Georgia, serif; --sans: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif; --ease: cubic-bezier(.16,.84,.44,1); } *{box-sizing:border-box; margin:0; padding:0;} html{scroll-behavior:smooth;} body{background:var(--ivory); color:var(--ink); font-family:var(--sans); overflow-x:hidden; -webkit-font-smoothing:antialiased;} img{max-width:100%; display:block;} a{color:inherit; text-decoration:none;} section{position:relative;} .eyebrow{font-size:11px; font-weight:700; letter-spacing:2.4px; color:var(--coral-deep); text-transform:uppercase; margin-bottom:14px;} .eyebrow--light{color:var(--coral-light);} .h2{font-family:var(--serif); font-weight:500; font-size:clamp(30px,4.2vw,50px); color:var(--ink); text-wrap:balance;} .h2--light{color:var(--ivory);} .p{font-size:15px; line-height:1.8; color:var(--ink-dim);} .link-arrow{display:inline-flex; gap:6px; font-size:12.5px; font-weight:700; letter-spacing:.4px; color:var(--coral-deep); border-bottom:1px solid currentColor; padding-bottom:3px; width:max-content;} #fx{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;} .progress{position:fixed; top:0; left:0; right:0; height:3px; z-index:1000; background:rgba(18,32,26,.08);} .progress__bar{height:100%; width:0%; background:var(--coral); transition:width .1s linear;} /* ═══════════════ PERDE AÇILIŞI ═══════════════ Saf CSS — JS'e hiç bağımlı değil, bir script hatası açılışı asla engellemesin diye animasyon kendiliğinden, garanti tamamlanır. */ .curtain{position:fixed; inset:0; z-index:10000; animation:curtainHide .01s 1.5s forwards;} .curtain__panel{position:absolute; top:0; bottom:0; width:50%; background:var(--pine-deep); animation-duration:.9s; animation-timing-function:cubic-bezier(.76,0,.24,1); animation-delay:.45s; animation-fill-mode:forwards;} .curtain__panel--l{left:0; animation-name:curtainL;} .curtain__panel--r{right:0; animation-name:curtainR;} .curtain__mark{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--serif); font-style:italic; font-size:15px; letter-spacing:2px; color:var(--ivory-dim); animation:curtainMark .35s ease .45s forwards;} @keyframes curtainL{to{transform:translateX(-100%);}} @keyframes curtainR{to{transform:translateX(100%);}} @keyframes curtainMark{to{opacity:0;}} @keyframes curtainHide{to{opacity:0; visibility:hidden; pointer-events:none;}} @media (prefers-reduced-motion:reduce){ .curtain{display:none;} } /* ═══════════════ ÖZEL İMLEÇ ═══════════════ */ .cursor-dot,.cursor-ring{position:fixed; top:0; left:0; pointer-events:none; z-index:9999; border-radius:50%; transform:translate(-50%,-50%); transition:opacity .25s;} .cursor-dot{width:6px; height:6px; background:var(--coral);} .cursor-ring{width:28px; height:28px; border:1px solid rgba(232,92,63,.5); transition:width .25s var(--ease), height .25s var(--ease), border-color .25s, background .25s;} .cursor-ring.is-hover{width:48px; height:48px; border-color:var(--coral); background:rgba(232,92,63,.12);} @media (hover:none),(pointer:coarse){ .cursor-dot,.cursor-ring{display:none;} } /* ═══════════════ SPOTLIGHT PARILTISI (kart üstünde fareyi takip eder) ═══════════════ */ .show::before,.player__ring::before{content:''; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .35s; background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(240,135,111,.28), transparent 70%);} .show:hover::before,.player:hover .player__ring::before{opacity:1;} .player__ring{position:relative;} /* ═══════════════ NAV ═══════════════ */ .nav{position:fixed; top:0; left:0; right:0; z-index:500; display:flex; align-items:center; gap:28px; padding:20px clamp(20px,4vw,56px); color:var(--ivory); transition:background .3s var(--ease), padding .3s var(--ease);} .nav.is-scrolled{background:rgba(8,23,18,.9); backdrop-filter:blur(10px); padding-block:13px; border-bottom:1px solid var(--pine-line);} .nav__mark{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-size:19px; font-style:italic; margin-right:auto;} .nav__mark-logo{width:30px; height:30px; border-radius:50%; object-fit:cover; object-position:top; border:1.5px solid rgba(242,236,217,.5); background:var(--ivory); flex:none;} .nav__links{display:flex; gap:26px;} .nav__links a{font-size:11.5px; font-weight:600; letter-spacing:1.2px; text-transform:uppercase; opacity:.82;} .nav__links a:hover{opacity:1;} .nav__cta{font-size:11.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; background:var(--coral); color:var(--ivory); padding:10px 20px; border-radius:2px 10px 2px 10px;} .nav__burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer;} .nav__burger span{width:22px; height:2px; background:var(--ivory); border-radius:2px;} @media (max-width:920px){ .nav__links{display:none;} .nav__cta{display:none;} .nav__burger{display:flex;} } .mnav{position:fixed; inset:0; z-index:900; background:var(--pine-deep); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; transform:translateY(-100%); transition:transform .4s var(--ease);} .mnav.is-open{transform:translateY(0);} .mnav a{font-family:var(--serif); font-size:24px; color:var(--ivory);} .mnav__cta{margin-top:10px; background:var(--coral); padding:12px 26px; border-radius:2px 10px 2px 10px; font-family:var(--sans); font-weight:700; font-size:13px;} /* ═══════════════ HERO — bölünmüş ekran (video solda, panel sağda, yumuşak geçiş) ═══════════════ Video artık sol yarının tamamını kaplıyor, sağdaki panel onun üzerine sert bir çizgiyle değil, panelin kendi renginin video üstüne yumuşakça erimesiyle bağlanıyor (dikişte "soft geçiş"). Alt kısımda ise koyu şarap kırmızısından siyaha giden bir viraj var (yeşil çam tonu YOK). */ .hero{position:relative; min-height:100vh; background:var(--pine-deep); color:var(--ivory); overflow:hidden; display:grid; grid-template-columns:1.15fr 1fr;} .hero__frame{position:relative; overflow:hidden; min-height:100vh;} .hero__video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.94;} .hero__frame::after{ content:''; position:absolute; inset:0; pointer-events:none; background: linear-gradient(90deg, transparent 58%, var(--pine) 100%), linear-gradient(180deg, transparent 0%, transparent 50%, rgba(74,13,22,.5) 76%, var(--near-black) 100%); } .hero__vertical{position:absolute; right:22px; top:50%; z-index:2; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; font-size:10.5px; font-weight:700; letter-spacing:3px; color:rgba(242,236,217,.6); text-transform:uppercase;} .hero__panel{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; padding:clamp(120px,11vw,160px) clamp(24px,4vw,64px) clamp(64px,7vw,90px); background:linear-gradient(200deg, var(--pine-deep), var(--pine)); } .hero__cues{display:flex; flex-direction:column; gap:5px;} .hero__cues span{font-size:10.5px; font-weight:700; letter-spacing:2.2px; color:var(--ivory-faint); text-transform:uppercase;} .hero__divider{width:60px; height:1px; background:var(--pine-line-strong); margin:20px 0 26px;} .hero__title{font-family:var(--serif); font-weight:500; font-size:clamp(40px,6.4vw,80px); line-height:.98; letter-spacing:-.5px;} .hero__title em{font-style:italic; color:var(--coral-light);} .hero__tagline{font-family:var(--serif); font-style:italic; font-size:16px; color:var(--coral-light); margin-top:18px;} .hero__lede{margin-top:10px; max-width:400px; font-size:13px; font-weight:600; letter-spacing:.3px; color:var(--ivory-dim);} .hero__actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;} .hero__scroll{position:absolute; left:50%; transform:translateX(-50%); bottom:36px; z-index:3; width:34px; height:54px; border:1px solid rgba(242,236,217,.4); border-radius:20px;} .hero__scroll span{position:absolute; top:8px; left:50%; width:4px; height:8px; background:var(--coral-light); border-radius:2px; transform:translateX(-50%); animation:scrollDot 1.6s ease-in-out infinite;} @keyframes scrollDot{0%{top:8px; opacity:1;} 70%{top:32px; opacity:0;} 100%{top:8px; opacity:0;}} @media (max-width:900px){ .hero{grid-template-columns:1fr; min-height:auto;} .hero__frame{min-height:56vh; order:1;} .hero__panel{padding:56px 24px 64px; order:2;} .hero__title{font-size:clamp(38px,11vw,56px);} .hero__vertical{display:none;} } .btn{display:inline-flex; align-items:center; gap:8px; padding:14px 26px; font-size:11.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; border-radius:2px 14px 2px 14px; transition:transform .2s var(--ease), background .2s;} .btn--fill{background:var(--coral); color:var(--ivory);} .btn--fill:hover{background:var(--coral-deep); transform:translateY(-2px);} .btn--line{border:1px solid var(--pine-line-strong); color:var(--ivory);} .btn--line:hover{background:rgba(242,236,217,.08); transform:translateY(-2px);} /* ═══════════════ MARQUEE ═══════════════ */ .marquee{background:var(--coral); overflow:hidden; padding:14px 0;} .marquee__row{display:flex; gap:40px; width:max-content; white-space:nowrap; animation:marquee 26s linear infinite;} @keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}} .marquee__item{font-family:var(--serif); font-style:italic; font-size:16px; color:var(--pine-deep); display:flex; align-items:center; gap:40px;} /* ═══════════════ ABOUT ═══════════════ */ .about{background:var(--ivory); padding:clamp(70px,10vw,120px) clamp(20px,4vw,56px); display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center;} .about__art{position:relative; aspect-ratio:1/1;} .about__blob{position:absolute; background:var(--pine-mid) center/cover no-repeat; box-shadow:0 24px 50px rgba(18,32,26,.2);} .about__blob--a{inset:0 20% 15% 0; border-radius:63% 37% 54% 46% / 43% 37% 63% 57%; background-image:var(--about-img-1);} .about__blob--b{inset:32% 0 0 34%; border-radius:37% 63% 46% 54% / 57% 63% 37% 43%; border:7px solid var(--ivory); background-image:var(--about-img-2);} .about__art--single .about__blob--a{inset:6% 8% 6% 8%;} .about__art--single .about__blob--b{display:none;} .about__copy{max-width:580px;} .about__copy .h2 em{font-style:italic; color:var(--coral-deep);} .about__copy .p{margin:20px 0 26px;} @media (max-width:820px){ .about{grid-template-columns:1fr;} .about__art{aspect-ratio:4/3; margin-bottom:10px;} } /* ═══════════════ PITCH ═══════════════ */ .pitch{background:var(--pine-deep); color:var(--ivory); padding:clamp(60px,8vw,100px) clamp(20px,4vw,56px);} .pitch__grid{max-width:1400px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--pine-line); border:1px solid var(--pine-line);} .pitch__card{background:var(--pine-deep); padding:30px 24px; display:flex; flex-direction:column; gap:10px;} .pitch__num{font-family:var(--serif); font-size:13px; color:var(--coral-light); font-style:italic;} .pitch__card h3{font-family:var(--serif); font-weight:500; font-size:18px;} .pitch__card p{font-size:13px; line-height:1.7; color:var(--ivory-dim);} @media (max-width:900px){ .pitch__grid{grid-template-columns:1fr 1fr;} } @media (max-width:560px){ .pitch__grid{grid-template-columns:1fr;} } /* ═══════════════ HEAD (shared) ═══════════════ */ .head{max-width:1400px; margin:0 auto; padding:0 clamp(20px,4vw,56px) 36px; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap;} .head__sub{max-width:1400px; margin:-18px auto 30px; padding:0 clamp(20px,4vw,56px); font-size:13.5px; color:var(--ivory-dim);} .loading{display:flex; align-items:center; gap:12px; color:var(--ink-faint); font-size:14px; padding:30px clamp(20px,4vw,56px);} .loading--light{color:var(--ivory-faint);} .spin{width:15px; height:15px; border-radius:50%; border:2px solid rgba(18,32,26,.15); border-top-color:var(--coral-deep); animation:spin .8s linear infinite;} .loading--light .spin{border-color:rgba(242,236,217,.2); border-top-color:var(--coral-light);} @keyframes spin{to{transform:rotate(360deg);}} .empty{max-width:560px; padding:30px clamp(20px,4vw,56px); color:var(--ink-faint); font-size:13.5px; line-height:1.7; border-left:2px solid var(--coral);} .empty--light{color:var(--ivory-faint); border-left-color:var(--coral-light);} /* ═══════════════ REPERTOIRE ═══════════════ */ .repertoire{background:var(--ivory); padding:clamp(70px,9vw,110px) 0;} .repertoire__grid{max-width:1400px; margin:0 auto; padding:0 clamp(20px,4vw,56px); display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:24px;} .show{position:relative; overflow:hidden; aspect-ratio:3/4; border-radius:4px 28px 4px 28px; background:var(--pine-mid); cursor:pointer; box-shadow:0 16px 34px rgba(18,32,26,.14);} .show{display:block;} .show__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .45s ease, transform .6s var(--ease);} .show:hover .show__img--primary,.show.is-active .show__img--primary{transform:scale(1.05);} .show__img--secondary{opacity:0;} .show:hover .show__img--secondary,.show.is-active .show__img--secondary{opacity:1;} .show:hover .show__img--primary,.show.is-active .show__img--primary{opacity:0;} .show__img--ph{display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:16px; color:var(--ivory-dim); text-align:center; padding:26px;} .show__shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,23,18,.05) 0%, rgba(8,23,18,.25) 45%, rgba(8,23,18,.94) 100%);} .show__cat{position:absolute; top:14px; left:14px; padding:5px 12px; border-radius:2px 8px; background:var(--coral); color:var(--ivory); font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;} .show__body{position:absolute; left:0; right:0; bottom:0; padding:20px; color:var(--ivory);} .show__name{font-family:var(--serif); font-size:20px;} .show__author{font-size:10.5px; font-weight:700; letter-spacing:.4px; color:var(--coral-light); margin-top:2px; text-transform:uppercase;} .show__desc{font-size:12px; color:var(--ivory-dim); line-height:1.6; max-height:0; opacity:0; overflow:hidden; transition:max-height .4s var(--ease), opacity .3s;} .show:hover .show__desc,.show.is-active .show__desc{max-height:70px; opacity:1; margin-top:6px;} .show__meta{display:flex; gap:12px; margin-top:8px; font-size:10.5px; color:var(--ivory-faint); text-transform:uppercase;} /* ═══════════════ TEAM (dairesel — "sahneye çıkış" sahne ışığı efekti) ═══════════════ Kadro bölümü artık sıradan bir liste değil: kartlar perde arkasından sırayla sahneye çıkıyor (stagger), her biri sahneye adım attığında üzerine bir spot ışığı düşüyor ve silüetten gerçek portreye "aydınlanarak" geçiyor — seyirci koltuğundan izliyormuş hissi. */ .team{background:var(--pine); color:var(--ivory); padding:clamp(70px,9vw,110px) 0; position:relative; overflow:hidden;} .team::before{content:''; position:absolute; top:-14%; left:50%; width:150%; height:65%; transform:translateX(-50%); background:radial-gradient(ellipse at center, rgba(240,135,111,.12), transparent 68%); pointer-events:none;} .team__rail{position:relative; z-index:1; display:flex; justify-content:center; gap:28px; overflow-x:auto; padding:6px clamp(20px,4vw,56px) 10px;} .player{flex:0 0 160px; text-align:center;} .team .player.reveal{opacity:0; transform:translateY(46px) scale(.9); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:calc(var(--i,0) * 110ms);} .team .player.reveal.in{opacity:1; transform:translateY(0) scale(1);} .player__ring{position:relative; width:150px; height:150px; margin:0 auto 14px; border-radius:50%; overflow:hidden; border:2px solid var(--pine-line-strong); background:var(--pine-mid);} .player__ring::after{content:''; position:absolute; inset:-10px; z-index:3; border-radius:50%; background:radial-gradient(circle, rgba(240,135,111,.65), rgba(240,135,111,.15) 55%, transparent 72%); opacity:0; transform:scale(.5); pointer-events:none;} .team .player.reveal.in .player__ring::after{animation:spotlightHit 1.2s var(--ease) forwards; animation-delay:calc(var(--i,0) * 110ms);} @keyframes spotlightHit{0%{opacity:0; transform:scale(.4);} 40%{opacity:1; transform:scale(1.25);} 100%{opacity:0; transform:scale(1.7);}} .player__img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease), filter 1.05s var(--ease); filter:grayscale(1) brightness(.22) contrast(1.2);} .team .player.reveal.in .player__img{filter:grayscale(0) brightness(1) contrast(1); transition-delay:calc(var(--i,0) * 110ms + 120ms);} .player:hover .player__img{transform:scale(1.08);} .player__img--ph{display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-family:var(--serif); font-size:30px; color:var(--ivory-dim); filter:none;} .player__name{font-family:var(--serif); font-size:15px; opacity:0; transform:translateY(6px); transition:opacity .5s ease, transform .5s ease;} .team .player.reveal.in .player__name{opacity:1; transform:translateY(0); transition-delay:calc(var(--i,0) * 110ms + 300ms);} .player__quote{margin-top:6px; font-size:11px; font-style:italic; color:var(--ivory-faint); line-height:1.5; max-height:60px; overflow:hidden; opacity:0; transition:opacity .5s ease;} .team .player.reveal.in .player__quote{opacity:1; transition-delay:calc(var(--i,0) * 110ms + 380ms);} @media (prefers-reduced-motion:reduce){ .team .player.reveal,.team .player.reveal.in,.player__img,.team .player.reveal.in .player__img,.player__name,.player__quote{transition:none; animation:none; opacity:1; transform:none; filter:none;} .player__ring::after{display:none;} } /* ═══════════════ CALENDAR (bilet kuponu) ═══════════════ */ .calendar{background:var(--ivory); padding:clamp(70px,9vw,110px) 0;} .calendar__tabs{display:flex; gap:6px; overflow-x:auto; margin:0 clamp(20px,4vw,56px) 30px; padding-bottom:4px;} .mtab{flex:none; font-size:11px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:9px 15px; border-radius:100px; border:1px solid var(--ink-line); color:var(--ink-faint); cursor:pointer; background:none;} .mtab.is-active{background:var(--coral); border-color:var(--coral); color:var(--ivory);} .calendar__row{display:flex; gap:20px; overflow-x:auto; padding:0 clamp(20px,4vw,56px) 12px;} .ticket{position:relative; flex:0 0 auto; width:240px; background:var(--ivory-2); border-radius:10px; overflow:hidden; box-shadow:0 10px 24px rgba(18,32,26,.1);} .ticket__img{width:100%; height:130px; object-fit:cover; background:var(--pine-mid);} .ticket__img--ph{display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:13px; color:var(--ivory-dim); text-align:center; padding:10px; height:130px;} .ticket__notch{position:relative; height:0;} .ticket__notch::before,.ticket__notch::after{content:''; position:absolute; top:-9px; width:18px; height:18px; border-radius:50%; background:var(--ivory);} .ticket__notch::before{left:-9px;} .ticket__notch::after{right:-9px;} .ticket__body{padding:14px 16px 16px; border-top:1px dashed var(--ink-line);} .ticket__date{display:flex; align-items:baseline; gap:8px;} .ticket__day{font-family:var(--serif); font-size:26px; color:var(--coral-deep); line-height:1;} .ticket__rest{font-size:10.5px; font-weight:700; color:var(--ink-dim); text-transform:uppercase; line-height:1.3;} .ticket__name{margin-top:6px; font-size:13px; font-weight:700; color:var(--ink);} /* ═══════════════ KRONOLOJİ (dikey zaman çizelgesi) ═══════════════ */ .timeline{background:var(--ivory-2); padding:clamp(70px,9vw,110px) clamp(20px,4vw,56px);} .timeline__rail{position:relative; max-width:900px; margin:50px auto 0;} .timeline__rail::before{content:''; position:absolute; left:50%; top:6px; bottom:6px; width:1px; background:var(--ink-line); transform:translateX(-50%);} .timeline__item{position:relative; width:50%; padding:0 40px 56px; box-sizing:border-box;} .timeline__item:nth-child(odd){margin-left:0; text-align:right;} .timeline__item:nth-child(even){margin-left:50%; text-align:left;} .timeline__dot{position:absolute; top:6px; width:10px; height:10px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 5px var(--ivory-2), 0 0 0 6px var(--ink-line);} .timeline__item:nth-child(odd) .timeline__dot{right:-5px;} .timeline__item:nth-child(even) .timeline__dot{left:-5px;} .timeline__date{font-size:11px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; color:var(--coral-deep); margin-bottom:8px;} .timeline__card{display:inline-flex; gap:14px; align-items:center; background:var(--ivory); border:1px solid var(--ink-line); border-radius:2px 18px; padding:12px; text-decoration:none; transition:transform .3s var(--ease), box-shadow .3s var(--ease); max-width:100%;} .timeline__item:nth-child(odd) .timeline__card{flex-direction:row-reverse;} a.timeline__card:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(18,32,26,.14);} .timeline__img{width:64px; height:64px; border-radius:2px 10px; object-fit:cover; flex:none;} .timeline__img--ph{width:64px; height:64px; border-radius:2px 10px; background:var(--pine-mid); color:var(--ivory-dim); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:10px; text-align:center; padding:4px; flex:none;} .timeline__body{min-width:0;} .timeline__name{font-family:var(--serif); font-size:16px; color:var(--ink); font-weight:600; line-height:1.25;} .timeline__meta{font-size:11.5px; color:var(--ink-faint); margin-top:3px;} @media (max-width:760px){ .timeline__rail::before{left:19px;} .timeline__item,.timeline__item:nth-child(odd),.timeline__item:nth-child(even){width:100%; margin-left:0; text-align:left; padding:0 0 44px 50px;} .timeline__item:nth-child(odd) .timeline__dot,.timeline__item:nth-child(even) .timeline__dot{left:14px; right:auto;} .timeline__item:nth-child(odd) .timeline__card{flex-direction:row;} } /* ═══════════════ KULİSTEN NOTLAR (yapışkan not panosu) ═══════════════ */ .notes{background:var(--ivory-2); padding:clamp(60px,8vw,90px) 0;} .notes__board{max-width:1200px; margin:0 auto; padding:10px clamp(20px,4vw,56px) 0; display:flex; flex-wrap:wrap; gap:26px 22px; justify-content:center;} .note{--r:0deg; flex:0 1 250px; background:var(--ivory); padding:24px 20px 28px; box-shadow:0 10px 22px rgba(18,32,26,.12); transform:rotate(var(--r)); transition:transform .3s var(--ease), box-shadow .3s var(--ease); position:relative;} .note::before{content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%) rotate(-4deg); width:34px; height:14px; background:rgba(232,92,63,.55); border-radius:2px;} .note:hover{transform:rotate(0deg) translateY(-5px); box-shadow:0 20px 34px rgba(18,32,26,.18); z-index:2;} .note p{font-family:var(--serif); font-style:italic; font-size:14.5px; line-height:1.6; color:var(--ink);} .note:nth-child(3n){background:#F7E8DE;} .note:nth-child(4n){background:#EAF0E6;} .note:nth-child(5n){background:#F2E4E9;} @media (prefers-reduced-motion:reduce){ .note{transition:none;} } /* ═══════════════ STATS ═══════════════ */ .stats{background:var(--pine-deep); color:var(--ivory); padding:56px 0;} .stats__grid{max-width:1000px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); text-align:center;} .stat{position:relative; padding:0 16px;} .stat:not(:last-child)::after{content:''; position:absolute; right:0; top:8px; bottom:8px; width:1px; background:var(--pine-line);} .stat__num{font-family:var(--serif); font-size:clamp(30px,4vw,44px); color:var(--coral-light); display:block;} .stat__label{font-size:10.5px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--ivory-dim);} @media (max-width:700px){ .stats__grid{grid-template-columns:repeat(2,1fr); row-gap:26px;} .stat:nth-child(2n)::after{display:none;} } /* ═══════════════ GALLERY ═══════════════ */ .gallery{background:var(--ivory); padding:clamp(70px,9vw,110px) 0;} .gallery__wall{max-width:1400px; margin:0 auto; padding:0 clamp(20px,4vw,56px); columns:4 220px; column-gap:14px;} .gallery__item{break-inside:avoid; margin-bottom:14px; border-radius:4px 18px; overflow:hidden;} .gallery__item img{width:100%; transition:transform .5s var(--ease);} .gallery__item:hover img{transform:scale(1.06);} @media (max-width:700px){ .gallery__wall{columns:2 150px;} } /* ═══════════════ VENUES ═══════════════ */ .venues{background:var(--pine); color:var(--ivory); padding:clamp(70px,9vw,110px) 0;} .venues__grid{max-width:1400px; margin:0 auto; padding:0 clamp(20px,4vw,56px); display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px;} .venue{position:relative; overflow:hidden; border-radius:4px 20px; background:var(--pine-mid); border:1px solid var(--pine-line); min-height:220px; display:flex; align-items:flex-end;} .venue__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease);} .venue:hover .venue__img{transform:scale(1.06);} .venue__img--ph{display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:16px; color:var(--ivory-dim); text-align:center; padding:24px;} .venue__shade{position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,23,18,.05) 0%, rgba(8,23,18,.35) 55%, rgba(8,23,18,.92) 100%);} .venue__body{position:relative; z-index:1; padding:20px; color:var(--ivory);} .venue__name{font-family:var(--serif); font-size:19px;} .venue__addr{font-size:12.5px; color:var(--ivory-dim); line-height:1.5; margin-top:4px;} .venue__cap{font-size:10.5px; color:var(--coral-light); margin-top:6px; font-weight:700; text-transform:uppercase;} /* ═══════════════ PRÖMİYER ARŞİVİ — sekmeli medya sahnesi ═══════════════ Tek bir oyuna sabitlenmiş eski "Prömiyer" bölümünün yerine, mediaLinks alanı dolu HER oyunun kendi sekmesi olduğu, tıklanınca o oyunun video/ ses kayıtlarını gösteren dinamik bir arşiv. Yeni oyun eklendikçe kendi kendine büyür — kod tarafında hiçbir şey sabit değil. */ .mediastage{background:var(--pine-deep); color:var(--ivory); padding:clamp(70px,9vw,110px) 0;} .mediastage__wrap{max-width:1400px; margin:0 auto; padding:0 clamp(20px,4vw,56px); display:grid; grid-template-columns:280px 1fr; gap:28px; align-items:start;} .mediastage__tabs{display:flex; flex-direction:column; gap:10px;} .mediatab{display:flex; align-items:center; gap:14px; padding:10px; border-radius:4px 16px; background:var(--pine-mid); border:1px solid transparent; cursor:pointer; text-align:left; transition:background .25s, border-color .25s, transform .25s; font-family:var(--sans); color:var(--ivory);} .mediatab:hover{transform:translateX(4px);} .mediatab.is-active{background:linear-gradient(120deg, rgba(232,92,63,.24), rgba(232,92,63,.06)); border-color:var(--coral);} .mediatab__thumb{width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none; border:2px solid var(--pine-line-strong);} .mediatab__thumb--ph{display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:16px; background:var(--pine-line); color:var(--ivory-dim);} .mediatab__info{min-width:0;} .mediatab__name{font-family:var(--serif); font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .mediatab__meta{font-size:9.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--coral-light); margin-top:3px;} .mediastage__panel{position:relative; overflow:hidden; background:var(--pine-mid); border-radius:4px 30px; padding:clamp(26px,3.4vw,44px); min-height:360px; display:flex; flex-direction:column; justify-content:center; gap:22px;} .mediastage__panel::before{content:''; position:absolute; inset:0; background:var(--stage-bg,none) center/cover no-repeat; opacity:.14; filter:blur(1px); pointer-events:none;} .mediastage__panel::after{content:''; position:absolute; inset:0; background:linear-gradient(160deg, rgba(27,58,38,.5), rgba(8,23,18,.85)); pointer-events:none;} .mediastage__head{position:relative; z-index:1;} .mediastage__pill{display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:1.6px; color:var(--pine-deep); background:linear-gradient(120deg, var(--coral-light), var(--coral-deep)); padding:5px 14px; border-radius:2px 10px;} .mediastage__cards{position:relative; z-index:1; display:flex; gap:18px; flex-wrap:wrap;} .mediashow{position:relative; flex:1 1 300px; aspect-ratio:16/9; border-radius:4px 20px; overflow:hidden; background:var(--pine-deep); display:flex; align-items:flex-end; justify-content:flex-start;} .mediashow__thumb{position:absolute; inset:0; background-size:cover; background-position:center; opacity:.75; transition:opacity .3s, transform .5s var(--ease);} .mediashow:hover .mediashow__thumb{opacity:.55; transform:scale(1.05);} .mediashow::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,23,18,.1), rgba(8,23,18,.8));} .mediashow__play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:58px; height:58px; border-radius:50%; background:rgba(8,23,18,.55); border:2px solid var(--coral-light); display:flex; align-items:center; justify-content:center; color:var(--coral-light); transition:transform .25s var(--ease), background .25s;} .mediashow:hover .mediashow__play{transform:translate(-50%,-50%) scale(1.1); background:var(--coral);} .mediashow__title{position:relative; z-index:2; padding:14px; font-size:12.5px; font-weight:700; color:var(--ivory);} /* ── Özel ses oynatıcı: yerli