* {
  box-sizing: border-box;
}

:root {
  --bg: #030307;
  --bg-soft: #08050f;
  --white: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --line: rgba(255, 255, 255, 0.1);
  --purple: #8a35ff;
  --purple-2: #b75cff;
  --purple-3: #5f20ff;
  --glass: rgba(10, 7, 20, 0.58);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--white);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: 92px;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 0 clamp(22px, 3.3vw, 56px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.36));
  border-bottom: 1px solid transparent;
  transition: 0.35s ease;
}

.site-header.scrolled {
  height: 76px;
  background: rgba(4, 3, 8, 0.82);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  font-size: clamp(27px, 2.35vw, 42px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.07em;
  filter: drop-shadow(0 0 12px rgba(255,255,255,.16));
}

.brand b {
  margin-left: 2px;
  color: var(--purple);
  text-shadow: 0 0 22px rgba(138, 53, 255, 0.9);
}

.main-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 62px);
  font-weight: 760;
  font-size: clamp(14px, 1vw, 17px);
}

.main-nav a {
  color: rgba(255, 255, 255, 0.9);
  transition: color .25s ease, text-shadow .25s ease;
}

.main-nav a:hover {
  color: #fff;
  text-shadow: 0 0 18px rgba(138, 53, 255, 0.85);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 26px;
}

.join-btn {
  min-width: 174px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #eadbff;
  font-weight: 820;
  border: 1px solid rgba(138, 53, 255, 0.72);
  border-radius: 15px;
  background: rgba(14, 8, 24, 0.58);
  box-shadow: inset 0 0 20px rgba(138, 53, 255, 0.06), 0 0 30px rgba(138, 53, 255, 0.08);
  transition: 0.3s ease;
}

.join-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(191, 103, 255, 0.95);
  box-shadow: 0 0 34px rgba(138, 53, 255, 0.36);
}

.menu-btn {
  width: 34px;
  height: 28px;
  border: 0;
  padding: 0;
  display: grid;
  gap: 7px;
  background: none;
  cursor: pointer;
}

.menu-btn span {
  display: block;
  height: 3px;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 0 14px rgba(255,255,255,.34);
}

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 42%, rgba(126, 34, 255, 0.16), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(85, 35, 170, 0.26), transparent 38%),
    linear-gradient(180deg, #020204 0%, #06020b 50%, #020204 100%);
}

.crowd-canvas,
.hero-vignette,
.hero-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.crowd-canvas {
  z-index: -3;
}

.hero-vignette {
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.18) 40%, rgba(0,0,0,0.82) 93%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 19%, transparent 55%, rgba(0,0,0,0.78) 100%);
}

.hero-noise {
  z-index: -1;
  pointer-events: none;
  opacity: 0.13;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 25% 12%, rgba(255,255,255,.36) 0 1px, transparent 1.8px),
    radial-gradient(circle at 67% 30%, rgba(180,90,255,.34) 0 1px, transparent 1.8px),
    radial-gradient(circle at 80% 72%, rgba(255,255,255,.24) 0 1px, transparent 2px);
  background-size: 120px 110px, 180px 170px, 95px 90px;
  animation: driftNoise 16s linear infinite;
}

@keyframes driftNoise {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-90px,70px,0); }
}

.hero-content {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding-top: clamp(98px, 9.2vh, 130px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-stage {
  position: relative;
  width: min(1180px, 100%);
  height: clamp(230px, 31vw, 390px);
  margin-top: clamp(4px, 2vh, 18px);
}

#logoCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Daha okunaklı LED görünümü için glow düşürüldü */
  filter: drop-shadow(0 0 5px rgba(255,255,255,.28)) drop-shadow(0 0 18px rgba(138,53,255,.42));
}

.fallback-logo {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  margin: 0;
  font-size: clamp(108px, 20vw, 315px);
  font-weight: 950;
  letter-spacing: -0.095em;
  color: #fff;
  text-shadow:
    0 0 8px rgba(255,255,255,.46),
    0 0 24px rgba(138,53,255,.5);
}

.fallback-logo span {
  color: var(--purple);
}

.hero-copy {
  text-align: center;
  margin-top: clamp(-16px, -1.2vw, -6px);
}

.hero-copy h2 {
  margin: 0;
  font-size: clamp(34px, 4.15vw, 66px);
  line-height: 1.03;
  letter-spacing: -0.055em;
  font-weight: 940;
  text-shadow: 0 0 22px rgba(0,0,0,.88);
}

.hero-copy h2 span {
  color: var(--purple);
  text-shadow: 0 0 34px rgba(138, 53, 255, 0.88);
}

.hero-copy p {
  margin: 20px auto 0;
  max-width: 740px;
  color: rgba(255,255,255,.86);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.62;
  text-shadow: 0 0 18px rgba(0,0,0,.9);
}

.hero-buttons {
  margin-top: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.btn {
  min-width: 202px;
  min-height: 64px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border-radius: 13px;
  font-weight: 880;
  font-size: 16px;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #6927ff 0%, #a034ff 100%);
  border: 1px solid rgba(219, 190, 255, 0.36);
  box-shadow:
    0 16px 46px rgba(111, 38, 255, 0.4),
    inset 0 1px 0 rgba(255,255,255,.26);
}

.btn-primary:hover {
  box-shadow:
    0 20px 60px rgba(138, 53, 255, 0.56),
    inset 0 1px 0 rgba(255,255,255,.36);
}

.btn-ghost {
  color: #fff;
  background: rgba(5, 3, 11, 0.68);
  border: 1px solid rgba(138, 53, 255, 0.5);
  box-shadow: 0 0 28px rgba(138, 53, 255, 0.09), inset 0 0 22px rgba(138, 53, 255, 0.04);
}

.btn-ghost:hover {
  border-color: rgba(184, 96, 255, 0.94);
  box-shadow: 0 0 42px rgba(138, 53, 255, 0.27);
}

.btn-icon {
  color: var(--purple);
  font-size: 24px;
  line-height: 0;
  text-shadow: 0 0 20px rgba(138, 53, 255, 0.9);
}

.play-icon {
  width: 21px;
  height: 21px;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 50%;
  position: relative;
  flex: 0 0 auto;
  box-shadow: 0 0 15px rgba(255,255,255,.25);
}

.play-icon::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 4.6px;
  width: 0;
  height: 0;
  border-left: 7px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.stats-bar {
  width: min(1120px, 100%);
  margin-top: clamp(54px, 7vh, 88px);
  min-height: 124px;
  padding: 24px 36px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1.35fr;
  gap: 28px;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(17, 10, 34, 0.74), rgba(4, 3, 8, 0.76));
  border: 1px solid rgba(138, 53, 255, 0.54);
  border-radius: 20px;
  box-shadow:
    0 0 45px rgba(102, 37, 217, 0.26),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
}

.stat-separator {
  width: 1px;
  height: 66px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.22), transparent);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.stat-item strong {
  display: block;
  font-size: clamp(26px, 2.2vw, 38px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 930;
  color: #fff;
  text-shadow: 0 0 24px rgba(255,255,255,.32);
}

.stat-item span {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  white-space: nowrap;
}

.stat-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  color: var(--purple);
  filter: drop-shadow(0 0 15px rgba(138,53,255,.9));
  position: relative;
}

.users-icon::before,
.users-icon::after,
.wave-icon::before,
.globe-icon::before,
.globe-icon::after,
.sync-icon::before {
  content: "";
  position: absolute;
}

.users-icon::before {
  left: 17px;
  top: 8px;
  width: 16px;
  height: 16px;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.users-icon::after {
  left: 9px;
  bottom: 9px;
  width: 31px;
  height: 19px;
  border: 3px solid currentColor;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom: 0;
}

.wave-icon::before {
  left: 2px;
  top: 22px;
  width: 50px;
  height: 14px;
  background:
    linear-gradient(90deg, transparent 0 7%, currentColor 7% 11%, transparent 11% 22%, currentColor 22% 27%, transparent 27% 38%, currentColor 38% 43%, transparent 43% 56%, currentColor 56% 62%, transparent 62% 75%, currentColor 75% 80%, transparent 80%);
  transform: skewY(-14deg);
}

.globe-icon::before {
  inset: 6px;
  border: 4px solid currentColor;
  border-radius: 50%;
}

.globe-icon::after {
  left: 25px;
  top: 8px;
  width: 4px;
  height: 38px;
  border-radius: 99px;
  background: currentColor;
  box-shadow: -16px 16px 0 -15px currentColor, 16px 16px 0 -15px currentColor;
}

.sync-icon::before {
  left: 16px;
  top: 6px;
  width: 23px;
  height: 42px;
  background: currentColor;
  clip-path: polygon(48% 0, 100% 0, 66% 38%, 100% 38%, 31% 100%, 45% 56%, 10% 56%);
}

.scroll-hint {
  margin-top: 38px;
  display: grid;
  place-items: center;
  gap: 8px;
  color: rgba(255,255,255,.76);
  font-size: 14px;
  animation: floatHint 2.6s ease-in-out infinite;
}

.scroll-hint em {
  font-style: normal;
}

.scroll-hint i {
  font-style: normal;
  font-size: 20px;
  line-height: 0.8;
}

.mouse {
  width: 20px;
  height: 34px;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 99px;
  position: relative;
}

.mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 4px;
  height: 7px;
  border-radius: 99px;
  background: #fff;
  transform: translateX(-50%);
  animation: mouseDot 1.6s ease infinite;
}

@keyframes mouseDot {
  0% { opacity: 0; transform: translate(-50%, 0); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 11px); }
}

@keyframes floatHint {
  0%, 100% { transform: translateY(0); opacity: .76; }
  50% { transform: translateY(7px); opacity: 1; }
}

.content-section {
  position: relative;
  padding: clamp(90px, 12vw, 170px) 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(138, 53, 255, 0.16), transparent 35%),
    linear-gradient(180deg, #030307, #08050f);
  border-top: 1px solid rgba(255,255,255,.07);
}

.section-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.eyebrow {
  display: inline-flex;
  margin-bottom: 18px;
  color: #b983ff;
  font-size: 13px;
  letter-spacing: 0.18em;
  font-weight: 880;
}

.content-section h2 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.06em;
}

.content-section p {
  max-width: 780px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.7;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 46px;
}

.feature-grid article {
  min-height: 128px;
  padding: 24px;
  display: flex;
  align-items: flex-end;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(22, 13, 39, .78), rgba(8, 5, 15, .78));
  border: 1px solid rgba(138, 53, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  font-weight: 800;
}

.flow {
  margin-top: 42px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.flow span {
  padding: 16px 22px;
  border-radius: 999px;
  background: rgba(18, 9, 34, 0.72);
  border: 1px solid rgba(138, 53, 255, 0.32);
}

.flow b {
  color: var(--purple-2);
  font-size: 26px;
}

.contact-section {
  min-height: 50vh;
  display: flex;
  align-items: center;
}

@media (max-width: 1050px) {
  .main-nav {
    display: none;
  }

  .site-header {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .stats-bar {
    grid-template-columns: 1fr 1fr;
  }

  .stat-separator {
    display: none;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .site-header {
    height: 78px;
    padding-inline: 20px;
  }

  .join-btn {
    display: none;
  }

  .hero-content {
    width: min(100% - 28px, 1280px);
    padding-top: 88px;
  }

  .logo-stage {
    height: clamp(150px, 40vw, 220px);
  }

  #logoCanvas {
    filter: drop-shadow(0 0 3px rgba(255,255,255,.22)) drop-shadow(0 0 12px rgba(138,53,255,.34));
  }

  .hero-copy {
    margin-top: -8px;
  }

  .hero-copy p br {
    display: none;
  }

  .hero-buttons {
    margin-top: 28px;
    gap: 14px;
  }

  .btn {
    width: 100%;
    min-height: 58px;
  }

  .stats-bar {
    width: min(440px, 100%);
    grid-template-columns: 1fr;
    margin-top: 38px;
    padding: 24px;
    gap: 22px;
  }

  .stat-item {
    justify-content: flex-start;
  }

  .stat-item span {
    white-space: normal;
  }

  .scroll-hint {
    display: none;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .flow {
    align-items: flex-start;
    flex-direction: column;
  }

  .flow b {
    transform: translateX(28px);
  }
}


/* v1.2 Mobil düzeltmeler */
@media (max-width: 680px) {
  body {
    background: #020204;
  }

  .site-header {
    height: 86px;
    padding-inline: 28px;
    background: linear-gradient(180deg, rgba(0,0,0,.94), rgba(0,0,0,.28));
  }

  .brand {
    font-size: 36px;
  }

  .menu-btn {
    width: 42px;
    height: 32px;
    gap: 8px;
  }

  .menu-btn span {
    height: 4px;
  }

  .hero {
    min-height: auto;
    padding-bottom: 72px;
  }

  .hero-content {
    min-height: auto;
    width: calc(100% - 36px);
    padding-top: 112px;
  }

  .logo-stage {
    height: 118px;
    width: 100%;
    margin-top: 18px;
    margin-bottom: 22px;
  }

  #logoCanvas {
    filter: drop-shadow(0 0 2px rgba(255,255,255,.18)) drop-shadow(0 0 8px rgba(138,53,255,.28));
  }

  .hero-copy {
    margin-top: 0;
  }

  .hero-copy h2 {
    font-size: clamp(35px, 9.8vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.055em;
    max-width: 100%;
  }

  .hero-copy p {
    margin-top: 18px;
    font-size: 19px;
    line-height: 1.62;
    max-width: 92%;
  }

  .hero-buttons {
    margin-top: 30px;
    width: 100%;
    gap: 16px;
  }

  .btn {
    width: 100%;
    min-height: 74px;
    border-radius: 16px;
    font-size: 22px;
  }

  .btn-ghost {
    background: rgba(8, 4, 16, 0.64);
  }

  .stats-bar {
    width: 100%;
    margin-top: 34px;
    padding: 28px 28px 30px;
    grid-template-columns: 1fr;
    gap: 26px;
    border-radius: 22px;
    min-height: auto;
    max-height: none;
  }

  .stat-item {
    gap: 24px;
  }

  .stat-icon {
    width: 72px;
    height: 72px;
  }

  .stat-item strong {
    font-size: 42px;
  }

  .stat-item span {
    margin-top: 9px;
    font-size: 20px;
    line-height: 1.25;
  }

  .stat-country,
  .stat-sync {
    display: none;
  }

  .scroll-hint {
    display: none;
  }

  .hero-vignette {
    background:
      radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.12) 42%, rgba(0,0,0,0.72) 96%),
      linear-gradient(180deg, rgba(0,0,0,0.36) 0%, transparent 22%, transparent 60%, rgba(0,0,0,0.72) 100%);
  }
}

@media (max-width: 420px) {
  .site-header {
    padding-inline: 22px;
  }

  .brand {
    font-size: 32px;
  }

  .hero-content {
    width: calc(100% - 28px);
  }

  .logo-stage {
    height: 105px;
  }

  .hero-copy h2 {
    font-size: 34px;
  }

  .hero-copy p {
    font-size: 17px;
  }

  .btn {
    min-height: 66px;
    font-size: 19px;
  }

  .stats-bar {
    padding: 24px 22px;
  }

  .stat-icon {
    width: 58px;
    height: 58px;
  }

  .stat-item strong {
    font-size: 36px;
  }

  .stat-item span {
    font-size: 17px;
  }
}


/* v1.3 Mobil temiz görünüm */
@media (max-width: 680px) {
  .hero {
    min-height: 100svh;
    padding-bottom: 42px;
  }

  .hero-content {
    min-height: 100svh;
    justify-content: center;
    padding-top: 96px;
    padding-bottom: 36px;
  }

  .logo-stage {
    height: 92px;
    margin-top: 4px;
    margin-bottom: 18px;
  }

  #logoCanvas {
    opacity: .92;
    filter: drop-shadow(0 0 2px rgba(255,255,255,.14)) drop-shadow(0 0 7px rgba(138,53,255,.24));
  }

  .hero-copy h2 {
    font-size: clamp(32px, 8.6vw, 42px);
    line-height: 1.08;
    max-width: 94%;
    margin-inline: auto;
  }

  .hero-copy p {
    max-width: 88%;
    font-size: 16.5px;
    line-height: 1.54;
    margin-top: 16px;
    color: rgba(255,255,255,.82);
  }

  .hero-buttons {
    margin-top: 26px;
    gap: 14px;
  }

  .btn {
    min-height: 62px;
    border-radius: 15px;
    font-size: 18px;
  }

  .btn-ghost {
    min-height: 58px;
  }

  .btn-primary {
    min-height: 66px;
  }

  /* Mobilde istatistik kartı ilk ekrandan kaldırıldı.
     Masaüstünde aynı şekilde durur. */
  .stats-bar {
    display: none;
  }

  .hero-noise {
    opacity: .08;
  }

  .crowd-canvas {
    opacity: .82;
  }
}

@media (max-width: 420px) {
  .site-header {
    height: 78px;
  }

  .brand {
    font-size: 29px;
  }

  .menu-btn {
    width: 37px;
    height: 29px;
  }

  .hero-content {
    width: calc(100% - 34px);
    padding-top: 84px;
  }

  .logo-stage {
    height: 82px;
    margin-bottom: 14px;
  }

  .hero-copy h2 {
    font-size: 31px;
  }

  .hero-copy p {
    font-size: 15.5px;
    line-height: 1.5;
  }

  .hero-buttons {
    margin-top: 22px;
  }

  .btn {
    min-height: 58px;
    font-size: 17px;
  }

  .btn-primary {
    min-height: 62px;
  }
}


/* v1.4 Masaüstü logo görünürlük düzeltmesi */
.logo-stage {
  display: grid;
  place-items: center;
}

.fallback-logo {
  display: grid;
  z-index: 1;
  pointer-events: none;
  opacity: .94;
  color: rgba(255,255,255,.96);
  -webkit-text-stroke: 1px rgba(255,255,255,.18);
  text-shadow:
    0 0 8px rgba(255,255,255,.28),
    0 0 20px rgba(138,53,255,.42),
    0 0 42px rgba(138,53,255,.24);
}

.fallback-logo span {
  color: #9340ff;
  text-shadow:
    0 0 9px rgba(147,64,255,.66),
    0 0 24px rgba(147,64,255,.48);
}

#logoCanvas {
  z-index: 2;
  opacity: .78;
  mix-blend-mode: screen;
}

@media (min-width: 681px) {
  .hero-content {
    justify-content: flex-start;
  }

  .logo-stage {
    height: clamp(270px, 34vw, 430px);
    margin-top: clamp(28px, 5vh, 68px);
    margin-bottom: 0;
  }

  .fallback-logo {
    font-size: clamp(120px, 18.8vw, 292px);
  }

  .hero-copy {
    margin-top: clamp(-38px, -2.6vw, -18px);
  }
}

/* Mobilde büyük yazı yerine sadece canvas LED hissi kalsın */
@media (max-width: 680px) {
  .fallback-logo {
    opacity: .16;
    font-size: clamp(58px, 17vw, 90px);
    text-shadow:
      0 0 4px rgba(255,255,255,.12),
      0 0 10px rgba(138,53,255,.16);
  }

  #logoCanvas {
    opacity: .96;
  }
}


/* v1.7 + işareti ve LED efekt düzeltmesi */
.fallback-logo {
  display: none !important;
}

.logo-stage.logo-fallback .fallback-logo {
  display: grid !important;
  opacity: .36;
}

#logoCanvas {
  opacity: 1;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.28))
    drop-shadow(0 0 18px rgba(138,53,255,.42));
}

@media (min-width: 681px) {
  .hero-content {
    padding-top: 96px;
  }

  .logo-stage {
    width: min(1120px, 94%);
    height: clamp(240px, 30vw, 390px);
    margin-top: clamp(26px, 5vh, 58px);
    margin-bottom: 0;
  }

  .hero-copy {
    margin-top: clamp(-24px, -1.8vw, -10px);
  }

  .hero-copy h2 {
    font-size: clamp(38px, 4.2vw, 62px);
  }

  .hero-copy p {
    margin-top: 14px;
    font-size: clamp(16px, 1.12vw, 19px);
    line-height: 1.55;
  }

  .hero-buttons {
    margin-top: 28px;
  }

  .stats-bar {
    margin-top: 42px;
  }
}

@media (min-width: 681px) and (max-height: 850px) {
  .logo-stage {
    height: clamp(205px, 25vw, 320px);
    margin-top: 22px;
  }

  .hero-copy h2 {
    font-size: clamp(35px, 3.5vw, 52px);
  }

  .stats-bar {
    display: none;
  }
}

@media (max-width: 680px) {
  .logo-stage {
    width: min(340px, 92%);
    height: 86px;
  }

  #logoCanvas {
    filter:
      drop-shadow(0 0 2px rgba(255,255,255,.18))
      drop-shadow(0 0 9px rgba(138,53,255,.30));
  }
}


/* v1.8 Mobil dengeleme:
   - LED logo daha merkezde / hafif yukarıda
   - slogan daha küçük, logoyu bastırmıyor
   - ilk ekran daha temiz
*/
@media (max-width: 680px) {
  .hero {
    min-height: 100svh;
    padding-bottom: 30px;
  }

  .hero-content {
    min-height: 100svh;
    width: calc(100% - 34px);
    justify-content: center;
    padding-top: 94px;
    padding-bottom: 28px;
  }

  .logo-stage {
    width: min(360px, 94%);
    height: 118px;
    margin-top: 24px;
    margin-bottom: 18px;
  }

  #logoCanvas {
    opacity: .98;
    filter:
      drop-shadow(0 0 2px rgba(255,255,255,.18))
      drop-shadow(0 0 10px rgba(138,53,255,.30));
  }

  .hero-copy {
    margin-top: 0;
  }

  .hero-copy h2 {
    max-width: 92%;
    margin-inline: auto;
    font-size: clamp(26px, 7.2vw, 34px);
    line-height: 1.08;
    letter-spacing: -0.05em;
  }

  .hero-copy p {
    max-width: 90%;
    margin-top: 14px;
    font-size: 15.5px;
    line-height: 1.5;
    color: rgba(255,255,255,.84);
  }

  .hero-buttons {
    margin-top: 20px;
    gap: 12px;
  }

  .btn {
    min-height: 58px;
    font-size: 17px;
    border-radius: 15px;
  }

  .btn-ghost {
    min-height: 56px;
  }

  .btn-primary {
    min-height: 62px;
  }

  .stats-bar,
  .scroll-hint {
    display: none;
  }

  .hero-noise {
    opacity: .06;
  }

  .crowd-canvas {
    opacity: .88;
  }
}

@media (max-width: 420px) {
  .hero-content {
    width: calc(100% - 28px);
    padding-top: 88px;
  }

  .logo-stage {
    width: min(330px, 94%);
    height: 108px;
    margin-top: 18px;
    margin-bottom: 16px;
  }

  .hero-copy h2 {
    font-size: 25px;
    max-width: 95%;
  }

  .hero-copy p {
    max-width: 94%;
    font-size: 14.8px;
    line-height: 1.48;
  }

  .hero-buttons {
    margin-top: 18px;
  }

  .btn {
    min-height: 56px;
    font-size: 16px;
  }

  .btn-primary {
    min-height: 60px;
  }
}


/* v1.9 Mobil logo okunabilirlik düzeltmesi */
@media (max-width: 680px) {
  .hero-content {
    padding-top: 82px;
    justify-content: center;
  }

  .logo-stage {
    width: min(380px, 96%);
    height: 146px;
    margin-top: 8px;
    margin-bottom: 14px;
  }

  #logoCanvas {
    filter:
      drop-shadow(0 0 2px rgba(255,255,255,.18))
      drop-shadow(0 0 8px rgba(138,53,255,.28));
  }

  .hero-copy h2 {
    font-size: clamp(24px, 6.8vw, 32px);
    max-width: 94%;
  }

  .hero-copy p {
    font-size: 15px;
    max-width: 92%;
    margin-top: 12px;
  }

  .hero-buttons {
    margin-top: 18px;
  }
}

@media (max-width: 420px) {
  .hero-content {
    padding-top: 78px;
  }

  .logo-stage {
    width: min(360px, 96%);
    height: 132px;
    margin-top: 6px;
    margin-bottom: 12px;
  }

  .hero-copy h2 {
    font-size: 23px;
  }

  .hero-copy p {
    font-size: 14.5px;
    max-width: 94%;
  }
}


/* Stage 1: Üyelik yönlendirme butonları */
.login-link {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 820;
  font-size: 15px;
  transition: color .25s ease, text-shadow .25s ease;
  white-space: nowrap;
}

.login-link:hover {
  color: #fff;
  text-shadow: 0 0 16px rgba(138, 53, 255, .82);
}

.register-btn {
  min-width: 104px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 880;
  font-size: 15px;
  border-radius: 13px;
  border: 1px solid rgba(201, 157, 255, .42);
  background: linear-gradient(135deg, rgba(105,39,255,.92), rgba(160,52,255,.94));
  box-shadow:
    0 12px 34px rgba(138, 53, 255, .24),
    inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}

.register-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 46px rgba(138, 53, 255, .38),
    inset 0 1px 0 rgba(255,255,255,.3);
}

.mobile-auth-actions {
  display: none;
}

@media (max-width: 1180px) {
  .join-btn {
    min-width: 150px;
  }

  .login-link,
  .register-btn {
    display: none;
  }
}

