/* ── hero: "Perde açılıyor" ──
   katmanlar: cephe fotoğrafı < gölge < alıntı kâğıtları < spot < filozof < sahne önü < metin < perdeler < saçak < amblem
   JS yoksa / hareket azaltılmışsa: perdeler toplanmış, amblem gizli (son kare) */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 600px; background: var(--ink); color: var(--txt); }
.hero__stage { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }

/* cephe fotoğrafı kaynakta düşük çözünürlüklü: bilinçli alan derinliği (hafif flu) + film greni → yumuşaklık "kalitesiz" değil sinematik okunur;
   heykel ve yazılar keskin kalır. Flu kenarı açık sızdırmasın diye görsel kenarlardan taşırılır. */
.hero__bg, .hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__bg { inset: -14px; width: calc(100% + 28px); height: calc(100% + 28px); }
.hero__bg img { object-fit: cover; object-position: 50% 40%; filter: blur(2.4px) brightness(.5) saturate(.9) contrast(1.08); }
.hero__shade { position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(21, 19, 15, .95) 0%, rgba(21, 19, 15, .84) 30%, rgba(21, 19, 15, .5) 50%, rgba(21, 19, 15, .16) 72%, rgba(21, 19, 15, .35) 100%),
    linear-gradient(to top, rgba(21, 19, 15, .9) 0%, transparent 30%),
    radial-gradient(ellipse 120% 90% at 60% 45%, transparent 55%, rgba(0, 0, 0, .45) 100%); }
.hero__shade::after { content: ""; position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* spot ışığı: tavandan filozofa */
.hero__beam { position: absolute; z-index: 3; top: -10%; right: 4vw; width: min(52vw, 760px); height: 110%; opacity: .9; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 214, 150, .42), rgba(255, 196, 120, .12) 60%, transparent 92%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); filter: blur(10px); mix-blend-mode: screen; }

/* alıntı kâğıtları (usta masalarından) */
.slips { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.slip { position: absolute; left: var(--x); top: var(--y); width: min(220px, 22vw); padding: .85rem 1rem .75rem; border-radius: 3px; background: var(--paper);
  color: var(--txt-dark); font: italic 400 1.02rem/1.25 var(--f-display); transform: rotate(var(--r)); box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .7); opacity: .9; }
.slip b { display: block; margin-top: .45rem; font: 700 .62rem/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--teal-deep); font-style: normal; }
.slip::before { content: ""; position: absolute; top: -9px; left: 50%; width: 54px; height: 18px; margin-left: -27px; background: rgba(245, 122, 5, .55); transform: rotate(-3deg); }

/* filozof */
/* üstte saçak + header (~18vh) kalır; baş onun altında kalmasın */
.philo { position: absolute; z-index: 4; right: clamp(0px, 7vw, 140px); bottom: 7vh; height: min(76vh, calc(100vh - 7vh - var(--hdr) - 70px), 860px); aspect-ratio: 788 / 1216; will-change: transform; }
.philo img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .55)); }
.philo__steam { position: absolute; left: 19%; top: 6%; width: 34%; height: 36%; pointer-events: none; }

