:root {

  /* Oyun detay sayfasında posterin hero'ya taşma payı. Hem posteri yukarı
     çeken negatif boşluk hem de başlığın alt boşluğu buradan okunur —
     bkz. .play-hero-title / .play-info-grid. */
  --play-poster-overlap: 80px;

  --bg-primary:    #000000;
  --bg-secondary:  #0a0a0a;
  --bg-tertiary:   #111111;
  --bg-card:       #0d0d0d;

  --accent:        #c8a96e;
  --accent-light:  #dfc08a;
  --accent-dark:   #a8893e;
  --accent-glow:   rgba(200, 169, 110, 0.15);
  --accent-glow-strong: rgba(200, 169, 110, 0.30);

  --text-primary:   #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-muted:     #4a4a4f;
  --text-accent:    #c8a96e;

  --border:         rgba(255, 255, 255, 0.08);
  --border-accent:  rgba(200, 169, 110, 0.25);

  --glass-bg:       rgba(10, 10, 10, 0.75);
  --glass-border:   rgba(255, 255, 255, 0.06);

  --radius-sm:   12px;
  --radius-md:   20px;
  --radius-lg:   28px;
  --radius-xl:   40px;

  --transition-fast:   all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-medium: all 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow:   all 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* hidden özniteliği HER ZAMAN gizlesin: .btn-primary gibi display
   bildiren sınıflar tarayıcının varsayılan [hidden] kuralını ezerdi —
   arşive taşınan bir oyunun "Bilet Al" butonu gizli kalmalı. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;

  overflow-x: hidden;
}

/* The navbar is fixed, so a plain hash landing (index.html#plays from
   an oyun sayfası, or a shared link) would put the section heading
   underneath it. scroll-margin-top keeps the browser's own anchor
   jump clear of the bar — JS scrolling subtracts the height itself. */
section[id] {
  scroll-margin-top: 100px;
}

body {

  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.display-title {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.0;
  color: var(--text-primary);
}

.display-title-sm {
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.section-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px 0;
  transition: var(--transition-medium);

  background: transparent;
  border-bottom: 1px solid transparent;
}

#navbar.scrolled {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border-bottom: 1px solid var(--glass-border);
  padding: 14px 0;
}

.nav-logo {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  text-decoration: none;
  transition: var(--transition-fast);
}

.nav-logo:hover {
  color: var(--accent);
}

.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-fast);
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: var(--text-primary);
}

.nav-link:hover::after {
  width: 100%;
}

#hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: transparent;
  border: none;
  z-index: 1100;
  transition: var(--transition-fast);
}

#hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: var(--transition-medium);
  transform-origin: center;
}

#hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
#hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
#hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Navbar'daki bağlantı sayısı 12'ye çıktı (Arşiv, Bülten, Basın) —
   1024px'de yan yana sığmıyor, bu yüzden tam menü xl'de (1280px)
   açılıyor, altında hamburger. */
@media (max-width: 1279px) {

  #hamburger { display: flex; }
}

#mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: #000000;
  display: flex;
  flex-direction: column;
  /* justify-content: center DEĞİL: 10 bağlantı küçük bir telefona
     sığmadığında ortalanmış bir kolonun üst tarafı kaydırılarak
     ulaşılamaz hale gelir. İlk/son bağlantıya auto kenar boşluğu
     vermek yer varken ortalar, yokken düzgün kaydırılır. */
  justify-content: flex-start;
  align-items: center;
  gap: clamp(0.7rem, 2.6vh, 1.75rem);
  padding: 88px 24px 104px;
  overflow-y: auto;
  overscroll-behavior: contain;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}

#mobile-menu > .mobile-nav-link:first-of-type { margin-top: auto; }
#mobile-menu > .mobile-nav-link:last-of-type  { margin-bottom: auto; }

.mobile-nav-link {
  font-size: clamp(1.25rem, 5vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-fast);

  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.35s ease, transform 0.35s ease, color 0.2s ease;
}

#mobile-menu.open .mobile-nav-link {
  opacity: 1;
  transform: translateY(0);
}