@media (max-width: 680px) {
  .mobile-auth-actions {
    width: 100%;
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .mobile-auth-actions a {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    font-weight: 850;
    border: 1px solid rgba(138, 53, 255, .38);
    background: rgba(8, 4, 16, .62);
  }

  .mobile-auth-actions a:last-child {
    background: linear-gradient(135deg, rgba(105,39,255,.92), rgba(160,52,255,.94));
    box-shadow: 0 12px 32px rgba(138,53,255,.22);
  }
}


/* Stage 1: Geçici giriş / üyelik / katılım sayfaları */
.auth-page {
  min-height: 100vh;
  padding: 150px 24px 80px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(138,53,255,.22), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(91,35,170,.18), transparent 42%),
    #030307;
}

.auth-card {
  width: min(520px, 100%);
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(138,53,255,.42);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(18,10,34,.82), rgba(5,4,10,.88));
  box-shadow:
    0 0 60px rgba(138,53,255,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}

.auth-card h1 {
  margin: 0;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1;
  letter-spacing: -.06em;
}

.auth-card p {
  margin: 18px 0 0;
  color: rgba(255,255,255,.74);
  font-size: 17px;
  line-height: 1.55;
}

.auth-form {
  margin-top: 28px;
  display: grid;
  gap: 18px;
}

.auth-form label {
  display: grid;
  gap: 9px;
  color: rgba(255,255,255,.84);
  font-weight: 760;
}

.auth-form input,
.auth-form select {
  width: 100%;
  min-height: 56px;
  padding: 0 17px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  outline: none;
  background: rgba(0,0,0,.36);
  color: #fff;
  font: inherit;
}

.auth-form input:focus,
.auth-form select:focus {
  border-color: rgba(138,53,255,.72);
  box-shadow: 0 0 0 4px rgba(138,53,255,.16);
}

.auth-form select option {
  color: #111;
}

.auth-form .btn {
  width: 100%;
  margin-top: 8px;
  border: 0;
  cursor: pointer;
}

.auth-note a {
  color: #b985ff;
  font-weight: 850;
}


/* Stage 2: PHP üyelik sistemi */
.auth-alert {
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 14px;
  font-weight: 760;
  line-height: 1.45;
}

.auth-alert.error {
  color: #ffd6d6;
  border: 1px solid rgba(255, 90, 90, .36);
  background: rgba(255, 65, 65, .12);
}

.auth-alert.success {
  color: #d9ffe7;
  border: 1px solid rgba(57, 217, 125, .36);
  background: rgba(57, 217, 125, .12);
}

.dashboard-page {
  min-height: 100vh;
  padding: 150px 24px 90px;
  background:
    radial-gradient(circle at 50% 8%, rgba(138,53,255,.22), transparent 34%),
    radial-gradient(circle at 80% 80%, rgba(84,31,170,.18), transparent 36%),
    #030307;
}

.dashboard-hero,
.dashboard-grid,
.dashboard-actions {
  width: min(1120px, 100%);
  margin-inline: auto;
}

.dashboard-hero h1 {
  margin: 0;
  max-width: 900px;
  font-size: clamp(42px, 6vw, 82px);
  line-height: .98;
  letter-spacing: -.065em;
}

.dashboard-hero p {
  max-width: 720px;
  margin: 22px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 19px;
  line-height: 1.65;
}

.dashboard-grid {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.dash-card,
.dashboard-actions article {
  border: 1px solid rgba(138,53,255,.32);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(18,10,34,.78), rgba(5,4,10,.84));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 38px rgba(138,53,255,.1);
}

.dash-card {
  min-height: 126px;
  padding: 24px;
}

.dash-card span {
  display: block;
  color: rgba(255,255,255,.58);
  font-size: 14px;
  margin-bottom: 12px;
}

.dash-card strong {
  display: block;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.1;
  word-break: break-word;
}

.dashboard-actions {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.dashboard-actions article {
  padding: 30px;
}

.dashboard-actions h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 42px);
  letter-spacing: -.045em;
}

.dashboard-actions p {
  margin: 14px 0 24px;
  color: rgba(255,255,255,.68);
  line-height: 1.6;
}

button:disabled {
  opacity: .56;
  cursor: not-allowed;
}

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

  .dashboard-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}


/* Stage 3: Etkinlik yönetimi */
.event-form-card {
  width: min(640px, 100%);
}

.event-list,
.event-detail-grid {
  width: min(1120px, 100%);
  margin: 42px auto 0;
}

.event-list {
  display: grid;
  gap: 18px;
}

.empty-state,
.event-row,
.event-main-card,
.qr-card {
  border: 1px solid rgba(138,53,255,.32);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(18,10,34,.78), rgba(5,4,10,.86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 38px rgba(138,53,255,.1);
}

.empty-state {
  padding: 34px;
}

.empty-state h2,
.event-row h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -.045em;
}

.empty-state p,
.event-row p,
.qr-card p {
  color: rgba(255,255,255,.68);
  line-height: 1.6;
}

.event-row {
  padding: 26px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
}

.event-row h2 {
  margin-top: 10px;
}

.event-row-actions {
  display: flex;
  align-items: center;
}

.event-status {
  display: inline-flex;
  min-height: 30px;
  padding: 0 12px;
  align-items: center;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 850;
  border: 1px solid rgba(255,255,255,.14);
}

.status-active {
  color: #d9ffe7;
  background: rgba(57,217,125,.13);
  border-color: rgba(57,217,125,.34);
}

.status-draft {
  color: #efe4ff;
  background: rgba(138,53,255,.14);
  border-color: rgba(138,53,255,.36);
}

.status-completed {
  color: #d8eaff;
  background: rgba(80,150,255,.13);
  border-color: rgba(80,150,255,.34);
}

.status-cancelled {
  color: #ffd8d8;
  background: rgba(255,80,80,.13);
  border-color: rgba(255,80,80,.34);
}

.event-detail-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 22px;
}

.event-main-card,
.qr-card {
  padding: 32px;
}

.detail-lines {
  margin-top: 24px;
  display: grid;
  gap: 8px;
}

.detail-lines p {
  margin: 0;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
}

.join-link-box {
  margin-top: 28px;
  display: grid;
  gap: 12px;
}

.join-link-box span {
  color: rgba(255,255,255,.58);
  font-weight: 800;
}

.join-link-box input {
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  background: rgba(0,0,0,.36);
  font: inherit;
}

.copy-link-btn {
  width: fit-content;
}

.event-actions-inline {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn.danger {
  border-color: rgba(255,90,90,.36);
  color: #ffd8d8;
}

.qr-card {
  display: grid;
  align-content: start;
  gap: 18px;
}

.qr-placeholder {
  aspect-ratio: 1;
  width: 100%;
  border-radius: 22px;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.12) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(138,53,255,.22), rgba(0,0,0,.24));
  background-size: 22px 22px, 22px 22px, 100% 100%;
  border: 1px solid rgba(138,53,255,.38);
}

.qr-placeholder span {
  display: block;
  color: #fff;
  font-size: 32px;
  font-weight: 950;
  letter-spacing: -.07em;
}

.qr-placeholder b {
  display: block;
  margin-top: 8px;
  color: #b985ff;
  font-size: 24px;
}

@media (max-width: 860px) {
  .event-row {
    grid-template-columns: 1fr;
  }

  .event-detail-grid {
    grid-template-columns: 1fr;
  }

  .copy-link-btn {
    width: 100%;
  }
}


/* Stage 3.1: QR kod + durum güncelleme */
.status-form {
  margin-top: 28px;
  padding: 20px;
  border: 1px solid rgba(138,53,255,.24);
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
}

.status-form label {
  display: grid;
  gap: 9px;
  color: rgba(255,255,255,.84);
  font-weight: 760;
}

.status-form select {
  min-height: 54px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.38);
  color: #fff;
  font: inherit;
}

.status-form select option {
  color: #111;
}

.qr-real {
  width: 100%;
  aspect-ratio: 1;
  padding: 18px;
  border-radius: 24px;
  background: #fff;
  box-shadow:
    0 0 34px rgba(255,255,255,.12),
    0 0 54px rgba(138,53,255,.22);
}

.qr-real img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 12px;
}

.qr-card h2 {
  margin: 0;
  font-size: clamp(24px, 2.3vw, 34px);
  letter-spacing: -.04em;
}

.qr-card .btn {
  width: 100%;
}

@media (max-width: 680px) {
  .status-form {
    grid-template-columns: 1fr;
  }

  .status-form .btn {
    width: 100%;
  }
}


/* Stage 3.2: Katılımcı kayıtları */
.join-live-page {
  min-height: 100vh;
  padding: 130px 22px 60px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(138,53,255,.25), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(80,31,150,.2), transparent 40%),
    #030307;
}

.join-live-card {
  width: min(520px, 100%);
  padding: clamp(28px, 4vw, 44px);
  border-radius: 28px;
  border: 1px solid rgba(138,53,255,.42);
  background: linear-gradient(180deg, rgba(18,10,34,.84), rgba(5,4,10,.9));
  box-shadow: 0 0 60px rgba(138,53,255,.18), inset 0 1px 0 rgba(255,255,255,.08);
  text-align: center;
}

.join-live-card h1 {
  margin: 0;
  font-size: clamp(40px, 8vw, 74px);
  line-height: .96;
  letter-spacing: -.07em;
}

.join-live-card p {
  color: rgba(255,255,255,.74);
  line-height: 1.6;
  font-size: 17px;
}

.phone-ready {
  width: 138px;
  height: 220px;
  margin: 0 auto 28px;
  border-radius: 32px;
  border: 2px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(140,53,255,.28), rgba(255,255,255,.05));
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(138,53,255,.32);
}

.phone-ready span {
  font-weight: 950;
  letter-spacing: -.07em;
  color: #fff;
  z-index: 2;
}

.phone-glow {
  position: absolute;
  inset: 18px;
  border-radius: 24px;
  background: radial-gradient(circle, rgba(255,255,255,.78), rgba(138,53,255,.42) 34%, transparent 68%);
  animation: phonePulse 1.6s ease-in-out infinite;
}

@keyframes phonePulse {
  0%, 100% { opacity: .45; transform: scale(.92); }
  50% { opacity: .95; transform: scale(1.05); }
}

.participants-table-wrap {
  width: min(1120px, 100%);
  margin: 42px auto 0;
}

.participants-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(18,10,34,.78), rgba(5,4,10,.86));
  border: 1px solid rgba(138,53,255,.32);
}

.participants-table th,
.participants-table td {
  padding: 18px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.participants-table th {
  color: rgba(255,255,255,.68);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.participants-table td {
  color: rgba(255,255,255,.86);
}

@media (max-width: 760px) {
  .participants-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}


/* Stage 4: Live Control Panel */
.live-page {
  min-height: 100vh;
  padding: 145px 24px 90px;
  background:
    radial-gradient(circle at 50% 8%, rgba(138,53,255,.22), transparent 34%),
    radial-gradient(circle at 80% 85%, rgba(84,31,170,.18), transparent 36%),
    #030307;
}

.live-hero,
.live-status-grid,
.live-control-grid {
  width: min(1120px, 100%);
  margin-inline: auto;
}

.live-hero h1 {
  margin: 0;
  max-width: 980px;
  font-size: clamp(42px, 6vw, 82px);
  line-height: .98;
  letter-spacing: -.065em;
}

.live-hero p {
  max-width: 720px;
  margin: 20px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 19px;
  line-height: 1.6;
}

.live-status-grid {
  margin-top: 38px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.live-warning {
  width: min(1120px, 100%);
  margin: 22px auto 0;
  padding: 18px 20px;
  border-radius: 18px;
  color: #fff2d8;
  background: rgba(255, 170, 60, .12);
  border: 1px solid rgba(255, 170, 60, .32);
}

.live-control-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
}

.control-panel-card,
.phone-preview-card {
  padding: 30px;
  border-radius: 26px;
  border: 1px solid rgba(138,53,255,.32);
  background: linear-gradient(180deg, rgba(18,10,34,.82), rgba(5,4,10,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 38px rgba(138,53,255,.1);
}

.control-panel-card h2,
.phone-preview-card h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -.05em;
}

.control-panel-card p {
  color: rgba(255,255,255,.68);
  line-height: 1.55;
}

.live-form {
  margin-top: 24px;
  display: grid;
  gap: 16px;
}

.live-form label {
  display: grid;
  gap: 9px;
  color: rgba(255,255,255,.84);
  font-weight: 780;
}

.live-form input,
.live-form select {
  min-height: 54px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.36);
  color: #fff;
  font: inherit;
}

.live-form input[type="color"] {
  padding: 6px;
  cursor: pointer;
}

.live-form input[type="range"] {
  padding: 0;
}

.live-form select option {
  color: #111;
}

.live-form .btn {
  width: 100%;
  border: 0;
  cursor: pointer;
}

.live-send-result {
  min-height: 26px;
  margin-top: 18px;
  color: rgba(255,255,255,.72);
}

.live-send-result.success {
  color: #d9ffe7;
}

.live-send-result.error {
  color: #ffd6d6;
}

.live-phone-preview {
  --live-color: #8a35ff;
  width: min(280px, 100%);
  aspect-ratio: 9 / 16;
  margin: 28px auto;
  padding: 16px;
  border-radius: 42px;
  border: 2px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.48);
  box-shadow: 0 0 48px rgba(138,53,255,.18);
  position: relative;
  overflow: hidden;
}

.preview-screen {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 30px;
  background: radial-gradient(circle, var(--live-color), #09030f 68%);
  color: #fff;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 950;
  letter-spacing: -.07em;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.effect-blackout .preview-screen {
  background: #000;
}

.effect-flash .preview-screen {
  animation: previewFlash .55s infinite;
}

.effect-pulse .preview-screen {
  animation: previewPulse 1.1s ease-in-out infinite;
}

.effect-wave .preview-screen::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  transform: translateX(-80%) rotate(18deg);
  animation: previewWave 1.3s linear infinite;
}

.effect-countdown .preview-screen span {
  font-size: 96px;
}

.quick-effects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
}

.quick-effects button {
  min-height: 46px;
  border-radius: 13px;
  border: 1px solid rgba(138,53,255,.28);
  color: #fff;
  background: rgba(0,0,0,.28);
  font-weight: 820;
  cursor: pointer;
}

.quick-effects button:hover {
  border-color: rgba(138,53,255,.68);
  box-shadow: 0 0 24px rgba(138,53,255,.16);
}

@keyframes previewFlash {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(3.2); background: #fff; color: #111; }
}

@keyframes previewPulse {
  0%, 100% { transform: scale(.98); filter: brightness(.9); }
  50% { transform: scale(1.02); filter: brightness(1.45); }
}

@keyframes previewWave {
  from { transform: translateX(-90%) rotate(18deg); }
  to { transform: translateX(90%) rotate(18deg); }
}

/* Receiver phone screen */
.live-receiver-body {
  margin: 0;
  background: #000;
  overflow: hidden;
}

.receiver-screen {
  --live-color: #8a35ff;
  min-height: 100svh;
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--live-color) 68%, white 8%), #050108 72%);
}

.receiver-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(0,0,0,.42), transparent 48%);
  pointer-events: none;
}

.receiver-content {
  position: relative;
  z-index: 2;
  width: min(92vw, 680px);
  text-align: center;
  padding: 24px;
}

.receiver-logo {
  font-size: clamp(44px, 15vw, 118px);
  font-weight: 950;
  letter-spacing: -.08em;
  text-shadow: 0 0 28px rgba(255,255,255,.28);
}

.receiver-logo span {
  color: #fff;
}

.receiver-content h1 {
  margin: 18px 0 0;
  font-size: clamp(42px, 16vw, 132px);
  line-height: .92;
  letter-spacing: -.07em;
}

.receiver-content p {
  margin: 20px auto 0;
  max-width: 520px;
  font-size: clamp(18px, 5vw, 28px);
  line-height: 1.35;
}

.receiver-content small {
  display: block;
  margin-top: 28px;
  color: rgba(255,255,255,.66);
}

.receiver-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #fff;
  pointer-events: none;
  z-index: 5;
}

.receiver-blackout {
  background: #000;
}

.receiver-screen-color {
  background: var(--live-color);
}

.receiver-flash-effect {
  animation: receiverFlashBg .8s ease-in-out infinite;
}

.receiver-pulse .receiver-bg {
  animation: receiverPulse 1.2s ease-in-out infinite;
}

.receiver-wave::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
  animation: receiverWave 1.35s linear infinite;
  transform: rotate(18deg);
  z-index: 1;
}

.receiver-welcome {
  background:
    radial-gradient(circle at center, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, var(--live-color), #050108);
}

.receiver-countdown .receiver-content h1 {
  font-size: clamp(96px, 34vw, 260px);
}

@keyframes receiverFlashBg {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(2.8); }
}

@keyframes receiverPulse {
  0%, 100% { opacity: .44; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes receiverWave {
  from { transform: translateX(-80%) rotate(18deg); }
  to { transform: translateX(80%) rotate(18deg); }
}

@media (max-width: 980px) {
  .live-status-grid {
    grid-template-columns: 1fr 1fr;
  }

  .live-control-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .live-page {
    padding-top: 116px;
  }

  .live-status-grid {
    grid-template-columns: 1fr;
  }

  .control-panel-card,
  .phone-preview-card {
    padding: 22px;
  }

  .quick-effects {
    grid-template-columns: 1fr 1fr;
  }
}


/* Stage 4.1: Live status + heartbeat */
.live-history-card {
  width: min(1120px, 100%);
  margin: 24px auto 0;
  padding: 26px;
  border-radius: 26px;
  border: 1px solid rgba(138,53,255,.32);
  background: linear-gradient(180deg, rgba(18,10,34,.78), rgba(5,4,10,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 38px rgba(138,53,255,.1);
}

.live-history-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.live-history-head h2 {
  margin: 0;
  font-size: clamp(25px, 2.8vw, 40px);
  letter-spacing: -.045em;
}

.live-mini-code {
  min-height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.1);
  font-weight: 800;
}

.live-history-list {
  display: grid;
  gap: 10px;
}

.history-row {
  min-height: 52px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 14px;
  align-items: center;
  border-radius: 15px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.07);
}

.history-row i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0 0 16px currentColor;
}

.history-row b {
  color: #fff;
  text-transform: capitalize;
}

.history-row span,
.muted-note {
  color: rgba(255,255,255,.62);
}

.receiver-screen::before {
  content: "";
  position: absolute;
  top: env(safe-area-inset-top, 0);
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  opacity: .45;
  z-index: 8;
}

@media (max-width: 680px) {
  .live-history-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .history-row {
    grid-template-columns: 16px 1fr;
  }

  .history-row span {
    grid-column: 2;
    margin-top: -10px;
  }
}


/* Stage 4.2: Mobil gerçek flash / torch izni */
.torch-permission {
  width: min(360px, 100%);
  margin: 28px auto 0;
  display: grid;
  gap: 10px;
  place-items: center;
  position: relative;
  z-index: 10;
}

.torch-permission button {
  min-height: 52px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  background: rgba(0,0,0,.32);
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255,255,255,.1);
}

.torch-permission button.ready {
  color: #d9ffe7;
  border-color: rgba(57,217,125,.4);
  background: rgba(57,217,125,.12);
}

.torch-permission button:disabled {
  cursor: default;
}

.torch-permission em {
  max-width: 320px;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  line-height: 1.35;
  font-style: normal;
}

.receiver-flash-effect .receiver-content {
  animation: receiverContentFlash 0.55s ease-in-out infinite;
}

@keyframes receiverContentFlash {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.85); }
}

@media (max-width: 680px) {
  .torch-permission {
    margin-top: 22px;
  }

  .torch-permission button {
    min-height: 50px;
    font-size: 14px;
  }
}


/* Stage 4.3: Efekt presetleri ve sahne modları */
.preset-section {
  width: min(1120px, 100%);
  margin: 24px auto 0;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(138,53,255,.32);
  background:
    radial-gradient(circle at 10% 0%, rgba(138,53,255,.18), transparent 34%),
    linear-gradient(180deg, rgba(18,10,34,.82), rgba(5,4,10,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 38px rgba(138,53,255,.1);
}

.preset-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 22px;
}

.preset-head h2 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.04;
  letter-spacing: -.055em;
}

.preset-head p {
  max-width: 360px;
  margin: 0;
  color: rgba(255,255,255,.66);
  line-height: 1.5;
}

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

.preset-card {
  min-height: 112px;
  padding: 18px;
  text-align: left;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 84% 18%, rgba(138,53,255,.22), transparent 34%),
    rgba(0,0,0,.28);
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.preset-card:hover,
.preset-card.active {
  transform: translateY(-3px);
  border-color: rgba(183,92,255,.72);
  box-shadow: 0 18px 44px rgba(138,53,255,.20);
  background:
    radial-gradient(circle at 84% 18%, rgba(183,92,255,.34), transparent 36%),
    rgba(18,8,32,.58);
}

.preset-card b {
  display: block;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -.035em;
}

.preset-card span {
  display: block;
  margin-top: 9px;
  color: rgba(255,255,255,.62);
  font-size: 14px;
}

.danger-preset {
  background:
    radial-gradient(circle at 84% 18%, rgba(255,80,80,.18), transparent 34%),
    rgba(0,0,0,.34);
}

.danger-preset:hover {
  border-color: rgba(255,80,80,.52);
  box-shadow: 0 18px 44px rgba(255,40,40,.12);
}

/* Receiver preset visuals */
.receiver-white-blast {
  background: #fff !important;
  color: #111;
}

.receiver-white-blast .receiver-logo,
.receiver-white-blast .receiver-content h1,
.receiver-white-blast .receiver-content p,
.receiver-white-blast .receiver-content small {
  color: #111;
  text-shadow: none;
}

.receiver-bass-pulse .receiver-bg {
  animation: receiverBass 0.55s ease-in-out infinite;
}

.receiver-purple-wave {
  background:
    radial-gradient(circle at center, rgba(183,92,255,.62), transparent 30%),
    linear-gradient(135deg, #1b052c, #050108 66%);
}

.receiver-sponsor {
  background:
    linear-gradient(135deg, #ff2bd6, #8a35ff 42%, #030307);
}

.receiver-sponsor .receiver-content h1 {
  font-size: clamp(50px, 16vw, 126px);
}

@keyframes receiverBass {
  0%, 100% {
    opacity: .42;
    transform: scale(.88);
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.20);
    filter: brightness(1.55);
  }
}

@media (max-width: 980px) {
  .preset-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .preset-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .preset-section {
    padding: 22px;
  }

  .preset-grid {
    grid-template-columns: 1fr;
  }

  .preset-card {
    min-height: 86px;
  }
}


/* Stage 4.4: Aç/kapa çalışan örüntülü efektler */
.pattern-preset {
  background:
    radial-gradient(circle at 84% 18%, rgba(255,255,255,.20), transparent 34%),
    radial-gradient(circle at 12% 92%, rgba(138,53,255,.18), transparent 36%),
    rgba(0,0,0,.30);
}

.pattern-preset b::after {
  content: " LOOP";
  margin-left: 7px;
  color: #b985ff;
  font-size: 11px;
  letter-spacing: .08em;
}

.stop-preset b::after {
  content: " OFF";
  margin-left: 7px;
  color: #ffb4b4;
  font-size: 11px;
  letter-spacing: .08em;
}

.receiver-flash-effect .receiver-logo,
.receiver-flash-effect .receiver-content h1 {
  animation: receiverLogoFlicker 1s linear infinite;
}

.receiver-blackout {
  background:
    radial-gradient(circle at center, rgba(138,53,255,.10), transparent 30%),
    #000;
}

.receiver-blackout .receiver-content {
  opacity: .42;
}

@keyframes receiverLogoFlicker {
  0%, 18%, 22%, 100% { opacity: 1; }
  19%, 21% { opacity: .38; }
}


/* Stage 4.5: Audio Sync ve frekans grupları */
.audio-group-grid,
.audio-sync-section {
  width: min(1120px, 100%);
  margin: 22px auto 0;
}

.audio-group-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.audio-group-grid article {
  min-height: 94px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(138,53,255,.28);
  background: linear-gradient(180deg, rgba(18,10,34,.70), rgba(5,4,10,.82));
}

.audio-group-grid b {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(138,53,255,.38);
  box-shadow: 0 0 20px rgba(138,53,255,.25);
}

.audio-group-grid span {
  margin-left: 9px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
}

.audio-group-grid strong {
  display: block;
  margin-top: 14px;
  font-size: 30px;
}

.audio-sync-section {
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(138,53,255,.34);
  background:
    radial-gradient(circle at 8% 0%, rgba(138,53,255,.18), transparent 38%),
    linear-gradient(180deg, rgba(18,10,34,.82), rgba(5,4,10,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 38px rgba(138,53,255,.1);
}

.audio-sync-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
}

.audio-sync-head h2 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 48px);
  letter-spacing: -.055em;
  line-height: 1;
}

.audio-sync-head p {
  max-width: 640px;
  color: rgba(255,255,255,.68);
  line-height: 1.55;
}

.audio-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.audio-buttons .btn {
  min-width: 160px;
  min-height: 54px;
  border: 0;
  cursor: pointer;
}

.audio-meter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.audio-meter {
  min-height: 84px;
  padding: 16px;
  display: grid;
  align-content: end;
  border-radius: 18px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  position: relative;
}

.audio-meter span {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 7px;
  width: 0%;
  background: linear-gradient(90deg, #8a35ff, #ffffff);
  box-shadow: 0 0 22px rgba(138,53,255,.55);
  transition: width .08s linear;
}

.audio-meter b {
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,.88);
}

.audio-settings {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 16px;
}

.audio-settings label {
  display: grid;
  gap: 9px;
  color: rgba(255,255,255,.78);
  font-weight: 760;
}

