/* ============ ÖĞRETMEN — genel görünüm ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Dokunmatikte çift dokunma / iki parmak yakınlaştırmayı engelle (ekran kendiliğinden zoom olmasın) */
html { touch-action: manipulation; }

:root {
  --mor: #7c5cd6;
  --mor-koyu: #5a3fb0;
  --krem: #faf6ef;
  --tahta-yesil: #f8fcf8;
}

body {
  font-family: "Segoe UI", system-ui, sans-serif;
  background: linear-gradient(160deg, #e8e0f7 0%, #fdf3e3 100%);
  min-height: 100vh;
  color: #2d2440;
}

.ekran { display: flex; flex-direction: column; min-height: 100vh; }
/* Sınıf ekranı ekrana TAM sığar: yeni bir düğme/satır eklenince sayfa uzayıp
   tahta-avatar ölçeği kaymasın, ekran kendiliğinden kaydırılıp zoomlanmasın */
#ekran-sinif { height: 100vh; height: 100dvh; overflow: hidden; }
.gizli { display: none !important; }

.baslik-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
}
.baslik-bar h1 { font-size: 1.5rem; }
.baslik-bar h2 { font-size: 1.15rem; flex: 1; text-align: center; }
.veli-link { text-decoration: none; font-size: 1.4rem; opacity: 0.6; }
.veli-link:hover { opacity: 1; }