/* nth-of-type, not nth-child: the first child of #mobile-menu is the
   decorative glow div, which used to shift every delay by one and
   leave the last links with no stagger at all. */
#mobile-menu .mobile-nav-link:nth-of-type(1) { transition-delay: 0.08s; }
#mobile-menu .mobile-nav-link:nth-of-type(2) { transition-delay: 0.14s; }
#mobile-menu .mobile-nav-link:nth-of-type(3) { transition-delay: 0.20s; }
#mobile-menu .mobile-nav-link:nth-of-type(4) { transition-delay: 0.26s; }
#mobile-menu .mobile-nav-link:nth-of-type(5) { transition-delay: 0.32s; }
#mobile-menu .mobile-nav-link:nth-of-type(6) { transition-delay: 0.38s; }
#mobile-menu .mobile-nav-link:nth-of-type(7) { transition-delay: 0.44s; }
#mobile-menu .mobile-nav-link:nth-of-type(8) { transition-delay: 0.50s; }
#mobile-menu .mobile-nav-link:nth-of-type(9) { transition-delay: 0.56s; }
#mobile-menu .mobile-nav-link:nth-of-type(10) { transition-delay: 0.62s; }
#mobile-menu .mobile-nav-link:nth-of-type(n+11) { transition-delay: 0.68s; }

.mobile-nav-link:hover {
  color: var(--accent);
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-stagger.visible > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.0s; }
.reveal-stagger.visible > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }
.reveal-stagger.visible > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }
.reveal-stagger.visible > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.reveal-stagger.visible > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.4s; }
.reveal-stagger.visible > *:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
/* 7. karttan sonrası ortak gecikmeyle gelir — yoksa panelden 7. oyun
   (ya da 7. atölye) eklendiğinde o kart kalıcı olarak görünmez kalırdı. */
.reveal-stagger.visible > *:nth-child(n+7) { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

@keyframes accentPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); }
  50%       { box-shadow: 0 0 24px 6px var(--accent-glow); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--accent);
  color: #000;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 100px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: var(--transition-medium);
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-primary:hover {
  background: var(--accent-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(200, 169, 110, 0.35);
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 31px;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 100px;
  text-decoration: none;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: var(--transition-medium);
}

.btn-ghost:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  transform: translateY(-2px);
  color: var(--text-primary);
}

/* ----------------------------------------------------------------
   OYUNLAR CAROUSEL

   Kartlar sabit bir ızgarada değil, yatay kaydırılan bir şeritte
   duruyor. Şerit (.plays-track) gerçek bir kaydırma kutusu — dokunmatik
   cihazda parmakla, klavyeyle (şerit odaklanabilir) ve oklarla sürülür;
   ok/nokta göstergelerini app.js kart sayısına göre gösterir ya da
   gizler, yani iki oyunla da yedi oyunla da doğru görünür.

   Şeridin dikey iç boşluğu ŞART: .play-card:hover kartı 6px yukarı
   kaldırıp gölge veriyor, yatay kaydırma kutusunda dikey taşma
   kırpıldığı için boşluk olmadan bu efekt kesilirdi.
   ---------------------------------------------------------------- */

.plays-carousel {
  position: relative;
}

.plays-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 12px 2px 30px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.plays-track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .plays-track { scroll-behavior: auto; }
}

/* Mobilde bir sonraki kartın ucu görünsün — şeridin kaydırılabilir
   olduğu ok tuşları olmadan da anlaşılsın diye. */
.plays-track > .play-card {
  flex: 0 0 84%;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .plays-track > .play-card { flex-basis: calc((100% - 20px) / 2); }
}
@media (min-width: 1024px) {
  .plays-track > .play-card { flex-basis: calc((100% - 40px) / 3); }
}

.plays-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-accent);
  background: rgba(10, 10, 10, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--accent);
  cursor: pointer;
  transition: var(--transition-fast);
}

.plays-arrow:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}

.plays-arrow:disabled {
  opacity: 0.22;
  cursor: default;
}

.plays-arrow-prev { left: -10px; }
.plays-arrow-next { right: -10px; }

@media (max-width: 767px) {
  .plays-arrow { display: none; }
}
@media (min-width: 1300px) {
  .plays-arrow-prev { left: -28px; }
  .plays-arrow-next { right: -28px; }
}