.audio-settings input {
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.32);
  color: #fff;
  font: inherit;
}

#audioStatus {
  display: block;
  margin-top: 16px;
  color: rgba(255,255,255,.66);
}

.live-form select#targetGroup {
  border-color: rgba(138,53,255,.32);
  background:
    linear-gradient(180deg, rgba(138,53,255,.12), rgba(0,0,0,.36));
}

@media (max-width: 980px) {
  .audio-group-grid,
  .audio-meter-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .audio-sync-head {
    grid-template-columns: 1fr;
  }

  .audio-buttons {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .audio-group-grid,
  .audio-meter-grid,
  .audio-settings {
    grid-template-columns: 1fr;
  }

  .audio-sync-section {
    padding: 22px;
  }

  .audio-buttons .btn {
    width: 100%;
  }
}


/* Stage 4.6: Audio-only focus */
.preset-section {
  display: none !important;
}

.audio-sync-section {
  border-color: rgba(183,92,255,.58);
  box-shadow: 0 0 58px rgba(138,53,255,.16), inset 0 1px 0 rgba(255,255,255,.08);
}

.audio-help-box {
  margin-top: 20px;
  padding: 16px 18px;
  display: grid;
  gap: 7px;
  border-radius: 18px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.74);
  line-height: 1.45;
}

.audio-help-box b {
  color: #fff;
}

.audio-help-box span {
  display: block;
}

.audio-meter {
  min-height: 108px;
}

.audio-meter span {
  height: 10px;
}

#audioStatus {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.80);
}

.torch-permission {
  animation: torchAttention 1.3s ease-in-out infinite;
}

@keyframes torchAttention {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}


/* Stage 4.7: Sade bilgisayar sesi debug paneli */
.audio-simple-panel {
  width: min(1120px, 100%);
  margin: 24px auto 0;
  padding: 30px;
  border-radius: 28px;
  border: 1px solid rgba(183,92,255,.60);
  background:
    radial-gradient(circle at 8% 0%, rgba(138,53,255,.22), transparent 38%),
    linear-gradient(180deg, rgba(18,10,34,.88), rgba(5,4,10,.92));
  box-shadow: 0 0 62px rgba(138,53,255,.18), inset 0 1px 0 rgba(255,255,255,.08);
}

.audio-simple-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
}

.audio-simple-head h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 62px);
  letter-spacing: -.06em;
  line-height: .98;
}

.audio-simple-head p {
  max-width: 720px;
  color: rgba(255,255,255,.72);
  line-height: 1.55;
}

.audio-simple-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.audio-simple-actions .btn {
  min-height: 56px;
  min-width: 190px;
  border: 0;
  cursor: pointer;
}

.audio-debug-values {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.audio-debug-values article {
  min-height: 112px;
  padding: 18px;
  display: grid;
  align-content: center;
  border-radius: 20px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.09);
}

.audio-debug-values span {
  color: rgba(255,255,255,.62);
  font-weight: 760;
}

.audio-debug-values strong {
  margin-top: 8px;
  color: #fff;
  font-size: clamp(38px, 5vw, 68px);
  letter-spacing: -.06em;
}

.audio-meter-grid.simple {
  grid-template-columns: repeat(4, 1fr);
}

.audio-settings.simple {
  grid-template-columns: 1fr;
}

.audio-trigger-box {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  display: grid;
  gap: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
}

.audio-trigger-box b {
  color: #fff;
}

.audio-trigger-box span {
  color: rgba(255,255,255,.72);
}

.live-control-grid {
  display: none !important;
}

@media (max-width: 980px) {
  .audio-simple-head,
  .audio-debug-values,
  .audio-meter-grid.simple {
    grid-template-columns: 1fr 1fr;
  }

  .audio-simple-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .audio-simple-panel {
    padding: 22px;
  }

  .audio-simple-head,
  .audio-debug-values,
  .audio-meter-grid.simple {
    grid-template-columns: 1fr;
  }

  .audio-simple-actions .btn {
    width: 100%;
  }
}


/* Stage 4.7.1: Audio one-shot fix */
.receiver-audio-hit {
  animation: audioHitScreen 0.16s ease-out 1;
}

.receiver-audio-hit .receiver-content {
  animation: audioHitContent 0.16s ease-out 1;
}

@keyframes audioHitScreen {
  0% { filter: brightness(1); }
  50% { filter: brightness(3.2); }
  100% { filter: brightness(1); }
}

@keyframes audioHitContent {
  0% { transform: scale(1); }
  50% { transform: scale(1.035); }
  100% { transform: scale(1); }
}


/* Stage 4.7.2: Daha hızlı audio pulse */
.receiver-audio-hit {
  animation: audioHitScreenFast 0.24s ease-out 1;
}

@keyframes audioHitScreenFast {
  0% { filter: brightness(1); }
  22% { filter: brightness(3.4); }
  45% { filter: brightness(1); }
  67% { filter: brightness(3.2); }
  100% { filter: brightness(1); }
}


/* Stage 4.8: Bass Only */
.audio-group-grid {
  display: none !important;
}

.bass-only-values,
.bass-only-meters {
  grid-template-columns: 1fr 1fr !important;
}

.main-bass-meter {
  border-color: rgba(183,92,255,.45);
  box-shadow: 0 0 34px rgba(138,53,255,.12);
}

.main-bass-meter span {
  height: 14px;
  background: linear-gradient(90deg, #8a35ff, #ffffff);
}

@media (max-width: 560px) {
  .bass-only-values,
  .bass-only-meters {
    grid-template-columns: 1fr !important;
  }
}


/* Stage 4.9: Bass peak timing */
.peak-values {
  grid-template-columns: repeat(4, 1fr) !important;
}

.receiver-audio-hit {
  animation: bassHitScreen 0.18s ease-out 1;
}

@keyframes bassHitScreen {
  0% { filter: brightness(1); }
  35% { filter: brightness(3.8); }
  100% { filter: brightness(1); }
}

@media (max-width: 760px) {
  .peak-values {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
  .peak-values {
    grid-template-columns: 1fr !important;
  }
}


/* Stage 4.9.1: Bass flash görünürlük düzeltmesi */
.receiver-audio-hit {
  animation: bassHitScreenVisible 0.26s ease-out 1;
}

@keyframes bassHitScreenVisible {
  0% { filter: brightness(1); }
  45% { filter: brightness(4); }
  100% { filter: brightness(1); }
}


/* Stage 4.10: Bass choreography */
.receiver-audio-hit {
  animation: bassChoreoGlow 0.9s ease-out 1;
}

@keyframes bassChoreoGlow {
  0% { filter: brightness(1); }
  18% { filter: brightness(3.4); }
  38% { filter: brightness(1.1); }
  52% { filter: brightness(2.7); }
  68% { filter: brightness(1.1); }
  84% { filter: brightness(3.1); }
  100% { filter: brightness(1); }
}

.audio-help-box span:last-child {
  color: #ffe8b7;
}


/* Stage 4.11: Volume rise/fall gate */
.receiver-audio-hit {
  filter: brightness(2.8);
}

.receiver-audio-hit .receiver-content {
  text-shadow: 0 0 28px rgba(255,255,255,.45);
}

.main-bass-meter span {
  background: linear-gradient(90deg, #ffffff, #8a35ff);
}


/* Stage 4.11.1: Volume flash görünürlük düzeltmesi */
.receiver-volume-on {
  background: #ffffff !important;
  color: #111 !important;
  filter: brightness(1.6);
}

.receiver-volume-on .receiver-content,
.receiver-volume-on .receiver-logo,
.receiver-volume-on .receiver-content h1,
.receiver-volume-on .receiver-content p,
.receiver-volume-on .receiver-content small {
  color: #111 !important;
  text-shadow: none !important;
}

.receiver-volume-on .receiver-flash {
  opacity: 1 !important;
}


/* Stage 4.11.3: Telefon beyaz ekranda kalmasın */
.receiver-volume-on {
  background:
    radial-gradient(circle at center, rgba(255,255,255,.18), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(0,0,0,.42), transparent 48%),
    #050108 !important;
  color: #fff !important;
  filter: none !important;
}

.receiver-volume-on .receiver-content,
.receiver-volume-on .receiver-logo,
.receiver-volume-on .receiver-content h1,
.receiver-volume-on .receiver-content p,
.receiver-volume-on .receiver-content small {
  color: #fff !important;
  text-shadow: 0 0 28px rgba(255,255,255,.25) !important;
}

.receiver-volume-pulse {
  animation: volumePulseScreen 0.18s ease-out 1;
}

.receiver-volume-pulse .receiver-flash {
  opacity: 1 !important;
}

@keyframes volumePulseScreen {
  0% { filter: brightness(1); }
  45% { filter: brightness(4.5); background: #fff; }
  100% { filter: brightness(1); }
}


/* Stage 5: Pattern Builder */
.pattern-page {
  min-height: 100vh;
  padding: 145px 24px 90px;
  background:
    radial-gradient(circle at 50% 8%, rgba(138,53,255,.22), transparent 34%),
    radial-gradient(circle at 80% 85%, rgba(84,31,170,.18), transparent 36%),
    #030307;
}

.pattern-hero,
.pattern-builder-grid,
.saved-patterns {
  width: min(1120px, 100%);
  margin-inline: auto;
}

.pattern-hero h1 {
  margin: 0;
  max-width: 900px;
  font-size: clamp(42px, 6vw, 82px);
  line-height: .98;
  letter-spacing: -.065em;
}

.pattern-hero p {
  max-width: 720px;
  color: rgba(255,255,255,.72);
  font-size: 19px;
  line-height: 1.6;
}

.pattern-builder-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
}

.pattern-card,
.pattern-preview-card,
.saved-patterns {
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(138,53,255,.34);
  background: linear-gradient(180deg, rgba(18,10,34,.82), rgba(5,4,10,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 38px rgba(138,53,255,.1);
}

.pattern-card h2,
.pattern-preview-card h2,
.saved-head h2 {
  margin: 0 0 20px;
  font-size: clamp(28px, 3.2vw, 46px);
  letter-spacing: -.055em;
}

.pattern-form {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 14px;
}

.pattern-form label,
.saved-head label {
  display: grid;
  gap: 9px;
  color: rgba(255,255,255,.80);
  font-weight: 780;
}

.pattern-form input,
.pattern-form select,
.saved-head select,
.step-row input,
.step-row select {
  min-height: 52px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.32);
  color: #fff;
  font: inherit;
}

.pattern-form select option,
.step-row select option,
.saved-head select option {
  color: #111;
}

.pattern-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pattern-actions .btn {
  border: 0;
  cursor: pointer;
}

.steps-list {
  margin-top: 20px;
  display: grid;
  gap: 10px;
}

.step-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: 42px 120px 1fr 38px 70px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.08);
}

.step-row b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(138,53,255,.28);
}

.step-row span {
  color: rgba(255,255,255,.62);
}

.step-row button,
.saved-actions button,
.saved-actions a {
  min-height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  font-weight: 800;
}

.pattern-result {
  min-height: 24px;
  margin-top: 16px;
  color: rgba(255,255,255,.72);
}

.pattern-result.success {
  color: #d9ffe7;
}

.pattern-result.error {
  color: #ffd6d6;
}

.pattern-preview-card {
  text-align: center;
}

.pattern-phone {
  width: min(280px, 100%);
  aspect-ratio: 9 / 16;
  margin: 28px auto;
  display: grid;
  place-items: center;
  border-radius: 42px;
  border: 2px solid rgba(255,255,255,.18);
  background: #09030f;
  color: #fff;
  font-size: 42px;
  font-weight: 950;
  letter-spacing: -.07em;
  box-shadow: 0 0 48px rgba(138,53,255,.18);
}

.pattern-phone.on {
  background: #fff;
  color: #111;
  box-shadow: 0 0 70px rgba(255,255,255,.5);
}

.saved-patterns {
  margin-top: 24px;
}

.saved-head {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 340px);
  gap: 20px;
  align-items: end;
  margin-bottom: 22px;
}

.saved-pattern-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.saved-pattern {
  padding: 18px;
  border-radius: 20px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.09);
}

.saved-pattern span {
  color: #b985ff;
  font-weight: 850;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
}

.saved-pattern h3 {
  margin: 10px 0 16px;
  font-size: 22px;
  letter-spacing: -.035em;
}

.saved-actions {
  display: flex;
  gap: 10px;
}

@media (max-width: 920px) {
  .pattern-builder-grid,
  .saved-head,
  .pattern-form {
    grid-template-columns: 1fr;
  }

  .saved-pattern-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .step-row {
    grid-template-columns: 36px 1fr;
  }

  .step-row span,
  .step-row button {
    grid-column: 2;
  }

  .saved-pattern-grid {
    grid-template-columns: 1fr;
  }
}


/* Stage 5.1: Senkron başlangıç */
.pattern-result.success::after {
  content: " Senkron başlangıç aktif.";
}


/* Stage 6: WebSocket Live */
.websocket-live-page {
  background:
    radial-gradient(circle at 18% 10%, rgba(138,53,255,.24), transparent 34%),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,.08), transparent 32%),
    #030307;
}

.websocket-grid {
  grid-template-columns: 1fr 1fr;
}

.websocket-card {
  min-height: 360px;
}

.live-pill.ok {
  background: rgba(77,255,150,.16);
  color: #ccffdd;
  border-color: rgba(77,255,150,.32);
}

.ws-info {
  margin: 22px 0;
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
}

.ws-info span {
  color: rgba(255,255,255,.55);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ws-info b,
.ws-info code {
  color: #fff;
  word-break: break-all;
}

.ws-select-label {
  display: grid;
  gap: 10px;
  color: rgba(255,255,255,.78);
  font-weight: 850;
}

.ws-select-label select {
  min-height: 56px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.32);
  color: #fff;
  font: inherit;
}

.ws-select-label option {
  color: #111;
}

.ws-test-buttons {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ws-test-buttons button {
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}

.ws-checklist {
  display: grid;
  gap: 10px;
}

.ws-checklist span {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.72);
}

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

  .ws-test-buttons {
    grid-template-columns: 1fr;
  }
}


/* Stage 6.1 WS Flash Debug */
.receiver-ws-flash {
  background: #ffffff !important;
  color: #111 !important;
  filter: brightness(2);
}

.receiver-ws-flash .receiver-content,
.receiver-ws-flash .receiver-logo,
.receiver-ws-flash h1,
.receiver-ws-flash p,
.receiver-ws-flash small {
  color: #111 !important;
  text-shadow: none !important;
}

.receiver-ws-flash .receiver-flash {
  opacity: 1 !important;
}


/* Stage 6.2: Telefon WS bağlantı rozeti */
.ws-debug-badge {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 99999;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 55, 55, .9);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 0 20px rgba(0,0,0,.35);
}

.ws-debug-badge.ok {
  background: rgba(22, 180, 88, .95);
}


/* Stage 6.4: Telefon senkron kalibrasyonu */
.sync-cal-box {
  position: fixed;
  right: 12px;
  top: 12px;
  z-index: 99998;
  width: min(260px, calc(100vw - 24px));
  color: #fff;
  font-family: inherit;
}

.sync-cal-box button {
  width: 100%;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.62);
  color: #fff;
  font-weight: 900;
  backdrop-filter: blur(12px);
}

.sync-cal-panel {
  display: none;
  margin-top: 8px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 0 28px rgba(0,0,0,.34);
}

.sync-cal-box.open .sync-cal-panel {
  display: grid;
  gap: 8px;
}

.sync-cal-panel label {
  font-size: 13px;
  font-weight: 900;
}

.sync-cal-panel input {
  width: 100%;
  accent-color: #a855ff;
}

.sync-cal-panel small {
  color: rgba(255,255,255,.68);
  line-height: 1.35;
}


/* Stage 6.5: Panelden iOS / Android kalibrasyonu */
.os-calibration-box {
  margin-top: 22px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.10);
  display: grid;
  gap: 14px;
}

.os-calibration-box h3 {
  margin: 0 0 2px;
  font-size: 20px;
  letter-spacing: -.035em;
}

.os-calibration-box label {
  display: grid;
  gap: 8px;
  color: rgba(255,255,255,.78);
  font-weight: 850;
}

.os-calibration-box label b {
  color: #fff;
}

.os-calibration-box input {
  width: 100%;
  accent-color: #a855ff;
}

.os-calibration-box small {
  color: rgba(255,255,255,.62);
  line-height: 1.45;
}

.sync-cal-box {
  display: none !important;
}


/* Stage 7: WebSocket Audio Sync */
.audio-ws-card {
  grid-column: span 2;
}

.audio-mode-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.audio-mode-grid label {
  display: grid;
  gap: 8px;
  color: rgba(255,255,255,.76);
  font-weight: 850;
}

.audio-mode-grid select,
.audio-mode-grid input[type="range"] {
  width: 100%;
}

.audio-mode-grid select {
  min-height: 50px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.32);
  color: #fff;
  font: inherit;
}

.audio-mode-grid select option {
  color: #111;
}

.audio-debug-values.compact {
  margin-top: 18px;
  grid-template-columns: repeat(4, 1fr);
}

.audio-bars {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.audio-bars .audio-meter {
  height: 42px;
}

@media (max-width: 1000px) {
  .audio-ws-card {
    grid-column: span 1;
  }

  .audio-mode-grid,
  .audio-debug-values.compact {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .audio-mode-grid,
  .audio-debug-values.compact {
    grid-template-columns: 1fr;
  }
}


/* Stage 7.1.1: Hazır konser presetleri görünürlük fix */
.concert-presets-card { grid-column: span 2; }
.concert-preset-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.concert-preset-grid button {
  min-height: 118px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(circle at 30% 15%, rgba(255,255,255,.13), transparent 32%), linear-gradient(180deg, rgba(138,53,255,.22), rgba(0,0,0,.26));
  color: #fff;
  cursor: pointer;
  text-align: left;
}
.concert-preset-grid button:hover { border-color: rgba(185,133,255,.46); transform: translateY(-2px); }
.concert-preset-grid b { display:block; font-size:20px; letter-spacing:-.04em; }
.concert-preset-grid span { display:block; margin-top:8px; color:rgba(255,255,255,.62); font-size:13px; font-weight:750; }
@media (max-width:1000px){ .concert-presets-card{grid-column:span 1;} .concert-preset-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .concert-preset-grid{grid-template-columns:1fr;} }


/* Stage 7.2: Telefon katılım arayüzü */
.receiver-join-landing {
  position: fixed;
  inset: 0;
  z-index: 99990;
  min-height: 100vh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 18px;
  padding: 22px 20px 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(138,53,255,.32), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.10), transparent 42%),
    #030307;
  color: #fff;
  overflow-y: auto;
}

.receiver-join-landing.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}

.receiver-poster-wrap {
  display: grid;
  place-items: center;
  min-height: 0;
}

.receiver-poster {
  width: min(100%, 420px);
  max-height: 52vh;
  object-fit: cover;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 28px 90px rgba(0,0,0,.45), 0 0 45px rgba(138,53,255,.20);
}

.receiver-poster-fallback {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: 28px;
  text-align: center;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.16), transparent 32%),
    linear-gradient(135deg, rgba(138,53,255,.40), rgba(0,0,0,.35));
}

.receiver-poster-fallback span {
  font-size: 54px;
  font-weight: 950;
  letter-spacing: -.08em;
}

.receiver-poster-fallback b {
  display: block;
  max-width: 90%;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -.045em;
}

.receiver-join-content {
  width: min(100%, 460px);
  margin: 0 auto;
  text-align: center;
}

.receiver-eyebrow {
  display: inline-flex;
  margin-bottom: 8px;
  color: #c9a7ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}

.receiver-join-content h1 {
  margin: 0;
  font-size: clamp(30px, 9vw, 54px);
  line-height: .96;
  letter-spacing: -.07em;
}

.receiver-join-content p {
  margin: 12px auto 18px;
  color: rgba(255,255,255,.72);
  line-height: 1.45;
}

.receiver-join-main-btn {
  width: min(100%, 360px);
  min-height: 62px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffffff, #c7a7ff);
  color: #12021f;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.025em;
  box-shadow: 0 0 34px rgba(255,255,255,.18), 0 16px 42px rgba(138,53,255,.28);
}

.receiver-join-content small {
  display: block;
  margin-top: 12px;
  color: rgba(255,255,255,.52);
}

.receiver-synca-logo {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: #fff;
  text-decoration: none;
  font-weight: 950;
  font-size: 23px;
  letter-spacing: -.07em;
  opacity: .9;
}

.receiver-synca-logo span {
  color: #b985ff;
}

.receiver-started .receiver-join-landing {
  display: none;
}

/* Eski katılım/izin butonları ana ekranda karışmasın */
.receiver-started #enableTorchBtn {
  display: none !important;
}

/* Event detail poster form */
.poster-settings-card {
  display: grid;
  gap: 12px;
}

.poster-form {
  display: grid;
  gap: 12px;
}

.poster-form label {
  display: grid;
  gap: 8px;
  color: rgba(255,255,255,.78);
  font-weight: 850;
}

.poster-form input {
  min-height: 52px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.32);
  color: #fff;
  font: inherit;
}

@media (max-height: 760px) {
  .receiver-poster {
    max-height: 43vh;
  }

  .receiver-join-content h1 {
    font-size: 30px;
  }

  .receiver-join-main-btn {
    min-height: 56px;
  }
}


/* Stage 7.2.1: Event poster upload fix */
.auth-card.wide {
  width: min(760px, 100%);
}

.synca-form small {
  display: block;
  margin-top: 7px;
  color: rgba(255,255,255,.58);
  line-height: 1.35;
}

.form-grid.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.event-poster-preview {
  width: min(220px, 100%);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 48px rgba(0,0,0,.25);
}

.poster-settings-card p b {
  color: #fff;
}

@media (max-width: 680px) {
  .form-grid.two {
    grid-template-columns: 1fr;
  }
}


/* Stage 7.2.2: Poster phone visibility fix */
.receiver-poster-fallback.hidden-fallback {
  display: none;
}
.receiver-poster-fallback.hidden-fallback.show {
  display: grid;
}


/* Stage 7.2.3: Clean Receiver Join */
.receiver-body {
  margin: 0;
  min-height: 100vh;
  background: #030307;
  color: #fff;
  overscroll-behavior: none;
}

.receiver-clean-landing {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 18px;
  padding: max(18px, env(safe-area-inset-top)) 20px max(16px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 0%, rgba(138,53,255,.34), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.10), transparent 42%),
    #030307;
  overflow-y: auto;
}

.receiver-clean-landing.is-hidden {
  display: none;
}

.receiver-clean-poster-area {
  display: grid;
  place-items: center;
  min-height: 0;
}

.receiver-clean-poster {
  width: min(100%, 430px);
  max-height: 52vh;
  object-fit: cover;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 24px 80px rgba(0,0,0,.50), 0 0 45px rgba(138,53,255,.22);
}

.receiver-clean-fallback {
  aspect-ratio: 4 / 5;
  place-items: center;
  padding: 28px;
  text-align: center;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.15), transparent 33%),
    linear-gradient(135deg, rgba(138,53,255,.42), rgba(0,0,0,.30));
}

.receiver-clean-fallback span {
  display: block;
  font-size: 50px;
  font-weight: 950;
  letter-spacing: -.08em;
}

.receiver-clean-fallback b {
  display: block;
  max-width: 90%;
  margin-top: 12px;
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: -.045em;
}

.receiver-clean-content {
  width: min(100%, 460px);
  margin: 0 auto;
  text-align: center;
}

.receiver-clean-content span {
  color: #c9a7ff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .12em;
}

.receiver-clean-content h1 {
  margin: 8px 0 0;
  font-size: clamp(30px, 9vw, 54px);
  line-height: .96;
  letter-spacing: -.07em;
}

.receiver-clean-content p {
  margin: 12px auto 18px;
  color: rgba(255,255,255,.72);
  line-height: 1.45;
}

.receiver-clean-join-btn {
  width: min(100%, 360px);
  min-height: 62px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffffff, #c7a7ff);
  color: #12021f;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.025em;
  box-shadow: 0 0 34px rgba(255,255,255,.18), 0 16px 42px rgba(138,53,255,.28);
}

.receiver-clean-content small {
  display: block;
  margin-top: 12px;
  color: rgba(255,255,255,.55);
}

.receiver-clean-logo {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  font-size: 23px;
  font-weight: 950;
  letter-spacing: -.07em;
}

.receiver-clean-logo span {
  color: #b985ff;
}

.receiver-live-screen {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background:
    radial-gradient(circle at 50% 10%, rgba(138,53,255,.25), transparent 40%),
    #030307;
  color: #fff;
  overflow: hidden;
}

.receiver-live-screen.is-active {
  display: grid;
}

.receiver-live-content {
  position: relative;
  z-index: 3;
  text-align: center;
}

.receiver-live-content h1 {
  margin: 0;
  font-size: clamp(50px, 15vw, 96px);
  line-height: .9;
  letter-spacing: -.09em;
}

.receiver-live-content h1 span {
  color: #b985ff;
}

.receiver-live-content p {
  margin: 16px 0 6px;
  color: rgba(255,255,255,.76);
  font-size: 18px;
}

.receiver-live-content small {
  color: rgba(255,255,255,.48);
}

.receiver-live-content small.ok {
  color: #9cffc0;
}

.screen-flash {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.screen-flash.on {
  opacity: 1;
}

@media (max-height: 760px) {
  .receiver-clean-poster {
    max-height: 42vh;
  }

  .receiver-clean-content h1 {
    font-size: 30px;
  }

  .receiver-clean-join-btn {
    min-height: 56px;
  }
}


/* Stage 7.2.4: Event create panel + inactive receiver */
.receiver-ended-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 10%, rgba(138,53,255,.28), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.08), transparent 42%),
    #030307;
  color: #fff;
}

