:root{
  --bg: #0f1115;
  --surface: #151923;
  --text: #e8ecf1;
  --muted:#9aa4b2;
  --brand:#6c8cff;   /* Nelora mavisi */
  --brand-2:#8b5cf6; /* mor aksan */
  --radius: 14px;
}

*{box-sizing: border-box}
html,body{height:100%; overflow-x:hidden;}
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{color:inherit;text-decoration:none}
.container{max-width:1600px;margin:0 auto;padding:0 16px}

/* Navbar */
header {
  background: linear-gradient(180deg, rgba(108,140,255,.06), rgba(139,92,246,.06) 60%, transparent 100%);
  position: sticky;
  top: 0; 
  z-index: 1000;  
}
header .navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px;

}
.section-content {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1600px;
}
.navbar .nav-menu {
  display: flex;
  align-items: center;
  gap: 20px;
}
ul {
  list-style: none;
  
}
a {
  text-decoration: none;
}
button {
  background: none;
  border: none;
  cursor: pointer;
}

.navbar .nav-menu .nav-item .nav-link {
  color: var(--text);
  padding: 12px 15px;
  font-size: large;
  font-weight: 600;
  
}
.navbar .nav-menu .nav-link:hover{
  background: rgba(255,255,255,.06);
  border-radius: 20px;
}
/* MENÜ masaüstü */
.nav-menu{ display:flex; align-items:center; gap:20px; margin:0; padding:0; }
.navbar .nav-menu .nav-link{
  color: var(--text); padding: 10px 12px; font-size: 15px; font-weight:600; border-radius: 12px;
}
.navbar .nav-menu .nav-link:hover{ background: rgba(255,255,255,.06); }

/* HAMBURGER (sadece mobilde görünür) */
.nav-toggle{
  display:none; position:relative; width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.08);
}
.nav-toggle span{
  position:absolute; left:9px; right:9px; height:2px; background:#e8ecf1; transition:transform .2s ease, opacity .2s ease, top .2s ease;
}
.nav-toggle span:nth-child(1){ top:12px; }
.nav-toggle span:nth-child(2){ top:19px; }
.nav-toggle span:nth-child(3){ top:26px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ top:19px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ top:19px; transform:rotate(-45deg); }

@media (max-width: 920px){
  .nav-toggle{ display:inline-block; }

  .nav-menu{
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--surface);

    /* KAPALI durum */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;

    max-height: 0;        /* kritik */
    overflow: hidden;     /* kritik */
    padding: 0;           /* kritik */
    border-top: 0;        /* kritik */
    opacity: 0;           /* sızıntıyı yok eder */
    pointer-events: none; /* tıklanamasın */

    transition:
      max-height .25s ease,
      opacity .2s ease,
      padding .2s ease,
      border .2s ease;
    z-index: 999;         /* header içinde kalır */
  }

  /* AÇIK durum */
  .nav-menu.is-open{
    max-height: 60vh;               /* yeterli bir üst sınır */
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(255,255,255,.06);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-item{ width:100%; }
  .nav-link{ display:block; padding:14px 12px; }
}

/* Marka (senin değerlerin korunuyor) */
.brand{ display:inline-flex; align-items:flex-end; gap:8px; line-height:1; padding:6px 8px; border-radius:10px; }
.brand__icon{ height:35px; width:auto; display:block; transform:translateY(1px); }
.brand__text{ height:30px; width:auto; display:block; margin-left:-2px; }
@media (max-width: 920px){
  .brand__icon{ height:28px; }
  .brand__text{ height:24px; }
}


.brand{
  display:inline-flex;
  align-items:flex-end;       /* optik taban hizası */
  gap:8px;                    /* iki parça arası boşluk */
  line-height:1;
  padding:6px 8px;            /* tıklama alanı */
  border-radius:10px;
}

/* Yükseklikleri birlikte ölçekle – en önemlisi oranların sabit kalması */
.brand__icon{
  height:35px;                /* maskot yüksekliği */
  width:auto;
  display:block;
  transform: translateY(1px); /* optik denge – gerekirse 0/2px dene */
}
.brand__text{
  height:30px;                /* yazı yüksekliği (biraz daha kısa) */
  width:auto;
  display:block;
  margin-left:-2px;           /* “tek görsel” etkisi için boşluğu sıkılaştır */
}



/* Küçük ekranlar – biraz küçültelim */
@media (max-width: 860px){
  .brand__icon{ height:24px; transform: translateY(1px); }
  .brand__text{ height:18px; margin-left:-1px; }
}

/* Çok dar ekranlarda sadece maskotu göstermek istersen (opsiyonel)
@media (max-width: 380px){
  .brand__text{ display:none; }
}
*/

/* Mobil */
@media (max-width: 860px){
  .nav__toggle{display:inline-flex}
  .nav__menu{
    position: fixed; inset: 64px 0 auto 0;
    background: var(--surface);
    border-bottom: 1px solid rgba(255,255,255,.06);
    flex-direction: column; align-items: stretch; gap: 10px;
    padding: 12px 16px 16px;
    transform: translateY(-120%); transition: transform .25s ease;
  }
  .nav__menu.is-open{transform: translateY(0)}
  .nav__links{flex-direction:column; align-items:stretch; gap:6px}
  .nav__link{padding:12px}
  .nav__cta{padding-top:4px}
}

/* Footer */
.footer{
  flex-shrink: 0; /* Footer küçülmez ve alta sabitlenir */
  margin-top: 56px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(108,140,255,.06), rgba(139,92,246,.06) 60%, transparent 100%);
}
.footer__grid{
  display:grid; gap:24px; padding:28px 16px;
  grid-template-columns: repeat(4, minmax(0,1fr));
}
.footer__brand{font-weight:800; font-size:1.1rem; margin-bottom:6px}
.footer__title{font-weight:700; margin-bottom:8px; color:#d8deea}
.footer__text{color:var(--muted); margin:0}
.footer__list{list-style:none; padding:0; margin:0; display:grid; gap:6px}
.footer__list a{color:var(--muted)}
.footer__list a:hover{color:#fff}
.footer__social{display:flex; gap:12px}
.footer__bottom{border-top:1px solid rgba(255,255,255,.06)}
.footer__bottom-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; color: var(--muted);
}

/* Footer responsive */
@media (max-width: 900px){
  .footer__grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 520px){
  .footer__grid{grid-template-columns: 1fr}
}

/* İçerik örnek stilleri */
main.container{padding:24px 16px}
.card{
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding:16px;
}