/* ===== Theme (logo renkleri) ===== */
:root{
  --navy:#0E1A2A;     /* koyu lacivert temel */
  --navy-2:#10243A;   /* biraz daha açık */
  --navy-3:#090F1D;   /* çok koyu */
  --blue:#3B82F6;     /* logo mavi */
  --green:#29A36A;    /* logo yeşil */
  --text:#E5E7EB;     /* açık metin */
  --muted:#A7B0BD;    /* soluk metin */
  --chip:rgba(255,255,255,.06);
  --ring:rgba(59,130,246,.28);
  --card:#FFFFFF;     /* içerik kart zemin */
  --card-border:rgba(255,255,255,.12);
}

/* ===== Reset & Base ===== */
*{box-sizing:border-box}
html,body{height:100%}



body{
  margin:0; color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system,"Segoe UI", Roboto, Arial,"Noto Sans","Helvetica Neue", sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;

  /*  Soft koyu lacivert geçişli mesh tarzı arka plan */
  background:
    radial-gradient(800px 400px at 15% 20%, rgba(59,130,246,.15), transparent 70%),
    radial-gradient(900px 600px at 85% 30%, rgba(41,163,106,.15), transparent 70%),
    linear-gradient(to bottom, #0E1A2A 0%, #0F2235 35%, #102C45 65%, #0B1523 100%);
  background-attachment: fixed;
}

/* GLOBAL: 5° eğimli parlak şerit — tüm sayfalarda tam genişlik */
body::before{
  content:"";
  position:fixed;                 /* ekrana sabit; her sayfada aynı görünür */
  left:-10%; right:-10%;
  top:-18%;                       /* şeridin düşey konumu */
  height:58vh;                    /* yüksekliği — artırıp/azaltabilirsin */
  transform:skewY(-5deg);         /* ~5° eğim */
  background:
    radial-gradient(600px 220px at 20% 60%, rgba(59,130,246,.18), transparent 70%),
    linear-gradient(90deg, rgba(59,130,246,.22) 0%, rgba(41,163,106,.14) 100%);
  filter: blur(20px);
  opacity:.85;
  mix-blend-mode:screen;          /* koyu zeminde “parlak” etki */
  pointer-events:none;
  z-index:0;                      /* içerik üstünde gölge yaratmaması için 0 */
}

/* İçerik katmanını body::before’un üstünde tutalım */
header, main, footer { position: relative; z-index: 1; }




a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.container{max-width:1180px;margin:0 auto;padding:20px 28px}

/* ===== Header (dark glass) ===== */
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background:linear-gradient(to bottom, rgba(12,18,32,.75), rgba(12,18,32,.45));
  border-bottom:1px solid rgba(255,255,255,.08);
  transition: box-shadow .2s ease, background .2s ease;
}
header.scrolled{ box-shadow:0 10px 30px rgba(0,0,0,.35); }

.nav{display:flex;align-items:center;gap:18px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}


.brand img {
  height: 60px;   /* Eskiden 40px'ti */
  width: auto;
  display: block;
  filter: drop-shadow(0 0 12px rgba(255,255,255,.32));
}



.brand strong{font-size:18px;letter-spacing:.3px;color:#fff}

/* ===== Nav ===== */
nav ul{display:flex;gap:8px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
nav a{
  padding:10px 12px;border-radius:10px;color:#E7ECF3;transition:.15s;
}
nav a:hover{background:rgba(255,255,255,.06)}
nav a.active{background:var(--blue);color:#fff}

/* ===== Hero ===== */
.hero{
  position:relative; overflow:hidden;
  padding:64px 0 40px;
}
.badge{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--chip); border:1px solid rgba(255,255,255,.12);
  border-radius:999px; padding:8px 14px;
}
.badge .dot{
  width:10px;height:10px;border-radius:999px;
  background:linear-gradient(135deg, var(--green), var(--blue));
  box-shadow:0 0 0 6px var(--ring);
}
h1{font-size:clamp(34px,5.8vw,64px);line-height:1.04;margin:16px 0 10px;font-weight:800;color:#fff}
.lead{font-size:clamp(16px,2.1vw,20px);color:var(--muted);max-width:78ch}

/* HERO: 5° eğimli parlak gradyan şerit */
.hero{
  position:relative;
  overflow:hidden;
  padding:64px 0 40px;
}



/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06); color:#fff;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.35); background:rgba(255,255,255,.1)}
.btn.primary{
  background:linear-gradient(135deg, var(--blue), #2b63e8);
  border-color:#2b63e8; color:#fff;
}



/* ===== Sections & Cards ===== */
.section{padding:28px 0}
.grid{display:grid;grid-template-columns:1fr;gap:22px;margin-top:22px}
@media(min-width:980px){.grid{grid-template-columns:1.2fr .8fr}}
.cards{display:grid;grid-template-columns:1fr;gap:18px;margin-top:26px}
@media(min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}}

.card{
  border:1px solid var(--card-border);
  border-radius:18px; padding:18px; background:var(--card);
  box-shadow:0 20px 40px rgba(0,0,0,.25);
  transition: transform .18s ease, box-shadow .18s ease;
  color:#0f172a; /* kart içi koyu metin */
}
.card:hover{ transform: translateY(-4px); box-shadow:0 30px 60px rgba(0,0,0,.35); }
.card h3{margin:8px 0 6px; color:#0b1220}
.card .muted{color:#4b5563}
.icon{
  width:28px;height:28px;border-radius:8px;
  display:inline-grid;place-items:center;
  background:linear-gradient(135deg, var(--green), var(--blue)); color:#fff;
  box-shadow: 0 6px 18px var(--ring);
}

/* ===== Alert (duyuru) ===== */
.alert{border:1px solid #fee2e2;background:#fef2f2;color:#7f1d1d}
.alert .pill{background:#fde8e8}



/* ===== Footer (transparan overlay + cam) ===== */
footer{
  position:relative;
  margin:64px 0 18px;
  color:#C6CFDA;
  font-size:14px;
}

/* Koyu transparan overlay – üstten aşağı yumuşak geçiş */
footer::before{
  content:"";
  position:absolute;
  inset:-60px 0 -18px 0;             /* üstten yayılır, alta kadar iner */
  background: linear-gradient(to top, rgba(3,7,15,.85) 0%, rgba(3,7,15,.0) 60%);
  pointer-events:none;
  z-index:-1;
}

/* İç metin için hafif cam panel (isteğe bağlı) */
.footer-inner{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
}

/* === Mobile nav === */
.menu-toggle{display:none; border:0; background:rgba(255,255,255,.08); color:#fff;
  padding:8px 10px; border-radius:10px}
.menu-toggle:focus{outline:2px solid rgba(59,130,246,.6); outline-offset:2px}

/* Küçük ekranlar */
@media (max-width: 900px){
  .container{padding:16px 18px}
  /* hamburger görünür, nav gizli */
  .menu-toggle{display:inline-flex; align-items:center; justify-content:center}
  #site-nav{display:none}
  #site-nav.open{display:block}

  /* açılır panel */
  #site-nav{
    position: fixed; top: 60px; left: 0; right: 0; z-index: 60;
    background: rgba(10,16,28,.95); backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,.08);
  }
  #site-nav ul{
    display:flex; flex-direction:column; gap:0; margin:0; padding:6px 0; list-style:none;
  }
  #site-nav a{
    display:block; padding:14px 20px; color:#E7ECF3;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  #site-nav a.active{background:rgba(59,130,246,.25)}
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  transition: all 0.25s ease;
}