/* =========================================
   1. GENEL AYARLAR (Tüm sayfalarda geçerli)
   ========================================= */
body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #f8f9fa;
  color: #333;
}

/* === HEADER === */
header {
  background: #005b96;
  color: white;
  padding: 1rem;
  text-align: center;
}

header ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

header a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

/* === MAIN (Ana Alan) === */
main {
  padding: 20px;
}

/* === FOOTER === */
footer {
  background: #003b63;
  color: white;
  padding: 1.5rem 1rem;
  text-align: center;
  margin-top: 3rem;
}

/* Genel Bölüm Ayarları */
.classes {
  text-align: center; /* Başlığı ortalar */
  padding: 40px 20px;
  background-color: #f9f9f9; /* Hafif bir arka plan rengi */
}

.classes h2 {
  margin-bottom: 30px;
  color: #333;
  font-family: sans-serif;
}

/* Butonları Kapsayan Alan */
.class-buttons {
  display: grid;
  /* 2 sütunlu yapı oluşturur, mobilde de düzgün görünür */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
  gap: 20px; /* Kutular arası boşluk */
  max-width: 800px; /* İçeriğin çok yayılmasını engeller */
  margin: 0 auto; /* Ortalar */
}

/* Kare Butonların Kendisi */
.class-card {
  display: flex;
  align-items: center; /* Yazıyı dikey ortalar */
  justify-content: center; /* Yazıyı yatay ortalar */
  aspect-ratio: 1 / 1; /* EN ÖNEMLİ KISIM: Kare olmasını sağlar (En/Boy oranı 1:1) */
  background-color: #fff;
  border-radius: 15px; /* Köşeleri yuvarlatır */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Hafif gölge */
  text-decoration: none; /* Link alt çizgisini kaldırır */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: #333;
}

/* Hover (Üzerine Gelince) Efekti */
.class-card:hover {
  transform: translateY(-5px); /* Yukarı doğru hafif zıplama */
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.class-card h3 {
  font-size: 1.5rem;
  margin: 0;
}


/* Etkinlikler Bölümü */
.etkinlikler {
  padding: 40px 20px;
  text-align: center;
  background-color: #f9f9f9;
}

.etkinlikler h2 {
  margin-bottom: 25px;
  color: #333;
  font-size: 1.8rem;
}

/* Tek Etkinlik Kartı */
.etkinlik-kart {
  display: inline-flex;            /* Ortada, tek kart */
  align-items: center;
  gap: 15px;
  padding: 15px 20px;
  max-width: 380px;                /* Çok yayılmasın */
  background-color: #ffffff;
  border-radius: 12px;
  text-decoration: none;
  color: #333;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.etkinlik-kart:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}

/* İkon kısmı */
.etkinlik-ikon {
  font-size: 32px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #e2f0fb;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Yazı kısmı */
.etkinlik-icerik h3 {
  margin: 0 0 4px 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.etkinlik-icerik p {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
}


/* İstersen her sınıfa özel renk verebilirsin */
.class-5 { border-bottom: 5px solid #FF6B6B; }
.class-6 { border-bottom: 5px solid #4ECDC4; }
.class-7 { border-bottom: 5px solid #FFE66D; }
.class-8 { border-bottom: 5px solid #1A535C; }















/* =========================================
   2. TEMALAR MENÜSÜ (Kare Kare Konular)
   ========================================= */
.topic-container {
  max-width: 1000px;
  margin: 2rem auto;
  text-align: center;
}

.topic-container h3 {
  color: #003b63;
  margin-bottom: 30px;
  font-size: 24px;
  border-bottom: 2px solid #d6e4ef;
  padding-bottom: 10px;
  display: inline-block; 
  width: 100%;
}

/* Grid Yapısı (Yan yana dizilim) */
.grid-menu {
  display: grid;
  
  /* --- KÜÇÜLTME AYARI --- */
  /* Kutular en az 130px, en fazla 180px olacak */
  grid-template-columns: repeat(auto-fill, minmax(130px, 180px));
  
  gap: 15px; /* Kutular arası boşluk da biraz azaldı */
  justify-content: center;
}

/* Kutuların Kendisi */
.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px; /* Köşeler biraz daha keskinleşti */
  padding: 15px; /* İç boşluk azaldı */
  text-decoration: none;
  color: #444;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
  
  /* Kare kalmasını sağlar */
  aspect-ratio: 1 / 1; 
  
  width: 100%; 
  height: 100%; 
}

.grid-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0,91,150, 0.15);
  border-color: #3498db;
}

.grid-item .icon {
  font-size: 36px; /* İkon küçüldü */
  margin-bottom: 10px; /* İkon ile yazı arası mesafe azaldı */
}

.grid-item .title {
  font-weight: 600;
  font-size: 15px; /* Yazı biraz küçüldü */
  text-align: center;
  line-height: 1.3;
}

/* =========================================
   3. İÇERİK SAYFALARI (PDF, Test, Video)
   ========================================= */

.content-page-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

.category-section {
  margin-bottom: 50px;
}

.section-title {
  color: #003b63;
  border-left: 6px solid #005b96;
  padding-left: 15px;
  margin-bottom: 25px;
  font-size: 1.6rem;
  font-weight: 700;
}

.divider {
  border: 0;
  height: 1px;
  background: #e0e0e0;
  margin: 40px 0;
}

/* --- BURASI ÖNEMLİ: YAN YANA DİZİLİM AYARI --- */
.resource-grid {
  display: grid;
  /* Kartlar en az 200px olsun, sığdığı kadar yan yana dizilsin */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  width: 100%;
}

/* KART TASARIMI */
.resource-card {
  display: flex;
  align-items: center; 
  background: white;
  border: 1px solid #e1e8ed;
  border-radius: 12px;
  padding: 15px;
  text-decoration: none;
  color: #333;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}

.resource-card:hover {
  transform: translateY(-3px); 
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  background-color: #fff;
}

.card-icon {
  font-size: 1.8rem;
  margin-right: 15px;
  background: #f4f6f8;
  min-width: 50px; /* Sabit genişlik */
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.3s, color 0.3s;
}

.card-info h4 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #2c3e50;
}

.card-info span {
  font-size: 0.85rem;
  color: #7f8c8d;
}

/* ÖZEL RENKLER */
.resource-card.youtube:hover { border-color: #ff0000; }
.resource-card.youtube:hover .card-icon { color: #ff0000; background-color: #fff0f0; }

.resource-card.test:hover { border-color: #28a745; }
.resource-card.test:hover .card-icon { color: #28a745; background-color: #eafaf1; }

.resource-card.worksheet:hover { border-color: #005b96; }
.resource-card.worksheet:hover .card-icon { color: #005b96; background-color: #e2f0fb; }