:root {
  --night: #0b0807;
  --ember: #16100c;
  --card: #1a120d;
  --crimson: #a31a18;
  --crimson-bright: #cf2f27;
  --bronze: #c8965a;
  --bronze-light: #eccf9b;
  --parchment: #f0e4cf;
  --muted: #b8a78f;
  --line: rgba(200, 150, 90, 0.28);
  --serif: 'Cinzel', Georgia, 'Times New Roman', serif;
  --sans: 'Alegreya Sans', 'Segoe UI', Tahoma, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --plate: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--night);
  color: var(--parchment);
  font: 400 1.125rem/1.6 var(--sans);
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; }
:focus-visible { outline: 2px solid var(--bronze-light); outline-offset: 3px; }

/* Ust cubuk */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 12px var(--gutter);
  background: linear-gradient(180deg, rgba(11, 8, 7, 0.88), rgba(11, 8, 7, 0));
  transition: background-color 0.2s, box-shadow 0.2s;
}
.topbar.is-scrolled { background: var(--night); box-shadow: 0 1px 0 var(--line); }
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 1.05rem var(--serif);
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
}
.topnav { display: flex; gap: 26px; margin-right: auto; }
.topnav a {
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.15s;
}
.topnav a:hover { color: var(--bronze-light); }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(11, 8, 7, 0.55);
  color: var(--muted);
  font-size: 0.9rem;
  white-space: nowrap;
}
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: #e0a13c; }

/* Karsilama */
.hero {
  position: relative;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  padding: 88px var(--gutter) 64px;
  background: var(--night) url('gorsel/arkaplan.jpg') center 40% / cover no-repeat;
  isolation: isolate;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 50% 38% at 24% 68%, rgba(11, 8, 7, 0.68), rgba(11, 8, 7, 0)),
    linear-gradient(90deg, rgba(11, 8, 7, 0.52) 0%, rgba(11, 8, 7, 0.08) 52%, rgba(11, 8, 7, 0.34) 100%),
    linear-gradient(180deg, rgba(11, 8, 7, 0) 66%, var(--night) 100%);
}
.embers { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
}
.logo-title img { width: min(100%, 660px); filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.7)); }
.tagline {
  margin-top: 20px;
  font: 600 clamp(1.25rem, 2.2vw, 1.75rem)/1.3 var(--serif);
  color: var(--bronze-light);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
  text-wrap: balance;
}
.lede {
  max-width: 30em;
  margin-top: 12px;
  text-wrap: pretty;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }

/* Dugmeler: uclari sivri bronz plaka */
.btn-primary, .btn-submit {
  position: relative;
  display: inline-block;
  min-height: 56px;
  padding: 0;
  border: 0;
  background: linear-gradient(180deg, var(--bronze-light), #8a5f30);
  clip-path: var(--plate);
  color: #fff6e4;
  font: 600 1.15rem var(--serif);
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}
.btn-primary span, .btn-submit span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin: 2px;
  padding: 0 40px;
  background: linear-gradient(180deg, var(--crimson-bright), #7d1212);
  clip-path: var(--plate);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.btn-primary:hover, .btn-submit:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn-primary:active, .btn-submit:active { transform: translateY(1px); }
.btn-primary:focus-visible, .btn-submit:focus-visible { outline: 0; filter: brightness(1.3); }
.btn-ghost {
  padding: 8px 2px;
  border-bottom: 1px solid var(--bronze);
  color: var(--bronze-light);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.btn-ghost:hover { color: #fff; border-color: #fff; }

/* Hesap karti */
.auth-card {
  padding: 8px 24px 22px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--bronze);
  background: rgba(18, 12, 9, 0.84);
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.auth-tabs button {
  padding: 14px 4px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--muted);
  font: 600 1rem var(--serif);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.auth-tabs button:hover { color: var(--parchment); }
.auth-tabs button[aria-selected='true'] { color: var(--bronze-light); border-bottom-color: var(--crimson-bright); }
#auth-form { display: grid; gap: 14px; }
#auth-form label { display: grid; gap: 4px; font-size: 1rem; color: var(--muted); }
#auth-form label[hidden] { display: none; }
#auth-form input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(200, 150, 90, 0.35);
  border-radius: 2px;
  background: rgba(6, 4, 3, 0.75);
  color: var(--parchment);
  font: 500 1.05rem var(--sans);
  transition: border-color 0.15s, box-shadow 0.15s;
}
#auth-form input:hover { border-color: var(--bronze); }
#auth-form input:focus { outline: 0; border-color: var(--bronze-light); box-shadow: 0 0 0 2px rgba(236, 207, 155, 0.25); }
.btn-submit { width: 100%; margin-top: 4px; }
.btn-submit:disabled { filter: saturate(0.5) brightness(0.8); cursor: wait; transform: none; }
.auth-note { font-size: 0.95rem; line-height: 1.4; color: var(--muted); }
.auth-note.is-alert { color: var(--bronze-light); }
.auth-welcome { display: grid; justify-items: center; gap: 16px; padding: 22px 0 6px; text-align: center; }
.auth-welcome[hidden], #auth-guest[hidden] { display: none; }
.auth-greeting { font-size: 1.2rem; }
.auth-greeting strong { display: block; font: 600 1.5rem var(--serif); color: var(--bronze-light); overflow-wrap: anywhere; }
.btn-link {
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--muted);
  font: 500 1rem var(--sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.btn-link:hover { color: var(--parchment); }

/* Giris sonrasi alan */
.lobby { align-items: center; justify-content: center; padding-bottom: 88px; }
.lobby-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: 100%;
  max-width: 520px;
  padding: 28px clamp(20px, 5vw, 44px) 26px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--bronze);
  background: rgba(18, 12, 9, 0.88);
  backdrop-filter: blur(8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  text-align: center;
}
.lobby-logo { width: min(100%, 300px); }
.lobby-card h1 { font: 600 clamp(1.4rem, 3vw, 1.8rem)/1.25 var(--serif); color: var(--bronze-light); overflow-wrap: anywhere; }
.lobby-card p { color: var(--muted); text-wrap: pretty; }

.scroll-hint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  display: block;
  width: 44px;
  height: 44px;
  margin-left: -22px;
}
.scroll-hint span {
  display: block;
  width: 14px;
  height: 14px;
  margin: 12px auto 0;
  border-right: 2px solid var(--bronze-light);
  border-bottom: 2px solid var(--bronze-light);
  transform: rotate(45deg);
  animation: nudge 1.8s ease-in-out infinite;
}
@keyframes nudge { 50% { translate: 0 6px; } }

/* Bolumler */
.eyebrow {
  margin-bottom: 8px;
  color: var(--crimson-bright);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); color: var(--bronze-light); }
.section-head { max-width: 1320px; margin: 0 auto 36px; }

.showcase {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  max-width: 1432px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 110px) var(--gutter);
}
.showcase-media { position: relative; border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); }
.media-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 2px 10px;
  background: rgba(11, 8, 7, 0.78);
  color: var(--bronze-light);
  font-size: 0.9rem;
}
.showcase-copy { display: grid; justify-items: start; gap: 16px; }
.showcase-copy .eyebrow { margin-bottom: -8px; }
.showcase-copy .btn-primary { margin-top: 8px; }