/* sahne önü + ön ışıklar */
.stage-lip { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 9vh; min-height: 56px;
  background: linear-gradient(#4a3322 0, #2e2016 10%, #1a130d 60%, var(--ink) 100%); box-shadow: 0 -1px 0 rgba(255, 190, 120, .35); }
.footlights { position: absolute; left: 0; right: 0; top: -6px; height: 12px; opacity: var(--lit, 1);
  background: radial-gradient(ellipse 14px 6px at 50% 50%, #ffd79a 0 40%, rgba(255, 170, 80, .55) 60%, transparent 72%) repeat-x 0 0 / 84px 12px;
  filter: drop-shadow(0 -6px 12px rgba(255, 180, 90, .7)); }

/* metin */
.hero__copy { position: absolute; z-index: 6; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.2rem;
  padding-top: calc(var(--hdr) + 3vh); padding-bottom: 12vh; padding-left: max(var(--gutter), 7vw); pointer-events: none; }
.hero__copy > * { pointer-events: auto; }
.hero__title { display: flex; flex-direction: column; font: 400 clamp(3.6rem, 8.6vw, 8.6rem)/.88 var(--f-display); letter-spacing: -.02em; text-shadow: 0 4px 34px rgba(0, 0, 0, .5); }
.hero__title .w { display: block; will-change: transform; }
.hero__title .w--accent { font-style: italic; color: var(--orange-2); padding-left: .55em; }
.hero__lead { max-width: 30rem; font-size: clamp(1rem, 1.35vw, 1.15rem); color: rgba(248, 243, 234, .88); text-shadow: 0 1px 14px rgba(0, 0, 0, .8); }
.hero__copy .kicker { text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: .7rem; }

/* İtalyan perde: canvas (curtain.js) */
.curtains { position: absolute; z-index: 20; inset: 0; width: 100%; height: 100%; pointer-events: none; }
html:not(.js) .curtains { display: none; }

/* saçak: drape kavisleri + turuncu şerit + püsküller (sacak.svg); üst bandı header'ın altında kalır */
.valance { position: absolute; z-index: 22; left: 0; right: 0; top: 0; height: calc(var(--hdr) + clamp(44px, 6vh, 62px));
  background: linear-gradient(#062d32, #062d32) 0 0 / 100% calc(var(--hdr) - 8px) no-repeat,
    url("../../assets/img/sacak.svg") 0 calc(var(--hdr) - 26px) / clamp(180px, 17vw, 260px) calc(100% - var(--hdr) + 26px) repeat-x;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); }

.emblem__title .ch { display: inline-block; }

/* giriş "Spot ve üç vuruş": salon kararır → üstte "Gösterimiz başlıyor", sahne asası zemine üç kez vurur → tavandan spot düşer
   → spot halkası perdeye açılır */
.intro { position: fixed; z-index: 90; inset: 0; background: #070605; --r: -17vmax;  /* negatif: halka tamamen kapalı */
  -webkit-mask: radial-gradient(circle at 50% 48%, transparent var(--r), #000 calc(var(--r) + 16vmax));
  mask: radial-gradient(circle at 50% 48%, transparent var(--r), #000 calc(var(--r) + 16vmax));
  animation: introFail 0s 7s forwards; }   /* JS çalışmazsa 7 sn sonra kendiliğinden kalkar */
@keyframes introFail { to { visibility: hidden; } }
.intro__scene { position: absolute; inset: 0; overflow: hidden; }
/* sahne tahtası: ileri uzanan döşeme, vuruşta ve spotta aydınlanır */
.intro__floor { position: absolute; left: -40%; right: -40%; bottom: 0; height: 36vh; --lit: 0; opacity: calc(.28 + var(--lit) * .72);
  background: repeating-linear-gradient(90deg, #24170d 0 74px, #0b0704 74px 77px), #1a110a;
  transform: perspective(50vh) rotateX(64deg); transform-origin: 50% 100%;
  -webkit-mask: linear-gradient(to top, #000 15%, transparent 92%); mask: linear-gradient(to top, #000 15%, transparent 92%); }
.intro__pool { position: absolute; left: 50%; bottom: 7vh; width: min(110vw, 1100px); height: 14vh; transform: translateX(-50%); opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 216, 165, .5), rgba(255, 190, 120, .16) 60%, transparent); }
.intro__ring { position: absolute; left: 50%; bottom: calc(12vh - 22px); width: 240px; height: 44px; margin-left: -120px; border: 2px solid rgba(255, 196, 128, .7); border-radius: 50%; opacity: 0; }
/* spot konisi: tepe noktası ekranın üstünde; yumuşak kenar conic-gradient'le (blur/blend yok → ucuz) */
.intro__cone { position: absolute; left: 0; right: 0; top: -6vh; bottom: 12vh; --a: 30deg; opacity: 0; pointer-events: none;
  background: conic-gradient(from calc(180deg - var(--a)) at 50% 0, transparent 0deg, rgba(255, 224, 178, .2) 4deg, rgba(255, 228, 184, .3) var(--a),
    rgba(255, 224, 178, .2) calc(var(--a) * 2 - 4deg), transparent calc(var(--a) * 2));
  -webkit-mask: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .6) 70%, rgba(0, 0, 0, .45) 100%); mask: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, .6) 70%, rgba(0, 0, 0, .45) 100%); }
.intro__dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__staff { position: absolute; left: 50%; bottom: 12vh; height: min(46vh, 420px); aspect-ratio: 60 / 520; transform: translateX(-50%); transform-origin: 50% 100%; will-change: transform; }
.intro__box { position: absolute; left: 50%; top: 25%; display: grid; gap: .25rem; width: min(92vw, 680px); transform: translate(-50%, -50%); text-align: center;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .55); }
.intro__pa { display: inline-flex; justify-self: center; align-items: center; gap: .7rem; margin-bottom: 1.2rem; font: 700 .72rem/1 var(--f-body); letter-spacing: .32em; text-transform: uppercase; color: var(--orange-2); }
.intro__bars { display: flex; align-items: flex-end; gap: 3px; height: 14px; }
.intro__bars i { width: 3px; height: 100%; border-radius: 2px; background: var(--orange-2); transform-origin: bottom; animation: paBar .8s ease-in-out infinite; }
.intro__bars i:nth-child(2) { animation-delay: -.3s; } .intro__bars i:nth-child(3) { animation-delay: -.55s; } .intro__bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes paBar { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.intro__line { font: italic 400 clamp(2rem, 5.4vw, 3.6rem)/1.12 var(--f-display); color: var(--cream); }
.intro__line .wd { display: inline-block; }
@media (max-width: 699px) {
  .intro__box { top: 30%; }
  .intro__cone { --a: 21deg; }
  .intro__pool { width: 150vw; }
  .intro__staff { height: 38vh; }
}
.intro__skip { position: absolute; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); padding: .55rem 1rem; border: 1px solid rgba(244, 237, 225, .22); border-radius: 999px; background: none; color: rgba(244, 237, 225, .65); font: 600 .8rem var(--f-body); }
.intro__skip:hover { color: var(--cream); border-color: rgba(244, 237, 225, .5); }
.intro.is-done, html:not(.js) .intro { display: none; }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* amblem (perde kapalıyken) */
.emblem { position: absolute; z-index: 24; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; text-align: center; padding: var(--hdr) 1rem 2rem; pointer-events: none; }
.emblem img { width: clamp(96px, 12vw, 132px); height: auto; border-radius: 50%; box-shadow: 0 16px 34px rgba(0, 0, 0, .45); }
.emblem__title { margin-top: .6rem; font: 400 clamp(3rem, 8vw, 6.4rem)/.95 var(--f-display); color: var(--cream); text-shadow: 0 6px 30px rgba(0, 0, 0, .55); }
.emblem__sub { font: 700 clamp(.9rem, 1.6vw, 1.15rem)/1 var(--f-poster); letter-spacing: .32em; text-transform: uppercase; color: var(--orange-2); }
.emblem__sub i { font-style: normal; color: var(--cream); }
.emblem__hint { display: grid; justify-items: center; gap: .3rem; margin-top: 1.6rem; font: 600 .78rem var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: rgba(248, 243, 234, .8); }
.emblem__hint svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(6px); } }

