/* Cheerful modern theme: bright gradients, confetti, playful badges */
:root{
  --bg1: #00c6ff;
  --bg2: #fbc7d4;
  --card: rgba(255,255,255,0.06);
  --glass: rgba(255,255,255,0.12);
  --accent: #fff3;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Poppins', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial;
  color:#0a0a0a;
  background: linear-gradient(135deg,var(--bg1),var(--bg2));
  /* Animasyonlar kaldirildi */
  -webkit-font-smoothing:antialiased;
}
/* Animasyon keyframes kaldirildi */

/* playful confetti dots */
body::after{
  content:"";
  position:fixed;left:0;right:0;top:0;bottom:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,0.12) 0 6px, transparent 6px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.10) 0 5px, transparent 5px),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,0.08) 0 4px, transparent 4px);
  opacity:0.8;
  mix-blend-mode:overlay;
  /* Animasyon kapatildi */
  /* animation: confettiMove 8s linear infinite; */
}
/* @keyframes confettiMove{0%{transform:translateY(0)}100%{transform:translateY(-40px)}} */
.container{max-width:1200px;margin:2rem auto;padding:1rem}


.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.6);

    margin: 0; /* fixed olunca kenar boslugu istemeyiz */

    backdrop-filter: blur(10px);
}
body {
  margin: 0;
  font-family: 'Poppins', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial;
  color: #0a0a0a;
background: linear-gradient(135deg,
  #667db6 0%,
  #0082c8 65%,
  #667db6 100%);
  background-size: 100% 1500%;
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  padding-top: 90px;
}

.site-header-normal {
    position: relative; /* veya static */
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 0; /* fixed header için köseleri düz tutmak daha iyi olur */
    margin: 0;

    backdrop-filter: blur(10px);

}

/* Sayfa içerigini header'in altindan baslatmak için */
body.game-page {
    padding-top: 0px; /* header yüksekligi kadar */
}


.brand{font-weight:800;font-size:1.6rem;color:#111}
.nav a{color:#111;margin-right:1rem;text-decoration:none;font-weight:600}
.search{display:flex;gap:0.5rem;align-items:center}
.search input, .search select{padding:0.5rem 0.6rem;border-radius:14px;border:0;background:rgba(255,255,255,0.85);color:inherit;box-shadow:0 6px 18px rgba(16,24,40,0.06)}
.search button{padding:0.5rem 0.9rem;border-radius:14px;border:0;background:linear-gradient(90deg,#ffd54d,#ff6b6b);cursor:pointer;color:#111;font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,0.12)}

.hero{padding:2rem;margin:1rem 0;background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.7));border-radius:12px;box-shadow:0 6px 30px rgba(0,0,0,0.08);color:#111}
.hero h1{margin:0;font-size:1.8rem}
.hero p{opacity:0.85}

.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:1rem}
.game-card{background:linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.98));border-radius:18px;overflow:hidden;transition:transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s ease;box-shadow:0 6px 30px rgba(16,24,40,0.08);border:1px solid rgba(16,24,40,0.03)}
.game-card:hover{transform:translateY(-10px) rotate(-0.5deg);box-shadow:0 18px 50px rgba(16,24,40,0.12)}
.game-card a{color:inherit;text-decoration:none;display:block;padding:0.8rem}
.thumb{height:150px;background-size:cover;background-position:center;border-radius:12px;margin-bottom:0.6rem;box-shadow:inset 0 -8px 40px rgba(0,0,0,0.06)}
.thumb.placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f0f6ff,#fff1f0);color:#333;font-weight:700}
.ribbon{position:absolute;right:12px;top:12px;background:linear-gradient(90deg,#ff6b6b,#ffd54d);padding:6px 10px;border-radius:999px;color:#111;font-weight:800;font-size:0.8rem;box-shadow:0 8px 18px rgba(0,0,0,0.12)}
.game-card .meta{display:flex;justify-content:space-between;opacity:0.9;font-size:0.85rem}
.badge{display:inline-block;padding:0.2rem 0.5rem;border-radius:999px;background:rgba(255,107,107,0.12);font-weight:700;color:#ff6b6b}

.site-footer{text-align:center;padding:1rem;margin-top:2rem;color:#111;opacity:0.95}

/* Game page */
.play-area iframe{width:100%;height:640px;border-radius:12px;border:0;background:#fff;display:block}
.player-box{background:#fff;padding:1rem;border-radius:12px;box-shadow:0 8px 30px rgba(16,24,40,0.06)}

/* Auth & admin */
.auth{max-width:520px;margin:2rem auto;background:#fff;padding:1.2rem;border-radius:16px;box-shadow:0 10px 30px rgba(16,24,40,0.06)}
label{display:block;margin-bottom:0.6rem;color:#111}
input[type=text],input[type=email],input[type=password],textarea,select{width:100%;padding:0.6rem;border-radius:12px;border:1px solid rgba(16,24,40,0.06);background:#fff;color:inherit}
button{background:linear-gradient(90deg,#ffd54d,#ff6b6b);padding:0.6rem 1rem;border-radius:12px;border:0;cursor:pointer;font-weight:800}
.alert{background:rgba(255,239,239,0.9);padding:0.6rem;border-radius:8px;margin-bottom:0.5rem;color:#111}

/* Admin table */
table.admin-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(16,24,40,0.06)}
table.admin-table th, table.admin-table td{padding:0.8rem;border-bottom:1px solid rgba(16,24,40,0.04);text-align:left}

/* Responsive */
@media (max-width:700px){
  .site-header{flex-direction:column;gap:0.6rem}
  .search{flex-wrap:wrap}
  .thumb{height:120px}
}


/* Logo in header */
.brand img{height:48px;display:block}

/* Game page - related & comments */
.related-games{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:1rem}
.related-card{background:#fff;padding:8px;border-radius:10px;box-shadow:0 6px 20px rgba(16,24,40,0.06);text-align:center}
.related-card .thumb{height:140px;border-radius:8px;margin-bottom:8px;background-size:cover;background-position:center}
.comments{margin-top:1.2rem;background:#fff;padding:10px;border-radius:10px;box-shadow:0 6px 20px rgba(16,24,40,0.04)}
.comment{padding:8px;border-bottom:1px solid rgba(16,24,40,0.04)}
.comment:last-child{border-bottom:0}
.comment .who{font-weight:700;color:#111}
.comment .when{font-size:0.85rem;color:#666}

/* comment form */
.comment-form textarea{width:100%;min-height:90px;padding:8px;border-radius:8px;border:1px solid rgba(16,24,40,0.06);margin-bottom:8px}
.comment-form button{display:inline-block;padding:8px 14px;border-radius:8px;background:linear-gradient(90deg,#ffd54d,#ff6b6b);border:0;color:#111;font-weight:800}


/* Increased game thumbnail size for better visibility */
.game-card, .game-item, .game, .game-thumb, .thumbnail, .game-thumbnail {
    background: none; /* Beyaz arka plani kaldir */
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    width: 250px; /* Daha büyük */
    height: 250px; /* Daha büyük */
}

.game-card img, .game-item img, .game-thumb img, .thumbnail img, .game-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Resim kirpilarak tam oturur */
    display: block;
}


/* Atari temali bölüm */
.atari-section {
    background-color: #1a1a1a; /* Siyah zemin */
    padding: 20px;
    border-radius: 12px;
margin-bottom: 40px; /* boslugu artirmak için burayi degistirebilirsin */
}

.atari-section h2 {
    color: #ff3c3c; /* Kirmizi baslik */
    font-family: 'Press Start 2P', cursive; /* Retro font (Google Fonts’tan eklenebilir) */
    font-size: 1.5rem;
    margin-bottom: 15px;




}

.atari-section .nost-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: -20px; /* Varsayilan boslugu küçülttük */


    display: flex;
    flex-direction: column;
    align-items: center; /* Yatay ortalama */
    justify-content: center; /* Dikey ortalama */
    text-align: center; /* Metni ortala */
    padding-bottom: 5px;

}

.atari-section .nost-card h3,
.atari-section .nost-card p {
    color: #fff; /* Beyaz yazi */
}

.atari-section .nost-card h3 {
    color: #fff;
    font-size: 14px; /* Daha küçük yazi */
    margin-top: 8px; /* Resimden biraz bosluk */
}

.atari-section .nost-card p {
    color: #fff;
    font-size: 12px;
    margin: 5px 0 0 0; /* Üst bosluk az, alt yok */
}

.atari-section .nost-card img {
    margin-bottom: 8px;
}

.atari-card {
    background-color: #262626; /* Kart için koyu gri */
    border: 2px solid #ff3c3c; /* Kirmizi çerçeve */
    border-radius: 8px;
    padding: 10px;
    color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}


.atari-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px #ff3c3c;
}


/* Masaüstü için sabit hizalama ve responsive düzen */
@media screen and (min-width: 1200px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
    .category-list, .nostalgic-games {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }
    .category-card, .nostalgic-card {
        width: 100%;
    }
}

/* Orta ekranlar (992px - 1199px) */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .container {
        max-width: 1000px;
        margin: 0 auto;
    }
    .category-list, .nostalgic-games {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 18px;
    }
}

/* Daha küçük masaüstü (768px - 991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .category-list, .nostalgic-games {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 15px;
    }
}


/* Mobilde nahoş boşluğu kaldır */
@media (max-width: 768px) {
  body {
    padding-top: 0 !important;
  }

  .site-header-mobile {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
  }

  main.container {
    margin-top: 70px; /* header yüksekliği kadar boşluk bırak */
  }
}