.features { padding: clamp(40px, 6vw, 80px) var(--gutter); background: var(--ember); border-block: 1px solid rgba(200, 150, 90, 0.14); }
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
  max-width: 1320px;
  margin: 0 auto;
}
.feature-card { overflow: hidden; border: 1px solid rgba(200, 150, 90, 0.18); background: var(--card); }
.feature-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.5s; }
.feature-card:hover img { transform: scale(1.04); }
.feature-card div { position: relative; padding: 18px 20px 22px; background: var(--card); }
.feature-card h3 { margin-bottom: 8px; font-size: 1.3rem; color: var(--parchment); }
.feature-card p { color: var(--muted); }

.platforms { padding: clamp(56px, 8vw, 100px) var(--gutter); }
.platform-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1320px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--line);
}
.platform-list li { display: grid; justify-items: start; gap: 6px; padding: 28px clamp(16px, 2.5vw, 36px); }
.platform-list li + li { border-left: 1px solid var(--line); }
.platform-list svg { width: 44px; height: 44px; fill: none; stroke: var(--bronze); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.platform-list h3 { font-size: 1.25rem; }
.platform-list p { color: var(--muted); }
.badge { margin-top: 6px; padding: 1px 10px; border: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
.badge-live { border-color: var(--crimson-bright); color: var(--bronze-light); }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  padding: 24px var(--gutter) 30px;
  border-top: 1px solid rgba(200, 150, 90, 0.14);
  color: var(--muted);
  font-size: 1rem;
}
.site-footer img { width: 132px; }

/* Dar ekranlar */
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-top: 12px; }
  .hero-copy { display: grid; justify-items: center; text-align: center; }
  .cta-row { justify-content: center; }
  .auth-card { width: 100%; max-width: 440px; }
  .scroll-hint { display: none; }
  .hero::before { background: linear-gradient(180deg, rgba(11, 8, 7, 0.55) 0%, rgba(11, 8, 7, 0.45) 45%, var(--night) 100%); }
  .showcase { grid-template-columns: minmax(0, 1fr); }
  .feature-grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .platform-list { grid-template-columns: minmax(0, 1fr); }
  .platform-list li + li { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  body { font-size: 1.0625rem; }
  .topbar { gap: 12px; }
  .topnav { display: none; }
  .status-pill { margin-left: auto; font-size: 0.85rem; }
  .hero { padding-top: 76px; padding-bottom: 36px; }
  .btn-primary span { padding: 0 32px; }
  .site-footer { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hint span { animation: none; }
  .feature-card img { transition: none; }
  .feature-card:hover img { transform: none; }
}