.plays-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
}

.plays-dot {
  width: 26px;
  height: 3px;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition: background 0.3s ease, width 0.3s ease;
}

.plays-dot.active {
  width: 40px;
  background: var(--accent);
}

.plays-footnote {
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.plays-archive-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: var(--transition-fast);
}

.plays-archive-link:hover {
  color: var(--accent-light);
  border-bottom-color: var(--accent-light);
}

.play-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  text-decoration: none;
  display: block;
  transition: var(--transition-medium);
  group: true;
}

.play-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: var(--border-accent);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.6),
    0 0 0 1px rgba(200,169,110,0.12),
    0 4px 20px rgba(200,169,110,0.15);
}

.play-card-poster {
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
}

.play-card-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.play-card:hover .play-card-poster img {
  transform: scale(1.05);
}

.play-card-poster::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 60%, transparent 100%);
  transition: var(--transition-medium);
}

.play-card:hover .play-card-poster::after {
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);
}

.play-card-poster::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 30%, rgba(200,169,110,0.12) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.play-card:hover .play-card-poster::before {
  opacity: 1;
}

.play-card-info {
  padding: 24px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

/* Posterin kendi gradyanı sabit yükseklikte; uzun bir oyun adı iki satıra
   düşünce yazı o gradyanın zayıf bölgesine çıkıyor ve açık renkli afişlerde
   okunmaz oluyordu. Bu ikinci perde metin bloğuna bağlı, yani başlık kaç
   satır olursa olsun altındaki zemin aynı kalıyor. */
.play-card-info::before {
  content: '';
  position: absolute;
  inset: -56px 0 0 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.78) 45%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}

.play-card-tag {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  margin-bottom: 8px;
}

.play-card-title {
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 8px;
}

.play-card-meta {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.play-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-8px);
  transition: var(--transition-fast);
}

.play-card:hover .play-card-cta {
  opacity: 1;
  transform: translateX(0);
}

