:root {
  --bg: #0f0e12;          /* saf siyaha yakın */
  --card: #322f44;        /* morumsu koyu gri */
  --text: #f4f4f5;        /* beyaz */
  --muted: #b5b5bb;       /* soluk gri */
  --primary: #c4b5fd;     /* lila */
  --primary-600: #8b5cf6; /* canlı mor */
  --accent: #d946ef;      /* pembe-mor */
  --border: #49495c;
  --shadow: 0 6px 26px rgba(0,0,0,.6);
  --radius: 18px;
}

body {
  margin: 0;
  font-family: Inter, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Header */
header { background: #1c1b22; border-bottom: 1px solid var(--border); }
.nav { max-width:1200px; margin:0 auto; padding:12px 20px; display:flex; align-items:center; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; color:var(--primary); }
.brand img { width:36px; height:36px; border-radius:8px; }
.spacer { flex:1; }
.menu a { margin-left:20px; color:var(--muted); }
.menu a:hover { color:var(--primary-600); }

/* Hero */
.hero { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:1200px; margin:30px auto; padding:0 20px; }
.hero-card { background: var(--card); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding:24px; }
.hero-card h1 { color: var(--primary); }

/* Buttons */
.btn { display:inline-block; margin:6px; padding:10px 16px; border-radius:12px; font-weight:600; background: var(--card); color: var(--text); border:1px solid var(--border); }
.btn.primary { background: var(--primary-600); color:white; }

/* Sections */
section { max-width:1200px; margin:20px auto; padding:0 20px; }
h2 { color: var(--primary); }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.card { background: var(--card); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding:16px; }
.card h3 { color: var(--primary-600); }
.badge { background:#3f3f46; color:#facc15; padding:2px 6px; border-radius:6px; font-size:12px; }

/* Video */
.video { background: var(--card); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding:12px; }
.video iframe { width:100%; aspect-ratio:16/9; border:0; border-radius:12px; }

/* Footer */
footer { background:#1c1b22; color:var(--muted); text-align:center; padding:20px; margin-top:30px; border-top:1px solid var(--border); }