.receiver-ended-card {
  width: min(520px, 100%);
  padding: 34px;
  border-radius: 30px;
  text-align: center;
  border: 1px solid rgba(138,53,255,.34);
  background: linear-gradient(180deg, rgba(18,10,34,.86), rgba(5,4,10,.92));
  box-shadow: 0 0 60px rgba(138,53,255,.16);
}

.receiver-ended-logo {
  display: inline-flex;
  margin-bottom: 22px;
  color: #fff;
  text-decoration: none;
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -.08em;
}

.receiver-ended-logo span {
  color: #b985ff;
}

.receiver-ended-card > span {
  color: #c9a7ff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .13em;
}

.receiver-ended-card h1 {
  margin: 10px 0 12px;
  font-size: clamp(34px, 8vw, 56px);
  line-height: .95;
  letter-spacing: -.065em;
}

.receiver-ended-card p {
  margin: 0;
  color: rgba(255,255,255,.68);
  line-height: 1.55;
}

.event-create-page {
  min-height: 100vh;
  padding: 150px 24px 80px;
  background:
    radial-gradient(circle at 50% 12%, rgba(138,53,255,.26), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.07), transparent 42%),
    #030307;
}

.event-create-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 28px;
  align-items: stretch;
}

.event-create-intro,
.event-create-card {
  border-radius: 32px;
  border: 1px solid rgba(138,53,255,.34);
  background: linear-gradient(180deg, rgba(18,10,34,.78), rgba(5,4,10,.90));
  box-shadow: 0 0 60px rgba(138,53,255,.12), inset 0 1px 0 rgba(255,255,255,.06);
}

.event-create-intro {
  padding: 34px;
  display: grid;
  align-content: center;
}

.event-create-intro h1 {
  margin: 12px 0 14px;
  font-size: clamp(44px, 6vw, 84px);
  line-height: .92;
  letter-spacing: -.075em;
}

.event-create-intro p {
  margin: 0;
  color: rgba(255,255,255,.70);
  font-size: 18px;
  line-height: 1.55;
}

.poster-size-box {
  margin-top: 28px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.09);
  display: grid;
  gap: 6px;
}

.poster-size-box b {
  color: #c9a7ff;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.poster-size-box strong {
  font-size: 34px;
  letter-spacing: -.055em;
}

.poster-size-box span {
  color: rgba(255,255,255,.60);
}

.event-create-card {
  padding: 28px;
}

.event-create-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.event-create-form label {
  display: grid;
  gap: 9px;
  color: rgba(255,255,255,.82);
  font-weight: 850;
}

.event-create-form label.full,
.event-create-form .full {
  grid-column: 1 / -1;
}

.event-create-form input {
  width: 100%;
  min-height: 54px;
  box-sizing: border-box;
  padding: 0 15px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(0,0,0,.36);
  color: #fff;
  font: inherit;
}

.event-create-form input[type="file"] {
  padding: 14px;
  height: auto;
  color: rgba(255,255,255,.72);
}

.event-create-form small {
  color: rgba(255,255,255,.56);
  line-height: 1.35;
}

.event-create-form .btn {
  min-height: 60px;
  border: 0;
  cursor: pointer;
}

@media (max-width: 920px) {
  .event-create-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .event-create-page {
    padding: 120px 16px 60px;
  }

  .event-create-form {
    grid-template-columns: 1fr;
  }

  .event-create-intro,
  .event-create-card {
    padding: 22px;
    border-radius: 24px;
  }
}


/* Stage 7.2.5: Event detail UI cleanup */
.event-detail-page-v2 {
  min-height: 100vh;
  padding: 145px 24px 90px;
  background:
    radial-gradient(circle at 50% 10%, rgba(138,53,255,.22), transparent 36%),
    radial-gradient(circle at 80% 85%, rgba(255,255,255,.06), transparent 36%),
    #030307;
  color: #fff;
}

.event-detail-hero-v2,
.event-detail-layout-v2 {
  width: min(1180px, 100%);
  margin-inline: auto;
}

.event-detail-hero-v2 {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  margin-bottom: 28px;
}

.event-detail-hero-v2 h1 {
  margin: 10px 0 10px;
  font-size: clamp(44px, 6vw, 84px);
  line-height: .92;
  letter-spacing: -.075em;
}

.event-detail-hero-v2 p {
  margin: 0;
  max-width: 700px;
  color: rgba(255,255,255,.68);
  font-size: 18px;
  line-height: 1.55;
}

.event-status-pill {
  min-width: 118px;
  min-height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
}

.event-status-pill.active {
  color: #baffd0;
  background: rgba(45,255,137,.12);
  border-color: rgba(45,255,137,.24);
}

.event-status-pill.draft {
  color: #ffe6a6;
  background: rgba(255,196,77,.12);
  border-color: rgba(255,196,77,.24);
}

.event-status-pill.completed {
  color: #c9d7ff;
  background: rgba(100,130,255,.12);
  border-color: rgba(100,130,255,.24);
}

.event-status-pill.cancelled {
  color: #ffb6b6;
  background: rgba(255,80,80,.12);
  border-color: rgba(255,80,80,.24);
}

.event-detail-layout-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

.event-main-card-v2,
.poster-card-v2,
.qr-card-v2 {
  border-radius: 30px;
  border: 1px solid rgba(138,53,255,.32);
  background: linear-gradient(180deg, rgba(18,10,34,.82), rgba(5,4,10,.92));
  box-shadow: 0 0 54px rgba(138,53,255,.10), inset 0 1px 0 rgba(255,255,255,.06);
}

.event-main-card-v2 {
  padding: 28px;
}

.event-info-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.event-info-grid-v2 div,
.event-stats-row-v2 article {
  padding: 18px;
  border-radius: 20px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
}

.event-info-grid-v2 span,
.event-stats-row-v2 span,
.join-link-box-v2 label {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.54);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.event-info-grid-v2 strong {
  font-size: 18px;
  letter-spacing: -.035em;
}

.event-stats-row-v2 {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.event-stats-row-v2 b {
  display: block;
  font-size: 34px;
  letter-spacing: -.06em;
}

.join-link-box-v2 {
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
}

.join-link-box-v2 div {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 10px;
}

.join-link-box-v2 input,
.event-status-form-v2 select,
.poster-upload-v2 input {
  min-height: 52px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.34);
  color: #fff;
  font: inherit;
}

.join-link-box-v2 button {
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #13031d;
  font-weight: 950;
  cursor: pointer;
}

.event-action-grid-v2 {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.action-card {
  min-height: 92px;
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 7px;
  border-radius: 20px;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.055);
  transition: transform .18s ease, border-color .18s ease;
}

.action-card:hover {
  transform: translateY(-2px);
  border-color: rgba(185,133,255,.44);
}

.action-card.primary {
  background: linear-gradient(135deg, rgba(138,53,255,.42), rgba(185,133,255,.14));
  border-color: rgba(185,133,255,.36);
}

.action-card b {
  font-size: 19px;
  letter-spacing: -.04em;
}

.action-card span {
  color: rgba(255,255,255,.60);
  line-height: 1.35;
}

.event-status-form-v2 {
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 12px;
  align-items: end;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
}

.event-status-form-v2 label,
.poster-upload-v2 label {
  display: grid;
  gap: 8px;
  color: rgba(255,255,255,.78);
  font-weight: 850;
}

.event-status-form-v2 .btn {
  min-height: 52px;
  border: 0;
}

.delete-event-link-v2 {
  margin-top: 14px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 999px;
  color: #ffb7b7;
  text-decoration: none;
  border: 1px solid rgba(255,80,80,.30);
  background: rgba(255,80,80,.08);
  font-weight: 850;
}

.event-side-v2 {
  display: grid;
  gap: 18px;
}

.poster-card-v2,
.qr-card-v2 {
  padding: 22px;
}

.side-card-head-v2 h2 {
  margin: 6px 0 16px;
  font-size: 30px;
  letter-spacing: -.055em;
}

.poster-preview-v2 {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 58px rgba(0,0,0,.28);
}

.poster-empty-v2 {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 22px;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.14), transparent 35%),
    rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.10);
}

.poster-empty-v2 b {
  font-size: 42px;
  letter-spacing: -.08em;
}

.poster-empty-v2 span {
  color: rgba(255,255,255,.58);
}

.poster-upload-v2 {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.poster-upload-v2 input[type="file"] {
  padding: 13px;
  height: auto;
}

.poster-upload-v2 small {
  color: rgba(255,255,255,.55);
  line-height: 1.35;
}

.qr-image-v2 {
  width: 100%;
  border-radius: 22px;
  background: #fff;
  padding: 12px;
  box-sizing: border-box;
}

.qr-card-v2 .btn {
  width: 100%;
  margin-top: 14px;
  min-height: 52px;
}

@media (max-width: 1050px) {
  .event-detail-layout-v2 {
    grid-template-columns: 1fr;
  }

  .event-side-v2 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .event-detail-page-v2 {
    padding: 120px 16px 60px;
  }

  .event-detail-hero-v2 {
    display: grid;
    align-items: start;
  }

  .event-info-grid-v2,
  .event-stats-row-v2,
  .event-action-grid-v2,
  .event-status-form-v2,
  .event-side-v2,
  .join-link-box-v2 div {
    grid-template-columns: 1fr;
  }

  .event-main-card-v2,
  .poster-card-v2,
  .qr-card-v2 {
    padding: 18px;
    border-radius: 24px;
  }
}


/* Stage 7.2.6: Event edit page */
.poster-edit-btn-v2 {
  width: 100%;
  margin-top: 16px;
  min-height: 54px;
}

.edit-event-poster-preview {
  width: min(320px, 100%);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 70px rgba(0,0,0,.34);
  margin-top: 28px;
}

.event-create-form select {
  width: 100%;
  min-height: 54px;
  box-sizing: border-box;
  padding: 0 15px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(0,0,0,.36);
  color: #fff;
  font: inherit;
}

.event-create-form select option {
  color: #111;
}

.btn.center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
* {
  box-sizing: border-box;
}

:root {
  --bg: #030307;
  --bg-soft: #08050f;
  --white: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --line: rgba(255, 255, 255, 0.1);
  --purple: #8a35ff;
  --purple-2: #b75cff;
  --purple-3: #5f20ff;
  --glass: rgba(10, 7, 20, 0.58);
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--white);
  background: var(--bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: 92px;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 0 clamp(22px, 3.3vw, 56px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.36));
  border-bottom: 1px solid transparent;
  transition: 0.35s ease;
}

.site-header.scrolled {
  height: 76px;
  background: rgba(4, 3, 8, 0.82);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  font-size: clamp(27px, 2.35vw, 42px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -0.07em;
  filter: drop-shadow(0 0 12px rgba(255,255,255,.16));
}

.brand b {
  margin-left: 2px;
  color: var(--purple);
  text-shadow: 0 0 22px rgba(138, 53, 255, 0.9);
}

.main-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 62px);
  font-weight: 760;
  font-size: clamp(14px, 1vw, 17px);
}

.main-nav a {
  color: rgba(255, 255, 255, 0.9);
  transition: color .25s ease, text-shadow .25s ease;
}

.main-nav a:hover {
  color: #fff;
  text-shadow: 0 0 18px rgba(138, 53, 255, 0.85);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 26px;
}

.join-btn {
  min-width: 174px;
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #eadbff;
  font-weight: 820;
  border: 1px solid rgba(138, 53, 255, 0.72);
  border-radius: 15px;
  background: rgba(14, 8, 24, 0.58);
  box-shadow: inset 0 0 20px rgba(138, 53, 255, 0.06), 0 0 30px rgba(138, 53, 255, 0.08);
  transition: 0.3s ease;
}

.join-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(191, 103, 255, 0.95);
  box-shadow: 0 0 34px rgba(138, 53, 255, 0.36);
}

.menu-btn {
  width: 34px;
  height: 28px;
  border: 0;
  padding: 0;
  display: grid;
  gap: 7px;
  background: none;
  cursor: pointer;
}

.menu-btn span {
  display: block;
  height: 3px;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 0 14px rgba(255,255,255,.34);
}

.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 42%, rgba(126, 34, 255, 0.16), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(85, 35, 170, 0.26), transparent 38%),
    linear-gradient(180deg, #020204 0%, #06020b 50%, #020204 100%);
}

.crowd-canvas,
.hero-vignette,
.hero-noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.crowd-canvas {
  z-index: -3;
}

.hero-vignette {
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.18) 40%, rgba(0,0,0,0.82) 93%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 19%, transparent 55%, rgba(0,0,0,0.78) 100%);
}

.hero-noise {
  z-index: -1;
  pointer-events: none;
  opacity: 0.13;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 25% 12%, rgba(255,255,255,.36) 0 1px, transparent 1.8px),
    radial-gradient(circle at 67% 30%, rgba(180,90,255,.34) 0 1px, transparent 1.8px),
    radial-gradient(circle at 80% 72%, rgba(255,255,255,.24) 0 1px, transparent 2px);
  background-size: 120px 110px, 180px 170px, 95px 90px;
  animation: driftNoise 16s linear infinite;
}

@keyframes driftNoise {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-90px,70px,0); }
}

.hero-content {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding-top: clamp(98px, 9.2vh, 130px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-stage {
  position: relative;
  width: min(1180px, 100%);
  height: clamp(230px, 31vw, 390px);
  margin-top: clamp(4px, 2vh, 18px);
}

#logoCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* Daha okunaklı LED görünümü için glow düşürüldü */
  filter: drop-shadow(0 0 5px rgba(255,255,255,.28)) drop-shadow(0 0 18px rgba(138,53,255,.42));
}

.fallback-logo {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  margin: 0;
  font-size: clamp(108px, 20vw, 315px);
  font-weight: 950;
  letter-spacing: -0.095em;
  color: #fff;
  text-shadow:
    0 0 8px rgba(255,255,255,.46),
    0 0 24px rgba(138,53,255,.5);
}

.fallback-logo span {
  color: var(--purple);
}

.hero-copy {
  text-align: center;
  margin-top: clamp(-16px, -1.2vw, -6px);
}

.hero-copy h2 {
  margin: 0;
  font-size: clamp(34px, 4.15vw, 66px);
  line-height: 1.03;
  letter-spacing: -0.055em;
  font-weight: 940;
  text-shadow: 0 0 22px rgba(0,0,0,.88);
}

.hero-copy h2 span {
  color: var(--purple);
  text-shadow: 0 0 34px rgba(138, 53, 255, 0.88);
}

.hero-copy p {
  margin: 20px auto 0;
  max-width: 740px;
  color: rgba(255,255,255,.86);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.62;
  text-shadow: 0 0 18px rgba(0,0,0,.9);
}

.hero-buttons {
  margin-top: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.btn {
  min-width: 202px;
  min-height: 64px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border-radius: 13px;
  font-weight: 880;
  font-size: 16px;
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.btn:hover {
  transform: translateY(-3px);
}

.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #6927ff 0%, #a034ff 100%);
  border: 1px solid rgba(219, 190, 255, 0.36);
  box-shadow:
    0 16px 46px rgba(111, 38, 255, 0.4),
    inset 0 1px 0 rgba(255,255,255,.26);
}

.btn-primary:hover {
  box-shadow:
    0 20px 60px rgba(138, 53, 255, 0.56),
    inset 0 1px 0 rgba(255,255,255,.36);
}

.btn-ghost {
  color: #fff;
  background: rgba(5, 3, 11, 0.68);
  border: 1px solid rgba(138, 53, 255, 0.5);
  box-shadow: 0 0 28px rgba(138, 53, 255, 0.09), inset 0 0 22px rgba(138, 53, 255, 0.04);
}

.btn-ghost:hover {
  border-color: rgba(184, 96, 255, 0.94);
  box-shadow: 0 0 42px rgba(138, 53, 255, 0.27);
}

.btn-icon {
  color: var(--purple);
  font-size: 24px;
  line-height: 0;
  text-shadow: 0 0 20px rgba(138, 53, 255, 0.9);
}

.play-icon {
  width: 21px;
  height: 21px;
  border: 2px solid rgba(255,255,255,.88);
  border-radius: 50%;
  position: relative;
  flex: 0 0 auto;
  box-shadow: 0 0 15px rgba(255,255,255,.25);
}

.play-icon::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 4.6px;
  width: 0;
  height: 0;
  border-left: 7px solid #fff;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.stats-bar {
  width: min(1120px, 100%);
  margin-top: clamp(54px, 7vh, 88px);
  min-height: 124px;
  padding: 24px 36px;
  display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr 1px 1.35fr;
  gap: 28px;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(17, 10, 34, 0.74), rgba(4, 3, 8, 0.76));
  border: 1px solid rgba(138, 53, 255, 0.54);
  border-radius: 20px;
  box-shadow:
    0 0 45px rgba(102, 37, 217, 0.26),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
}

.stat-separator {
  width: 1px;
  height: 66px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.22), transparent);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.stat-item strong {
  display: block;
  font-size: clamp(26px, 2.2vw, 38px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 930;
  color: #fff;
  text-shadow: 0 0 24px rgba(255,255,255,.32);
}

.stat-item span {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.78);
  font-size: 14px;
  white-space: nowrap;
}

.stat-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  color: var(--purple);
  filter: drop-shadow(0 0 15px rgba(138,53,255,.9));
  position: relative;
}

.users-icon::before,
.users-icon::after,
.wave-icon::before,
.globe-icon::before,
.globe-icon::after,
.sync-icon::before {
  content: "";
  position: absolute;
}

.users-icon::before {
  left: 17px;
  top: 8px;
  width: 16px;
  height: 16px;
  border: 3px solid currentColor;
  border-radius: 50%;
}

.users-icon::after {
  left: 9px;
  bottom: 9px;
  width: 31px;
  height: 19px;
  border: 3px solid currentColor;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  border-bottom: 0;
}

.wave-icon::before {
  left: 2px;
  top: 22px;
  width: 50px;
  height: 14px;
  background:
    linear-gradient(90deg, transparent 0 7%, currentColor 7% 11%, transparent 11% 22%, currentColor 22% 27%, transparent 27% 38%, currentColor 38% 43%, transparent 43% 56%, currentColor 56% 62%, transparent 62% 75%, currentColor 75% 80%, transparent 80%);
  transform: skewY(-14deg);
}

.globe-icon::before {
  inset: 6px;
  border: 4px solid currentColor;
  border-radius: 50%;
}

.globe-icon::after {
  left: 25px;
  top: 8px;
  width: 4px;
  height: 38px;
  border-radius: 99px;
  background: currentColor;
  box-shadow: -16px 16px 0 -15px currentColor, 16px 16px 0 -15px currentColor;
}

.sync-icon::before {
  left: 16px;
  top: 6px;
  width: 23px;
  height: 42px;
  background: currentColor;
  clip-path: polygon(48% 0, 100% 0, 66% 38%, 100% 38%, 31% 100%, 45% 56%, 10% 56%);
}

.scroll-hint {
  margin-top: 38px;
  display: grid;
  place-items: center;
  gap: 8px;
  color: rgba(255,255,255,.76);
  font-size: 14px;
  animation: floatHint 2.6s ease-in-out infinite;
}

.scroll-hint em {
  font-style: normal;
}

.scroll-hint i {
  font-style: normal;
  font-size: 20px;
  line-height: 0.8;
}

.mouse {
  width: 20px;
  height: 34px;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 99px;
  position: relative;
}

.mouse::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 4px;
  height: 7px;
  border-radius: 99px;
  background: #fff;
  transform: translateX(-50%);
  animation: mouseDot 1.6s ease infinite;
}

@keyframes mouseDot {
  0% { opacity: 0; transform: translate(-50%, 0); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, 11px); }
}

@keyframes floatHint {
  0%, 100% { transform: translateY(0); opacity: .76; }
  50% { transform: translateY(7px); opacity: 1; }
}

.content-section {
  position: relative;
  padding: clamp(90px, 12vw, 170px) 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(138, 53, 255, 0.16), transparent 35%),
    linear-gradient(180deg, #030307, #08050f);
  border-top: 1px solid rgba(255,255,255,.07);
}

.section-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.eyebrow {
  display: inline-flex;
  margin-bottom: 18px;
  color: #b983ff;
  font-size: 13px;
  letter-spacing: 0.18em;
  font-weight: 880;
}

.content-section h2 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.06em;
}

.content-section p {
  max-width: 780px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.7;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 46px;
}

.feature-grid article {
  min-height: 128px;
  padding: 24px;
  display: flex;
  align-items: flex-end;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(22, 13, 39, .78), rgba(8, 5, 15, .78));
  border: 1px solid rgba(138, 53, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  font-weight: 800;
}

.flow {
  margin-top: 42px;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.flow span {
  padding: 16px 22px;
  border-radius: 999px;
  background: rgba(18, 9, 34, 0.72);
  border: 1px solid rgba(138, 53, 255, 0.32);
}

.flow b {
  color: var(--purple-2);
  font-size: 26px;
}

.contact-section {
  min-height: 50vh;
  display: flex;
  align-items: center;
}

@media (max-width: 1050px) {
  .main-nav {
    display: none;
  }

  .site-header {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .stats-bar {
    grid-template-columns: 1fr 1fr;
  }

  .stat-separator {
    display: none;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .site-header {
    height: 78px;
    padding-inline: 20px;
  }

  .join-btn {
    display: none;
  }

  .hero-content {
    width: min(100% - 28px, 1280px);
    padding-top: 88px;
  }

  .logo-stage {
    height: clamp(150px, 40vw, 220px);
  }

  #logoCanvas {
    filter: drop-shadow(0 0 3px rgba(255,255,255,.22)) drop-shadow(0 0 12px rgba(138,53,255,.34));
  }

  .hero-copy {
    margin-top: -8px;
  }

  .hero-copy p br {
    display: none;
  }

  .hero-buttons {
    margin-top: 28px;
    gap: 14px;
  }

  .btn {
    width: 100%;
    min-height: 58px;
  }

  .stats-bar {
    width: min(440px, 100%);
    grid-template-columns: 1fr;
    margin-top: 38px;
    padding: 24px;
    gap: 22px;
  }

  .stat-item {
    justify-content: flex-start;
  }

  .stat-item span {
    white-space: normal;
  }

  .scroll-hint {
    display: none;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .flow {
    align-items: flex-start;
    flex-direction: column;
  }

  .flow b {
    transform: translateX(28px);
  }
}


/* v1.2 Mobil düzeltmeler */
@media (max-width: 680px) {
  body {
    background: #020204;
  }

  .site-header {
    height: 86px;
    padding-inline: 28px;
    background: linear-gradient(180deg, rgba(0,0,0,.94), rgba(0,0,0,.28));
  }

  .brand {
    font-size: 36px;
  }

  .menu-btn {
    width: 42px;
    height: 32px;
    gap: 8px;
  }

  .menu-btn span {
    height: 4px;
  }

  .hero {
    min-height: auto;
    padding-bottom: 72px;
  }

  .hero-content {
    min-height: auto;
    width: calc(100% - 36px);
    padding-top: 112px;
  }

  .logo-stage {
    height: 118px;
    width: 100%;
    margin-top: 18px;
    margin-bottom: 22px;
  }

  #logoCanvas {
    filter: drop-shadow(0 0 2px rgba(255,255,255,.18)) drop-shadow(0 0 8px rgba(138,53,255,.28));
  }

  .hero-copy {
    margin-top: 0;
  }

  .hero-copy h2 {
    font-size: clamp(35px, 9.8vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.055em;
    max-width: 100%;
  }

  .hero-copy p {
    margin-top: 18px;
    font-size: 19px;
    line-height: 1.62;
    max-width: 92%;
  }

  .hero-buttons {
    margin-top: 30px;
    width: 100%;
    gap: 16px;
  }

  .btn {
    width: 100%;
    min-height: 74px;
    border-radius: 16px;
    font-size: 22px;
  }

  .btn-ghost {
    background: rgba(8, 4, 16, 0.64);
  }

  .stats-bar {
    width: 100%;
    margin-top: 34px;
    padding: 28px 28px 30px;
    grid-template-columns: 1fr;
    gap: 26px;
    border-radius: 22px;
    min-height: auto;
    max-height: none;
  }

  .stat-item {
    gap: 24px;
  }

  .stat-icon {
    width: 72px;
    height: 72px;
  }

  .stat-item strong {
    font-size: 42px;
  }

  .stat-item span {
    margin-top: 9px;
    font-size: 20px;
    line-height: 1.25;
  }

  .stat-country,
  .stat-sync {
    display: none;
  }

  .scroll-hint {
    display: none;
  }

  .hero-vignette {
    background:
      radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.12) 42%, rgba(0,0,0,0.72) 96%),
      linear-gradient(180deg, rgba(0,0,0,0.36) 0%, transparent 22%, transparent 60%, rgba(0,0,0,0.72) 100%);
  }
}

@media (max-width: 420px) {
  .site-header {
    padding-inline: 22px;
  }

  .brand {
    font-size: 32px;
  }

  .hero-content {
    width: calc(100% - 28px);
  }

  .logo-stage {
    height: 105px;
  }

  .hero-copy h2 {
    font-size: 34px;
  }

  .hero-copy p {
    font-size: 17px;
  }

  .btn {
    min-height: 66px;
    font-size: 19px;
  }

  .stats-bar {
    padding: 24px 22px;
  }

  .stat-icon {
    width: 58px;
    height: 58px;
  }

  .stat-item strong {
    font-size: 36px;
  }

  .stat-item span {
    font-size: 17px;
  }
}


/* v1.3 Mobil temiz görünüm */
@media (max-width: 680px) {
  .hero {
    min-height: 100svh;
    padding-bottom: 42px;
  }

  .hero-content {
    min-height: 100svh;
    justify-content: center;
    padding-top: 96px;
    padding-bottom: 36px;
  }

  .logo-stage {
    height: 92px;
    margin-top: 4px;
    margin-bottom: 18px;
  }

  #logoCanvas {
    opacity: .92;
    filter: drop-shadow(0 0 2px rgba(255,255,255,.14)) drop-shadow(0 0 7px rgba(138,53,255,.24));
  }

  .hero-copy h2 {
    font-size: clamp(32px, 8.6vw, 42px);
    line-height: 1.08;
    max-width: 94%;
    margin-inline: auto;
  }

  .hero-copy p {
    max-width: 88%;
    font-size: 16.5px;
    line-height: 1.54;
    margin-top: 16px;
    color: rgba(255,255,255,.82);
  }

  .hero-buttons {
    margin-top: 26px;
    gap: 14px;
  }

  .btn {
    min-height: 62px;
    border-radius: 15px;
    font-size: 18px;
  }

  .btn-ghost {
    min-height: 58px;
  }

  .btn-primary {
    min-height: 66px;
  }

  /* Mobilde istatistik kartı ilk ekrandan kaldırıldı.
     Masaüstünde aynı şekilde durur. */
  .stats-bar {
    display: none;
  }

  .hero-noise {
    opacity: .08;
  }

  .crowd-canvas {
    opacity: .82;
  }
}

