:root {
      --bg: #0e1117;
      --card: #161b22;
      --text: #e6edf3;
      --muted: #9ba3b4;
      /* accent kaldırıldı – okunurluk için */
      --accent: transparent;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: radial-gradient(circle at top, #161b22, var(--bg));
      color: var(--text);
      line-height: 1.7;
      scroll-behavior: smooth;
      scroll-padding-top:80px;
	  overflow-x:hidden;
    }
	
	/* =========================
   NAVIGATION
	========================= */
	nav{
	  position:sticky;
	  top:0;
	  z-index:100;
	  background:rgba(14,17,23,.85);
	  backdrop-filter:blur(10px);
	  border-bottom:1px solid rgba(255,255,255,.06);
	}

	.nav-inner{
	  max-width:1100px;
	  margin:auto;
	  display:flex;
	  align-items:center;
	  justify-content:space-between;
	  padding:16px 24px;
	  position:relative;
	}

	.nav-links{
	  display:flex;
	  gap:20px;
	  font-weight:600;
	}

	.lang-dropdown{
	  position:relative;
	}

	#langMenu summary{
	  list-style:none;
	  cursor:pointer;
	  user-select:none;
	  display:inline-flex;
	  align-items:center;
	}

	.lang-icon{
	  width:28px;
	  height:28px;
	  display:block;
	  object-fit:contain;
	}

	#langMenu summary::-webkit-details-marker{
	  display:none;
	}

	#langMenu summary::after{
	  content:" \25BE";
	  font-size:.75rem;
	}

	.lang-options{
	  position:absolute;
	  top:calc(100% + 8px);
	  right:0;
	  min-width:140px;
	  display:none;
	  flex-direction:column;
	  background:rgba(14,17,23,.98);
	  border:1px solid rgba(255,255,255,.08);
	  border-radius:12px;
	  overflow:hidden;
	  z-index:200;
	}

	#langMenu[open] .lang-options{
	  display:flex;
	}

	.lang-options a{
	  padding:10px 14px;
	  border-top:1px solid rgba(255,255,255,.06);
	  font-weight:500;
	}

	.lang-options a:first-child{
	  border-top:none;
	}

	.menu-toggle{
	  display:none;
	  flex-direction:column;
	  gap:5px;
	  cursor:pointer;
	}

	.menu-toggle span{
	  width:24px;
	  height:2px;
	  background:var(--text);
	}

	/* MOBILE */
	@media(max-width:768px){
	  .menu-toggle{display:flex}

	  .nav-links{
		position:absolute;
		top:100%;
		left:0;
		right:0;
		background:rgba(14,17,23,.95);
		backdrop-filter:blur(12px);
		flex-direction:column;
		max-height:0;
		overflow:hidden;
		transition:max-height .3s ease;
	  }

	  .nav-links a{
		padding:16px 24px;
		border-top:1px solid rgba(255,255,255,.06);
	  }

	  .nav-links.open{
		max-height:560px;
	  }

	  #langMenu summary{
		padding:16px 24px;
		border-top:1px solid rgba(255,255,255,.06);
	  }

	  .lang-options{
		position:static;
		background:transparent;
		border:none;
		border-radius:0;
	  }

	  .lang-options a{
		padding:12px 36px;
	  }
	  .slide img {
		max-width:100%;
	  }
	}

	a{color:inherit;text-decoration:none}
	a:hover{text-decoration:underline}

    header {
      padding: 96px 24px 72px;
      text-align: center;
    }

    header h1 {
      font-size: clamp(2.5rem, 5vw, 4rem);
      font-weight: 700;
      letter-spacing: -1px;
    }

    header p {
      max-width: 640px;
      margin: 24px auto 0;
      font-size: 1.1rem;
      color: var(--muted);
    }

    section {
      width: 100%;
      padding: 120px 24px;
      position: relative;
      overflow: hidden;
    }

    .section-inner{
      max-width:1100px;
      margin:0 auto;
    }

    .light{
      background: linear-gradient(180deg,#f2f4f8,#e6eaf0);
      color:#0e1117;
    }

    .dark{
      background: linear-gradient(180deg,#0e1117,#05070c);
    }

    .parallax::before{
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(circle at top,rgba(88,209,163,.08),transparent 60%);
      transform:translateY(var(--offset,0));
      transition:transform .2s ease-out;
      pointer-events:none;
    }

    .card {
      background: transparent;
      padding: 28px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 16px;
      position: relative;
      overflow: hidden;
      transition: background .3s,color .3s;
    }

    .dark .card:hover{
      background: #f2f4f8;
      color:#0e1117;
    }

    .dark .card:hover .muted{
      color:#1b1f2a;
    }

    /* Oyunlarımız (açık zemin) kart hover – sadece bu bölüm */
    #oyunlar.light .card:hover{
      background:#0e1117;
      color:#e6edf3;
    }

    #oyunlar.light .card:hover .muted{
      color:#9ba3b4;
    }
	
	#oyunlar.light .game-icon{
	  font-size:64px;
	  margin-bottom:16px;
	  color:#58d1a3; /* vurgu rengi */
	  transition:transform .2s, color .2s;
	}
	#oyunlar.light .card:hover .game-icon{
	  transform:scale(1.1);
	  color:#9ba3b4; /* hover rengi */
	}

    .card:hover .muted{
      color:#1b1f2a;
    }

    /* accent glow kaldırıldı – okunurluk */
    .card::before{
      content:"";
      display:none;
    }

    .card:hover::before{
      opacity:1;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 24px;
    }

    h2 { font-size: 1.8rem; margin-bottom: 16px; }
    h3 { font-size: 1.2rem; margin-bottom: 8px; }
    .muted { color: var(--muted); }

    footer {
      text-align: center;
      padding: 48px 24px;
      font-size: 0.9rem;
      color: var(--muted);
    }

    a { color: inherit; text-decoration: none; font-weight: 600; }
    a:hover { text-decoration: underline; }
    a:hover { text-decoration: underline; }

    /* divider accent kaldırıldı */
    .divider {
      width: 80px;
      height: 4px;
      background: #9ba3b4;
      border-radius: 4px;
      margin: 32px auto;
    }

    /* Slider */
    .slider { max-width:1100px; margin:48px auto 0; overflow:hidden; position:relative; }
    .slides { display:flex; transition:transform .6s ease; }    
    .slider-nav { display:flex; justify-content:center; gap:8px; margin-top:16px; }
    .dot { width:10px; height:10px; border-radius:50%; background:#2b3240; cursor:pointer; }
    .dot.active { background:#9ba3b4; }

    .slide {
	  min-width:100%;
	  padding:32px;
	  display:grid;
	  grid-template-columns:1.2fr 1fr;
	  gap:32px;
	  align-items:center;
	}
	.slide img {
	  width:100%;
	  max-width:400px;
	  height:auto;
	  margin:0 auto; /* mobilde ortala */
	}

	@media (max-width:768px) {
	  .slide {
		grid-template-columns:1fr;
		padding:16px; /* <-- kritik */
	  }
	}
  /* İletişim Formu */
#iletisim form{
  background:var(--card);
  padding:32px;
  border-radius:18px;
  box-shadow:0 20px 40px rgba(0,0,0,.25);
}

#iletisim form .form-group{
  display:flex;
  flex-direction:column;
  margin-bottom:18px;
}