.poster-nora {
  background:
    radial-gradient(ellipse 70% 60% at 40% 30%, #1a0a2e 0%, transparent 60%),
    linear-gradient(160deg, #0d0a1a 0%, #1c1025 40%, #0a0a14 100%);
}

.poster-teror {
  background:
    radial-gradient(ellipse 60% 70% at 60% 40%, #1a0808 0%, transparent 60%),
    linear-gradient(160deg, #0f0808 0%, #1a0c0c 40%, #080808 100%);
}

.poster-ispat {
  background:
    radial-gradient(ellipse 70% 60% at 50% 30%, #0a1218 0%, transparent 60%),
    linear-gradient(160deg, #080d12 0%, #0f1820 40%, #060a0e 100%);
}

.poster-default {
  background:
    radial-gradient(ellipse 65% 60% at 50% 30%, #14100a 0%, transparent 60%),
    linear-gradient(160deg, #0d0d0d 0%, #16130d 40%, #0a0a0a 100%);
}

.about-section {
  position: relative;
  overflow: hidden;
}

.about-section::before {
  content: '';
  position: absolute;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  top: 50%;
  right: -200px;
  transform: translateY(-50%);
  pointer-events: none;
}

.about-stat {
  border-left: 2px solid var(--accent);
  padding-left: 20px;
}

.about-stat-number {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  line-height: 1;
}

.about-stat-label {
  font-size: 0.8rem;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 4px;
}

.about-bg-text {
  position: absolute;
  font-size: clamp(8rem, 20vw, 18rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.04);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

@media (max-width: 1024px) {
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

.team-card {
  display: block;
  text-decoration: none;
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: var(--transition-medium);
  cursor: pointer;
}

.team-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-6px);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.65),
    0 0 0 1px rgba(200,169,110,0.15);
}

.team-photo {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: linear-gradient(160deg, #181106 0%, #0c0c0a 100%);
}

.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: block;
}

.team-card:hover .team-photo img {
  transform: scale(1.05);
}

.team-photo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.team-photo-silhouette {
  width: 68%;
  opacity: 0.18;
  margin-bottom: -2px;
  transition: opacity 0.4s ease;
}

.team-card:hover .team-photo-silhouette {
  opacity: 0.28;
}

.team-photo::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

.team-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(200,169,110,0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 2;
  pointer-events: none;
}
.team-card:hover .team-photo::before { opacity: 1; }

.team-info {
  padding: 18px 20px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.team-info-text { flex: 1; }

.team-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.team-arrow {
  color: var(--accent);
  font-size: 1.1rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  flex-shrink: 0;
}
.team-card:hover .team-arrow { opacity: 1; transform: translateX(0); }

.workshops-bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 1024px) {
  .workshops-bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .workshops-bento { grid-template-columns: 1fr; }
}

.workshop-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  transition: var(--transition-medium);
  position: relative;
  overflow: hidden;
}

.workshop-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at var(--x, 50%) var(--y, 50%), rgba(200,169,110,0.08) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.workshop-card:hover::before { opacity: 1; }

.workshop-card:hover {
  border-color: var(--border-accent);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

.workshop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}

.workshop-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: gap 0.25s ease, color 0.2s ease;
}
.workshop-link:hover {
  color: var(--accent-light);
  gap: 12px;
}

.workshop-insta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  flex-shrink: 0;
  transition: var(--transition-fast);
}
.workshop-insta-link:hover {
  border-color: var(--border-accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.workshop-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.workshop-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.instagram-profile-block + .instagram-profile-block {
  margin-top: 64px;
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

@media (max-width: 1024px) {
  .instagram-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .instagram-grid { grid-template-columns: repeat(2, 1fr); }
}

.insta-post {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;

  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: var(--transition-medium);
}

.insta-post:hover {
  transform: scale(1.03);
  border-color: var(--border-accent);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  z-index: 1;
}

.insta-link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  text-decoration: none;
}

.insta-post-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.insta-post:hover .insta-post-img {
  transform: scale(1.06);
}

.insta-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--bg-card);
}

.insta-placeholder svg {
  opacity: 0.25;
}

.insta-placeholder-text {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.5;
}

.insta-post-overlay {
  position: absolute;
  inset: 0;
  background: rgba(200,169,110,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 4;
}

.insta-post:hover .insta-post-overlay {
  opacity: 1;
}

.insta-post-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 136px;
  box-sizing: border-box;
  padding: 40px 12px 20px;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.78) 45%, transparent 100%);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 5;
  overflow: hidden;
}

.insta-post:hover .insta-post-caption {
  opacity: 1;
  transform: translateY(0);
}

.insta-post-caption-text {
  display: block;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.88);
  line-height: 1.45;
  transform: translateY(0);
}

.faq-list {
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item:first-child {
  border-top: 1px solid var(--border);
}

.faq-question {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-primary);
  font-family: inherit;
  text-align: left;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.faq-question:hover { color: var(--accent); }

.faq-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--accent);
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.25s ease,
              background 0.25s ease;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
  border-color: var(--border-accent);
  background: var(--accent-glow);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.faq-answer-inner {
  padding-bottom: 22px;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.faq-answer-inner a {
  color: var(--accent);
  text-decoration: none;
}
.faq-answer-inner a:hover { text-decoration: underline; }

.footer-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

.accent-line {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
}

.glow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 2px var(--accent-glow);
  animation: accentPulse 2s ease-in-out infinite;
  display: inline-block;
}

.section-number {
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 900;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.05);
  letter-spacing: -0.06em;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.scroll-indicator-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollBounce 2s ease-in-out infinite;
}

.scroll-indicator-text {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-muted);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

@media (min-width: 1024px) {
  .cursor-glow {
    width: 420px;
    height: 420px;
    border-radius: 50%;
    position: fixed;
    background: radial-gradient(circle,
      rgba(200,169,110,0.22) 0%,
      rgba(200,169,110,0.10) 28%,
      rgba(200,169,110,0.03) 55%,
      transparent 70%);
    pointer-events: none;
    z-index: 1;
    top: 0;
    left: 0;
    transform: translate3d(-210px, -210px, 0);
    will-change: transform;
  }
}