@media (max-width: 420px) {
  .site-header {
    height: 78px;
  }

  .brand {
    font-size: 29px;
  }

  .menu-btn {
    width: 37px;
    height: 29px;
  }

  .hero-content {
    width: calc(100% - 34px);
    padding-top: 84px;
  }

  .logo-stage {
    height: 82px;
    margin-bottom: 14px;
  }

  .hero-copy h2 {
    font-size: 31px;
  }

  .hero-copy p {
    font-size: 15.5px;
    line-height: 1.5;
  }

  .hero-buttons {
    margin-top: 22px;
  }

  .btn {
    min-height: 58px;
    font-size: 17px;
  }

  .btn-primary {
    min-height: 62px;
  }
}


/* v1.4 Masaüstü logo görünürlük düzeltmesi */
.logo-stage {
  display: grid;
  place-items: center;
}

.fallback-logo {
  display: grid;
  z-index: 1;
  pointer-events: none;
  opacity: .94;
  color: rgba(255,255,255,.96);
  -webkit-text-stroke: 1px rgba(255,255,255,.18);
  text-shadow:
    0 0 8px rgba(255,255,255,.28),
    0 0 20px rgba(138,53,255,.42),
    0 0 42px rgba(138,53,255,.24);
}

.fallback-logo span {
  color: #9340ff;
  text-shadow:
    0 0 9px rgba(147,64,255,.66),
    0 0 24px rgba(147,64,255,.48);
}

#logoCanvas {
  z-index: 2;
  opacity: .78;
  mix-blend-mode: screen;
}

@media (min-width: 681px) {
  .hero-content {
    justify-content: flex-start;
  }

  .logo-stage {
    height: clamp(270px, 34vw, 430px);
    margin-top: clamp(28px, 5vh, 68px);
    margin-bottom: 0;
  }

  .fallback-logo {
    font-size: clamp(120px, 18.8vw, 292px);
  }

  .hero-copy {
    margin-top: clamp(-38px, -2.6vw, -18px);
  }
}

/* Mobilde büyük yazı yerine sadece canvas LED hissi kalsın */
@media (max-width: 680px) {
  .fallback-logo {
    opacity: .16;
    font-size: clamp(58px, 17vw, 90px);
    text-shadow:
      0 0 4px rgba(255,255,255,.12),
      0 0 10px rgba(138,53,255,.16);
  }

  #logoCanvas {
    opacity: .96;
  }
}


/* v1.7 + işareti ve LED efekt düzeltmesi */
.fallback-logo {
  display: none !important;
}

.logo-stage.logo-fallback .fallback-logo {
  display: grid !important;
  opacity: .36;
}

#logoCanvas {
  opacity: 1;
  mix-blend-mode: screen;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.28))
    drop-shadow(0 0 18px rgba(138,53,255,.42));
}

@media (min-width: 681px) {
  .hero-content {
    padding-top: 96px;
  }

  .logo-stage {
    width: min(1120px, 94%);
    height: clamp(240px, 30vw, 390px);
    margin-top: clamp(26px, 5vh, 58px);
    margin-bottom: 0;
  }

  .hero-copy {
    margin-top: clamp(-24px, -1.8vw, -10px);
  }

  .hero-copy h2 {
    font-size: clamp(38px, 4.2vw, 62px);
  }

  .hero-copy p {
    margin-top: 14px;
    font-size: clamp(16px, 1.12vw, 19px);
    line-height: 1.55;
  }

  .hero-buttons {
    margin-top: 28px;
  }

  .stats-bar {
    margin-top: 42px;
  }
}

@media (min-width: 681px) and (max-height: 850px) {
  .logo-stage {
    height: clamp(205px, 25vw, 320px);
    margin-top: 22px;
  }

  .hero-copy h2 {
    font-size: clamp(35px, 3.5vw, 52px);
  }

  .stats-bar {
    display: none;
  }
}

@media (max-width: 680px) {
  .logo-stage {
    width: min(340px, 92%);
    height: 86px;
  }

  #logoCanvas {
    filter:
      drop-shadow(0 0 2px rgba(255,255,255,.18))
      drop-shadow(0 0 9px rgba(138,53,255,.30));
  }
}


/* v1.8 Mobil dengeleme:
   - LED logo daha merkezde / hafif yukarıda
   - slogan daha küçük, logoyu bastırmıyor
   - ilk ekran daha temiz
*/
@media (max-width: 680px) {
  .hero {
    min-height: 100svh;
    padding-bottom: 30px;
  }

  .hero-content {
    min-height: 100svh;
    width: calc(100% - 34px);
    justify-content: center;
    padding-top: 94px;
    padding-bottom: 28px;
  }

  .logo-stage {
    width: min(360px, 94%);
    height: 118px;
    margin-top: 24px;
    margin-bottom: 18px;
  }

  #logoCanvas {
    opacity: .98;
    filter:
      drop-shadow(0 0 2px rgba(255,255,255,.18))
      drop-shadow(0 0 10px rgba(138,53,255,.30));
  }

  .hero-copy {
    margin-top: 0;
  }

  .hero-copy h2 {
    max-width: 92%;
    margin-inline: auto;
    font-size: clamp(26px, 7.2vw, 34px);
    line-height: 1.08;
    letter-spacing: -0.05em;
  }

  .hero-copy p {
    max-width: 90%;
    margin-top: 14px;
    font-size: 15.5px;
    line-height: 1.5;
    color: rgba(255,255,255,.84);
  }

  .hero-buttons {
    margin-top: 20px;
    gap: 12px;
  }

  .btn {
    min-height: 58px;
    font-size: 17px;
    border-radius: 15px;
  }

  .btn-ghost {
    min-height: 56px;
  }

  .btn-primary {
    min-height: 62px;
  }

  .stats-bar,
  .scroll-hint {
    display: none;
  }

  .hero-noise {
    opacity: .06;
  }

  .crowd-canvas {
    opacity: .88;
  }
}

@media (max-width: 420px) {
  .hero-content {
    width: calc(100% - 28px);
    padding-top: 88px;
  }

  .logo-stage {
    width: min(330px, 94%);
    height: 108px;
    margin-top: 18px;
    margin-bottom: 16px;
  }

  .hero-copy h2 {
    font-size: 25px;
    max-width: 95%;
  }

  .hero-copy p {
    max-width: 94%;
    font-size: 14.8px;
    line-height: 1.48;
  }

  .hero-buttons {
    margin-top: 18px;
  }

  .btn {
    min-height: 56px;
    font-size: 16px;
  }

  .btn-primary {
    min-height: 60px;
  }
}


/* v1.9 Mobil logo okunabilirlik düzeltmesi */
@media (max-width: 680px) {
  .hero-content {
    padding-top: 82px;
    justify-content: center;
  }

  .logo-stage {
    width: min(380px, 96%);
    height: 146px;
    margin-top: 8px;
    margin-bottom: 14px;
  }

  #logoCanvas {
    filter:
      drop-shadow(0 0 2px rgba(255,255,255,.18))
      drop-shadow(0 0 8px rgba(138,53,255,.28));
  }

  .hero-copy h2 {
    font-size: clamp(24px, 6.8vw, 32px);
    max-width: 94%;
  }

  .hero-copy p {
    font-size: 15px;
    max-width: 92%;
    margin-top: 12px;
  }

  .hero-buttons {
    margin-top: 18px;
  }
}

@media (max-width: 420px) {
  .hero-content {
    padding-top: 78px;
  }

  .logo-stage {
    width: min(360px, 96%);
    height: 132px;
    margin-top: 6px;
    margin-bottom: 12px;
  }

  .hero-copy h2 {
    font-size: 23px;
  }

  .hero-copy p {
    font-size: 14.5px;
    max-width: 94%;
  }
}


/* Stage 1: Üyelik yönlendirme butonları */
.login-link {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 820;
  font-size: 15px;
  transition: color .25s ease, text-shadow .25s ease;
  white-space: nowrap;
}

.login-link:hover {
  color: #fff;
  text-shadow: 0 0 16px rgba(138, 53, 255, .82);
}

.register-btn {
  min-width: 104px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 880;
  font-size: 15px;
  border-radius: 13px;
  border: 1px solid rgba(201, 157, 255, .42);
  background: linear-gradient(135deg, rgba(105,39,255,.92), rgba(160,52,255,.94));
  box-shadow:
    0 12px 34px rgba(138, 53, 255, .24),
    inset 0 1px 0 rgba(255,255,255,.22);
  transition: transform .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}

.register-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 46px rgba(138, 53, 255, .38),
    inset 0 1px 0 rgba(255,255,255,.3);
}

.mobile-auth-actions {
  display: none;
}

@media (max-width: 1180px) {
  .join-btn {
    min-width: 150px;
  }

  .login-link,
  .register-btn {
    display: none;
  }
}

@media (max-width: 680px) {
  .mobile-auth-actions {
    width: 100%;
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .mobile-auth-actions a {
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #fff;
    font-weight: 850;
    border: 1px solid rgba(138, 53, 255, .38);
    background: rgba(8, 4, 16, .62);
  }

  .mobile-auth-actions a:last-child {
    background: linear-gradient(135deg, rgba(105,39,255,.92), rgba(160,52,255,.94));
    box-shadow: 0 12px 32px rgba(138,53,255,.22);
  }
}


/* Stage 1: Geçici giriş / üyelik / katılım sayfaları */
.auth-page {
  min-height: 100vh;
  padding: 150px 24px 80px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(138,53,255,.22), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(91,35,170,.18), transparent 42%),
    #030307;
}

.auth-card {
  width: min(520px, 100%);
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid rgba(138,53,255,.42);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(18,10,34,.82), rgba(5,4,10,.88));
  box-shadow:
    0 0 60px rgba(138,53,255,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}

.auth-card h1 {
  margin: 0;
  font-size: clamp(36px, 5vw, 58px);
  line-height: 1;
  letter-spacing: -.06em;
}

.auth-card p {
  margin: 18px 0 0;
  color: rgba(255,255,255,.74);
  font-size: 17px;
  line-height: 1.55;
}

.auth-form {
  margin-top: 28px;
  display: grid;
  gap: 18px;
}

.auth-form label {
  display: grid;
  gap: 9px;
  color: rgba(255,255,255,.84);
  font-weight: 760;
}

.auth-form input,
.auth-form select {
  width: 100%;
  min-height: 56px;
  padding: 0 17px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  outline: none;
  background: rgba(0,0,0,.36);
  color: #fff;
  font: inherit;
}

.auth-form input:focus,
.auth-form select:focus {
  border-color: rgba(138,53,255,.72);
  box-shadow: 0 0 0 4px rgba(138,53,255,.16);
}

.auth-form select option {
  color: #111;
}

.auth-form .btn {
  width: 100%;
  margin-top: 8px;
  border: 0;
  cursor: pointer;
}

.auth-note a {
  color: #b985ff;
  font-weight: 850;
}


/* Stage 2: PHP üyelik sistemi */
.auth-alert {
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 14px;
  font-weight: 760;
  line-height: 1.45;
}

.auth-alert.error {
  color: #ffd6d6;
  border: 1px solid rgba(255, 90, 90, .36);
  background: rgba(255, 65, 65, .12);
}

.auth-alert.success {
  color: #d9ffe7;
  border: 1px solid rgba(57, 217, 125, .36);
  background: rgba(57, 217, 125, .12);
}

.dashboard-page {
  min-height: 100vh;
  padding: 150px 24px 90px;
  background:
    radial-gradient(circle at 50% 8%, rgba(138,53,255,.22), transparent 34%),
    radial-gradient(circle at 80% 80%, rgba(84,31,170,.18), transparent 36%),
    #030307;
}

.dashboard-hero,
.dashboard-grid,
.dashboard-actions {
  width: min(1120px, 100%);
  margin-inline: auto;
}

.dashboard-hero h1 {
  margin: 0;
  max-width: 900px;
  font-size: clamp(42px, 6vw, 82px);
  line-height: .98;
  letter-spacing: -.065em;
}

.dashboard-hero p {
  max-width: 720px;
  margin: 22px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 19px;
  line-height: 1.65;
}

.dashboard-grid {
  margin-top: 42px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.dash-card,
.dashboard-actions article {
  border: 1px solid rgba(138,53,255,.32);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(18,10,34,.78), rgba(5,4,10,.84));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 38px rgba(138,53,255,.1);
}

.dash-card {
  min-height: 126px;
  padding: 24px;
}

.dash-card span {
  display: block;
  color: rgba(255,255,255,.58);
  font-size: 14px;
  margin-bottom: 12px;
}

.dash-card strong {
  display: block;
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.1;
  word-break: break-word;
}

.dashboard-actions {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.dashboard-actions article {
  padding: 30px;
}

.dashboard-actions h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 42px);
  letter-spacing: -.045em;
}

.dashboard-actions p {
  margin: 14px 0 24px;
  color: rgba(255,255,255,.68);
  line-height: 1.6;
}

button:disabled {
  opacity: .56;
  cursor: not-allowed;
}

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

  .dashboard-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}


/* Stage 3: Etkinlik yönetimi */
.event-form-card {
  width: min(640px, 100%);
}

.event-list,
.event-detail-grid {
  width: min(1120px, 100%);
  margin: 42px auto 0;
}

.event-list {
  display: grid;
  gap: 18px;
}

.empty-state,
.event-row,
.event-main-card,
.qr-card {
  border: 1px solid rgba(138,53,255,.32);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(18,10,34,.78), rgba(5,4,10,.86));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 38px rgba(138,53,255,.1);
}

.empty-state {
  padding: 34px;
}

.empty-state h2,
.event-row h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -.045em;
}

.empty-state p,
.event-row p,
.qr-card p {
  color: rgba(255,255,255,.68);
  line-height: 1.6;
}

.event-row {
  padding: 26px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
}

.event-row h2 {
  margin-top: 10px;
}

.event-row-actions {
  display: flex;
  align-items: center;
}

.event-status {
  display: inline-flex;
  min-height: 30px;
  padding: 0 12px;
  align-items: center;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 850;
  border: 1px solid rgba(255,255,255,.14);
}

.status-active {
  color: #d9ffe7;
  background: rgba(57,217,125,.13);
  border-color: rgba(57,217,125,.34);
}

.status-draft {
  color: #efe4ff;
  background: rgba(138,53,255,.14);
  border-color: rgba(138,53,255,.36);
}

.status-completed {
  color: #d8eaff;
  background: rgba(80,150,255,.13);
  border-color: rgba(80,150,255,.34);
}

.status-cancelled {
  color: #ffd8d8;
  background: rgba(255,80,80,.13);
  border-color: rgba(255,80,80,.34);
}

.event-detail-grid {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 22px;
}

.event-main-card,
.qr-card {
  padding: 32px;
}

.detail-lines {
  margin-top: 24px;
  display: grid;
  gap: 8px;
}

.detail-lines p {
  margin: 0;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
}

.join-link-box {
  margin-top: 28px;
  display: grid;
  gap: 12px;
}

.join-link-box span {
  color: rgba(255,255,255,.58);
  font-weight: 800;
}

.join-link-box input {
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  color: #fff;
  background: rgba(0,0,0,.36);
  font: inherit;
}

.copy-link-btn {
  width: fit-content;
}

.event-actions-inline {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn.danger {
  border-color: rgba(255,90,90,.36);
  color: #ffd8d8;
}

.qr-card {
  display: grid;
  align-content: start;
  gap: 18px;
}

.qr-placeholder {
  aspect-ratio: 1;
  width: 100%;
  border-radius: 22px;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.12) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(138,53,255,.22), rgba(0,0,0,.24));
  background-size: 22px 22px, 22px 22px, 100% 100%;
  border: 1px solid rgba(138,53,255,.38);
}

.qr-placeholder span {
  display: block;
  color: #fff;
  font-size: 32px;
  font-weight: 950;
  letter-spacing: -.07em;
}

.qr-placeholder b {
  display: block;
  margin-top: 8px;
  color: #b985ff;
  font-size: 24px;
}

@media (max-width: 860px) {
  .event-row {
    grid-template-columns: 1fr;
  }

  .event-detail-grid {
    grid-template-columns: 1fr;
  }

  .copy-link-btn {
    width: 100%;
  }
}


/* Stage 3.1: QR kod + durum güncelleme */
.status-form {
  margin-top: 28px;
  padding: 20px;
  border: 1px solid rgba(138,53,255,.24);
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
}

.status-form label {
  display: grid;
  gap: 9px;
  color: rgba(255,255,255,.84);
  font-weight: 760;
}

.status-form select {
  min-height: 54px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.38);
  color: #fff;
  font: inherit;
}

.status-form select option {
  color: #111;
}

.qr-real {
  width: 100%;
  aspect-ratio: 1;
  padding: 18px;
  border-radius: 24px;
  background: #fff;
  box-shadow:
    0 0 34px rgba(255,255,255,.12),
    0 0 54px rgba(138,53,255,.22);
}

.qr-real img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 12px;
}

.qr-card h2 {
  margin: 0;
  font-size: clamp(24px, 2.3vw, 34px);
  letter-spacing: -.04em;
}

.qr-card .btn {
  width: 100%;
}

@media (max-width: 680px) {
  .status-form {
    grid-template-columns: 1fr;
  }

  .status-form .btn {
    width: 100%;
  }
}


/* Stage 3.2: Katılımcı kayıtları */
.join-live-page {
  min-height: 100vh;
  padding: 130px 22px 60px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 18%, rgba(138,53,255,.25), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(80,31,150,.2), transparent 40%),
    #030307;
}

.join-live-card {
  width: min(520px, 100%);
  padding: clamp(28px, 4vw, 44px);
  border-radius: 28px;
  border: 1px solid rgba(138,53,255,.42);
  background: linear-gradient(180deg, rgba(18,10,34,.84), rgba(5,4,10,.9));
  box-shadow: 0 0 60px rgba(138,53,255,.18), inset 0 1px 0 rgba(255,255,255,.08);
  text-align: center;
}

.join-live-card h1 {
  margin: 0;
  font-size: clamp(40px, 8vw, 74px);
  line-height: .96;
  letter-spacing: -.07em;
}

.join-live-card p {
  color: rgba(255,255,255,.74);
  line-height: 1.6;
  font-size: 17px;
}

.phone-ready {
  width: 138px;
  height: 220px;
  margin: 0 auto 28px;
  border-radius: 32px;
  border: 2px solid rgba(255,255,255,.22);
  background: linear-gradient(180deg, rgba(140,53,255,.28), rgba(255,255,255,.05));
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(138,53,255,.32);
}

.phone-ready span {
  font-weight: 950;
  letter-spacing: -.07em;
  color: #fff;
  z-index: 2;
}

.phone-glow {
  position: absolute;
  inset: 18px;
  border-radius: 24px;
  background: radial-gradient(circle, rgba(255,255,255,.78), rgba(138,53,255,.42) 34%, transparent 68%);
  animation: phonePulse 1.6s ease-in-out infinite;
}

@keyframes phonePulse {
  0%, 100% { opacity: .45; transform: scale(.92); }
  50% { opacity: .95; transform: scale(1.05); }
}

.participants-table-wrap {
  width: min(1120px, 100%);
  margin: 42px auto 0;
}

.participants-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(18,10,34,.78), rgba(5,4,10,.86));
  border: 1px solid rgba(138,53,255,.32);
}

.participants-table th,
.participants-table td {
  padding: 18px 16px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.participants-table th {
  color: rgba(255,255,255,.68);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.participants-table td {
  color: rgba(255,255,255,.86);
}

@media (max-width: 760px) {
  .participants-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}


/* Stage 4: Live Control Panel */
.live-page {
  min-height: 100vh;
  padding: 145px 24px 90px;
  background:
    radial-gradient(circle at 50% 8%, rgba(138,53,255,.22), transparent 34%),
    radial-gradient(circle at 80% 85%, rgba(84,31,170,.18), transparent 36%),
    #030307;
}

.live-hero,
.live-status-grid,
.live-control-grid {
  width: min(1120px, 100%);
  margin-inline: auto;
}

.live-hero h1 {
  margin: 0;
  max-width: 980px;
  font-size: clamp(42px, 6vw, 82px);
  line-height: .98;
  letter-spacing: -.065em;
}

.live-hero p {
  max-width: 720px;
  margin: 20px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 19px;
  line-height: 1.6;
}

.live-status-grid {
  margin-top: 38px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.live-warning {
  width: min(1120px, 100%);
  margin: 22px auto 0;
  padding: 18px 20px;
  border-radius: 18px;
  color: #fff2d8;
  background: rgba(255, 170, 60, .12);
  border: 1px solid rgba(255, 170, 60, .32);
}

.live-control-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
}

.control-panel-card,
.phone-preview-card {
  padding: 30px;
  border-radius: 26px;
  border: 1px solid rgba(138,53,255,.32);
  background: linear-gradient(180deg, rgba(18,10,34,.82), rgba(5,4,10,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 38px rgba(138,53,255,.1);
}

.control-panel-card h2,
.phone-preview-card h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -.05em;
}

.control-panel-card p {
  color: rgba(255,255,255,.68);
  line-height: 1.55;
}

.live-form {
  margin-top: 24px;
  display: grid;
  gap: 16px;
}

.live-form label {
  display: grid;
  gap: 9px;
  color: rgba(255,255,255,.84);
  font-weight: 780;
}

.live-form input,
.live-form select {
  min-height: 54px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.36);
  color: #fff;
  font: inherit;
}

.live-form input[type="color"] {
  padding: 6px;
  cursor: pointer;
}

.live-form input[type="range"] {
  padding: 0;
}

.live-form select option {
  color: #111;
}

.live-form .btn {
  width: 100%;
  border: 0;
  cursor: pointer;
}

.live-send-result {
  min-height: 26px;
  margin-top: 18px;
  color: rgba(255,255,255,.72);
}

.live-send-result.success {
  color: #d9ffe7;
}

.live-send-result.error {
  color: #ffd6d6;
}

.live-phone-preview {
  --live-color: #8a35ff;
  width: min(280px, 100%);
  aspect-ratio: 9 / 16;
  margin: 28px auto;
  padding: 16px;
  border-radius: 42px;
  border: 2px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.48);
  box-shadow: 0 0 48px rgba(138,53,255,.18);
  position: relative;
  overflow: hidden;
}

.preview-screen {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 30px;
  background: radial-gradient(circle, var(--live-color), #09030f 68%);
  color: #fff;
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 950;
  letter-spacing: -.07em;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.effect-blackout .preview-screen {
  background: #000;
}

.effect-flash .preview-screen {
  animation: previewFlash .55s infinite;
}

.effect-pulse .preview-screen {
  animation: previewPulse 1.1s ease-in-out infinite;
}

.effect-wave .preview-screen::after {
  content: "";
  position: absolute;
  inset: -30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  transform: translateX(-80%) rotate(18deg);
  animation: previewWave 1.3s linear infinite;
}

.effect-countdown .preview-screen span {
  font-size: 96px;
}

.quick-effects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
}

.quick-effects button {
  min-height: 46px;
  border-radius: 13px;
  border: 1px solid rgba(138,53,255,.28);
  color: #fff;
  background: rgba(0,0,0,.28);
  font-weight: 820;
  cursor: pointer;
}

.quick-effects button:hover {
  border-color: rgba(138,53,255,.68);
  box-shadow: 0 0 24px rgba(138,53,255,.16);
}

@keyframes previewFlash {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(3.2); background: #fff; color: #111; }
}

@keyframes previewPulse {
  0%, 100% { transform: scale(.98); filter: brightness(.9); }
  50% { transform: scale(1.02); filter: brightness(1.45); }
}

@keyframes previewWave {
  from { transform: translateX(-90%) rotate(18deg); }
  to { transform: translateX(90%) rotate(18deg); }
}

/* Receiver phone screen */
.live-receiver-body {
  margin: 0;
  background: #000;
  overflow: hidden;
}

.receiver-screen {
  --live-color: #8a35ff;
  min-height: 100svh;
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(circle at center, color-mix(in srgb, var(--live-color) 68%, white 8%), #050108 72%);
}

.receiver-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.18), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(0,0,0,.42), transparent 48%);
  pointer-events: none;
}