/* ============ Ders seçim ekranı ============ */
.ders-listesi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px; padding: 10px 24px 40px;
}
.ders-kart {
  background: #fff; border: 3px solid var(--mor); border-radius: 18px;
  padding: 20px 16px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 4px 0 var(--mor-koyu);
  transition: transform 0.1s;
  font-family: inherit;
}
.ders-kart:hover { transform: translateY(-3px); }
.ders-kart:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--mor-koyu); }
.ders-adi { font-weight: 700; color: var(--mor-koyu); font-size: 0.95rem; }
.konu-adi { font-size: 1.15rem; font-weight: 600; }
.tarih { font-size: 0.8rem; color: #9a8fb8; }
.bos-mesaj { grid-column: 1/-1; text-align: center; color: #7a6f96; padding: 60px 0; line-height: 1.8; }
.ogrenci-kart { align-items: center; text-align: center; }
.ogrenci-emoji { font-size: 2.4rem; }

/* ============ Sınıf ekranı ============ */
.sinif-bar { gap: 10px; }
.rozet {
  font-size: 0.8rem; padding: 5px 12px; border-radius: 999px;
  background: #ddd4f5; color: var(--mor-koyu); white-space: nowrap;
}
.rozet.konusuyor { background: #d3f2d8; color: #1e7d3c; }
.rozet.dinliyor  { background: #ffe1e1; color: #b33; }
.rozet.dusunuyor { background: #fff3cf; color: #96700a; }
.rozet.hata      { background: #ffd4d4; color: #a00; }

.sinif {
  flex: 1; display: flex; gap: 12px;
  padding: 0 18px; align-items: stretch; min-height: 0;
  position: relative;   /* bildirim kutusu buraya göre konumlanır */
}

/* Tahta */
.tahta-cerceve {
  flex: 1; background: #8a5a2b; border-radius: 14px; padding: 12px;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.35), 0 6px 14px rgba(0,0,0,0.15);
  display: flex; min-height: 0;   /* sabit alt sınır yok: sınıf ekranı asla taşmaz */
}
.tahta {
  flex: 1; background: var(--tahta-yesil); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  /* Tahtadaki her şey (yapay zekânın çizdiği SVG metinleri dahil) bu fontu
     miras alır — el yazısı yerine okunaklı, düz bir yazı tipi. */
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
.tahta svg { width: 100%; height: 100%; }
.tahta-bos { color: #b9c4bb; font-size: 1.3rem; }

/* Senaryolu ders tahtası: yazı + örnek + resim öğeleri */
.tahta-icerik {
  width: 100%; height: 100%; padding: 20px 28px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}
.tahta-ogesi {
  font-family: inherit;
  font-size: 1.35rem; font-weight: 500; color: #1c2b3a;
  text-align: center; line-height: 1.5;
}
.tahta-ogesi.tahta-baslik {
  font-size: 1.7rem; font-weight: 700; color: #1e3a5f;
  border-bottom: 3px solid #1e3a5f; padding-bottom: 6px;
}
.tahta-ogesi.ornek {
  color: #b33; border: 2px dashed #b33; border-radius: 12px; padding: 8px 16px;
}
.tahta-ogesi.resim img {
  max-width: 100%; max-height: 36vh; border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.tahta-ogesi.resim span { display: block; font-size: 0.95rem; color: #567; margin-top: 5px; font-family: inherit; }

/* Tahtaya tebeşirle yazma animasyonu */
.tahta svg > * { transform-box: fill-box; transform-origin: center; }
.tahta-gizli { opacity: 0; }
.tahta-yaz { animation: tahtaBelir 0.45s ease-out; }
@keyframes tahtaBelir {
  0%   { opacity: 0; transform: translateY(10px) scale(0.92); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.03); }
  100% { opacity: 1; transform: none; }
}

/* Avatar — altyazı kutusu kaldırıldığı için boşalan yeri alır */
.avatar-alani { width: 340px; display: flex; align-items: stretch; justify-content: center; }
#avatar-kutu { width: 100%; height: 100%; min-height: 0; }
#avatar-kutu canvas { display: block; border-radius: 14px; }
#avatar-kutu svg { width: 100%; height: auto; display: block; }

/* Bildirim — öğretmenin anlatımı ekranda yazmaz; bu kutu yalnızca hata,
   mikrofon durumu ve öğrencinin sorusunun metni için kısa süre görünür. */
.bildirim {
  position: absolute; left: 50%; bottom: 12px; z-index: 40;
  max-width: min(620px, calc(100% - 36px));
  padding: 11px 18px; border-radius: 999px;
  background: rgba(45, 36, 64, 0.92); color: #fff;
  font-size: 1rem; line-height: 1.4; text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  animation: bildirimBelir 0.2s ease-out;
}
@keyframes bildirimBelir {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.bildirim { transform: translateX(-50%); }

/* Kontroller */
.kontroller {
  display: flex; gap: 10px; padding: 14px 18px 18px; flex-wrap: wrap;
}
.btn {
  font-family: inherit; font-size: 1.05rem; font-weight: 600;
  padding: 13px 20px; border-radius: 14px; border: none; cursor: pointer;
  background: #fff; color: var(--mor-koyu);
  box-shadow: 0 3px 0 #c9bde8;
}
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn.kucuk { padding: 8px 14px; font-size: 0.9rem; }
.btn.mik {
  flex: 1; min-width: 160px;
  background: var(--mor); color: #fff; box-shadow: 0 3px 0 var(--mor-koyu);
  touch-action: none;                      /* bas-konuş: dokunmatikte kaydırma/uzun basış davranışını kapat */
  user-select: none; -webkit-user-select: none;
}
.btn.mik.kayitta { background: #d64545; box-shadow: 0 3px 0 #a02f2f; animation: nabiz 1s infinite; }
.btn.quiz { background: #f5a623; color: #fff; box-shadow: 0 3px 0 #c77f0e; }
@keyframes nabiz { 50% { transform: scale(1.03); } }

/* Yazarak cevap satırı (mikrofonun alternatifi) — düğmelerle aynı satırda durur,
   yer kalmazsa alta iner; sınıf ekranının boyunu büyütmez */
.yazi-satiri { flex: 1 1 320px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.yazi-giris {
  flex: 1; min-width: 160px;
  font-family: inherit; font-size: 16px;   /* 16px altı: tablet/telefonda odaklanınca ekran kendiliğinden zoom oluyor */
  padding: 12px 16px; border-radius: 14px; border: 2px solid #ddd4f5;
  background: #fff; color: #3c3357;
}
.yazi-giris::placeholder { color: #a99ec6; }
.yazi-giris:focus { outline: none; border-color: var(--mor); }
.yazi-giris.uyari { border-color: #d64545; animation: yaziSalla 0.3s ease-in-out 2; }
@keyframes yaziSalla { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.yazi-ipucu { flex-basis: 100%; font-size: 0.85rem; color: #d64545; }
.yazi-ipucu:empty { display: none; }   /* boşken satırda yer kaplamasın */

/* ============ Görünüm ayar paneli ============ */
.ayar-panel {
  position: absolute; top: 60px; left: 18px; z-index: 50; /* solda: avatar sağda kalır, ayar yaparken görünür */
  background: #fff; border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.18);
  display: flex; flex-direction: column; gap: 10px; width: 250px;
  /* sınıf ekranı taşmayı gizlediği için panel kendi içinde kaydırılabilir olmalı */
  max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto;
}
.ayar-panel h4 { color: var(--mor-koyu); }
.ayar-panel label { font-size: 0.85rem; color: #5a4f78; display: flex; flex-direction: column; gap: 3px; }
.ayar-panel input[type="range"] { width: 100%; accent-color: var(--mor); }
.ayar-not { font-size: 0.75rem; color: #9a8fb8; }
.ekran { position: relative; }

/* ============ Veli ekranı ============ */
.veli-govde { max-width: 760px; margin: 0 auto; padding: 20px; width: 100%; }
.kart {
  background: #fff; border-radius: 16px; padding: 22px; margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.kart h3 { margin-bottom: 14px; color: var(--mor-koyu); }
.form-satir { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.form-satir input, textarea {
  flex: 1; padding: 11px 14px; border: 2px solid #ddd4f5; border-radius: 10px;
  font-family: inherit; font-size: 1rem; min-width: 180px;
}
textarea { width: 100%; min-height: 180px; resize: vertical; }
.ipucu { font-size: 0.85rem; color: #8a7fa8; margin: 6px 0 12px; line-height: 1.5; }
.veli-ders-satir {
  display: flex; align-items: center; gap: 10px; padding: 10px 4px;
  border-bottom: 1px solid #eee7fb;
}
.veli-ders-satir .bilgi { flex: 1; }
.btn.sil { background: #ffe3e3; color: #b33; box-shadow: 0 2px 0 #e8baba; padding: 8px 14px; }
.btn.birincil { background: var(--mor); color: #fff; box-shadow: 0 3px 0 var(--mor-koyu); }
.sonuc { margin-top: 10px; font-size: 0.95rem; }
.sonuc.ok { color: #1e7d3c; }
.sonuc.hata { color: #a00; }
/* İlerleme raporu (veli ekranı) */
.rapor-ogrenci { border-top: 1px solid #eee7fb; padding: 12px 0 6px; }
.rapor-ogrenci:first-child { border-top: 0; padding-top: 0; }
.rapor-baslik { font-size: 1.05rem; margin-bottom: 6px; }
.rapor-ozet { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.9rem; color: #5a4f78; margin-bottom: 8px; }
.rapor-tablo { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin-top: 6px; }
.rapor-tablo th, .rapor-tablo td { padding: 5px 6px; text-align: left; border-bottom: 1px solid #f0ebfa; white-space: nowrap; }
.rapor-tablo th { color: var(--mor-koyu); font-weight: 600; }
.ustalik { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
/* Öğrenci ekranı: çocuk girişi kutusu */
.ogrenci-giris { max-width: 360px; margin: 30px auto; background: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 10px 30px rgba(75,54,163,.12); text-align: center; }
.ogrenci-giris h2 { margin: 0 0 6px; color: var(--mor-koyu); }
.ogrenci-giris input { width: 100%; box-sizing: border-box; margin: 8px 0; padding: 12px; font-size: 1.4rem; text-align: center; letter-spacing: 6px; border: 2px solid #ddd4f5; border-radius: 10px; font-family: inherit; }
.ogrenci-giris .btn { width: 100%; margin-top: 6px; }
.ogrenci-giris a { color: var(--mor-koyu); font-weight: 600; text-decoration: none; }

/* Veli: dersler ve ödevler */
.ders-sekmeler { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ders-sekmeler .btn.secili { background: var(--mor); color: #fff; }
details.unite { margin-bottom: 8px; border: 1px solid #eee7fb; border-radius: 10px; background: #fff; }
details.unite summary { cursor: pointer; padding: 8px 10px; font-weight: 600; color: var(--mor-koyu); font-size: 0.9rem; list-style: none; display: flex; justify-content: space-between; gap: 8px; }
details.unite summary small { color: #8a7fa8; font-weight: 400; }
.odev-satir { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-top: 1px solid #f3effa; font-size: 0.88rem; cursor: pointer; }
.odev-satir:hover { background: #faf8ff; }
.odev-satir.secili { background: #f4f0ff; }
.odev-satir input { width: 18px; height: 18px; accent-color: var(--mor); flex: none; }
.odev-satir .bilgi { flex: 1; line-height: 1.35; }
.odev-satir .bilgi small { color: #8a7fa8; }
.odev-satir .kod { font-family: ui-monospace, Consolas, monospace; font-size: 0.72rem; color: var(--mor); }
.odev-satir .durum { text-align: right; white-space: nowrap; line-height: 1.5; }
.odev-satir .durum small { color: #8a7fa8; font-size: 0.75rem; }
.cip { font-size: 0.74rem; padding: 2px 8px; border-radius: 999px; background: #eee7fb; color: #5a4f78; white-space: nowrap; }
.cip.bitti { background: #d3f2d8; color: #1e7d3c; } .cip.devam { background: #fff3cf; color: #96700a; } .cip.yeni { background: #eee; color: #777; }
.ders-kart { position: relative; }
.ders-kart .cip { position: absolute; top: 8px; right: 8px; }
.ustalik-cip { font-size: 0.8rem; padding: 3px 9px; border-radius: 999px; background: #eee7fb; color: #5a4f78; }
.ustalik-cip.iyi { background: #d3f2d8; color: #1e7d3c; }
.ustalik-cip.orta { background: #fff3cf; color: #96700a; }
.ustalik-cip.zayif { background: #ffe1e1; color: #b33; }

/* Ders klasörü seçimi */
.klasor-secenekler { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.klasor-sec {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-family: inherit; text-align: left; cursor: pointer;
  padding: 9px 13px; border-radius: 12px;
  border: 2px solid #ddd4f5; background: #faf7ff; color: var(--mor-koyu);
}
.klasor-sec b { font-size: 0.95rem; }
.klasor-sec span { font-size: 0.78rem; color: #8a7fa8; }
.klasor-sec:hover { border-color: var(--mor); }
.klasor-sec.secili { background: var(--mor); border-color: var(--mor); color: #fff; }
.klasor-sec.secili span { color: #efe9ff; }
.klasor-sec.eksik { border-color: #f0c2c2; background: #fff6f6; }
.klasor-sec.eksik span { color: #b33; }

/* ============ Tablet / dar ekran ============ */
@media (max-width: 820px) {
  .sinif { flex-direction: column; }
  .avatar-alani { width: 100%; }
  #avatar-kutu { max-height: 40vh; display: flex; justify-content: center; }
  #avatar-kutu svg { height: 40vh; width: auto; }
}

/* ============ Telefon — dikey ============
   Sınıf ekranı 100dvh içine sığmak zorunda (overflow: hidden). Dar ekranda
   asıl daralan yer tahta oluyordu: avatar sabit pay aldığı için ders içeriği
   40px'e kadar iniyordu. Burada öncelik tahtaya veriliyor; avatar, başlık,
   altyazı ve düğmeler sıkıştırılıyor. */
@media (max-width: 560px) {
  /* --- Başlık çubuğu: tek satır, taşarsa üç nokta --- */
  .baslik-bar { padding: 9px 12px; gap: 8px; }
  .baslik-bar h1 {
    font-size: 1.05rem; line-height: 1.25; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis;
  }
  .baslik-bar h2 {
    font-size: 0.95rem; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sinif-bar { padding: 7px 10px; gap: 6px; flex-wrap: nowrap; }
  .sinif-bar .btn.kucuk { padding: 7px 9px; font-size: 0.8rem; flex: 0 0 auto; }
  .rozet { font-size: 0.7rem; padding: 4px 9px; flex: 0 0 auto; }
  .veli-link { font-size: 1.25rem; flex: 0 0 auto; }

  /* --- Ders / öğrenci seçimi: tek sütun --- */
  .ders-listesi { grid-template-columns: 1fr; gap: 12px; padding: 6px 12px 28px; }
  .ders-kart { padding: 15px 14px; border-width: 2px; }
  .konu-adi { font-size: 1.05rem; }
  .bos-mesaj { padding: 40px 0; }

  /* --- Sınıf: tahta önce ve büyük, avatar küçük --- */
  .sinif { gap: 8px; padding: 0 10px; }
  .tahta-cerceve { flex: 1 1 auto; min-height: 30dvh; padding: 7px; border-radius: 11px; }
  .tahta-bos { font-size: 1rem; }
  .tahta-icerik { padding: 12px 14px; gap: 10px; }
  .tahta-ogesi { font-size: 1.05rem; }
  .tahta-ogesi.tahta-baslik { font-size: 1.25rem; }
  .tahta-ogesi.resim img { max-height: 22dvh; }
  .tahta-ogesi.resim span { font-size: 0.85rem; }

  .avatar-alani { flex: 0 0 auto; height: 34dvh; max-height: 280px; }
  #avatar-kutu { max-height: none; height: 100%; }
  #avatar-kutu svg { height: 100%; width: auto; }

  /* --- Bildirim --- */
  .bildirim { bottom: 8px; padding: 9px 14px; font-size: 0.9rem; max-width: calc(100% - 24px); }

  /* --- Kontroller: 2x2 ızgara, yazı satırı tam genişlik --- */
  .kontroller {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 8px; padding: 9px 10px 12px;
  }
  .btn { font-size: 0.95rem; padding: 11px 10px; border-radius: 12px; }
  .btn.mik { flex: none; min-width: 0; }
  .yazi-satiri { grid-column: 1 / -1; flex: none; gap: 8px; }
  .yazi-giris { min-width: 0; padding: 10px 13px; }
  .yazi-satiri .btn { padding: 10px 14px; }

  /* --- Ayar panelleri: neredeyse tam genişlik --- */
  .ayar-panel {
    left: 10px; right: 10px; width: auto; top: 52px;
    padding: 13px 15px; max-height: calc(100dvh - 110px);
  }

  /* --- Veli ekranı: alanlar alt alta --- */
  .veli-govde { padding: 12px; }
  .kart { padding: 16px 14px; margin-bottom: 14px; border-radius: 14px; }
  .form-satir { gap: 8px; }
  .form-satir input, .form-satir textarea { min-width: 100%; }
  .form-satir input[style*="max-width"] { max-width: 100% !important; }
  .veli-ders-satir { flex-wrap: wrap; }
  .veli-ders-satir .bilgi { flex: 1 1 100%; }
  .klasor-sec { width: 100%; }
}

/* ============ Telefon — yatay ============
   Ekran alçalınca (yan çevrilmiş telefon) 820px kuralı alt alta dizip her şeyi
   ezdiği için burada yan yana düzene dönülüyor. */
@media (max-height: 520px) and (orientation: landscape) {
  .sinif { flex-direction: row; gap: 8px; padding: 0 10px; }
  .tahta-cerceve { flex: 1 1 auto; min-height: 0; padding: 6px; }
  .avatar-alani { flex: 0 0 auto; width: 36%; max-width: 250px; height: auto; }
  #avatar-kutu { max-height: none; height: 100%; }
  #avatar-kutu svg { height: 100%; width: auto; }
  .sinif-bar { padding: 5px 10px; }
  .bildirim { bottom: 8px; padding: 8px 14px; font-size: 0.88rem; }
  .kontroller { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 10px 8px; }
  .btn { font-size: 0.85rem; padding: 8px 12px; }
  .btn.mik { flex: 0 1 auto; min-width: 130px; }
  .yazi-satiri { flex: 1 1 220px; gap: 6px; }
  .ayar-panel { top: 44px; max-height: calc(100dvh - 60px); }
}