.text-accent  { color: var(--accent); }
.text-muted   { color: var(--text-muted); }
.text-secondary-color { color: var(--text-secondary); }

.bg-card { background: var(--bg-card); }

.border-subtle { border: 1px solid var(--border); }
.border-accent-subtle { border: 1px solid var(--border-accent); }

.rounded-card { border-radius: var(--radius-lg); }
.rounded-card-sm { border-radius: var(--radius-md); }

.gradient-text {
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 50%, var(--accent-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.shimmer {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(200,169,110,0.08) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}

.container-custom {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

@media (max-width: 640px) {
  .container-custom { padding-left: 16px; padding-right: 16px; }
}

.play-hero {
  position: relative;
  height: 72vh;
  min-height: 460px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background: var(--bg-primary);
}

.play-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* Hero arka planı seçilmemiş sayfalarda (örn. arşiv) img hidden bırakılır.
   Üstteki display:block tarayıcının [hidden] varsayılanını ezdiği için
   gizlemeyi burada geri alıyoruz. */
.play-hero-bg[hidden] {
  display: none;
}

.play-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.35) 45%, rgba(0,0,0,0.15) 100%);
}

/* Poster, hero'nun alt kenarından yukarı doğru --play-poster-overlap
   kadar taşar. Başlık hero'nun ALTINA yaslı olduğu için, alt boşluğu bu
   taşma payından büyük olmadığında uzun bir oyun adının son satırı
   posterin arkasında kalıyordu. İki değer tek değişkene bağlandı ki
   birbirinden ayrışmasınlar — başlık kaç satır olursa olsun poster ile
   arasında en az 24px boşluk kalır. */
.play-hero-title {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-bottom: calc(var(--play-poster-overlap) + 24px);
  max-width: 800px;
}

.play-hero-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.play-hero-title h1 {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #f5f5f7;
  text-shadow: 0 4px 40px rgba(0,0,0,0.85);
}

.play-info-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  align-items: start;
  margin-top: calc(var(--play-poster-overlap) * -1);
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {

  /* Dar ekranda poster tek sütuna düşüyor, taşma payı da küçülüyor —
     başlığın alt boşluğu bunu kendiliğinden takip eder. */
  :root { --play-poster-overlap: 24px; }

  .play-info-grid { grid-template-columns: 1fr; }
}

.play-poster-wrap {
  aspect-ratio: 2/3;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  background: var(--bg-card);
}

.play-poster-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.play-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 96px;
}

@media (max-width: 768px) {
  .play-stats { grid-template-columns: 1fr 1fr; padding-top: 24px; }
}

.play-stat {
  border-left: 2px solid var(--accent);
  padding-left: 16px;
}

/* Panelden henüz doldurulmamış künye alanları sayfada boş bir kutu ya da
   başlığı olup içi olmayan bir bölüm bırakmasın. Değer girilir girilmez
   (admin → Oyunlar) ilgili satır/bölüm kendiliğinden geri gelir. */
.play-stat:has(.play-stat-value:empty) { display: none; }

section:has(> .container-custom > #play-summary:empty),
section:has(> .container-custom > #play-cast:empty),
section:has(> .container-custom > #play-gallery:empty) { display: none; }

.play-stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.play-stat-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 4px;
}

.play-stats-cta {
  grid-column: 1 / -1;
  margin-top: 8px;
}

.play-cast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.play-cast-item {
  border-left: 2px solid var(--border-accent);
  padding-left: 14px;
}

.play-cast-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.play-cast-role {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.play-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.play-gallery-item {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
}

.play-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.play-gallery-item:hover img {
  transform: scale(1.05);
}

.play-gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.15);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.play-gallery-item:hover::after {
  opacity: 1;
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.lightbox-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s linear 0s;
}

.lightbox-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 88px;
}

@media (max-width: 640px) {
  .lightbox-stage { padding: 88px 16px; }
}

.lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.lightbox-img.is-visible {
  opacity: 1;
  transform: scale(1);
}

.lightbox-close,
.lightbox-nav-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: #f5f5f7;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.lightbox-close:hover,
.lightbox-nav-btn:hover {
  background: rgba(255,255,255,0.14);
  border-color: var(--border-accent);
}

.lightbox-close {
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
}

.lightbox-nav-btn {
  top: 50%;
  width: 52px;
  height: 52px;
  transform: translateY(-50%);
}

.lightbox-nav-btn:hover {
  transform: translateY(-50%) scale(1.06);
}

.lightbox-nav-btn.prev { left: 16px; }
.lightbox-nav-btn.next { right: 16px; }

.lightbox-nav-btn[disabled] {
  opacity: 0.25;
  pointer-events: none;
}

@media (max-width: 640px) {
  .lightbox-close { top: 12px; right: 12px; width: 40px; height: 40px; }
  .lightbox-nav-btn { width: 44px; height: 44px; }
  .lightbox-nav-btn.prev { left: 8px; }
  .lightbox-nav-btn.next { right: 8px; }
}

.lightbox-counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

.logo-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  text-align: center;
}

