/* ==== Genel Ayarlar ==== */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Nunito', sans-serif; background: #fafafa; color: #333; line-height: 1.6; transition: background 0.3s, color 0.3s; }
body.dark { background: #222; color: #eee; }
.wrap { max-width: 1000px; margin: auto; padding: 0 1rem; }
h1, h2, h3 { font-family: 'Fredoka', sans-serif; margin-bottom: 0.5em; }
section { margin: 2rem 0; }
a { color: inherit; text-decoration: none; }
.site-logo { height: 120px; width: auto; display: block; }

/* ==== Header ve Navigasyon ==== */
header { background: #ffde59; padding: 0.5rem 0; margin-bottom: 1rem; }
header .wrap { display: flex; align-items: center; justify-content: space-between; position: relative; }
nav { display: flex; align-items: center; width: 100%; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 0.5rem; }
.logo { font-size: 2rem; }
.navlinks { display: flex; align-items: center; gap: 0.8rem; }
.navlinks a { font-weight: 600; }
.theme-btn { background: none; border: none; font-size: 1.2rem; cursor: pointer; }
.lang-switch button { background: none; border: none; cursor: pointer; padding: 0; margin: 0; }
.lang-switch img { width: 24px; height: 24px; border-radius: 50%; }
.lang-switch .active { outline: none; border-radius: 50%; }

/* ==== Hero ==== */
.hero { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.pill { background: #eee; color: #333; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.9rem; }
body.dark .pill { background: #444; color: #eee; }
.chip { background: #ffde59; padding: 0.2rem 0.5rem; border-radius: 12px; font-size: 0.85rem; margin-right: 0.5rem; display: inline-block; }

/* ==== Grid & Kartlar ==== */
.grid { display: grid; gap: 1rem; }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.card { background: white; border-radius: 18px; padding: 1rem; box-shadow: 0 2px 5px rgba(0,0,0,0.1); transition: background 0.3s; }
body.dark .card { background: #333; }

/* ==== Butonlar & Badge ==== */
.btn { background: #ff914d; color: #fff; border: none; border-radius: 18px; padding: 0.5rem 1rem; cursor: pointer; font-weight: 600; transition: background 0.3s; }
.btn:hover { background: #ff7b2c; }
.badge { background: #eee; color: #333; padding: 0.4rem 0.8rem; border-radius: 12px; font-size: 0.9rem; margin-left: 1rem; }
body.dark .badge { background: #444; color: #eee; }
.actions { margin-top: 1rem; }

/* ==== Boyama Alanı ==== */
#pad { width: 100%; height: 300px; border: 2px dashed #ccc; border-radius: 18px; cursor: crosshair; background: #fff; }
body.dark #pad { background: #222; border-color: #666; }
.tools { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.rainbow-label { display: flex; align-items: center; gap: 0.3rem; }

/* ==== Slider Galeri ==== */
.slider { position: relative; overflow: hidden; width: 100%; max-width: 800px; aspect-ratio: 16/9; margin: auto; border-radius: 18px; background: #333; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.slides { display: flex; transition: transform 0.5s ease; width: 100%; height: 100%; }
.slide { min-width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.slide img { width: 100%; height: 100%; object-fit: contain; border-radius: 18px; }
.prev, .next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); color: #fff; border: none; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; font-size: 20px; line-height: 1; transition: background 0.3s; z-index: 10; display: flex; align-items: center; justify-content: center; }
.prev:hover, .next:hover { background: rgba(255, 145, 77, 0.9); }
.prev { left: 15px; }
.next { right: 15px; }

/* ==== Footer ==== */
footer { text-align: center; padding: 1rem 0; margin-top: 2rem; font-size: 0.9rem; color: #666; }
body.dark footer { color: #aaa; }

/* Ödev ve kelime listeleri */
#odev-list, #sozluk-list { list-style: none; padding-left: 0; }
#odev-list li, #sozluk-list li { margin-bottom: 0.5rem; font-size: 1rem; }

/* ==== Tekli Fikir Kutusu ve Animasyon ==== */
.single-idea-box { text-align: center; padding: 3rem 1rem; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: bold; color: #ff914d; border: 4px dashed #ffde59; transition: transform 0.2s; }
.single-idea-box .big-icon { font-size: 4rem; margin-bottom: 1rem; display: block; }
@keyframes shake { 0% { transform: rotate(0deg); } 25% { transform: rotate(5deg); } 50% { transform: rotate(0eg); } 75% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } }
.shaking { animation: shake 0.2s infinite; background-color: #fffacd; }

/* =========================================
   ==== SADECE GÖRSEL MOBİL UYUM EKLENTİSİ ==== 
   ========================================= */

.menu-toggle {
  display: none;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #333;
}

@media (max-width: 768px) {
  /* Menüyü göster */
  .menu-toggle { display: block; }
  
  /* Linkleri gizle, açılır kapanır yap */
  .navlinks {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    background: #ffde59;
    padding: 1.5rem 0;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  }
  .navlinks.active { display: flex; }
  
  /* Logoyu mobilde küçült */
  .site-logo { height: 70px; }
  
  /* Kartları alt alta al */
  .hero, .cols-2, .cols-3 { grid-template-columns: 1fr; }
  
  /* Çizim araçlarını taşırmama */
  .tools { flex-wrap: wrap; justify-content: center; }
  
  /* Butonları parmakla kolay basılır hale getir */
  .btn { min-height: 44px; }
  
  /* Boyama alanını ekrana sığdır */
  #pad { height: 250px; }
  
  /* Slider oklarını biraz küçült */
  .prev, .next { width: 35px; height: 35px; font-size: 16px; }
}

/* ==== Yaş Çizik Efekti ==== */
.eski-yas {
  position: relative;
  display: inline-block;
  color: #999; 
  margin-right: 5px;
  font-size: 1.1em; 
  
}

/* Çapraz Kırmızı İnce Çizgi */
.eski-yas::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -25%; /* ✅ Çizgiyi ortalamak için sola doğru biraz daha çektik (-10% idi) */
  width: 150%; /* ✅ Çizgiyi uzattık (120% idi, şimdi rakamdan %50 daha uzun) */
  height: 2px; 
  background-color: #ff3333; 
  transform: translateY(-50%) rotate(-45deg); 
  border-radius: 2px; 
}