/* JS yok / hareket azaltılmış: son kare */
html:not(.js) .emblem, .hero.is-static .emblem { display: none; }

/* ── mobil: iki ayrı bölge, çakışma yok ──
   üst: heykel (saçağın altından başlar, boyu ekrana göre; alt kenarı yumuşak kaybolur)
   alt: metin bloğu (~--copy yüksekliğinde, koyu zeminde; perde kolonlarından 30px içeride) */
@media (max-width: 699px) {
  .hero { min-height: 560px; --copy: 318px; --ph: clamp(190px, calc(100svh - var(--hdr) - 66px - var(--copy)), 520px); }
  .hero__shade { background: linear-gradient(to top, var(--ink) 0%, var(--ink) calc(var(--copy) - 40px), rgba(21, 19, 15, .35) calc(var(--copy) + 60px), rgba(21, 19, 15, .55) 100%); }
  .philo { right: auto; bottom: auto; left: 50%; top: calc(var(--hdr) + 62px); height: var(--ph); margin-left: calc(var(--ph) * -.36); }
  .philo img { -webkit-mask: linear-gradient(to bottom, #000 74%, transparent 98%); mask: linear-gradient(to bottom, #000 74%, transparent 98%); }
  .hero__beam { right: -10vw; width: 90vw; opacity: .5; }
  .stage-lip { display: none; }
  .hero__copy { justify-content: flex-end; gap: .8rem; padding: 0 30px calc(22px + env(safe-area-inset-bottom)); }
  .hero__copy .kicker { font-size: .66rem; letter-spacing: .16em; }
  .hero__title { flex-direction: row; flex-wrap: wrap; gap: 0 .26em; font-size: clamp(2.5rem, 12.4vw, 3.4rem); }
  .hero__title .w--accent { padding-left: 0; }
  .hero__lead { font-size: .95rem; line-height: 1.5; }
  .hero__ctas { width: 100%; gap: .6rem; }
  .hero__ctas .btn { flex: 1 1 0; min-height: 46px; padding-inline: .5rem; font-size: clamp(.8rem, 3.9vw, .9rem); white-space: nowrap; }
  .slips { display: none; }   /* dar ekranda heykelin arkasında kesik kalıyor */
}
/* kısa telefonlar: açıklama gizlenir, heykele yer kalır */
@media (max-width: 699px) and (max-height: 720px) {
  .hero { --copy: 228px; }
  .hero__lead { display: none; }
}
/* tablet: heykel metnin yanına yaklaşıyor; kâğıtlar yer bulamıyor */
@media (min-width: 700px) and (max-width: 1199px) { .slips { display: none; } }
@media (min-width: 700px) and (max-width: 999px) {
  .philo { right: -9vw; height: min(70vh, calc(100vh - 7vh - var(--hdr) - 70px)); }
  .hero__copy { max-width: 62%; }
  .hero__lead { max-width: 20rem; }
}