* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Comic Sans MS", "Segoe UI", sans-serif;
}

/* HEADER */
.header {
    background: linear-gradient(135deg, #7ec8e3, #4dabf7);
    text-align: center;
    padding: 70px 30px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}


.header h1 {
    margin: 0;
    font-size: 36px;
    white-space: nowrap;
}

.header p {
    font-size: 18px;
}



.header-center h1 {
    font-size: 36px;
    margin: 0;
}

.header-center p {
    font-size: 18px;
    margin: 5px 0 0;
}

.header-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.header-text h1 {
    font-size: 36px;
    margin: 0;
}

.header-text p {
    font-size: 18px;
    margin-top: 5px;
}

/* Sol taraf denge boşluğu */
.header-spacer {
    width: 380px; /* search-box ile aynı genişlik */
}
/* OYUN SAYFASI HEADER GERİ BUTONU */

/* MENU */
.menu {
    display: flex;
    justify-content: center;
    gap: 20px;
    background: #aee1f9;
    padding: 15px;
}

.menu a {
    text-decoration: none;
    background: white;
    padding: 10px 20px;
    border-radius: 25px;
    color: #333;
    font-weight: bold;
    transition: all 0.25s ease;
}

.menu a:hover {
    background: #ffe066;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}


/* CONTENT */
.content {
    display: grid; /* Esnek kutu düzenini açmaz flex açar. */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 101px; /*KUTULAR ARASI BOŞUK*/
    padding: 50px;
    max-width: 1200px;
    margin: auto;
}


/* CARD */
.class-card {
    width: 320px;
    height: 320px; /* Görselin oranına göre ayarlayın */
    border-radius: 30px;
    display: inline-block;
    flex-direction: column;
    justify-content: flex-end; /* İçeriği (butonu) alta iter */
    padding-bottom: 40px; /* Butonu en alttan biraz yukarı kaldırır */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    transition: transform 0.5s;
}

.class-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 30px rgba(0,0,0,0.18);
}

.class-card img {
    width: 200px; /* Görsel boyutunu ayarlayın */
    height: auto;
    margin-bottom: 15px;
    border-radius: 15px; /* Köşeleri yuvarlat */
}

.class-card p {
    font-size: 14px;
    color: #555;
    margin-bottom: 15px;
}
.class-card h2 {
    color: #4dabf7;
    margin-bottom: 10px;
}

.class-card button {
    margin-top: auto;
    background: linear-gradient(135deg, #ffd43b, #fab005);
    border: none;
    padding: 11px 22px;
    border-radius: 22px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.25s ease;
}

.class-card button:hover {
    transform: scale(1.05);
    background: linear-gradient(135deg, #fab005, #f59f00);
}


/* FOOTER */
.footer {
    background: #7ec8e3;
    color: white;
    text-align: center;
    padding: 15px;
}

/* Dropdown Konteynırı */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Butonu (Menüdeki linkler gibi görünmesi için) */
.dropbtn {
    background: white;
    color: #333;
    padding: 10px 18px;
    font-size: 16px;
    border: none;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    font-family: inherit;
}

/* İçerik (Başlangıçta Gizli) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-radius: 15px;
    padding-top: 8px;
    overflow: hidden;
     top: 110%;
}

.dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 10px;
}





/* İçerikteki Linkler */
.dropdown-content a {
    color: #333;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    background: white;
    border-radius: 0; /* Menü linklerinden farklı görünmesi için */
    border-bottom: 1px solid #f1f1f1;
}

/* Üzerine gelince renk değiştir */
.dropdown-content a:hover {
    background-color: #ffd43b;
}

/* Üzerine gelince listeyi göster */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Butonun hover rengi */
.dropdown:hover .dropbtn {
    background-color: #ffe066;
}

body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Comic Sans MS", "Segoe UI", sans-serif;
    background: #f2fbff;
}


       

        .game-container {
            max-width: 400px;
            margin: 40px auto;
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            text-align: center;
        }

        .numbers {
            font-size: 32px;
            margin: 20px 0;
        }

        .game-container input {
            padding: 10px;
            width: 80%;
            font-size: 18px;
            margin-bottom: 15px;
            text-align: center;
        }

       .game-container button {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 20px;
            background: #4CAF50;
            color: white;
            cursor: pointer;
            margin: 5px;
        }

        .game-container button:hover {
            background: #43a047;
        }

        .result {
            font-size: 18px;
            margin-top: 15px;
            font-weight: bold;
        }

        .score {
            margin-top: 10px;
            font-size: 16px;
        }

        .game-container a {
            display: inline-block;
            margin-top: 20px;
            text-decoration: none;
            color: #4CAF50;
            font-weight: bold;
        }

/*ARAMA BUTONU*/
.search-box {
    position: relative;
    width: 380px;            /* input + buton sığsın */
    margin: 0; 
    display: flex;           /* YAN YANA */
    align-items: center;
    gap: 8px;
    margin-left: auto; /* 🔥 SAĞA YASLAR */
    justify-self: end;
}


/*ARAMA BUTONU ÖNERİLERİ*/
.search-box input {
    flex: 1;                 /* KALAN ALANI DOLDURSUN */
    padding: 0 15px;
    border-radius: 20px;
    border: 1px solid #ccc;
    font-size: 15px;
}

.search-box button {
    
    padding: 0 18px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    background: rgb(208, 5, 5);
    color: #fff;
    appearance: none;
    -webkit-appearance: none;
}

.search-box input,
.search-box button {
    height: 42px;
    line-height: 42px;        /* 🔑 ALTIN KURAL */
    padding: 0 16px;
    border-radius: 20px;
    font-size: 15px;
    box-sizing: border-box;
    display: block;           /* inline farkını kaldırır */
}


.search-box button:hover {
    background: #f63e3e;
}
#suggestions {
    max-height: calc(4 * 32px); /* 4 öneri */
    overflow-y: scroll;   /* auto yerine scroll → çubuk her zaman var */
    overflow-x: hidden;

    background: transparent;
    padding: 4px 0;
    position: absolute;
    transition: all 0.2s ease;
    top: calc(100% + 8px);
    left: 5%;
    width: 75%;
    background: #72c4e2;
    border-radius: 15px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
    list-style: none;
    padding: 0px 0;
    display: none;
    z-index: 9999;
    scrollbar-gutter: stable;    /* destekleyenlerde boşluğu sabitler */


}

#suggestions::-webkit-scrollbar{ width: 11px; }
#suggestions::-webkit-scrollbar-thumb{ background: #414141ac; border-radius: 10px; }
#suggestions::-webkit-scrollbar-track{ background: rgb(255, 255, 255); border-radius: 10px; }

#suggestions li {
    padding: 6px 14px;
    margin: 4px 8px;          /* ⬅️ AYIRAN ASIL ŞEY */
    background: #ffffff;
    color: #333;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;

}