.receiver-content {
  position: relative;
  z-index: 2;
  width: min(92vw, 680px);
  text-align: center;
  padding: 24px;
}

.receiver-logo {
  font-size: clamp(44px, 15vw, 118px);
  font-weight: 950;
  letter-spacing: -.08em;
  text-shadow: 0 0 28px rgba(255,255,255,.28);
}

.receiver-logo span {
  color: #fff;
}

.receiver-content h1 {
  margin: 18px 0 0;
  font-size: clamp(42px, 16vw, 132px);
  line-height: .92;
  letter-spacing: -.07em;
}

.receiver-content p {
  margin: 20px auto 0;
  max-width: 520px;
  font-size: clamp(18px, 5vw, 28px);
  line-height: 1.35;
}

.receiver-content small {
  display: block;
  margin-top: 28px;
  color: rgba(255,255,255,.66);
}

.receiver-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: #fff;
  pointer-events: none;
  z-index: 5;
}

.receiver-blackout {
  background: #000;
}

.receiver-screen-color {
  background: var(--live-color);
}

.receiver-flash-effect {
  animation: receiverFlashBg .8s ease-in-out infinite;
}

.receiver-pulse .receiver-bg {
  animation: receiverPulse 1.2s ease-in-out infinite;
}

.receiver-wave::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
  animation: receiverWave 1.35s linear infinite;
  transform: rotate(18deg);
  z-index: 1;
}

.receiver-welcome {
  background:
    radial-gradient(circle at center, rgba(255,255,255,.22), transparent 28%),
    linear-gradient(135deg, var(--live-color), #050108);
}

.receiver-countdown .receiver-content h1 {
  font-size: clamp(96px, 34vw, 260px);
}

@keyframes receiverFlashBg {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(2.8); }
}

@keyframes receiverPulse {
  0%, 100% { opacity: .44; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes receiverWave {
  from { transform: translateX(-80%) rotate(18deg); }
  to { transform: translateX(80%) rotate(18deg); }
}

@media (max-width: 980px) {
  .live-status-grid {
    grid-template-columns: 1fr 1fr;
  }

  .live-control-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .live-page {
    padding-top: 116px;
  }

  .live-status-grid {
    grid-template-columns: 1fr;
  }

  .control-panel-card,
  .phone-preview-card {
    padding: 22px;
  }

  .quick-effects {
    grid-template-columns: 1fr 1fr;
  }
}


/* Stage 4.1: Live status + heartbeat */
.live-history-card {
  width: min(1120px, 100%);
  margin: 24px auto 0;
  padding: 26px;
  border-radius: 26px;
  border: 1px solid rgba(138,53,255,.32);
  background: linear-gradient(180deg, rgba(18,10,34,.78), rgba(5,4,10,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 38px rgba(138,53,255,.1);
}

.live-history-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.live-history-head h2 {
  margin: 0;
  font-size: clamp(25px, 2.8vw, 40px);
  letter-spacing: -.045em;
}

.live-mini-code {
  min-height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: rgba(255,255,255,.82);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.1);
  font-weight: 800;
}

.live-history-list {
  display: grid;
  gap: 10px;
}

.history-row {
  min-height: 52px;
  padding: 0 16px;
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 14px;
  align-items: center;
  border-radius: 15px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.07);
}

.history-row i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0 0 16px currentColor;
}

.history-row b {
  color: #fff;
  text-transform: capitalize;
}

.history-row span,
.muted-note {
  color: rgba(255,255,255,.62);
}

.receiver-screen::before {
  content: "";
  position: absolute;
  top: env(safe-area-inset-top, 0);
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
  opacity: .45;
  z-index: 8;
}

@media (max-width: 680px) {
  .live-history-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .history-row {
    grid-template-columns: 16px 1fr;
  }

  .history-row span {
    grid-column: 2;
    margin-top: -10px;
  }
}


/* Stage 4.2: Mobil gerçek flash / torch izni */
.torch-permission {
  width: min(360px, 100%);
  margin: 28px auto 0;
  display: grid;
  gap: 10px;
  place-items: center;
  position: relative;
  z-index: 10;
}

.torch-permission button {
  min-height: 52px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  color: #fff;
  background: rgba(0,0,0,.32);
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255,255,255,.1);
}

.torch-permission button.ready {
  color: #d9ffe7;
  border-color: rgba(57,217,125,.4);
  background: rgba(57,217,125,.12);
}

.torch-permission button:disabled {
  cursor: default;
}

.torch-permission em {
  max-width: 320px;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  line-height: 1.35;
  font-style: normal;
}

.receiver-flash-effect .receiver-content {
  animation: receiverContentFlash 0.55s ease-in-out infinite;
}

@keyframes receiverContentFlash {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.85); }
}

@media (max-width: 680px) {
  .torch-permission {
    margin-top: 22px;
  }

  .torch-permission button {
    min-height: 50px;
    font-size: 14px;
  }
}


/* Stage 4.3: Efekt presetleri ve sahne modları */
.preset-section {
  width: min(1120px, 100%);
  margin: 24px auto 0;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(138,53,255,.32);
  background:
    radial-gradient(circle at 10% 0%, rgba(138,53,255,.18), transparent 34%),
    linear-gradient(180deg, rgba(18,10,34,.82), rgba(5,4,10,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 38px rgba(138,53,255,.1);
}

.preset-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 22px;
}

.preset-head h2 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.04;
  letter-spacing: -.055em;
}

.preset-head p {
  max-width: 360px;
  margin: 0;
  color: rgba(255,255,255,.66);
  line-height: 1.5;
}

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

.preset-card {
  min-height: 112px;
  padding: 18px;
  text-align: left;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  color: #fff;
  background:
    radial-gradient(circle at 84% 18%, rgba(138,53,255,.22), transparent 34%),
    rgba(0,0,0,.28);
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.preset-card:hover,
.preset-card.active {
  transform: translateY(-3px);
  border-color: rgba(183,92,255,.72);
  box-shadow: 0 18px 44px rgba(138,53,255,.20);
  background:
    radial-gradient(circle at 84% 18%, rgba(183,92,255,.34), transparent 36%),
    rgba(18,8,32,.58);
}

.preset-card b {
  display: block;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -.035em;
}

.preset-card span {
  display: block;
  margin-top: 9px;
  color: rgba(255,255,255,.62);
  font-size: 14px;
}

.danger-preset {
  background:
    radial-gradient(circle at 84% 18%, rgba(255,80,80,.18), transparent 34%),
    rgba(0,0,0,.34);
}

.danger-preset:hover {
  border-color: rgba(255,80,80,.52);
  box-shadow: 0 18px 44px rgba(255,40,40,.12);
}

/* Receiver preset visuals */
.receiver-white-blast {
  background: #fff !important;
  color: #111;
}

.receiver-white-blast .receiver-logo,
.receiver-white-blast .receiver-content h1,
.receiver-white-blast .receiver-content p,
.receiver-white-blast .receiver-content small {
  color: #111;
  text-shadow: none;
}

.receiver-bass-pulse .receiver-bg {
  animation: receiverBass 0.55s ease-in-out infinite;
}

.receiver-purple-wave {
  background:
    radial-gradient(circle at center, rgba(183,92,255,.62), transparent 30%),
    linear-gradient(135deg, #1b052c, #050108 66%);
}

.receiver-sponsor {
  background:
    linear-gradient(135deg, #ff2bd6, #8a35ff 42%, #030307);
}

.receiver-sponsor .receiver-content h1 {
  font-size: clamp(50px, 16vw, 126px);
}

@keyframes receiverBass {
  0%, 100% {
    opacity: .42;
    transform: scale(.88);
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.20);
    filter: brightness(1.55);
  }
}

@media (max-width: 980px) {
  .preset-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .preset-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .preset-section {
    padding: 22px;
  }

  .preset-grid {
    grid-template-columns: 1fr;
  }

  .preset-card {
    min-height: 86px;
  }
}


/* Stage 4.4: Aç/kapa çalışan örüntülü efektler */
.pattern-preset {
  background:
    radial-gradient(circle at 84% 18%, rgba(255,255,255,.20), transparent 34%),
    radial-gradient(circle at 12% 92%, rgba(138,53,255,.18), transparent 36%),
    rgba(0,0,0,.30);
}

.pattern-preset b::after {
  content: " LOOP";
  margin-left: 7px;
  color: #b985ff;
  font-size: 11px;
  letter-spacing: .08em;
}

.stop-preset b::after {
  content: " OFF";
  margin-left: 7px;
  color: #ffb4b4;
  font-size: 11px;
  letter-spacing: .08em;
}

.receiver-flash-effect .receiver-logo,
.receiver-flash-effect .receiver-content h1 {
  animation: receiverLogoFlicker 1s linear infinite;
}

.receiver-blackout {
  background:
    radial-gradient(circle at center, rgba(138,53,255,.10), transparent 30%),
    #000;
}

.receiver-blackout .receiver-content {
  opacity: .42;
}

@keyframes receiverLogoFlicker {
  0%, 18%, 22%, 100% { opacity: 1; }
  19%, 21% { opacity: .38; }
}


/* Stage 4.5: Audio Sync ve frekans grupları */
.audio-group-grid,
.audio-sync-section {
  width: min(1120px, 100%);
  margin: 22px auto 0;
}

.audio-group-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.audio-group-grid article {
  min-height: 94px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(138,53,255,.28);
  background: linear-gradient(180deg, rgba(18,10,34,.70), rgba(5,4,10,.82));
}

.audio-group-grid b {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(138,53,255,.38);
  box-shadow: 0 0 20px rgba(138,53,255,.25);
}

.audio-group-grid span {
  margin-left: 9px;
  color: rgba(255,255,255,.72);
  font-weight: 800;
}

.audio-group-grid strong {
  display: block;
  margin-top: 14px;
  font-size: 30px;
}

.audio-sync-section {
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(138,53,255,.34);
  background:
    radial-gradient(circle at 8% 0%, rgba(138,53,255,.18), transparent 38%),
    linear-gradient(180deg, rgba(18,10,34,.82), rgba(5,4,10,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 38px rgba(138,53,255,.1);
}

.audio-sync-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
}

.audio-sync-head h2 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 48px);
  letter-spacing: -.055em;
  line-height: 1;
}

.audio-sync-head p {
  max-width: 640px;
  color: rgba(255,255,255,.68);
  line-height: 1.55;
}

.audio-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.audio-buttons .btn {
  min-width: 160px;
  min-height: 54px;
  border: 0;
  cursor: pointer;
}

.audio-meter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.audio-meter {
  min-height: 84px;
  padding: 16px;
  display: grid;
  align-content: end;
  border-radius: 18px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  position: relative;
}

.audio-meter span {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 7px;
  width: 0%;
  background: linear-gradient(90deg, #8a35ff, #ffffff);
  box-shadow: 0 0 22px rgba(138,53,255,.55);
  transition: width .08s linear;
}

.audio-meter b {
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,.88);
}

.audio-settings {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 16px;
}

.audio-settings label {
  display: grid;
  gap: 9px;
  color: rgba(255,255,255,.78);
  font-weight: 760;
}

.audio-settings input {
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.32);
  color: #fff;
  font: inherit;
}

#audioStatus {
  display: block;
  margin-top: 16px;
  color: rgba(255,255,255,.66);
}

.live-form select#targetGroup {
  border-color: rgba(138,53,255,.32);
  background:
    linear-gradient(180deg, rgba(138,53,255,.12), rgba(0,0,0,.36));
}

@media (max-width: 980px) {
  .audio-group-grid,
  .audio-meter-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .audio-sync-head {
    grid-template-columns: 1fr;
  }

  .audio-buttons {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .audio-group-grid,
  .audio-meter-grid,
  .audio-settings {
    grid-template-columns: 1fr;
  }

  .audio-sync-section {
    padding: 22px;
  }

  .audio-buttons .btn {
    width: 100%;
  }
}


/* Stage 4.6: Audio-only focus */
.preset-section {
  display: none !important;
}

.audio-sync-section {
  border-color: rgba(183,92,255,.58);
  box-shadow: 0 0 58px rgba(138,53,255,.16), inset 0 1px 0 rgba(255,255,255,.08);
}

.audio-help-box {
  margin-top: 20px;
  padding: 16px 18px;
  display: grid;
  gap: 7px;
  border-radius: 18px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.74);
  line-height: 1.45;
}

.audio-help-box b {
  color: #fff;
}

.audio-help-box span {
  display: block;
}

.audio-meter {
  min-height: 108px;
}

.audio-meter span {
  height: 10px;
}

#audioStatus {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.80);
}

.torch-permission {
  animation: torchAttention 1.3s ease-in-out infinite;
}

@keyframes torchAttention {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25); }
}


/* Stage 4.7: Sade bilgisayar sesi debug paneli */
.audio-simple-panel {
  width: min(1120px, 100%);
  margin: 24px auto 0;
  padding: 30px;
  border-radius: 28px;
  border: 1px solid rgba(183,92,255,.60);
  background:
    radial-gradient(circle at 8% 0%, rgba(138,53,255,.22), transparent 38%),
    linear-gradient(180deg, rgba(18,10,34,.88), rgba(5,4,10,.92));
  box-shadow: 0 0 62px rgba(138,53,255,.18), inset 0 1px 0 rgba(255,255,255,.08);
}

.audio-simple-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
}

.audio-simple-head h2 {
  margin: 0;
  font-size: clamp(34px, 4vw, 62px);
  letter-spacing: -.06em;
  line-height: .98;
}

.audio-simple-head p {
  max-width: 720px;
  color: rgba(255,255,255,.72);
  line-height: 1.55;
}

.audio-simple-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.audio-simple-actions .btn {
  min-height: 56px;
  min-width: 190px;
  border: 0;
  cursor: pointer;
}

.audio-debug-values {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.audio-debug-values article {
  min-height: 112px;
  padding: 18px;
  display: grid;
  align-content: center;
  border-radius: 20px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.09);
}

.audio-debug-values span {
  color: rgba(255,255,255,.62);
  font-weight: 760;
}

.audio-debug-values strong {
  margin-top: 8px;
  color: #fff;
  font-size: clamp(38px, 5vw, 68px);
  letter-spacing: -.06em;
}

.audio-meter-grid.simple {
  grid-template-columns: repeat(4, 1fr);
}

.audio-settings.simple {
  grid-template-columns: 1fr;
}

.audio-trigger-box {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  display: grid;
  gap: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
}

.audio-trigger-box b {
  color: #fff;
}

.audio-trigger-box span {
  color: rgba(255,255,255,.72);
}

.live-control-grid {
  display: none !important;
}

@media (max-width: 980px) {
  .audio-simple-head,
  .audio-debug-values,
  .audio-meter-grid.simple {
    grid-template-columns: 1fr 1fr;
  }

  .audio-simple-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .audio-simple-panel {
    padding: 22px;
  }

  .audio-simple-head,
  .audio-debug-values,
  .audio-meter-grid.simple {
    grid-template-columns: 1fr;
  }

  .audio-simple-actions .btn {
    width: 100%;
  }
}


/* Stage 4.7.1: Audio one-shot fix */
.receiver-audio-hit {
  animation: audioHitScreen 0.16s ease-out 1;
}

.receiver-audio-hit .receiver-content {
  animation: audioHitContent 0.16s ease-out 1;
}

@keyframes audioHitScreen {
  0% { filter: brightness(1); }
  50% { filter: brightness(3.2); }
  100% { filter: brightness(1); }
}

@keyframes audioHitContent {
  0% { transform: scale(1); }
  50% { transform: scale(1.035); }
  100% { transform: scale(1); }
}


/* Stage 4.7.2: Daha hızlı audio pulse */
.receiver-audio-hit {
  animation: audioHitScreenFast 0.24s ease-out 1;
}

@keyframes audioHitScreenFast {
  0% { filter: brightness(1); }
  22% { filter: brightness(3.4); }
  45% { filter: brightness(1); }
  67% { filter: brightness(3.2); }
  100% { filter: brightness(1); }
}


/* Stage 4.8: Bass Only */
.audio-group-grid {
  display: none !important;
}

.bass-only-values,
.bass-only-meters {
  grid-template-columns: 1fr 1fr !important;
}

.main-bass-meter {
  border-color: rgba(183,92,255,.45);
  box-shadow: 0 0 34px rgba(138,53,255,.12);
}

.main-bass-meter span {
  height: 14px;
  background: linear-gradient(90deg, #8a35ff, #ffffff);
}

@media (max-width: 560px) {
  .bass-only-values,
  .bass-only-meters {
    grid-template-columns: 1fr !important;
  }
}


/* Stage 4.9: Bass peak timing */
.peak-values {
  grid-template-columns: repeat(4, 1fr) !important;
}

.receiver-audio-hit {
  animation: bassHitScreen 0.18s ease-out 1;
}

@keyframes bassHitScreen {
  0% { filter: brightness(1); }
  35% { filter: brightness(3.8); }
  100% { filter: brightness(1); }
}

@media (max-width: 760px) {
  .peak-values {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 480px) {
  .peak-values {
    grid-template-columns: 1fr !important;
  }
}


/* Stage 4.9.1: Bass flash görünürlük düzeltmesi */
.receiver-audio-hit {
  animation: bassHitScreenVisible 0.26s ease-out 1;
}

@keyframes bassHitScreenVisible {
  0% { filter: brightness(1); }
  45% { filter: brightness(4); }
  100% { filter: brightness(1); }
}


/* Stage 4.10: Bass choreography */
.receiver-audio-hit {
  animation: bassChoreoGlow 0.9s ease-out 1;
}

@keyframes bassChoreoGlow {
  0% { filter: brightness(1); }
  18% { filter: brightness(3.4); }
  38% { filter: brightness(1.1); }
  52% { filter: brightness(2.7); }
  68% { filter: brightness(1.1); }
  84% { filter: brightness(3.1); }
  100% { filter: brightness(1); }
}

.audio-help-box span:last-child {
  color: #ffe8b7;
}


/* Stage 4.11: Volume rise/fall gate */
.receiver-audio-hit {
  filter: brightness(2.8);
}

.receiver-audio-hit .receiver-content {
  text-shadow: 0 0 28px rgba(255,255,255,.45);
}

.main-bass-meter span {
  background: linear-gradient(90deg, #ffffff, #8a35ff);
}


/* Stage 4.11.1: Volume flash görünürlük düzeltmesi */
.receiver-volume-on {
  background: #ffffff !important;
  color: #111 !important;
  filter: brightness(1.6);
}

.receiver-volume-on .receiver-content,
.receiver-volume-on .receiver-logo,
.receiver-volume-on .receiver-content h1,
.receiver-volume-on .receiver-content p,
.receiver-volume-on .receiver-content small {
  color: #111 !important;
  text-shadow: none !important;
}

.receiver-volume-on .receiver-flash {
  opacity: 1 !important;
}


/* Stage 4.11.3: Telefon beyaz ekranda kalmasın */
.receiver-volume-on {
  background:
    radial-gradient(circle at center, rgba(255,255,255,.18), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(0,0,0,.42), transparent 48%),
    #050108 !important;
  color: #fff !important;
  filter: none !important;
}

.receiver-volume-on .receiver-content,
.receiver-volume-on .receiver-logo,
.receiver-volume-on .receiver-content h1,
.receiver-volume-on .receiver-content p,
.receiver-volume-on .receiver-content small {
  color: #fff !important;
  text-shadow: 0 0 28px rgba(255,255,255,.25) !important;
}

.receiver-volume-pulse {
  animation: volumePulseScreen 0.18s ease-out 1;
}

.receiver-volume-pulse .receiver-flash {
  opacity: 1 !important;
}

@keyframes volumePulseScreen {
  0% { filter: brightness(1); }
  45% { filter: brightness(4.5); background: #fff; }
  100% { filter: brightness(1); }
}


/* Stage 5: Pattern Builder */
.pattern-page {
  min-height: 100vh;
  padding: 145px 24px 90px;
  background:
    radial-gradient(circle at 50% 8%, rgba(138,53,255,.22), transparent 34%),
    radial-gradient(circle at 80% 85%, rgba(84,31,170,.18), transparent 36%),
    #030307;
}

.pattern-hero,
.pattern-builder-grid,
.saved-patterns {
  width: min(1120px, 100%);
  margin-inline: auto;
}

.pattern-hero h1 {
  margin: 0;
  max-width: 900px;
  font-size: clamp(42px, 6vw, 82px);
  line-height: .98;
  letter-spacing: -.065em;
}

.pattern-hero p {
  max-width: 720px;
  color: rgba(255,255,255,.72);
  font-size: 19px;
  line-height: 1.6;
}

.pattern-builder-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 22px;
}

.pattern-card,
.pattern-preview-card,
.saved-patterns {
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(138,53,255,.34);
  background: linear-gradient(180deg, rgba(18,10,34,.82), rgba(5,4,10,.88));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 0 38px rgba(138,53,255,.1);
}

.pattern-card h2,
.pattern-preview-card h2,
.saved-head h2 {
  margin: 0 0 20px;
  font-size: clamp(28px, 3.2vw, 46px);
  letter-spacing: -.055em;
}

.pattern-form {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 14px;
}

.pattern-form label,
.saved-head label {
  display: grid;
  gap: 9px;
  color: rgba(255,255,255,.80);
  font-weight: 780;
}

.pattern-form input,
.pattern-form select,
.saved-head select,
.step-row input,
.step-row select {
  min-height: 52px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.32);
  color: #fff;
  font: inherit;
}

.pattern-form select option,
.step-row select option,
.saved-head select option {
  color: #111;
}

.pattern-actions {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pattern-actions .btn {
  border: 0;
  cursor: pointer;
}

.steps-list {
  margin-top: 20px;
  display: grid;
  gap: 10px;
}

.step-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: 42px 120px 1fr 38px 70px;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 16px;
  background: rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.08);
}

.step-row b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(138,53,255,.28);
}

.step-row span {
  color: rgba(255,255,255,.62);
}

.step-row button,
.saved-actions button,
.saved-actions a {
  min-height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  font-weight: 800;
}

.pattern-result {
  min-height: 24px;
  margin-top: 16px;
  color: rgba(255,255,255,.72);
}

.pattern-result.success {
  color: #d9ffe7;
}

.pattern-result.error {
  color: #ffd6d6;
}

.pattern-preview-card {
  text-align: center;
}

.pattern-phone {
  width: min(280px, 100%);
  aspect-ratio: 9 / 16;
  margin: 28px auto;
  display: grid;
  place-items: center;
  border-radius: 42px;
  border: 2px solid rgba(255,255,255,.18);
  background: #09030f;
  color: #fff;
  font-size: 42px;
  font-weight: 950;
  letter-spacing: -.07em;
  box-shadow: 0 0 48px rgba(138,53,255,.18);
}

.pattern-phone.on {
  background: #fff;
  color: #111;
  box-shadow: 0 0 70px rgba(255,255,255,.5);
}

.saved-patterns {
  margin-top: 24px;
}

.saved-head {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 340px);
  gap: 20px;
  align-items: end;
  margin-bottom: 22px;
}

.saved-pattern-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.saved-pattern {
  padding: 18px;
  border-radius: 20px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.09);
}

.saved-pattern span {
  color: #b985ff;
  font-weight: 850;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
}

.saved-pattern h3 {
  margin: 10px 0 16px;
  font-size: 22px;
  letter-spacing: -.035em;
}

.saved-actions {
  display: flex;
  gap: 10px;
}

@media (max-width: 920px) {
  .pattern-builder-grid,
  .saved-head,
  .pattern-form {
    grid-template-columns: 1fr;
  }

  .saved-pattern-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .step-row {
    grid-template-columns: 36px 1fr;
  }

  .step-row span,
  .step-row button {
    grid-column: 2;
  }

  .saved-pattern-grid {
    grid-template-columns: 1fr;
  }
}


/* Stage 5.1: Senkron başlangıç */
.pattern-result.success::after {
  content: " Senkron başlangıç aktif.";
}


/* Stage 6: WebSocket Live */
.websocket-live-page {
  background:
    radial-gradient(circle at 18% 10%, rgba(138,53,255,.24), transparent 34%),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,.08), transparent 32%),
    #030307;
}

.websocket-grid {
  grid-template-columns: 1fr 1fr;
}

.websocket-card {
  min-height: 360px;
}

.live-pill.ok {
  background: rgba(77,255,150,.16);
  color: #ccffdd;
  border-color: rgba(77,255,150,.32);
}

.ws-info {
  margin: 22px 0;
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
}

.ws-info span {
  color: rgba(255,255,255,.55);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.ws-info b,
.ws-info code {
  color: #fff;
  word-break: break-all;
}

.ws-select-label {
  display: grid;
  gap: 10px;
  color: rgba(255,255,255,.78);
  font-weight: 850;
}

.ws-select-label select {
  min-height: 56px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.32);
  color: #fff;
  font: inherit;
}

.ws-select-label option {
  color: #111;
}

.ws-test-buttons {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.ws-test-buttons button {
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}

.ws-checklist {
  display: grid;
  gap: 10px;
}

.ws-checklist span {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.07);
  color: rgba(255,255,255,.72);
}

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

  .ws-test-buttons {
    grid-template-columns: 1fr;
  }
}


/* Stage 6.1 WS Flash Debug */
.receiver-ws-flash {
  background: #ffffff !important;
  color: #111 !important;
  filter: brightness(2);
}