.logo-hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 0 24px;
}

.logo-hero-img {
  width: clamp(240px, 34vw, 520px);
  height: auto;
}

.logo-hero-divider {
  margin: 0;
}

.logo-hero-tagline {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
  padding: 14px 28px 14px 14px;
  background: linear-gradient(135deg, rgba(200,169,110,0.14), rgba(200,169,110,0.04));
  border: 1px solid var(--border-accent);
  border-radius: 100px;
  text-decoration: none;
  position: relative;
  transition: var(--transition-medium);
}

.hero-cta-btn::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 100px;
  border: 1px solid var(--accent);
  opacity: 0.6;
  animation: heroCtaPulse 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes heroCtaPulse {
  0%   { opacity: 0.55; transform: scale(1); }
  70%  { opacity: 0; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.08); }
}

.hero-cta-btn:hover {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(200,169,110,0.24), rgba(200,169,110,0.08));
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(200, 169, 110, 0.25);
}

.hero-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  flex-shrink: 0;
}

.hero-cta-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.hero-cta-label {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.hero-cta-sub {
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero-cta-arrow {
  font-size: 1.1rem;
  color: var(--accent);
  transition: transform 0.25s ease;
  flex-shrink: 0;
}

.hero-cta-btn:hover .hero-cta-arrow {
  transform: translateX(4px);
}

@media (max-width: 480px) {
  .hero-cta-btn {
    gap: 12px;
    padding: 11px 22px 11px 11px;
  }
  .hero-cta-icon {
    width: 32px;
    height: 32px;
  }
  .hero-cta-label {
    font-size: 0.8rem;
  }
  .hero-cta-sub {
    font-size: 0.6rem;
  }
}

#venue-gallery:empty::after {
  content: 'Fotoğraflar yakında eklenecek.';
  display: block;
  padding: 48px 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ================================================================
   ARŞİV (arsiv.html) — artık sahnelenmeyen oyunlar

   Arşiv kartı, oyun kartının kendisidir: dış sınıfı .archive-card,
   içindeki .play-card-poster / .play-card-info / .play-card-title
   yapısı aynen korunur. Panelde "Arşive taşı" dendiğinde kart
   index.html'den arsiv.html'e olduğu gibi taşınabiliyor, üstelik
   .play-card-* için yazılmış tüm görsel kurallar burada da geçerli.
   Fark: kapak siyah-beyaz durur, üzerine gelince renklenir.
   ================================================================ */

.archive-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1024px) { .archive-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px)  { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .archive-grid { grid-template-columns: 1fr; } }

.archive-card {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: var(--transition-medium);
}

.archive-card .play-card-poster img {
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.6s ease, opacity 0.6s ease,
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.archive-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-accent);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

.archive-card:hover .play-card-poster img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.04);
}

.archive-card .play-card-info { padding: 20px; }
.archive-card .play-card-title { font-size: clamp(1.05rem, 2vw, 1.35rem); }

