/* Meydan2 — Ejderha tema (mavi / kırmızı) */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;800&family=Rajdhani:wght@500;600;700&display=swap');

:root{
  --bg0:#070b14;
  --bg1:#0c1528;
  --blue:#2f6fff;
  --blue2:#5aa7ff;
  --red:#d4212c;
  --red2:#ff4d57;
  --gold:#f0d59a;
  --text:#eaf2ff;
  --muted:#9eb4d4;
  --card:rgba(10,20,40,.72);
  --line:rgba(90,167,255,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  color:var(--text);
  font-family:"Rajdhani", system-ui, sans-serif;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(212,33,44,.28), transparent 55%),
    radial-gradient(1000px 500px at 90% 0%, rgba(47,111,255,.35), transparent 50%),
    radial-gradient(800px 400px at 50% 100%, rgba(47,111,255,.18), transparent 60%),
    linear-gradient(180deg, #080d18 0%, #0b1630 45%, #120810 100%);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:60px 60px;
  pointer-events:none;
  opacity:.35;
  z-index:0;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{
  position:relative;
  z-index:1;
  width:min(1100px, 92vw);
  margin:0 auto;
  padding:28px 0 80px;
}

/* top nav */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:28px;
}
.brand{
  font-family:"Cinzel", serif;
  font-weight:800;
  font-size:clamp(22px, 3vw, 30px);
  letter-spacing:.08em;
  background:linear-gradient(90deg, var(--blue2), #fff, var(--red2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 30px rgba(90,167,255,.25);
}
.nav-links{display:flex;gap:10px;flex-wrap:wrap}
.nav-links a{
  padding:10px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(12,24,48,.55);
  font-weight:700;
  letter-spacing:.04em;
  transition:.2s ease;
}
.nav-links a:hover{
  border-color:var(--blue2);
  box-shadow:0 0 18px rgba(47,111,255,.35);
  transform:translateY(-1px);
}
.nav-links a.discord{
  border-color:rgba(212,33,44,.55);
  background:linear-gradient(90deg, rgba(212,33,44,.25), rgba(47,111,255,.2));
}

/* hero */
.hero{
  position:relative;
  border:1px solid var(--line);
  border-radius:28px;
  overflow:hidden;
  background:
    linear-gradient(135deg, rgba(212,33,44,.18), transparent 40%),
    linear-gradient(225deg, rgba(47,111,255,.22), transparent 45%),
    var(--card);
  box-shadow:0 20px 60px rgba(0,0,0,.45), inset 0 0 80px rgba(47,111,255,.08);
  padding:clamp(28px, 5vw, 56px);
  text-align:center;
}

.dragon-deco{
  position:absolute;
  inset:auto 0 0 0;
  height:55%;
  background:
    radial-gradient(ellipse at 50% 120%, rgba(212,33,44,.35), transparent 55%),
    radial-gradient(ellipse at 20% 100%, rgba(47,111,255,.25), transparent 45%),
    radial-gradient(ellipse at 80% 100%, rgba(47,111,255,.25), transparent 45%);
  pointer-events:none;
}

.dragon-svg{
  position:absolute;
  left:50%;
  bottom:-18px;
  transform:translateX(-50%);
  width:min(520px, 80%);
  opacity:.16;
  pointer-events:none;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(240,213,154,.35);
  color:var(--gold);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
  background:rgba(0,0,0,.25);
  margin-bottom:18px;
}
.kicker i{
  width:8px;height:8px;border-radius:50%;
  background:var(--red2);
  box-shadow:0 0 12px var(--red2);
  animation:pulse 1.4s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.hero h1{
  font-family:"Cinzel", serif;
  font-size:clamp(40px, 8vw, 72px);
  line-height:1.05;
  margin:0 0 10px;
  letter-spacing:.06em;
  background:linear-gradient(180deg, #fff 10%, var(--blue2) 55%, var(--red2) 120%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 8px 24px rgba(47,111,255,.35));
}
.hero .sub{
  color:var(--muted);
  font-size:clamp(16px, 2.2vw, 20px);
  font-weight:600;
  margin:0 auto 28px;
  max-width:620px;
}

.countdown-label{
  font-family:"Cinzel", serif;
  font-size:clamp(16px, 2.4vw, 22px);
  color:#fff;
  margin-bottom:14px;
  letter-spacing:.04em;
}
.countdown-label span{
  color:var(--red2);
  text-shadow:0 0 18px rgba(255,77,87,.45);
}

.countdown{
  display:grid;
  grid-template-columns:repeat(4, minmax(70px, 120px));
  gap:12px;
  justify-content:center;
  margin:0 auto 28px;
}
.cd-box{
  background:linear-gradient(180deg, rgba(47,111,255,.22), rgba(10,16,28,.85));
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px 8px 12px;
  box-shadow:inset 0 0 24px rgba(47,111,255,.12), 0 8px 24px rgba(0,0,0,.3);
}
.cd-box .num{
  font-family:"Cinzel", serif;
  font-size:clamp(28px, 5vw, 42px);
  font-weight:800;
  color:#fff;
  line-height:1;
}
.cd-box .lbl{
  margin-top:6px;
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
}

.cta-row{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:160px;
  padding:14px 22px;
  border-radius:14px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:1px solid transparent;
  transition:.2s ease;
}
.btn-primary{
  background:linear-gradient(135deg, var(--blue), #1d4ed8 45%, var(--red));
  color:#fff;
  box-shadow:0 10px 30px rgba(47,111,255,.35);
}
.btn-primary:hover{transform:translateY(-2px); filter:brightness(1.08)}
.btn-ghost{
  background:rgba(8,14,28,.55);
  border-color:var(--line);
  color:var(--text);
}
.btn-ghost:hover{border-color:var(--blue2);box-shadow:0 0 18px rgba(47,111,255,.25)}

.open-date{
  margin-top:18px;
  color:var(--gold);
  font-weight:700;
  letter-spacing:.08em;
  font-size:14px;
}

/* features */
.section{margin-top:42px}
.section-title{
  font-family:"Cinzel", serif;
  font-size:clamp(22px, 3vw, 30px);
  letter-spacing:.08em;
  margin:0 0 10px;
  text-align:center;
}
.section-title em{
  font-style:normal;
  background:linear-gradient(90deg, var(--blue2), var(--red2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.section-lead{
  text-align:center;
  color:var(--muted);
  font-weight:700;
  letter-spacing:.04em;
  margin:0 0 22px;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}
.highlight-grid{grid-template-columns:repeat(4, 1fr)}
@media (max-width:900px){.highlight-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:700px){.feature-grid,.highlight-grid{grid-template-columns:1fr}}

.feature{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px 14px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-align:center;
  box-shadow:inset 0 0 30px rgba(47,111,255,.06);
  font-size:14px;
}
.feat-red{
  border-color:rgba(212,33,44,.45);
  background:linear-gradient(180deg, rgba(212,33,44,.14), rgba(10,20,40,.72));
}
.feat-blue{
  border-color:rgba(90,167,255,.45);
  background:linear-gradient(180deg, rgba(47,111,255,.14), rgba(10,20,40,.72));
}

.client-rule{
  margin-top:18px;
  border:1px solid rgba(240,213,154,.28);
  border-radius:20px;
  padding:18px;
  background:rgba(8,14,28,.65);
  text-align:center;
}
.client-rule-title{
  font-family:"Cinzel", serif;
  letter-spacing:.1em;
  color:var(--gold);
  margin-bottom:14px;
}
.client-rule-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
@media (max-width:700px){.client-rule-grid{grid-template-columns:1fr}}
.client-chip{
  border-radius:14px;
  padding:14px 10px;
  border:1px solid var(--line);
  background:linear-gradient(135deg, rgba(47,111,255,.18), rgba(212,33,44,.12));
  font-weight:800;
  letter-spacing:.04em;
}
.client-chip span{
  display:inline-flex;
  width:28px;height:28px;
  align-items:center;justify-content:center;
  border-radius:50%;
  margin-right:8px;
  background:linear-gradient(135deg, var(--blue), var(--red));
  color:#fff;
  font-size:13px;
}

.detail-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
}
.detail-grid.three{
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width:1000px){.detail-grid.three{grid-template-columns:1fr 1fr}}
@media (max-width:800px){
  .detail-grid,
  .detail-grid.three{grid-template-columns:1fr}
}
.detail-card{
  background:linear-gradient(180deg, rgba(16,36,72,.85), rgba(8,16,32,.9));
  border:1px solid rgba(90,167,255,.45);
  border-radius:20px;
  padding:22px 20px;
  box-shadow:0 0 24px rgba(47,111,255,.12), inset 0 0 40px rgba(47,111,255,.05);
}
.detail-card.accent{
  border-color:rgba(255,70,90,.65);
  box-shadow:0 0 28px rgba(212,33,44,.22), inset 0 0 40px rgba(212,33,44,.08);
  background:linear-gradient(180deg, rgba(212,33,44,.16), rgba(10,20,40,.9));
}
.detail-icon{font-size:28px;margin-bottom:8px;line-height:1}
.detail-card h3{
  font-family:"Cinzel", serif;
  margin:0 0 12px;
  letter-spacing:.06em;
  font-size:18px;
  text-transform:uppercase;
  color:#fff;
}
.detail-card ul{
  margin:0;
  padding-left:18px;
  color:#d7e6ff;
  font-weight:600;
  line-height:1.7;
  font-size:15px;
}
.detail-card li{margin:7px 0}
.detail-card strong{color:#fff}

.blocks{display:grid;gap:22px;margin-top:28px}
.block{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  align-items:center;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:22px;
  padding:18px;
  overflow:hidden;
}
.block:nth-child(even){grid-template-columns:.9fr 1.1fr}
.block:nth-child(even) .block-media{order:2}
@media (max-width:800px){
  .block,.block:nth-child(even){grid-template-columns:1fr}
  .block:nth-child(even) .block-media{order:0}
}
.block h3{
  font-family:"Cinzel", serif;
  margin:0 0 10px;
  font-size:22px;
  letter-spacing:.05em;
}
.block p{margin:0;color:var(--muted);font-size:16px;line-height:1.55;font-weight:600}
.block-media img{
  width:100%;
  border-radius:16px;
  border:2px solid rgba(90,167,255,.35);
  box-shadow:0 0 0 4px rgba(18,32,64,.8), 0 12px 28px rgba(0,0,0,.35);
}

/* preface */
.preface{
  margin-top:48px;
  position:relative;
  border-radius:28px;
  padding:clamp(28px, 4vw, 48px);
  background:
    linear-gradient(180deg, rgba(212,33,44,.16), transparent 35%),
    linear-gradient(0deg, rgba(47,111,255,.18), transparent 40%),
    rgba(8,14,28,.82);
  border:1px solid rgba(240,213,154,.28);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
}
.preface h2{
  font-family:"Cinzel", serif;
  margin:0 0 14px;
  font-size:clamp(24px, 3.5vw, 34px);
  letter-spacing:.1em;
  text-align:center;
  color:var(--gold);
}
.preface .divider{
  width:120px;height:2px;margin:0 auto 22px;
  background:linear-gradient(90deg, transparent, var(--blue2), var(--red2), transparent);
}
.preface-body{
  max-width:860px;
  margin:0 auto;
  color:#d7e6ff;
  font-size:clamp(16px, 2vw, 18px);
  line-height:1.75;
  font-weight:600;
  text-align:center;
}
.preface-body p{margin:0 0 16px}
.preface-tag{
  color:var(--gold) !important;
  letter-spacing:.04em;
  font-weight:800 !important;
  font-size:clamp(14px, 2vw, 17px) !important;
}
.preface-lead{
  font-family:"Cinzel", serif;
  font-size:clamp(20px, 3vw, 28px) !important;
  color:#fff !important;
  letter-spacing:.04em;
  margin-bottom:18px !important;
}
.preface-motto{
  margin-top:22px !important;
  padding:18px;
  border-radius:16px;
  border:1px solid rgba(240,213,154,.3);
  background:linear-gradient(135deg, rgba(47,111,255,.12), rgba(212,33,44,.12));
  color:#fff !important;
}
.preface-motto strong{
  display:block;
  margin-bottom:10px;
  font-family:"Cinzel", serif;
  letter-spacing:.06em;
  background:linear-gradient(90deg, var(--blue2), #fff, var(--red2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-size:clamp(16px, 2.2vw, 20px);
}

.footer{
  margin-top:36px;
  text-align:center;
  color:var(--muted);
  font-weight:700;
  letter-spacing:.08em;
}
.footer strong{
  color:var(--blue2);
}