.receiver-ws-flash .receiver-content,
.receiver-ws-flash .receiver-logo,
.receiver-ws-flash h1,
.receiver-ws-flash p,
.receiver-ws-flash small {
  color: #111 !important;
  text-shadow: none !important;
}

.receiver-ws-flash .receiver-flash {
  opacity: 1 !important;
}


/* Stage 6.2: Telefon WS bağlantı rozeti */
.ws-debug-badge {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 99999;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 55, 55, .9);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 0 20px rgba(0,0,0,.35);
}

.ws-debug-badge.ok {
  background: rgba(22, 180, 88, .95);
}


/* Stage 6.4: Telefon senkron kalibrasyonu */
.sync-cal-box {
  position: fixed;
  right: 12px;
  top: 12px;
  z-index: 99998;
  width: min(260px, calc(100vw - 24px));
  color: #fff;
  font-family: inherit;
}

.sync-cal-box button {
  width: 100%;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.62);
  color: #fff;
  font-weight: 900;
  backdrop-filter: blur(12px);
}

.sync-cal-panel {
  display: none;
  margin-top: 8px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 0 28px rgba(0,0,0,.34);
}

.sync-cal-box.open .sync-cal-panel {
  display: grid;
  gap: 8px;
}

.sync-cal-panel label {
  font-size: 13px;
  font-weight: 900;
}

.sync-cal-panel input {
  width: 100%;
  accent-color: #a855ff;
}

.sync-cal-panel small {
  color: rgba(255,255,255,.68);
  line-height: 1.35;
}


/* Stage 6.5: Panelden iOS / Android kalibrasyonu */
.os-calibration-box {
  margin-top: 22px;
  padding: 18px;
  border-radius: 20px;
  background: rgba(0,0,0,.32);
  border: 1px solid rgba(255,255,255,.10);
  display: grid;
  gap: 14px;
}

.os-calibration-box h3 {
  margin: 0 0 2px;
  font-size: 20px;
  letter-spacing: -.035em;
}

.os-calibration-box label {
  display: grid;
  gap: 8px;
  color: rgba(255,255,255,.78);
  font-weight: 850;
}

.os-calibration-box label b {
  color: #fff;
}

.os-calibration-box input {
  width: 100%;
  accent-color: #a855ff;
}

.os-calibration-box small {
  color: rgba(255,255,255,.62);
  line-height: 1.45;
}

.sync-cal-box {
  display: none !important;
}


/* Stage 7: WebSocket Audio Sync */
.audio-ws-card {
  grid-column: span 2;
}

.audio-mode-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.audio-mode-grid label {
  display: grid;
  gap: 8px;
  color: rgba(255,255,255,.76);
  font-weight: 850;
}

.audio-mode-grid select,
.audio-mode-grid input[type="range"] {
  width: 100%;
}

.audio-mode-grid select {
  min-height: 50px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.32);
  color: #fff;
  font: inherit;
}

.audio-mode-grid select option {
  color: #111;
}

.audio-debug-values.compact {
  margin-top: 18px;
  grid-template-columns: repeat(4, 1fr);
}

.audio-bars {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.audio-bars .audio-meter {
  height: 42px;
}

@media (max-width: 1000px) {
  .audio-ws-card {
    grid-column: span 1;
  }

  .audio-mode-grid,
  .audio-debug-values.compact {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .audio-mode-grid,
  .audio-debug-values.compact {
    grid-template-columns: 1fr;
  }
}


/* Stage 7.1.1: Hazır konser presetleri görünürlük fix */
.concert-presets-card { grid-column: span 2; }
.concert-preset-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.concert-preset-grid button {
  min-height: 118px;
  padding: 18px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(circle at 30% 15%, rgba(255,255,255,.13), transparent 32%), linear-gradient(180deg, rgba(138,53,255,.22), rgba(0,0,0,.26));
  color: #fff;
  cursor: pointer;
  text-align: left;
}
.concert-preset-grid button:hover { border-color: rgba(185,133,255,.46); transform: translateY(-2px); }
.concert-preset-grid b { display:block; font-size:20px; letter-spacing:-.04em; }
.concert-preset-grid span { display:block; margin-top:8px; color:rgba(255,255,255,.62); font-size:13px; font-weight:750; }
@media (max-width:1000px){ .concert-presets-card{grid-column:span 1;} .concert-preset-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .concert-preset-grid{grid-template-columns:1fr;} }


/* Stage 7.2: Telefon katılım arayüzü */
.receiver-join-landing {
  position: fixed;
  inset: 0;
  z-index: 99990;
  min-height: 100vh;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 18px;
  padding: 22px 20px 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(138,53,255,.32), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.10), transparent 42%),
    #030307;
  color: #fff;
  overflow-y: auto;
}

.receiver-join-landing.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}

.receiver-poster-wrap {
  display: grid;
  place-items: center;
  min-height: 0;
}

.receiver-poster {
  width: min(100%, 420px);
  max-height: 52vh;
  object-fit: cover;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 28px 90px rgba(0,0,0,.45), 0 0 45px rgba(138,53,255,.20);
}

.receiver-poster-fallback {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: 28px;
  text-align: center;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.16), transparent 32%),
    linear-gradient(135deg, rgba(138,53,255,.40), rgba(0,0,0,.35));
}

.receiver-poster-fallback span {
  font-size: 54px;
  font-weight: 950;
  letter-spacing: -.08em;
}

.receiver-poster-fallback b {
  display: block;
  max-width: 90%;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -.045em;
}

.receiver-join-content {
  width: min(100%, 460px);
  margin: 0 auto;
  text-align: center;
}

.receiver-eyebrow {
  display: inline-flex;
  margin-bottom: 8px;
  color: #c9a7ff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}

.receiver-join-content h1 {
  margin: 0;
  font-size: clamp(30px, 9vw, 54px);
  line-height: .96;
  letter-spacing: -.07em;
}

.receiver-join-content p {
  margin: 12px auto 18px;
  color: rgba(255,255,255,.72);
  line-height: 1.45;
}

.receiver-join-main-btn {
  width: min(100%, 360px);
  min-height: 62px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffffff, #c7a7ff);
  color: #12021f;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.025em;
  box-shadow: 0 0 34px rgba(255,255,255,.18), 0 16px 42px rgba(138,53,255,.28);
}

.receiver-join-content small {
  display: block;
  margin-top: 12px;
  color: rgba(255,255,255,.52);
}

.receiver-synca-logo {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: #fff;
  text-decoration: none;
  font-weight: 950;
  font-size: 23px;
  letter-spacing: -.07em;
  opacity: .9;
}

.receiver-synca-logo span {
  color: #b985ff;
}

.receiver-started .receiver-join-landing {
  display: none;
}

/* Eski katılım/izin butonları ana ekranda karışmasın */
.receiver-started #enableTorchBtn {
  display: none !important;
}

/* Event detail poster form */
.poster-settings-card {
  display: grid;
  gap: 12px;
}

.poster-form {
  display: grid;
  gap: 12px;
}

.poster-form label {
  display: grid;
  gap: 8px;
  color: rgba(255,255,255,.78);
  font-weight: 850;
}

.poster-form input {
  min-height: 52px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.32);
  color: #fff;
  font: inherit;
}

@media (max-height: 760px) {
  .receiver-poster {
    max-height: 43vh;
  }

  .receiver-join-content h1 {
    font-size: 30px;
  }

  .receiver-join-main-btn {
    min-height: 56px;
  }
}


/* Stage 7.2.1: Event poster upload fix */
.auth-card.wide {
  width: min(760px, 100%);
}

.synca-form small {
  display: block;
  margin-top: 7px;
  color: rgba(255,255,255,.58);
  line-height: 1.35;
}

.form-grid.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.event-poster-preview {
  width: min(220px, 100%);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 18px 48px rgba(0,0,0,.25);
}

.poster-settings-card p b {
  color: #fff;
}

@media (max-width: 680px) {
  .form-grid.two {
    grid-template-columns: 1fr;
  }
}


/* Stage 7.2.2: Poster phone visibility fix */
.receiver-poster-fallback.hidden-fallback {
  display: none;
}
.receiver-poster-fallback.hidden-fallback.show {
  display: grid;
}


/* Stage 7.2.3: Clean Receiver Join */
.receiver-body {
  margin: 0;
  min-height: 100vh;
  background: #030307;
  color: #fff;
  overscroll-behavior: none;
}

.receiver-clean-landing {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 18px;
  padding: max(18px, env(safe-area-inset-top)) 20px max(16px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 0%, rgba(138,53,255,.34), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.10), transparent 42%),
    #030307;
  overflow-y: auto;
}

.receiver-clean-landing.is-hidden {
  display: none;
}

.receiver-clean-poster-area {
  display: grid;
  place-items: center;
  min-height: 0;
}

.receiver-clean-poster {
  width: min(100%, 430px);
  max-height: 52vh;
  object-fit: cover;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 24px 80px rgba(0,0,0,.50), 0 0 45px rgba(138,53,255,.22);
}

.receiver-clean-fallback {
  aspect-ratio: 4 / 5;
  place-items: center;
  padding: 28px;
  text-align: center;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.15), transparent 33%),
    linear-gradient(135deg, rgba(138,53,255,.42), rgba(0,0,0,.30));
}

.receiver-clean-fallback span {
  display: block;
  font-size: 50px;
  font-weight: 950;
  letter-spacing: -.08em;
}

.receiver-clean-fallback b {
  display: block;
  max-width: 90%;
  margin-top: 12px;
  font-size: 24px;
  line-height: 1.08;
  letter-spacing: -.045em;
}

.receiver-clean-content {
  width: min(100%, 460px);
  margin: 0 auto;
  text-align: center;
}

.receiver-clean-content span {
  color: #c9a7ff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .12em;
}

.receiver-clean-content h1 {
  margin: 8px 0 0;
  font-size: clamp(30px, 9vw, 54px);
  line-height: .96;
  letter-spacing: -.07em;
}

.receiver-clean-content p {
  margin: 12px auto 18px;
  color: rgba(255,255,255,.72);
  line-height: 1.45;
}

.receiver-clean-join-btn {
  width: min(100%, 360px);
  min-height: 62px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffffff, #c7a7ff);
  color: #12021f;
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.025em;
  box-shadow: 0 0 34px rgba(255,255,255,.18), 0 16px 42px rgba(138,53,255,.28);
}

.receiver-clean-content small {
  display: block;
  margin-top: 12px;
  color: rgba(255,255,255,.55);
}

.receiver-clean-logo {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  font-size: 23px;
  font-weight: 950;
  letter-spacing: -.07em;
}

.receiver-clean-logo span {
  color: #b985ff;
}

.receiver-live-screen {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background:
    radial-gradient(circle at 50% 10%, rgba(138,53,255,.25), transparent 40%),
    #030307;
  color: #fff;
  overflow: hidden;
}

.receiver-live-screen.is-active {
  display: grid;
}

.receiver-live-content {
  position: relative;
  z-index: 3;
  text-align: center;
}

.receiver-live-content h1 {
  margin: 0;
  font-size: clamp(50px, 15vw, 96px);
  line-height: .9;
  letter-spacing: -.09em;
}

.receiver-live-content h1 span {
  color: #b985ff;
}

.receiver-live-content p {
  margin: 16px 0 6px;
  color: rgba(255,255,255,.76);
  font-size: 18px;
}

.receiver-live-content small {
  color: rgba(255,255,255,.48);
}

.receiver-live-content small.ok {
  color: #9cffc0;
}

.screen-flash {
  position: fixed;
  inset: 0;
  z-index: 2;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

.screen-flash.on {
  opacity: 1;
}

@media (max-height: 760px) {
  .receiver-clean-poster {
    max-height: 42vh;
  }

  .receiver-clean-content h1 {
    font-size: 30px;
  }

  .receiver-clean-join-btn {
    min-height: 56px;
  }
}


/* Stage 7.2.4: Event create panel + inactive receiver */
.receiver-ended-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 50% 10%, rgba(138,53,255,.28), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.08), transparent 42%),
    #030307;
  color: #fff;
}

.receiver-ended-card {
  width: min(520px, 100%);
  padding: 34px;
  border-radius: 30px;
  text-align: center;
  border: 1px solid rgba(138,53,255,.34);
  background: linear-gradient(180deg, rgba(18,10,34,.86), rgba(5,4,10,.92));
  box-shadow: 0 0 60px rgba(138,53,255,.16);
}

.receiver-ended-logo {
  display: inline-flex;
  margin-bottom: 22px;
  color: #fff;
  text-decoration: none;
  font-size: 34px;
  font-weight: 950;
  letter-spacing: -.08em;
}

.receiver-ended-logo span {
  color: #b985ff;
}

.receiver-ended-card > span {
  color: #c9a7ff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .13em;
}

.receiver-ended-card h1 {
  margin: 10px 0 12px;
  font-size: clamp(34px, 8vw, 56px);
  line-height: .95;
  letter-spacing: -.065em;
}

.receiver-ended-card p {
  margin: 0;
  color: rgba(255,255,255,.68);
  line-height: 1.55;
}

.event-create-page {
  min-height: 100vh;
  padding: 150px 24px 80px;
  background:
    radial-gradient(circle at 50% 12%, rgba(138,53,255,.26), transparent 36%),
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.07), transparent 42%),
    #030307;
}

.event-create-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 28px;
  align-items: stretch;
}

.event-create-intro,
.event-create-card {
  border-radius: 32px;
  border: 1px solid rgba(138,53,255,.34);
  background: linear-gradient(180deg, rgba(18,10,34,.78), rgba(5,4,10,.90));
  box-shadow: 0 0 60px rgba(138,53,255,.12), inset 0 1px 0 rgba(255,255,255,.06);
}

.event-create-intro {
  padding: 34px;
  display: grid;
  align-content: center;
}

.event-create-intro h1 {
  margin: 12px 0 14px;
  font-size: clamp(44px, 6vw, 84px);
  line-height: .92;
  letter-spacing: -.075em;
}

.event-create-intro p {
  margin: 0;
  color: rgba(255,255,255,.70);
  font-size: 18px;
  line-height: 1.55;
}

.poster-size-box {
  margin-top: 28px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.09);
  display: grid;
  gap: 6px;
}

.poster-size-box b {
  color: #c9a7ff;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.poster-size-box strong {
  font-size: 34px;
  letter-spacing: -.055em;
}

.poster-size-box span {
  color: rgba(255,255,255,.60);
}

.event-create-card {
  padding: 28px;
}

.event-create-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.event-create-form label {
  display: grid;
  gap: 9px;
  color: rgba(255,255,255,.82);
  font-weight: 850;
}

.event-create-form label.full,
.event-create-form .full {
  grid-column: 1 / -1;
}

.event-create-form input {
  width: 100%;
  min-height: 54px;
  box-sizing: border-box;
  padding: 0 15px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(0,0,0,.36);
  color: #fff;
  font: inherit;
}

.event-create-form input[type="file"] {
  padding: 14px;
  height: auto;
  color: rgba(255,255,255,.72);
}

.event-create-form small {
  color: rgba(255,255,255,.56);
  line-height: 1.35;
}

.event-create-form .btn {
  min-height: 60px;
  border: 0;
  cursor: pointer;
}

@media (max-width: 920px) {
  .event-create-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .event-create-page {
    padding: 120px 16px 60px;
  }

  .event-create-form {
    grid-template-columns: 1fr;
  }

  .event-create-intro,
  .event-create-card {
    padding: 22px;
    border-radius: 24px;
  }
}


/* Stage 7.2.5: Event detail UI cleanup */
.event-detail-page-v2 {
  min-height: 100vh;
  padding: 145px 24px 90px;
  background:
    radial-gradient(circle at 50% 10%, rgba(138,53,255,.22), transparent 36%),
    radial-gradient(circle at 80% 85%, rgba(255,255,255,.06), transparent 36%),
    #030307;
  color: #fff;
}

.event-detail-hero-v2,
.event-detail-layout-v2 {
  width: min(1180px, 100%);
  margin-inline: auto;
}

.event-detail-hero-v2 {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
  margin-bottom: 28px;
}

.event-detail-hero-v2 h1 {
  margin: 10px 0 10px;
  font-size: clamp(44px, 6vw, 84px);
  line-height: .92;
  letter-spacing: -.075em;
}

.event-detail-hero-v2 p {
  margin: 0;
  max-width: 700px;
  color: rgba(255,255,255,.68);
  font-size: 18px;
  line-height: 1.55;
}

.event-status-pill {
  min-width: 118px;
  min-height: 42px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 950;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
}

.event-status-pill.active {
  color: #baffd0;
  background: rgba(45,255,137,.12);
  border-color: rgba(45,255,137,.24);
}

.event-status-pill.draft {
  color: #ffe6a6;
  background: rgba(255,196,77,.12);
  border-color: rgba(255,196,77,.24);
}

.event-status-pill.completed {
  color: #c9d7ff;
  background: rgba(100,130,255,.12);
  border-color: rgba(100,130,255,.24);
}

.event-status-pill.cancelled {
  color: #ffb6b6;
  background: rgba(255,80,80,.12);
  border-color: rgba(255,80,80,.24);
}

.event-detail-layout-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}

.event-main-card-v2,
.poster-card-v2,
.qr-card-v2 {
  border-radius: 30px;
  border: 1px solid rgba(138,53,255,.32);
  background: linear-gradient(180deg, rgba(18,10,34,.82), rgba(5,4,10,.92));
  box-shadow: 0 0 54px rgba(138,53,255,.10), inset 0 1px 0 rgba(255,255,255,.06);
}

.event-main-card-v2 {
  padding: 28px;
}

.event-info-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.event-info-grid-v2 div,
.event-stats-row-v2 article {
  padding: 18px;
  border-radius: 20px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
}

.event-info-grid-v2 span,
.event-stats-row-v2 span,
.join-link-box-v2 label {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.54);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.event-info-grid-v2 strong {
  font-size: 18px;
  letter-spacing: -.035em;
}

.event-stats-row-v2 {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.event-stats-row-v2 b {
  display: block;
  font-size: 34px;
  letter-spacing: -.06em;
}

.join-link-box-v2 {
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
}

.join-link-box-v2 div {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 10px;
}

.join-link-box-v2 input,
.event-status-form-v2 select,
.poster-upload-v2 input {
  min-height: 52px;
  box-sizing: border-box;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.34);
  color: #fff;
  font: inherit;
}

.join-link-box-v2 button {
  border: 0;
  border-radius: 14px;
  background: #fff;
  color: #13031d;
  font-weight: 950;
  cursor: pointer;
}

.event-action-grid-v2 {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.action-card {
  min-height: 92px;
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 7px;
  border-radius: 20px;
  text-decoration: none;
  color: #fff;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.055);
  transition: transform .18s ease, border-color .18s ease;
}

.action-card:hover {
  transform: translateY(-2px);
  border-color: rgba(185,133,255,.44);
}

.action-card.primary {
  background: linear-gradient(135deg, rgba(138,53,255,.42), rgba(185,133,255,.14));
  border-color: rgba(185,133,255,.36);
}

.action-card b {
  font-size: 19px;
  letter-spacing: -.04em;
}

.action-card span {
  color: rgba(255,255,255,.60);
  line-height: 1.35;
}

.event-status-form-v2 {
  margin-top: 18px;
  padding: 18px;
  border-radius: 22px;
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 12px;
  align-items: end;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
}

.event-status-form-v2 label,
.poster-upload-v2 label {
  display: grid;
  gap: 8px;
  color: rgba(255,255,255,.78);
  font-weight: 850;
}

.event-status-form-v2 .btn {
  min-height: 52px;
  border: 0;
}

.delete-event-link-v2 {
  margin-top: 14px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 999px;
  color: #ffb7b7;
  text-decoration: none;
  border: 1px solid rgba(255,80,80,.30);
  background: rgba(255,80,80,.08);
  font-weight: 850;
}

.event-side-v2 {
  display: grid;
  gap: 18px;
}

.poster-card-v2,
.qr-card-v2 {
  padding: 22px;
}

.side-card-head-v2 h2 {
  margin: 6px 0 16px;
  font-size: 30px;
  letter-spacing: -.055em;
}

.poster-preview-v2 {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 58px rgba(0,0,0,.28);
}

.poster-empty-v2 {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 22px;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.14), transparent 35%),
    rgba(0,0,0,.26);
  border: 1px solid rgba(255,255,255,.10);
}

.poster-empty-v2 b {
  font-size: 42px;
  letter-spacing: -.08em;
}

.poster-empty-v2 span {
  color: rgba(255,255,255,.58);
}

.poster-upload-v2 {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.poster-upload-v2 input[type="file"] {
  padding: 13px;
  height: auto;
}

.poster-upload-v2 small {
  color: rgba(255,255,255,.55);
  line-height: 1.35;
}

.qr-image-v2 {
  width: 100%;
  border-radius: 22px;
  background: #fff;
  padding: 12px;
  box-sizing: border-box;
}

.qr-card-v2 .btn {
  width: 100%;
  margin-top: 14px;
  min-height: 52px;
}

@media (max-width: 1050px) {
  .event-detail-layout-v2 {
    grid-template-columns: 1fr;
  }

  .event-side-v2 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 720px) {
  .event-detail-page-v2 {
    padding: 120px 16px 60px;
  }

  .event-detail-hero-v2 {
    display: grid;
    align-items: start;
  }

  .event-info-grid-v2,
  .event-stats-row-v2,
  .event-action-grid-v2,
  .event-status-form-v2,
  .event-side-v2,
  .join-link-box-v2 div {
    grid-template-columns: 1fr;
  }

  .event-main-card-v2,
  .poster-card-v2,
  .qr-card-v2 {
    padding: 18px;
    border-radius: 24px;
  }
}


/* Stage 7.2.6: Event edit page */
.poster-edit-btn-v2 {
  width: 100%;
  margin-top: 16px;
  min-height: 54px;
}

.edit-event-poster-preview {
  width: min(320px, 100%);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 70px rgba(0,0,0,.34);
  margin-top: 28px;
}

.event-create-form select {
  width: 100%;
  min-height: 54px;
  box-sizing: border-box;
  padding: 0 15px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(0,0,0,.36);
  color: #fff;
  font: inherit;
}

.event-create-form select option {
  color: #111;
}

.btn.center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}


/* Stage 7.3: Clean Live Control Console */
.live-console-page {
  min-height: 100vh;
  padding: 135px 24px 90px;
  background:
    radial-gradient(circle at 50% 8%, rgba(138,53,255,.23), transparent 36%),
    radial-gradient(circle at 90% 72%, rgba(255,255,255,.06), transparent 34%),
    #030307;
  color: #fff;
}

.live-console-hero,
.live-top-grid,
.live-console-layout {
  width: min(1280px, 100%);
  margin-inline: auto;
}

.live-console-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 22px;
}

.live-console-hero h1 {
  margin: 8px 0 8px;
  font-size: clamp(42px, 5.8vw, 78px);
  line-height: .92;
  letter-spacing: -.075em;
}

.live-console-hero p {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 18px;
  line-height: 1.5;
}

.live-console-status {
  min-width: 160px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(138,53,255,.34);
  background: rgba(0,0,0,.26);
  text-align: center;
}

.live-console-status span {
  display: inline-flex;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.72);
  font-weight: 850;
  font-size: 12px;
}

.live-console-status span.ok {
  background: rgba(35,255,137,.14);
  color: #bcffd4;
}

.live-console-status b {
  display: block;
  margin-top: 10px;
  font-size: 42px;
  line-height: 1;
  letter-spacing: -.06em;
}

.live-console-status small {
  color: rgba(255,255,255,.52);
}