.archive-card-period {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Dönem bilgisi girilmediyse boş bir satır bırakmasın. */
.archive-card-period:empty { display: none; }

.archive-empty {
  padding: 72px 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Arşivde kart varken "henüz oyun yok" notu görünmesin. JS'e gerek yok:
   ızgara boşsa (:empty) not durur, bir kart eklenir eklenmez kalkar. */
.archive-grid:not(:empty) + .archive-empty { display: none; }

/* Arşivdeki bir oyunun detay sayfasında "Bilet Al" butonunun yerini
   alan not (bkz. admin.js → setPlayDetailArchived). */
.play-archive-note {
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--text-muted);
  border: 1px dashed var(--border-accent);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
}

/* ================================================================
   E-BÜLTEN (index.html #bulten)

   Kayıt formunun yerini alan yazı akışı. Her yazı bir .bulletin-item;
   panelden eklenir, sıralanır, silinir. İlk üçü açık gelir, gerisini
   "Daha Eski Yazılar" düğmesi açar (bkz. app.js → initBulletinFeed).
   ================================================================ */

.bulletin-feed {
  display: grid;
  gap: 18px;
  max-width: 880px;
}

.bulletin-item {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 30px;
  transition: var(--transition-medium);
}

.bulletin-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.bulletin-item:hover {
  border-color: var(--border-accent);
  transform: translateY(-2px);
}

.bulletin-item:hover::before { opacity: 1; }

/* app.js ilk üçten sonrasını böyle gizler. */
.bulletin-item.is-folded { display: none; }

.bulletin-item-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.bulletin-item-date {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.bulletin-item-tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--border-accent);
  border-radius: 100px;
  padding: 3px 10px;
}

.bulletin-item-title {
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.bulletin-item-text {
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text-secondary);
}

.bulletin-item-text p + p { margin-top: 12px; }

.bulletin-item-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: var(--transition-fast);
}

.bulletin-item-link:hover {
  color: var(--accent-light);
  gap: 10px;
}

.bulletin-feed:empty::after {
  content: 'İlk bülten yazımız yakında burada olacak.';
  display: block;
  padding: 56px 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.bulletin-more-wrap {
  max-width: 880px;
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

.bulletin-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 100px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.bulletin-more:hover {
  color: var(--text-primary);
  border-color: var(--border-accent);
  background: rgba(255, 255, 255, 0.04);
}

/* ================================================================
   BASIN ODASI (index.html #basin)

   Solda iki blok alt alta: indirilebilir basın dosyaları (.press-kit)
   ve basında çıkan haberler (.press-item listesi). Sağda basınla
   ilgilenen kişinin iletişim kartı. Üçü de panelden düzenlenir.
   ================================================================ */

.press-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 900px) {
  .press-layout { grid-template-columns: 1fr; }
}

/* Sol sütun: dosyalar bloğu + haberler bloğu. */
.press-main {
  display: grid;
  gap: 40px;
  min-width: 0;
}

/* İki bloğu birbirinden ayıran küçük başlık. Bölümün kendi <h2>'si
   zaten "Basın Odası"; bunlar onun altındaki ara başlıklar. */
.press-block-heading {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* ---------------- Basın dosyaları (indirilebilir belgeler) -------- */

.press-kit {
  display: grid;
  gap: 12px;
}

.press-kit-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, rgba(200, 169, 110, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  text-decoration: none;
  transition: var(--transition-medium);
}

.press-kit-item:hover {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(200, 169, 110, 0.13), rgba(255, 255, 255, 0.03));
}

/* Dosya türü rozeti — "PDF". Gerçek bir ikon dosyası yüklemeden
   aynı işi görüyor ve her ekran yoğunluğunda net kalıyor. */
.press-kit-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-sm);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  background: rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
}

.press-kit-body {
  display: block;
  min-width: 0;
}

.press-kit-title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.press-kit-desc {
  display: block;
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.press-kit-desc:empty { display: none; }

.press-kit-meta {
  display: block;
  margin-top: 8px;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.press-kit-meta:empty { display: none; }

/* İndirme oku — üzerine gelince aşağı doğru kayar. */
.press-kit-action {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border-accent);
  color: var(--accent);
  font-size: 0.9rem;
  transition: var(--transition-fast);
}

.press-kit-item:hover .press-kit-action {
  background: var(--accent);
  border-color: var(--accent);
  color: #12100c;
  transform: translateY(3px);
}

@media (max-width: 560px) {
  .press-kit-item {
    align-items: start;
    gap: 14px;
    padding: 18px 20px;
  }
  .press-kit-icon {
    width: 44px;
    height: 44px;
    font-size: 0.58rem;
  }
  .press-kit-action {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }
}

.press-kit:empty { display: none; }

/* Hiç dosya yoksa üstündeki "Basın Dosyaları" başlığı da anlamsız
   kalmasın — blok tamamen gizlenir. */
.press-kit-block:has(.press-kit:empty) { display: none; }

/* ---------------- Basında biz (haber/TV/ödül listesi) ------------- */

.press-items {
  display: grid;
  gap: 16px;
}

.press-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 26px;
  transition: var(--transition-medium);
}