#suggestions li:hover {
    background: #f2f2f2; /*ÖNERİLENLERİN ÜZERİNE İMLEÇ GELDİĞİNDE RENK DEĞİŞİR.*/
    border-radius: 10px;
}

/* 1. Sınıf Kartı Arka Planı */
.card-1 {
    background-image: url('Resimler/1-sinif.png');
}
.card-2 {
    background-image: url('Resimler/2-sinif.png');
}

.card-3 {
    background-image: url('Resimler/3-sinif.png');
}

.card-4 {
    background-image: url('Resimler/4-sinif.png');
}
.card-5 {
    background-image: url('Resimler/akil-ve-zeka-oyunlari.png');
}
.card-6 {
    background-image: url('Resimler/1-sinif-turkce.png');
}
.card-7 {
    background-image: url('Resimler/1-sinif-matematik.png');
}
.card-8 {
    background-image: url('Resimler/1-sinif-hayat-bilgisi.png');
}
.card-9 {
    background-image: url('Resimler/1-sinif-boyama-etkinligi.png');
}

.card-10 {
    background-image: url('Resimler/matematik-oyunlari.png');
}
.card-11 {
    background-image: url('Resimler/hafiza-oyunlari.png');
}
.card-12 {
    background-image: url('Resimler/mantik-oyunlari.png');
}

.card-13 {
    background-image: url('Resimler/2-sinif-turkce.png');
}
.card-14 {
    background-image: url('Resimler/2-sinif-matematik.png');
}
.card-15 {
    background-image: url('Resimler/2-sinif-hayat-bilgisi.png');
}
.card-16 {
    background-image: url('Resimler/2-sinif-boyama-etkinligi.png');
}