.live-top-grid {
  display: grid;
  grid-template-columns: 180px 150px 130px 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

.live-mini-card {
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
}

.live-mini-card span {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,.50);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.live-mini-card b {
  font-size: 24px;
  letter-spacing: -.04em;
}

.live-mini-card input {
  width: 100%;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  color: #fff;
  box-sizing: border-box;
}

.live-console-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.live-side-panel,
.live-main-panel {
  display: grid;
  gap: 16px;
}

.live-control-card {
  padding: 20px;
  border-radius: 26px;
  border: 1px solid rgba(138,53,255,.30);
  background: linear-gradient(180deg, rgba(18,10,34,.78), rgba(5,4,10,.92));
  box-shadow: 0 0 40px rgba(138,53,255,.09), inset 0 1px 0 rgba(255,255,255,.05);
}

.live-control-card.main-section {
  padding: 24px;
}

.live-section-title h2 {
  margin: 5px 0 14px;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.055em;
}

.live-section-title.horizontal {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.live-section-title.horizontal h2 {
  margin-bottom: 0;
}

.live-section-title.horizontal p {
  margin: 0;
  color: rgba(255,255,255,.58);
}

.ws-url-box {
  padding: 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
}

.ws-url-box small {
  display: block;
  color: rgba(255,255,255,.46);
  margin-bottom: 6px;
}

.ws-url-box code {
  color: #d8bbff;
  word-break: break-all;
}

.live-button-row {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.live-button-row .btn {
  min-height: 48px;
  border: 0;
}

.console-note {
  margin: 12px 0 0;
  color: rgba(255,255,255,.58);
  line-height: 1.42;
}

.os-calibration-compact {
  display: grid;
  gap: 14px;
}

.os-calibration-compact label,
.audio-console-grid label {
  display: grid;
  gap: 8px;
  color: rgba(255,255,255,.78);
  font-weight: 850;
}

.os-calibration-compact b,
.audio-console-grid b {
  color: #fff;
}

.os-calibration-compact input,
.audio-console-grid input {
  width: 100%;
  accent-color: #a855ff;
}

.quick-test-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.quick-test-grid button {
  min-height: 46px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}

.concert-preset-grid.clean {
  grid-template-columns: repeat(4, 1fr);
}

.audio-console-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.audio-console-grid select,
.saved-pattern-send-row select {
  min-height: 52px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.34);
  color: #fff;
  font: inherit;
}

.audio-console-grid select option,
.saved-pattern-send-row option {
  color: #111;
}

.audio-live-stats {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.audio-live-stats article {
  padding: 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.07);
}

.audio-live-stats span {
  display: block;
  color: rgba(255,255,255,.48);
  font-size: 12px;
  font-weight: 850;
}

.audio-live-stats b {
  display: block;
  margin-top: 4px;
  font-size: 24px;
}

.audio-bars.clean {
  margin-top: 14px;
}

.saved-pattern-send-row {
  display: grid;
  grid-template-columns: 1fr 150px;
  gap: 12px;
}

.saved-pattern-send-row .btn {
  min-height: 52px;
}

@media (max-width: 1100px) {
  .live-console-layout {
    grid-template-columns: 1fr;
  }

  .live-side-panel {
    grid-template-columns: repeat(3, 1fr);
  }

  .concert-preset-grid.clean,
  .audio-console-grid,
  .audio-live-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .live-top-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .live-mini-card.link-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .live-console-page {
    padding: 115px 16px 60px;
  }

  .live-console-hero {
    display: grid;
  }

  .live-side-panel,
  .live-top-grid,
  .concert-preset-grid.clean,
  .audio-console-grid,
  .audio-live-stats,
  .saved-pattern-send-row {
    grid-template-columns: 1fr;
  }

  .live-section-title.horizontal {
    display: grid;
  }
}


/* Stage 7.4: Sahne ritimleri + loop */
.scene-rhythm-tools {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.scene-rhythm-tools p {
  margin: 0;
  color: rgba(255,255,255,.58);
}

.loop-toggle {
  min-height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  background: rgba(138,53,255,.16);
  border: 1px solid rgba(185,133,255,.32);
  color: #fff;
  font-weight: 950;
  cursor: pointer;
}

.loop-toggle input {
  width: 18px;
  height: 18px;
  accent-color: #a855ff;
}

.concert-preset-grid.clean .custom-scene-rhythm {
  background:
    radial-gradient(circle at 30% 15%, rgba(255,255,255,.18), transparent 32%),
    linear-gradient(180deg, rgba(34,197,94,.22), rgba(0,0,0,.28));
  border-color: rgba(34,197,94,.22);
}

.concert-preset-grid.clean .custom-scene-rhythm span {
  color: rgba(210,255,224,.68);
}

@media (max-width: 760px) {
  .scene-rhythm-tools {
    justify-items: start;
  }
}


/* Stage 7.4.1: Loop fix */
.stop-loop-btn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,90,90,.32);
  background: rgba(255,80,80,.10);
  color: #ffd0d0;
  font-weight: 950;
  cursor: pointer;
}


/* Stage 7.4.2: Hard Loop Fix */
.loop-toggle input:checked + span::after {
  content: " aktif";
  color: #9cffc0;
}


/* Stage 7.4.3: Direct loop stop */
.stop-loop-btn {
  background: rgba(255,50,50,.16) !important;
  border-color: rgba(255,80,80,.44) !important;
}


/* Stage 7.4.4: Status update alert */
.form-alert.success {
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(34,197,94,.13);
  border: 1px solid rgba(34,197,94,.28);
  color: #baffd0;
  font-weight: 850;
}


/* Stage 7.5: Dashboard profile event logs */
.dashboard-v2-page,
.profile-page-v2 {
  min-height: 100vh;
  padding: 135px 24px 90px;
  background:
    radial-gradient(circle at 50% 9%, rgba(138,53,255,.22), transparent 36%),
    radial-gradient(circle at 92% 80%, rgba(255,255,255,.06), transparent 34%),
    #030307;
  color: #fff;
}

.dashboard-v2-hero,
.dashboard-stats-v2,
.dashboard-section-head,
.dashboard-event-grid-v2,
.dashboard-bottom-grid-v2,
.profile-shell-v2 {
  width: min(1180px, 100%);
  margin-inline: auto;
}

.dashboard-v2-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.dashboard-v2-hero h1 {
  margin: 10px 0 12px;
  font-size: clamp(42px, 6vw, 78px);
  line-height: .94;
  letter-spacing: -.075em;
}

.dashboard-v2-hero p,
.dashboard-section-head p {
  margin: 0;
  color: rgba(255,255,255,.68);
  font-size: 18px;
  line-height: 1.55;
}

.dashboard-profile-card {
  width: 320px;
  padding: 18px;
  border-radius: 26px;
  border: 1px solid rgba(138,53,255,.30);
  background: rgba(0,0,0,.26);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
}

.profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #7c2cff, #c084fc);
  font-weight: 950;
  font-size: 28px;
  box-shadow: 0 0 30px rgba(138,53,255,.35);
}

.profile-avatar.large {
  width: 92px;
  height: 92px;
  border-radius: 28px;
  font-size: 46px;
  margin-bottom: 22px;
}

.dashboard-profile-card b,
.dashboard-profile-card span {
  display: block;
}

.dashboard-profile-card span {
  color: rgba(255,255,255,.58);
  margin-top: 4px;
}

.dashboard-profile-card a {
  grid-column: 1 / -1;
  min-height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-weight: 850;
}

.dashboard-stats-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}

.dashboard-stats-v2 article,
.dashboard-log-card {
  border-radius: 26px;
  border: 1px solid rgba(138,53,255,.30);
  background: linear-gradient(180deg, rgba(18,10,34,.78), rgba(5,4,10,.92));
  box-shadow: 0 0 45px rgba(138,53,255,.08);
}

.dashboard-stats-v2 article {
  padding: 20px;
}

.dashboard-stats-v2 span {
  display: block;
  margin-bottom: 10px;
  color: rgba(255,255,255,.54);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.dashboard-stats-v2 b {
  font-size: 34px;
  letter-spacing: -.06em;
}

.dashboard-section-head {
  margin-bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: end;
}

.dashboard-section-head.top {
  margin-top: 20px;
}

.dashboard-section-head h2 {
  margin: 8px 0 8px;
  font-size: clamp(36px, 4.2vw, 58px);
  line-height: .94;
  letter-spacing: -.065em;
}

.dashboard-section-head.compact {
  width: auto;
  margin: 0 0 12px;
  display: block;
}

.dashboard-section-head.compact h2 {
  font-size: 30px;
}

.dashboard-event-grid-v2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.dashboard-event-card-v2 {
  display: block;
  color: #fff;
  text-decoration: none;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(138,53,255,.30);
  background: linear-gradient(180deg, rgba(18,10,34,.78), rgba(5,4,10,.92));
  box-shadow: 0 0 42px rgba(138,53,255,.08);
  transition: transform .18s ease, border-color .18s ease;
}

.dashboard-event-card-v2:hover {
  transform: translateY(-4px);
  border-color: rgba(185,133,255,.56);
}

.event-poster-wrap-v2 {
  position: relative;
  aspect-ratio: 4 / 5;
  background: rgba(255,255,255,.05);
}

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

.poster-fallback-v2 {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
  box-sizing: border-box;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.16), transparent 33%),
    linear-gradient(135deg, rgba(138,53,255,.32), rgba(0,0,0,.30));
}

.poster-fallback-v2 b {
  display: block;
  font-size: 36px;
  letter-spacing: -.08em;
}

.poster-fallback-v2 span {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.68);
}

.event-status-mini {
  position: absolute;
  top: 12px;
  left: 12px;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-style: normal;
  font-weight: 950;
  font-size: 12px;
  background: rgba(0,0,0,.64);
  backdrop-filter: blur(10px);
}

.event-status-mini.active { color: #baffd0; }
.event-status-mini.draft { color: #ffe6a6; }
.event-status-mini.completed { color: #c9d7ff; }
.event-status-mini.cancelled { color: #ffb6b6; }

.dashboard-event-info-v2 {
  padding: 16px;
}

.dashboard-event-info-v2 h3 {
  margin: 0 0 8px;
  font-size: 21px;
  line-height: 1.05;
  letter-spacing: -.045em;
}

.dashboard-event-info-v2 p {
  margin: 0 0 8px;
  color: rgba(255,255,255,.72);
  font-weight: 850;
}

.dashboard-event-info-v2 span {
  color: rgba(255,255,255,.52);
  font-size: 13px;
}

.dashboard-bottom-grid-v2 {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.dashboard-log-card {
  padding: 22px;
}

.muted {
  color: rgba(255,255,255,.58);
}

.log-list-v2,
.old-event-list-v2 {
  display: grid;
  gap: 10px;
}

.log-list-v2 div,
.old-event-list-v2 a {
  padding: 14px;
  border-radius: 16px;
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.07);
}

.log-list-v2 b,
.old-event-list-v2 b {
  display: block;
  color: #fff;
}

.log-list-v2 span,
.old-event-list-v2 span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.54);
}

.log-list-v2 p {
  margin: 8px 0 0;
  color: rgba(255,255,255,.68);
}

.old-event-list-v2 a {
  color: #fff;
  text-decoration: none;
}

.dashboard-empty {
  width: min(1180px, 100%);
  margin-inline: auto;
}

.profile-shell-v2 {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 24px;
  align-items: stretch;
}

.profile-intro-v2,
.profile-card-v2 {
  border-radius: 30px;
  border: 1px solid rgba(138,53,255,.30);
  background: linear-gradient(180deg, rgba(18,10,34,.78), rgba(5,4,10,.92));
  box-shadow: 0 0 45px rgba(138,53,255,.08);
}

.profile-intro-v2 {
  padding: 34px;
  display: grid;
  align-content: center;
}

.profile-intro-v2 h1 {
  margin: 10px 0 12px;
  font-size: clamp(42px, 5vw, 70px);
  line-height: .94;
  letter-spacing: -.075em;
}

.profile-intro-v2 p {
  margin: 0;
  color: rgba(255,255,255,.66);
  font-size: 18px;
  line-height: 1.55;
}

.profile-card-v2 {
  padding: 28px;
}

.profile-form-v2 {
  display: grid;
  gap: 16px;
}

.profile-form-v2 label {
  display: grid;
  gap: 8px;
  color: rgba(255,255,255,.80);
  font-weight: 850;
}

.profile-form-v2 input,
.profile-form-v2 select {
  min-height: 54px;
  padding: 0 15px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(0,0,0,.36);
  color: #fff;
  font: inherit;
}

.profile-form-v2 select option {
  color: #111;
}

.profile-form-v2 .btn {
  min-height: 58px;
}

@media (max-width: 1050px) {
  .dashboard-event-grid-v2 {
    grid-template-columns: repeat(3, 1fr);
  }

  .dashboard-v2-hero,
  .profile-shell-v2 {
    grid-template-columns: 1fr;
    display: grid;
  }

  .dashboard-profile-card {
    width: auto;
  }
}

@media (max-width: 820px) {
  .dashboard-stats-v2,
  .dashboard-bottom-grid-v2 {
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-event-grid-v2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .dashboard-v2-page,
  .profile-page-v2 {
    padding: 115px 16px 60px;
  }

  .dashboard-v2-hero,
  .dashboard-section-head {
    display: grid;
    align-items: start;
  }

  .dashboard-stats-v2,
  .dashboard-bottom-grid-v2,
  .dashboard-event-grid-v2 {
    grid-template-columns: 1fr;
  }
}


/* Stage 7.6: Live screen artist background */
.receiver-live-screen.has-live-bg {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.receiver-live-screen.has-live-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 18%, rgba(138,53,255,.20), transparent 38%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
  pointer-events: none;
}

.receiver-live-screen.has-live-bg .receiver-live-content {
  padding: 18px 24px;
  border-radius: 26px;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.10);
}

.receiver-live-screen.has-live-bg .screen-flash {
  background: radial-gradient(circle at center, rgba(255,255,255,1), rgba(255,255,255,.72));
  mix-blend-mode: screen;
}

.live-bg-preview-box {
  margin-top: 18px;
  display: grid;
  gap: 8px;
}

.live-bg-preview-box span,
.live-bg-small-preview span {
  color: rgba(255,255,255,.62);
  font-weight: 850;
  font-size: 13px;
}

.live-bg-preview-box img {
  width: min(320px, 100%);
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 22px 70px rgba(0,0,0,.34);
}

.live-bg-small-preview {
  margin-top: 14px;
  display: grid;
  gap: 8px;
}

.live-bg-small-preview img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
}

/* Stage 8: Health & Test Panel */
.health-card-v8,.health-main-v8{border-color:rgba(34,197,94,.25)!important}
.health-grid-v8{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.health-grid-v8 div{padding:13px;border-radius:16px;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08)}
.health-grid-v8 span{display:block;margin-bottom:5px;color:rgba(255,255,255,.50);font-size:11px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
.health-grid-v8 b{font-size:22px;letter-spacing:-.045em}
.festival-test-grid-v8{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.festival-test-grid-v8 button{min-height:104px;padding:16px;border-radius:22px;border:1px solid rgba(34,197,94,.22);background:radial-gradient(circle at 30% 10%,rgba(255,255,255,.14),transparent 32%),linear-gradient(180deg,rgba(34,197,94,.16),rgba(0,0,0,.30));color:#fff;cursor:pointer;text-align:left}
.festival-test-grid-v8 button b{display:block;font-size:20px;letter-spacing:-.045em}
.festival-test-grid-v8 button span{display:block;margin-top:7px;color:rgba(210,255,224,.70)}
.test-checklist-v8{margin-top:14px;padding:15px;border-radius:18px;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.08);display:grid;gap:6px}
.test-checklist-v8 span{color:rgba(255,255,255,.62)}
.checklist-page-v8{min-height:100vh;padding:135px 24px 90px;background:radial-gradient(circle at 50% 10%,rgba(138,53,255,.22),transparent 36%),#030307;color:#fff}
.checklist-shell-v8{width:min(1050px,100%);margin:0 auto}
.checklist-shell-v8 h1{margin:10px 0 26px;font-size:clamp(42px,6vw,76px);line-height:.94;letter-spacing:-.075em}
.checklist-grid-v8{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.checklist-grid-v8 article{padding:22px;border-radius:24px;border:1px solid rgba(138,53,255,.30);background:linear-gradient(180deg,rgba(18,10,34,.78),rgba(5,4,10,.92))}
.checklist-grid-v8 b{font-size:22px}
.checklist-grid-v8 p{margin:10px 0 0;color:rgba(255,255,255,.66);line-height:1.5}
@media(max-width:1100px){.festival-test-grid-v8{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.festival-test-grid-v8,.checklist-grid-v8{grid-template-columns:1fr}}


/* Stage 8.2: iPad 12.9 Live Control Layout */
@media (min-width: 900px) and (max-width: 1400px) and (orientation: landscape) {
  body.ipad-live-control {
    overflow-x: hidden;
  }

  body.ipad-live-control .site-header {
    min-height: 68px;
    padding: 0 22px;
  }

  body.ipad-live-control .brand {
    transform: scale(.86);
    transform-origin: left center;
  }

  body.ipad-live-control .main-nav {
    gap: 18px;
  }

  body.ipad-live-control .main-nav a {
    font-size: 13px;
  }

  body.ipad-live-control .live-console-page {
    padding: 86px 14px 24px;
  }

  body.ipad-live-control .live-console-hero {
    margin-bottom: 10px;
    align-items: center;
  }

  body.ipad-live-control .live-console-hero h1 {
    font-size: 36px;
    margin: 4px 0;
    line-height: .94;
  }

  body.ipad-live-control .live-console-hero p {
    font-size: 13px;
    line-height: 1.35;
  }

  body.ipad-live-control .live-console-status {
    min-width: 118px;
    padding: 10px;
    border-radius: 18px;
  }

  body.ipad-live-control .live-console-status b {
    font-size: 30px;
    margin-top: 6px;
  }

  body.ipad-live-control .live-top-grid {
    grid-template-columns: 120px 105px 95px 1fr;
    gap: 8px;
    margin-bottom: 10px;
  }

  body.ipad-live-control .live-mini-card {
    padding: 9px 10px;
    border-radius: 15px;
  }

  body.ipad-live-control .live-mini-card span {
    font-size: 9px;
    margin-bottom: 4px;
  }

  body.ipad-live-control .live-mini-card b {
    font-size: 18px;
  }

  body.ipad-live-control .live-mini-card input {
    min-height: 30px;
    font-size: 12px;
  }

  body.ipad-live-control .live-console-layout {
    grid-template-columns: 255px minmax(0, 1fr);
    gap: 10px;
  }

  body.ipad-live-control .live-side-panel,
  body.ipad-live-control .live-main-panel {
    gap: 9px;
  }

  body.ipad-live-control .live-control-card {
    padding: 12px;
    border-radius: 18px;
  }

  body.ipad-live-control .live-control-card.main-section {
    padding: 14px;
  }

  body.ipad-live-control .live-section-title h2 {
    font-size: 20px;
    margin: 3px 0 9px;
  }

  body.ipad-live-control .live-section-title.horizontal {
    margin-bottom: 10px;
  }

  body.ipad-live-control .eyebrow {
    font-size: 9px;
    letter-spacing: .12em;
  }

  body.ipad-live-control .ws-url-box {
    display: none;
  }

  body.ipad-live-control .console-note {
    font-size: 12px;
    margin-top: 8px;
    line-height: 1.3;
  }

  body.ipad-live-control .live-button-row {
    margin-top: 8px;
    gap: 7px;
  }

  body.ipad-live-control .live-button-row .btn,
  body.ipad-live-control .btn {
    min-height: 38px;
    padding: 0 12px;
    font-size: 12px;
    border-radius: 12px;
  }

  body.ipad-live-control .health-grid-v8 {
    gap: 6px;
  }

  body.ipad-live-control .health-grid-v8 div {
    padding: 8px;
    border-radius: 12px;
  }

  body.ipad-live-control .health-grid-v8 span {
    font-size: 8px;
    margin-bottom: 3px;
  }

  body.ipad-live-control .health-grid-v8 b {
    font-size: 17px;
  }

  body.ipad-live-control .os-calibration-compact {
    gap: 9px;
  }

  body.ipad-live-control .os-calibration-compact label,
  body.ipad-live-control .audio-console-grid label {
    font-size: 12px;
    gap: 5px;
  }

  body.ipad-live-control .quick-test-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  body.ipad-live-control .quick-test-grid button {
    min-height: 36px;
    font-size: 12px;
    padding: 0 10px;
  }

  body.ipad-live-control .concert-preset-grid.clean {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  body.ipad-live-control .concert-preset-grid.clean button {
    min-height: 70px;
    padding: 11px;
    border-radius: 16px;
  }

  body.ipad-live-control .concert-preset-grid.clean button b {
    font-size: 15px;
    line-height: 1.05;
  }

  body.ipad-live-control .concert-preset-grid.clean button span {
    font-size: 11px;
    margin-top: 5px;
  }

  body.ipad-live-control .scene-rhythm-tools {
    gap: 5px;
  }

  body.ipad-live-control .scene-rhythm-tools p {
    font-size: 12px;
  }

  body.ipad-live-control .loop-toggle,
  body.ipad-live-control .stop-loop-btn {
    min-height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }

  body.ipad-live-control .festival-test-grid-v8 {
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }

  body.ipad-live-control .festival-test-grid-v8 button {
    min-height: 66px;
    padding: 10px;
    border-radius: 16px;
  }

  body.ipad-live-control .festival-test-grid-v8 button b {
    font-size: 15px;
    line-height: 1.05;
  }

  body.ipad-live-control .festival-test-grid-v8 button span {
    font-size: 11px;
    margin-top: 4px;
  }

  body.ipad-live-control .test-checklist-v8 {
    display: none;
  }

  body.ipad-live-control .audio-console-grid {
    grid-template-columns: 1.05fr 1fr 1fr 1fr;
    gap: 8px;
  }

  body.ipad-live-control .audio-console-grid select,
  body.ipad-live-control .saved-pattern-send-row select {
    min-height: 38px;
    font-size: 12px;
    border-radius: 12px;
  }

  body.ipad-live-control .audio-live-stats {
    margin-top: 9px;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
  }

  body.ipad-live-control .audio-live-stats article {
    padding: 8px;
    border-radius: 12px;
  }

  body.ipad-live-control .audio-live-stats span {
    font-size: 9px;
  }

  body.ipad-live-control .audio-live-stats b {
    font-size: 17px;
  }

  body.ipad-live-control .audio-bars.clean {
    margin-top: 8px;
  }

  body.ipad-live-control .audio-meter {
    height: 44px;
    border-radius: 14px;
  }

  body.ipad-live-control .audio-meter b {
    font-size: 11px;
  }

  body.ipad-live-control .live-main-panel .main-section:nth-child(1),
  body.ipad-live-control .live-main-panel .main-section:nth-child(2) {
    min-height: 0;
  }
}

/* iPad portrait: single column but compact */
@media (min-width: 760px) and (max-width: 1100px) and (orientation: portrait) {
  body.ipad-live-control .live-console-page {
    padding: 94px 18px 30px;
  }

  body.ipad-live-control .live-console-layout {
    grid-template-columns: 1fr;
  }

  body.ipad-live-control .live-side-panel {
    grid-template-columns: repeat(2, 1fr);
  }

  body.ipad-live-control .concert-preset-grid.clean,
  body.ipad-live-control .festival-test-grid-v8 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Stage 8.3: iPad giriş, ayrı ses bilgisayarı ve kaynak durumu */
.ipad-login-fab{display:block;position:fixed;right:18px;bottom:18px;z-index:9999;padding:15px 20px;border-radius:14px;background:#fff;color:#09090b;font-weight:800;text-decoration:none;box-shadow:0 12px 35px rgba(0,0,0,.35)}
.audio-source-status-card{display:flex;align-items:center;gap:12px;padding:14px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.035);margin-bottom:14px}.audio-source-status-card.large{padding:20px;margin-bottom:20px}.audio-source-dot{width:13px;height:13px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 5px rgba(239,68,68,.12);flex:0 0 auto}.audio-source-status-card.online .audio-source-dot{background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.14)}.audio-source-status-card div{display:grid;gap:2px}.audio-source-status-card small{opacity:.65;font-size:11px;letter-spacing:.12em}.audio-source-status-card b{font-size:18px}.audio-source-status-card em{font-style:normal;opacity:.68;font-size:12px}.audio-source-page{min-height:100vh;background:#08090d;color:#fff}.audio-source-shell{width:min(1100px,calc(100% - 32px));margin:auto;padding:44px 0}.audio-source-hero{margin-bottom:22px}.audio-source-hero h1{font-size:clamp(30px,5vw,58px);margin:8px 0}.audio-source-hero p{opacity:.72;max-width:760px}.audio-source-panel{padding:24px;border:1px solid rgba(255,255,255,.1);border-radius:24px;background:rgba(255,255,255,.035)}.audio-source-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}.audio-source-controls label{display:grid;gap:8px;font-size:13px}.audio-source-controls select,.audio-source-controls input{width:100%}.audio-source-controls select{padding:13px;border-radius:12px;background:#12141a;color:#fff;border:1px solid rgba(255,255,255,.12)}
@media (max-width:1180px),(pointer:coarse){.ipad-login-fab{display:block}.header-actions .login-link{display:inline-flex}}
@media (max-width:800px){.audio-source-controls{grid-template-columns:1fr 1fr}.audio-source-shell{padding:24px 0}.audio-source-panel{padding:16px}}
@media (max-width:520px){.audio-source-controls{grid-template-columns:1fr}.ipad-login-fab{left:14px;right:14px;text-align:center}}

/* Stage 8.4 - concert performance monitor */
.performance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.performance-grid>div{padding:12px;border:1px solid rgba(164,90,255,.2);border-radius:14px;background:rgba(9,5,18,.58)}.performance-grid span{display:block;font-size:11px;opacity:.68;text-transform:uppercase;letter-spacing:.05em}.performance-grid b{display:block;margin-top:5px;font-size:22px}.delivery-meter{height:12px;margin-top:14px;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.08)}.delivery-meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#7c3aed,#25e6a7);transition:width .25s ease}.performance-live-card{border-color:rgba(37,230,167,.28)}
@media(max-width:700px){.performance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.performance-grid b{font-size:19px}}


/* Stage 8.4.1 - Konser hizli kontrol cubugu */
.concert-quick-bar{position:sticky;top:78px;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 18px;padding:12px 14px;border:1px solid rgba(150,70,255,.35);border-radius:18px;background:rgba(9,5,18,.94);backdrop-filter:blur(14px);box-shadow:0 14px 40px rgba(0,0,0,.28)}
.concert-quick-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.concert-quick-actions .btn{min-height:44px}
.concert-quick-qr{display:flex;align-items:center;gap:10px;min-width:235px}
.concert-quick-qr img{width:66px;height:66px;background:#fff;border-radius:10px;padding:4px}
.concert-quick-qr div{display:grid;gap:2px}
.concert-quick-qr small{font-size:10px;letter-spacing:.12em;color:#b99adb}
.concert-quick-qr b{font-size:15px;color:#fff}
.concert-quick-qr a{font-size:12px;color:#c891ff}
@media(max-width:900px){.concert-quick-bar{top:8px;align-items:stretch;flex-direction:column}.concert-quick-actions{display:grid;grid-template-columns:1fr 1fr}.concert-quick-actions .btn{text-align:center}.concert-quick-qr{min-width:0}.concert-quick-qr img{width:58px;height:58px}}