/* Renkler ve font ana sayfa ile aynı */
:root{
  --bg-1:#f7eef6;
  --accent-1:#3A7FD5;
  --accent-2:#FF6B7A;
  --accent-3:#58C38B;
  --accent-4:#4B5563;
  --muted:#6b6b7a;
  --card-bg:rgba(255,255,255,0.7);
  --glass:rgba(255,255,255,0.55);
  --radius:12px;
  --maxwidth:1100px;
}

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg-1);
  color:#222;
}

.wrap{
  max-width: var(--maxwidth);
  margin:0 auto;
  padding:28px;
}

/* NAVBAR aynı ana sayfa ile */
nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0;}
.brand{color: rgb(77, 77, 77);display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:0.2px;}
.brand .logo{width:50px;height:50px;object-fit:cover;border-radius:50%; }
.navlinks{display:flex;gap:18px;align-items:center}
.navlinks a{color:var(--muted);text-decoration:none;font-weight:600;padding:10px 12px;border-radius:10px;transition:all .18s}
.navlinks a:hover{background:var(--glass);color:#222;transform:translateY(-2px)}
.menu{display:none;border:0;background:transparent}



/* GAME DETAIL */
.game-detail{
  margin-top:40px;
}

.detail-container{
  display:flex;
  gap:30px;
  flex-wrap:wrap;
}

/* Slider */
.slider{
  flex:1;
  min-width:280px;
  max-width:600px;
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  box-shadow:0 6px 20px rgba(20,20,40,0.1);
}

.slides{
  display:flex;
  transition:transform 0.5s ease-in-out;
}

.slides img{
  width:100%;
  flex-shrink:0;
  object-fit:cover;
}

.slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(0,0,0,0.5);
  color:white;
  border:none;
  padding:10px 14px;
  cursor:pointer;
  border-radius:6px;
  font-size:18px;
}

.slider-btn.prev{left:10px;}
.slider-btn.next{right:10px;}

.slider-indicator{
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.4);
  color:white;
  padding:4px 10px;
  border-radius:6px;
  font-size:13px;
}


/* Thumbnail */
.thumbnails{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:10px;
}

.thumbnails img{
  width:60px;
  height:40px;
  object-fit:cover;
  cursor:pointer;
  opacity:0.6;
  border:2px solid transparent;
  border-radius:6px;
  transition: all 0.2s;
}

.thumbnails img.active{
  opacity:1;
  border-color:var(--accent-1);
}


/* Açıklama */
.description{
  flex:1;
  min-width:280px;
}

.description h1{color:var(--accent-4);font-size:28px;margin-bottom:12px;}
.description p{font-size:16px;line-height:1.5;color:var(--muted);}
.description li{font-size:16px;line-height:1.5;color:var(--muted);}


.play-btn {
    display: inline-block;
    padding: 10px 18px;
    background: var(--accent-1); /* Soft mavi (tema ile uyumlu) */
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: 0 3px 10px rgba(59,130,246,0.18);
}

.play-btn:hover {
    background: #2563EB; /* bir ton koyu */
    box-shadow: 0 5px 14px rgba(59,130,246,0.25);
    transform: translateY(-1px);
}

.play-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(59,130,246,0.18);
}

.feedback-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  margin-top:12px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  color:#2563EB;
  background:rgba(0,0,0,0.04);
  border:1px solid #2563EB;
  transition:all .2s ease;
}

.feedback-btn:hover{
  background:rgba(0,0,0,0.08);
  transform:translateY(-1px);
}
.alert {
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
  padding: 15px;
  border-radius: 5px;
  margin: 10px 0;
  text-align: center;
  font-weight: 500;
}


/* FOOTER */
footer{padding:28px 0 60px;color:var(--muted);font-size:14px;text-align:center;}

/* RESPONSIVE */
@media(max-width:900px){
  .detail-container{flex-direction:column;}
}