#iletisim label{
  font-size:14px;
  color:var(--muted);
  margin-bottom:6px;
}

#iletisim input,
#iletisim textarea{
  background:#0e1117;
  border:1px solid #2a2f3a;
  color:var(--text);
  padding:12px 14px;
  border-radius:12px;
  font-size:15px;
  transition:border .2s, box-shadow .2s;
}

#iletisim textarea{
  resize:none;
  min-height:120px;
}

#iletisim input:focus,
#iletisim textarea:focus{
  outline:none;
  border-color:#58d1a3;
  box-shadow:0 0 0 3px rgba(88,209,163,.2);
}

.button{
  display:inline-block;
  margin-top:16px;
  padding:10px 26px;
  border-radius:999px;

  font-size:14px;
  font-weight:600;
  letter-spacing:.2px;

  color:var(--text);
  border:2px solid #9ba3b4;
  color:var(--muted);

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .2s ease;
}

.button:hover{
  background:rgba(255,255,255,.08);
  border-color:#58d1a3;
  color:#58d1a3;
  box-shadow:0 0 0 4px rgba(88,209,163,.15);
  transform:translateY(-2px);
}

.button:active{
  transform:translateY(0);
}

#iletisim button{
  margin-top:10px;
  align-self:flex-end;
  background:#58d1a3;
  color:#0e1117;
  border:none;
  padding:12px 28px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:transform .2s, box-shadow .2s, background .2s;
}

#iletisim button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(88,209,163,.35);
}

#iletisim button:active{
  transform:translateY(0);
}