:root{
      --accent: #ffffff;
      --bg:#000;
      --nav-opacity: 0; /* iOS-like transparency value (adjustable) */
      --hero-blur: 0px; /* adjustable blur for hero overlay */
      --game-blur: 2px; /* adjustable blur for game media */
      --max-navbar-width: calc(100% - 100px); /* "enlerden 30px daha büyük" interpreted as side gaps */
      --font-heading: 'Orbitron', sans-serif;
      --font-body: 'Inter', sans-serif;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}
    body{
      background:var(--bg);
      color:#fff;
      font-family: var(--font-body);
      -webkit-font-smoothing:antialiased;
      letter-spacing: 0.2px;
      -moz-osx-font-smoothing:grayscale;
      overflow-x:hidden;
    }

    /* NAVBAR centered, only Home / Games / Contact */
    .nav-wrap{
      position:fixed;left:50%;transform:translateX(-50%);
      top:10px;z-index:1000;
      width:var(--max-navbar-width);
      max-width:820px;
      display:flex;justify-content:center;
      pointer-events:auto;
    }
    nav.center-nav{
      display:flex;gap:32px;
      padding:0px 0px;
      border-radius:40px;
      background:rgba(255,255,255,var(--nav-opacity));
      box-shadow:0 6px 20px rgba(0,0,0,0.5);
      backdrop-filter: blur(8px);
      align-items:center;
      
    }
    nav.center-nav a{
      font-family: var(--font-heading);
      padding:8px 16px;border-radius:30px;text-decoration:none;color:#111;font-weight:600;display:inline-flex;gap:12px;align-items:center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 42px; /* sabit yükseklik için */
      line-height: 1;
      color:gray;
      text-transform: uppercase;
      letter-spacing: 1px;
      
    }
    nav.center-nav a.active{background:#FFF;color:black;box-shadow:0 6px 18px rgba(0,0,0,0.6); width: 150px;}

    /* HERO */
    .hero{
      height:100vh;min-height:520px;display:flex;align-items:center;justify-content:center;padding-top:25px;position:relative;
      overflow:hidden;
    }
    .hero__slides{position:absolute;inset:0;display:block}
    .hero__slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.45);transform-origin:center;transition:opacity 1s ease,transform 1s ease;opacity:0}
    .hero__slides img.is-active{opacity:1;transform:scale(1.03)}

    /* dark blurred band for content with adjustable blur */
    .hero__overlay{
      position:relative;z-index:4;max-width:1100px;width:100%;display:flex;align-items:center;gap:90px;padding:180px;border-radius:18px;
      background: none;
      backdrop-filter: none;
      margin:0 30px;
    }

    .hero__logo{flex:0 0 160px;display:flex;align-items:center;justify-content:center}
    .hero__logo img{width:140px;height:140px;object-fit:contain}

    .hero__content{flex:1;color:#fff}
    .hero__title{font-family: var(--font-heading);font-weight:800;font-size:52px;letter-spacing:1.8px;text-shadow: 0 0 18px rgba(255, 255, 255, 0.2);margin-bottom:10px;color:var(--accent)}
    .hero__desc{font-size: 17px;line-height: 1.7;color: #dcdcdc;;font-family: var(--font-body);max-width: 700px;}

    /* small screens hero stacking */
    @media (max-width:880px){
      .hero__overlay{flex-direction:column;text-align:center;padding:36px}
      .hero__logo{order:0}
      .hero__title{font-size:30px}
    }

    /* FEATURES (adaptable / passionate / strong bounds-like) */
    .features{padding:70px 30px 30px;display:flex;justify-content:center}
    .features__grid{max-width:1100px;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
    .feature{background:transparent;text-align:center;padding:28px;border-radius:12px}
    .feature .icon{font-size:30px;margin-bottom:10px;color:var(--accent)}
    .feature h4{font-family:'Montserrat';font-size:20px;margin-bottom:8px}
    .feature p{font-size:14px;color:#ddd}

    @media (max-width:900px){.features__grid{grid-template-columns:1fr;}}

    /* GAMES section */
    .games{padding:40px 30px 80px}
    .games__header{display:flex;align-items:center;gap:12px;justify-content:center;margin-bottom:22px}
    .games__header i{font-size:20px;color:var(--accent)}
    .games__title{font-family:'Montserrat';font-weight:800;font-size:26px}

    .games__grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

    .game-card{position:relative;border-radius:18px;overflow:hidden;min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;background:rgba(0,0,0,0.35);box-shadow:0 10px 40px rgba(0,0,0,0.6)}
    .game-card .media{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(var(--game-blur)) brightness(.6);transform:scale(1.06)}
    .game-card .media video{width:100%;height:100%;object-fit:cover}
    .game-card .content{position:relative;z-index:4;color:#fff}
    .game-card h5{font-family:'Montserrat';font-size:20px;margin-bottom:6px}
    .game-card p{font-size:14px;color:#eee;opacity:.95}

    /* allow per-card blur via data attribute (JS sets CSS variable inline) */

    @media (max-width:1100px){.games__grid{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:760px){.games__grid{grid-template-columns:1fr}}

    /* CONTACT + SUBSCRIBE */
    .contact{max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column; /* Ortalamak için dikey hizaya geçtik */
  align-items: center;
  text-align: center;
  gap: 20px;}
    .contact__inner{max-width:1100px;margin:0 auto;display:flex;flex-direction: column; gap:20px;align-items:center;justify-content:space-between}
    .contact__left{flex:1;min-width:220px;align-items: center;}
    .contact__right{display:flex;gap:12px;align-items:center}
    .btn-email{background:linear-gradient(180deg,#fff,#ddd);color:#111;padding:14px 22px;border-radius:40px;text-decoration:none;font-weight:700;box-shadow:0 6px 20px rgba(0,0,0,0.4)}
    /* CONTACT + SUBSCRIBE */


/* Başlık ortada, büyük ve vurgulu */
.contact__inner h3 {
  font-family: Montserrat;
  font-size: 2rem; /* games başlığına yakın boyut */
  font-weight: 800;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 10px;
}

/* Alt açıklama */
.contact__inner p {
  color: #ccc;
  max-width: 600px;
}

/* Mail butonu */
.contact__right {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/* Newsletter */
.newsletter {
  max-width: 700px;
  margin: 40px auto 0;
  text-align: center;
}

.newsletter h4 {
  font-family: Montserrat;
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
}

.newsletter p {
  color: #ccc;
  margin-bottom: 12px;
}

.newsletter form {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.newsletter input[type="email"] {
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: #fff;
  min-width: 240px;
}

.newsletter button {
  padding: 12px 18px;
  border-radius: 14px;
  border: none;
  background: var(--accent);
  color: #111;
  font-weight: 800;
}

    .newsletter{max-width:700px;margin:28px auto 0;text-align:center}
    .newsletter p{color:#ccc;margin-bottom:12px}
    .newsletter form{display:flex;gap:12px;justify-content:center;align-items:center}
    .newsletter input[type="email"]{padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);color:#fff;min-width:240px}
    .newsletter button{padding:12px 18px;border-radius:14px;border:none;background:var(--accent);color:#111;font-weight:800}

    /* FOOTER */
    footer{padding:36px 30px;background:#0f0f0f;display:flex;justify-content:space-between;align-items:center;gap:16px}
    .footer-left{color:#ccc}
    .footer-left p{margin:6px 0}
    .footer-right{display:flex;gap:10px}
    .social-btn{width:40px;height:40px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff}

    @media (max-width:880px){footer{flex-direction:column;align-items:center;text-align:center}}

    /* smooth scroll offset (for fixed navbar) */
    :target{scroll-margin-top:110px}
    /* Games & Contact başlıkları */
.games__title,
.contact__inner h3,
.newsletter h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 12px rgba(255,255,255,0.15);
}

/* Game kart başlıkları */
.game-card h5 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 0.8px;
}

/* Kart açıklamaları */
.game-card p {
  font-family: var(--font-body);
  font-size: 14px;
  color: #e0e0e0;
  line-height: 1.5;
}

/* Features kısmı */
.feature h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: 1px;
}
.feature p {
  font-family: var(--font-body);
  color: #ccc;
  line-height: 1.5;
}

/* Contact mail butonu */
.btn-email {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
}

/* Footer */
footer, footer p {
  font-family: var(--font-body);
  font-size: 14px;
}
/* === OUR TEAM SECTION === */
.team {
  background: linear-gradient(180deg, #000, #0a0a0a);
  padding: 80px 20px;
  text-align: center;
}

.team__header {
  margin-bottom: 40px;
}

.team__header i {
  font-size: 36px;
  color: var(--accent);
  margin-bottom: 10px;
}

.team__title {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
}

.team__subtitle {
  color: #bbb;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
}

.team__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

.team__member {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 24px 16px;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 transparent;
}

.team__member:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.team__photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  margin: 0 auto 16px;
  border: 3px solid var(--accent);
}

.team__name {
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.team__role {
  font-size: 0.9rem;
  color: var(--accent);
  margin-bottom: 8px;
  font-weight: 500;
}

.team__bio {
  font-family: 'Roboto', sans-serif;
  font-size: 0.9rem;
  color: #ccc;
  line-height: 1.4;
}