.card-17 {
    background-image: url('Resimler/3-sinif-turkce.png');
}
.card-18 {
    background-image: url('Resimler/3-sinif-matematik.png');
}
.card-19 {
    background-image: url('Resimler/3-sinif-fen-bilimleri.png');
}
.card-20 {
    background-image: url('Resimler/3-sinif-boyama-etkinligi.png');
}


.card-21 {
    background-image: url('Resimler/4-sinif-turkce.png');
}

.card-22 {
    background-image: url('Resimler/4-sinif-matematik.png');
}
.card-23 {
    background-image: url('Resimler/4-sinif-fen-bilimleri.png');
}
.card-24 {
    background-image: url('Resimler/4-sinif-sosyal-bilgiler.png');
}
.card-25 {
    background-image: url('Resimler/4-sinif-boyama-etkinligi.png');
}
.card-26 {
    background-image: url('Resimler/toplama-oyunu-kolay.png');
}
.card-27 {
    background-image: url('Resimler/toplama-oyunu-orta.png');
}
.card-28 {
    background-image: url('Resimler/toplama-oyunu-zor.png');
}
.card-29 {
    background-image: url('Resimler/cikarma-oyunu-kolay.png');
}
.card-30 {
    background-image: url('Resimler/cikarma-oyunu-orta.png');
}
.card-31 {
    background-image: url('Resimler/cikarma-oyunu-zor.png');
}
.card-32 {
    background-image: url('Resimler/carpma-oyunu-kolay.png');
}
.card-33 {
    background-image: url('Resimler/carpma-oyunu-orta.png');
}
.card-34 {
    background-image: url('Resimler/carpma-oyunu-zor.png');
}
.card-35 {
    background-image: url('Resimler/sayi-mantigi.png');
}
.card-36 {
    background-image: url('Resimler/sekil-mantigi.png');
}
.card-37 {
    background-image: url('Resimler/akil-yurutme.png');
}
/* =========================================
   ✅ RESPONSIVE (Sadece Tablet + Mobil)
   style.css EN ALTINA EKLE
   ========================================= */

/* Tablet ve altı */
@media (max-width: 900px){

  html, body{
    max-width: 100%;
    overflow-x: hidden;
  }

  /* HEADER: absolute/boşluk/sıkışma problemlerini kaldır */
  .header{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    padding: 28px 16px;
    gap: 14px;
  }

  .header-spacer{
    display: none; /* 380px boşluğu kapat */
  }

  /* Başlığı normal akışa al (absolute iptal) */
  .header-text{
    position: static;
    transform: none;
    display: block;
    width: 100%;
  }

  .header-text h1{
    font-size: 28px;
    line-height: 1.2;
    white-space: normal;  /* tek satıra zorlama kalksın */
  }

  .header-text p{
    font-size: 15px;
  }

  /* Arama kutusu: tam genişlik */
  .search-box{
    width: 100%;
    max-width: 520px;
    margin-left: 0;       /* sağa yaslamayı kaldır */
    justify-self: auto;
  }

  .search-box input{
    width: 100%;
  }

  /* Öneriler: input genişliğine otursun, taşmasın */
  #suggestions{
    left: 0;
    width: 100%;
  }

  /* MENU: dikey, basması kolay */
  .menu{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }

  .menu a,
  .dropbtn{
    width: 100%;
    text-align: center;
  }

  /* Dropdown içerik: ekranı taşırmasın */
  .dropdown{
    width: 100%;
  }

  .dropdown-content{
    position: static;     /* mobilde aşağı doğru aksın */
    width: 100%;
    min-width: 0;
    box-shadow: none;
    border-radius: 15px;
    margin-top: 8px;
  }

  /* CONTENT: boşluğu azalt, 2 sütun */
  .content{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;            /* 101px çok büyüktü */
    padding: 16px;
  }

  /* Kartlar: sabit 320px yerine esnek */
  .class-card{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;  /* kare kalsın (modern) */
    padding-bottom: 0;
    border-radius: 26px;
    background-size: contain;
  }
}

/* Telefon */
@media (max-width: 600px){

  .header{
    padding: 26px 14px;
  }

  .header-text h1{
    font-size: 24px;
  }

  .header-text p{
    font-size: 14px;
  }

  /* Kartlar tek sütun */
  .content{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Çok küçük telefonlar */
@media (max-width: 380px){
  .header-text h1{ font-size: 22px; }
  .search-box input,
  .search-box button{ height: 40px; line-height: 40px; }
}