/* Gösterim salonu, paylaş penceresi ve alt bilgi */

/* --- Sinema düzeni: gösterimde ekran ortada, yan panel alta iner --- */
.room.is-cinema { grid-template-columns: minmax(0, 1fr); }
.room.is-cinema .room-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

/* Salon temadan bağımsız karanlıktır; içindeki bileşenler bu renklerle çizilir */
.cinema {
  --text: #ffffff; --muted: #b9b4ad; --faint: #8f8a84; --inverse: #000000;
  --surface: #111111; --raised: #1c1a1a; --control: #2a2727; --control-hover: #383434;
  --velvet: #7d1212; --velvet-dark: #4f0909; --velvet-light: #a32020;
  position: relative; display: grid; gap: 22px; overflow: hidden;
  padding: 28px clamp(16px, 4vw, 48px) 26px;
  border-radius: 28px; background: #070607; color: var(--text);
}

/* Afiş */
.marquee { text-align: center; display: grid; gap: 6px; }
.marquee p { color: var(--muted); font-size: 14px; }
.marquee-count { font-variant-numeric: tabular-nums; }
.marquee h1 { font-size: clamp(26px, 3.4vw, 44px); letter-spacing: -0.03em; }

/* Sahne: saçak, iki perde, ortada ekran */
.theater { position: relative; padding: 44px clamp(34px, 9%, 110px) 0; }
.theater-screen { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; }
.theater-screen .screen { border-radius: 6px; background: #000; }

/* Kadife kumaş: dikey kıvrımlar (çizim, renk geçişi değil kumaş deseni) */
.curtain, .valance {
  background-color: var(--velvet);
  background-image: repeating-linear-gradient(90deg,
    var(--velvet-dark) 0, var(--velvet) 9px, var(--velvet-light) 15px, var(--velvet) 21px, var(--velvet-dark) 30px);
}
.valance { position: absolute; z-index: 3; top: 0; left: -2%; right: -2%; height: 46px; border-radius: 0 0 4px 4px; }
/* Saçağın alt kenarındaki fistolar */
.valance::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 14px;
  background: radial-gradient(circle at 50% 0, var(--velvet-dark) 13px, transparent 14px) 0 0 / 34px 14px repeat-x;
}
.curtain {
  position: absolute; z-index: 2; top: 0; bottom: 0; width: clamp(40px, 12%, 140px);
  transition: width 1.2s var(--ease);
}
.curtain-left { left: -2%; border-radius: 0 0 60% 0 / 0 0 12% 0; }
.curtain-right { right: -2%; border-radius: 0 0 0 60% / 0 0 0 12%; }
.theater.is-open .curtain { width: clamp(22px, 5%, 64px); }

/* Seyirci sırası: oyuncuların avatarları koltuklarda */
.audience { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 18px; padding-top: 4px; }
.audience li { position: relative; display: grid; justify-items: center; gap: 6px; padding-bottom: 14px; }
.audience li::after { /* koltuk sırtı */
  content: ""; position: absolute; bottom: 0; width: 58px; height: 18px; border-radius: 10px 10px 4px 4px; background: #1d1a1a;
}
.audience li > span { position: relative; z-index: 1; font-size: 12px; color: var(--muted); max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audience .avatar { position: relative; z-index: 1; }
.audience li.is-performer .avatar { box-shadow: 0 0 0 3px #070607, 0 0 0 5px var(--progress); }
.audience li.is-performer > span { color: var(--text); font-weight: 600; }

.cinema-controls { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; }
.cinema-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 14px; border-top: 1px solid #1a1717; }
.cinema .save-note { justify-self: center; }

@media (max-width: 600px) {
  .room.is-cinema .room-side { grid-template-columns: 1fr; }
  .cinema { padding: 20px 12px; border-radius: 20px; }
  .theater { padding: 30px 18px 0; }
  .valance { height: 30px; }
  .curtain { width: 22px; }
  .theater.is-open .curtain { width: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .curtain { transition: none; }
}

/* --- Paylaş penceresi --- */
.share-modal { width: min(480px, calc(100vw - 32px)); }
.share-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.share-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.share-opt {
  display: grid; justify-items: center; gap: 8px; padding: 16px 8px 14px;
  border: 0; border-radius: 16px; background: var(--raised); color: var(--text);
  font-size: 13px; font-weight: 500; transition: background .15s, transform .1s;
}
.share-opt:hover { background: var(--control); }
.share-opt:active { transform: scale(.97); }
.share-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--control); color: var(--text); }
.share-icon svg { width: 22px; height: 22px; }
.share-whatsapp .share-icon { background: #25d366; color: #fff; }
.share-facebook .share-icon { background: #1877f2; color: #fff; }
.share-x .share-icon { background: var(--text); color: var(--inverse); }
.share-instagram .share-icon { background: #d62976; color: #fff; }
.share-link { display: flex; gap: 8px; align-items: center; }
.share-link .input { height: 38px; font-size: 13px; color: var(--muted); }

/* --- Alt bilgi --- */
.footer { margin-top: 40px; border-top: 1px solid var(--rule); overflow: hidden; }
.footer-top, .footer-bottom { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding-top: 56px; padding-bottom: 40px; }
.footer-brand { display: grid; gap: 14px; align-content: start; max-width: 380px; }
.footer-brand p { color: var(--muted); }
.footer-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.footer-badges li { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 8px; border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 500; }
.footer-badges .icon { width: 14px; height: 14px; color: var(--positive); }
.footer-col h2 { font-size: 13px; font-weight: 600; color: var(--faint); margin-bottom: 14px; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a, .footer-langs button { color: var(--muted); font-size: 14px; transition: color .15s; }
.footer-col a:hover, .footer-langs button:hover { color: var(--text); }
.footer-langs button { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; }
.footer-langs button[aria-pressed="true"] { color: var(--text); font-weight: 600; }
.footer-langs .flag { width: 20px; height: 14px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 20px; padding-bottom: 20px; border-top: 1px solid var(--rule); color: var(--faint); font-size: 13px; }
/* Kapanış: marka adı tam genişlikte, altı kesik */
.footer-name {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  font-size: clamp(56px, 13.2vw, 190px); font-weight: 600; letter-spacing: -0.06em; line-height: .78;
  color: var(--surface); white-space: nowrap; user-select: none; margin-bottom: -0.12em;
}

@media (max-width: 960px) {
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 600px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; padding-top: 40px; }
  .footer-name { font-size: 15vw; }
}

/* Profilime ekle: gösterimde belirgin, eklenince yeşil onay */
.keep-btn { gap: 8px; }
.keep-btn.is-kept, .keep-btn.is-kept:disabled { opacity: 1; background: color-mix(in srgb, var(--positive) 22%, transparent); color: var(--positive); box-shadow: inset 0 0 0 1px var(--positive); }