html {
    scroll-behavior: smooth;
}
 :root {
    --bg-card: #1e293b;
    --border: #334155;
    --accent: #60a5fa;      /* Mavi vurgu rengi */
    --accent-2: #22c55e;    /* Yeşil vurgu rengi */
    --ink: #f8fafc;         /* Ana yazı rengi */
    --ink-dim: #94a3b8;     /* Soluk yazı rengi */
    --line: #334155;        /* Çizgi rengi */
    --line-strong: #475569; /* Kalın çizgi rengi */
}

 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&display=swap');
        body { background: #0f172a; color: #cbd5e1; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
        .glass { background: #1e293b; border: 1px solid #334155; }
        .nav-card { transition: all 0.3s ease; border: 1px solid #334155; background: #1e293b; }
        .nav-card:hover { border-color: #60a5fa; background: #334155; transform: translateY(-2px); }
        .data-row { border-bottom: 1px solid #334155; }
        .data-row:hover { background: #334155; color: #fff; }
        .status-online { width: 8px; height: 8px; background: #22c55e; border-radius: 50%; display: inline-block; box-shadow: 0 0 8px #22c55e; }
        .hidden-rows { display: none; }
        @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
        .blink-effect { animation: blink 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.terminal-window {
    background: #0f172a; /* Sitenin ana arka plan rengi */
    border: 1px solid #334155; /* Sitenin border rengi */
    border-radius: 8px;
    padding: 20px;
    font-family: 'JetBrains Mono', monospace;
    color: #94a3b8; /* Hafif gri metin rengi */
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    max-width: 600px;
}

.terminal-header {
    display: flex;
    gap: 8px;
    margin-bottom: 15px;
}
.dot { width: 10px; height: 10px; border-radius: 50%; }

.cmd-blue { color: #60a5fa; } /* Tailwind blue-400 */

.cursor {
    display: inline-block;
    width: 10px;
    height: 18px;
    background-color: #22c55e;
    animation: blink 1s step-end infinite;
    vertical-align: middle;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.contact-panel {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 20px;
    color: #cbd5e1;
}
.input-style {
    background: #1e293b;
    border: 1px solid #334155;
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    outline: none;
    color: white;
}
.input-style:focus { border-color: #60a5fa; }

/* ============ MARQUEE ============ */
.marquee{
  border-block:1px solid var(--line);
  padding:18px 0;
  overflow:hidden;
  background:rgba(255,87,34,.04);
  white-space:nowrap;
}
.marquee-inner{
  display:inline-flex;gap:48px;
  animation:scroll 40s linear infinite;
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-dim);
}
.marquee-inner span{display:inline-flex;align-items:center;gap:48px}
.marquee-inner span::after{content:'◆';color:var(--accent)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============ STATS ============ */
.stats-wrap{
  background:linear-gradient(180deg,rgba(255,87,34,.04),transparent);
  border:1px solid var(--line-strong);
  padding:48px;
  position:relative;
  overflow:hidden;
}
.stats-wrap::before{
  content:'STATUS';
  position:absolute;top:20px;right:24px;
  font-size:10px;letter-spacing:.3em;color:var(--ink-dim);
}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:32px;
}
.stat-num{
  font-family:'Fraunces',serif;font-weight:900;
  font-size:72px;line-height:1;letter-spacing:-.03em;
  color:var(--ink);
  margin-bottom:8px;
}
.stat-num em{color:var(--accent);font-style:normal}
.stat-label{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);
}
.stats-note{
  margin-top:32px;padding-top:24px;
  border-top:1px dashed var(--line);
  font-size:12px;color:var(--ink-dim);
  display:flex;justify-content:space-between;align-items:center;
}
.live-dot{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--accent-2);
}
.live-dot::before{
  content:'';width:8px;height:8px;border-radius:50%;
  background:var(--accent-2);
  animation:pulse 1.6s ease-in-out infinite;
}


/* ============ CHANNELS ============ */
.channels-table{
  border:1px solid var(--line-strong);
  font-size:13px;
}
.ch-head, .ch-row{
  display:grid;
  grid-template-columns:2fr 1fr 4fr;
  gap:24px;
  padding:14px 24px;
  align-items:center;
}
.ch-head{
  background:rgba(255,255,255,.03);
  border-bottom:1px solid var(--line-strong);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-dim);
}
.ch-row{
  border-bottom:1px solid var(--line);
  transition:background .15s;
}
.ch-row:last-child{border-bottom:none}
.ch-row:hover{background:rgba(124,255,178,.03)}
.ch-name{color:var(--accent-2);font-weight:500}
.ch-users{color:var(--ink-dim)}
.ch-topic{color:var(--ink-dim);font-size:12.5px}
.empty-state{
  padding:60px;text-align:center;color:var(--ink-dim);
  font-style:italic;
}

/* Hero Section */
.hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 1,5rem; /* Üst: 96px | Yanlar: 32px | Alt: 64px */
    text-align: center;
}

.hero h1 {
    font-size: 3.5rem;        /* Büyük başlık */
    font-weight: 900;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.hero .quote {
    font-size: 1rem;
    color: var(--ink-dim);
    font-style: italic;
    letter-spacing: 0.05em;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1rem;          /* 0.85rem'den 1rem'e çıkardım */
    color: var(--accent);
    margin-bottom: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.nav-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 0.75rem;  /* h1 ile aynı satır hizası */
}

.nav-links a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: color 0.2s ease;
}

.nav-links a:hover {
    color: #60a5fa;
}