.press-item:hover { border-color: var(--border-accent); }

.press-item-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

/* Haberin çıktığı yayın — kartın kimliği, en belirgin üst satır. */
.press-item-source {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
}

.press-item-source:empty { display: none; }

/* Yayın adı ile tarihi ayıran ince çizgi (yayın adı yoksa çıkmaz). */
.press-item-source:not(:empty) + .press-item-date::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 1px;
  margin-right: 12px;
  vertical-align: middle;
  background: var(--border-accent);
}

.press-item-date {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.press-item-kind {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: auto;
  padding: 3px 10px;
  border: 1px solid var(--border-accent);
  border-radius: 999px;
}

@media (max-width: 560px) {
  .press-item-kind { margin-left: 0; }
}

.press-item-title {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.press-item-desc {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.press-item-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: var(--transition-fast);
}

.press-item-link:hover {
  color: var(--accent-light);
  gap: 10px;
}

.press-items:empty::after {
  content: 'Basın materyalleri yakında burada olacak.';
  display: block;
  padding: 48px 0;
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Liste uzayınca ilk birkaçı açık kalır, gerisini app.js katlar
   (e-bültendeki "Daha Eski Yazılar" ile aynı mantık). */
.press-item.is-folded { display: none; }

.press-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.press-more {
  padding: 10px 26px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: var(--transition-fast);
}

.press-more:hover {
  color: var(--accent);
  border-color: var(--border-accent);
}

/* ---------------- Basın iletişim kartı --------------------------- */

.press-contact {
  position: sticky;
  top: 110px;
  background: linear-gradient(160deg, rgba(200, 169, 110, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-md);
  padding: 28px;
}

@media (max-width: 900px) {
  .press-contact { position: static; }
}

.press-contact-eyebrow {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.press-contact-name {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.press-contact-role {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 18px;
}

.press-contact-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.press-contact-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  word-break: break-word;
  transition: var(--transition-fast);
}

.press-contact-link:hover { color: var(--accent-light); }

/* Telefon ya da e-posta girilmediyse boş satır kalmasın. */
.press-contact-link:empty { display: none; }

.press-contact-note {
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ================================================================
   EKİP PROFİL SAYFALARI (tulin-ozen.html, tansu-bicer.html …)

   Bu kurallar önceden HER profil sayfasının kendi <style> bloğunda
   ayrı ayrı duruyordu: altı kopya, aralarında sessizce oluşmuş
   biçim farklarıyla. Ortak kısım artık burada; sayfaya özel tek şey
   fotoğraf panelinin arka plan tonu, onu her sayfa kendi başlığında
   tek satırla geçersiz kılıyor.
   ================================================================ */

.profile-hero {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}

.profile-hero-photo {
  position: relative;
  background: linear-gradient(160deg, #1a1208 0%, #0c0c0a 100%);
  overflow: hidden;
}

/* cover DEĞİL contain: pencere genişledikçe portre fotoğrafın kırpılıp
   yakınlaşması yerine, iki yanında panelin koyu zemini bant olarak kalır. */
.profile-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.profile-hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px 60px;
  overflow-y: auto;
}

@media (max-width: 1024px) {
  .profile-hero-content { padding: 48px 40px; }
}

@media (max-width: 768px) {
  .profile-hero { grid-template-columns: 1fr; height: auto; }
  .profile-hero-photo { aspect-ratio: 3/4; min-height: 60vh; }
  .profile-hero-content { padding: 40px 24px; overflow-y: visible; }
}