/* ============================================================
   DOJO HARITASI - Duolingo tarzinda ogrenme yolu
   uygulama.css'in ustune biner (acik tema oradan gelir).
   ============================================================ */

body { overflow-x: hidden; }

/* ---------- Ust cubuk ---------- */
.ust-menu {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px;
  /* Saydam zemin temaya uysun: koyu temada beyaz şerit kalmasın.
     --zemin her temada tanımlı olduğu için color-mix ile saydamlaştırıyoruz. */
  background: color-mix(in srgb, var(--zemin) 94%, transparent); backdrop-filter: blur(14px);
  border-bottom: 2px solid var(--cizgi); box-shadow: none;
}
.logo { font-size: 19px; font-weight: 800; letter-spacing: -0.3px; cursor: pointer; white-space: nowrap; }
.logo span { color: var(--mor); }
.istatistikler { display: flex; gap: 8px; align-items: center; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.stat-kutu {
  display: inline-flex; align-items: center; gap: 6px; background: var(--kart);
  border: 2px solid var(--cizgi); border-radius: 999px; padding: 6px 12px;
  font-weight: 800; font-size: 15px; white-space: nowrap; color: var(--yazi);
}
.stat-kutu.seri-kutu { color: var(--turuncu); }
/* Seri koruma: gökkuşağı/mavi ton — seri rozetinden ayrışsın */
.stat-kutu.koruma-kutu { color: #3a86ff; border-color: #cfe0ff; background: #f4f8ff; cursor: help; }
.stat-kutu.koruma-kutu[hidden] { display: none; }
/* Kelime defteri kutusu: tıklanabilir bir bağlantı, kart görünümünde */
.kelime-kutu { display: block; text-decoration: none; color: inherit; transition: 0.15s; }
.kelime-kutu:hover { border-color: var(--mor); transform: translateY(-2px); }
.kelime-kutu h4 { margin-bottom: 8px; }
.kelime-kutu .bar { margin-bottom: 8px; }
/* Tekrar bekleyen kelime uyarısı: dikkat çeken küçük etiket */
.kelime-uyari {
  margin-top: 8px; padding: 6px 10px; background: #fff4d6; border: 2px solid #f2dda1;
  border-radius: 10px; font-size: 12px; font-weight: 800; color: #8a6100;
}
.kelime-uyari[hidden] { display: none; }

/* Tanıtımı tekrar açma düğmesi */
.stat-kutu.yardim { cursor: pointer; color: var(--yazi-soluk); padding: 6px 11px; transition: 0.12s;
                   box-shadow: 0 3px 0 var(--cizgi); }
.stat-kutu.yardim:hover { color: var(--mor); border-color: var(--mor); }
.stat-kutu.yardim:active { transform: translateY(3px); box-shadow: none; }
#rutbeKutu { color: var(--mor); cursor: help; }
.profil { background: var(--mor); color: #fff; border-color: var(--mor); cursor: pointer; box-shadow: 0 3px 0 var(--mor-golge); transition: transform .12s, box-shadow .12s; }
.profil:active { transform: translateY(3px); box-shadow: none; }
.ses-anahtar { color: var(--yazi) !important; }

/* ============================================================
   TIKLANABİLİR ÜST MENÜ İKONLARI

   NEDEN: Üst sağdaki ikonlar (🧰 📊 ⚙️ 🗺️) gerçekten çalışıyordu
   ama imleç "auto" olduğu ve hover geri bildirimi bulunmadığı için
   DÜZ YAZI gibi duruyorlardı. Kullanıcı "bu ikonlar tıklanmıyor"
   diye bildirdi. Bu kural, tıklanabilir olan her kutuya el imleci ve
   basılabilir görünüm verir.
   ============================================================ */
.stat-kutu[role="button"] {
  cursor: pointer;
  transition: transform .12s, border-color .15s, box-shadow .12s, color .15s;
  box-shadow: 0 3px 0 var(--cizgi);
}
.stat-kutu[role="button"]:hover { transform: translateY(-2px); border-color: var(--mor); color: var(--mor); }
.stat-kutu[role="button"]:active { transform: translateY(3px); box-shadow: none; }
/* Klavye ile gezinirken hangi ikonda olduğun belli olsun (erişilebilirlik) */
.stat-kutu[role="button"]:focus-visible { outline: 3px solid var(--mor); outline-offset: 2px; }

/* Dojo'da destek e-posta adresi (footer) */
.git-not { text-align: center; padding: 18px 14px 26px; font-size: 12.5px; color: var(--yazi-soluk); font-weight: 600; }
.git-not a { color: var(--mor); font-weight: 800; text-decoration: none; }
.git-not a:hover { text-decoration: underline; }

/* ---------- Yerlesim ---------- */
/* TABLET + MASAÜSTÜ: iki sütun. minmax(0,1fr) klasik grid taşma önleyici:
   sütun içeriği (uzun başlık, geniş tablo) ne olursa olsun sütun
   viewport'tan genişlemez. flex-basis:0 eşit dağılım verir. */
.ana-kapsayici { display: flex; justify-content: center; align-items: flex-start; max-width: 1020px; margin: 26px auto 0; gap: 34px; padding: 0 18px; }
.harita-alani { flex: 1 1 0; min-width: 0; max-width: 560px; position: relative; padding-bottom: 60px; width: 100%; }
.harita-alani::before { display: none; }

/* TABLET (768-1100px): iki sütun DARPALIR — sağ panel haritanın ALTINA geçer.
   NEDEN: 1032x1376 (iPad Pro) gibi orta tabletlerde 560px harita + 300px panel
   + 34px gap + 36px padding = 1030px; viewport sınırında panel sağda kesiliyordu.
   ÇÖZÜM: 1100px'e kadar tek sütun: harita üstte ortalı, panel altta tam genişlik.
   (Panel kendi içinde max-height ile kaydırılıyordu; altta iken buna gerek yok.) */
@media (min-width: 821px) and (max-width: 1100px) {
  .ana-kapsayici { flex-direction: column; align-items: center; gap: 22px;
                   margin-top: 18px; padding: 0 16px; }
  .harita-alani { width: 100%; max-width: 560px; order: 1; }
  /* Sağ panel: haritanın altında, tam genişlik ama max-width ile okunur kalır. */
  .sag-panel { order: 2; position: static; width: 100%; max-width: 560px;
               max-height: none; overflow: visible; flex: none; }
}

/* ---------- Bolum basligi ---------- */
/* KOMPAKT + TAŞMASIZ: max-width yerine width:100% sınırlaması;
   parent padding'i zaten sınır veriyor. Metin uzunsa kırılır. */
.bolum {
  position: relative; z-index: 3; margin: 34px auto 6px;
  width: 100%; max-width: 420px; min-width: 0;
  background: var(--bolum-renk, var(--mor)); color: #fff; border-radius: 18px;
  padding: 14px 18px; box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18);
  overflow-wrap: break-word; word-break: break-word;
}
.bolum-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bolum-no { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; opacity: .85; font-weight: 800; }
.bolum-ad { font-size: 19px; font-weight: 800; min-width: 0; overflow-wrap: anywhere; }
.bolum-alt { font-size: 12.5px; opacity: .9; margin-top: 3px; font-weight: 600; }
/* Dar ekran: bandı kompakt yap — dikey padding yarıya, font küçük.
   NEDEN: 375px'te bandın içeriği (avatar + BÖLÜM 2 + başlık + halka)
   viewport'tan genişti ve sağdaki halka kesiliyordu. */
@media (max-width: 480px) {
  .bolum { padding: 9px 12px; border-radius: 14px; margin-top: 22px; }
  .bolum-ad { font-size: 15px; }
  .bolum-no { font-size: 10px; letter-spacing: .8px; }
  .bolum-avatar { width: 24px; height: 24px; font-size: 14px; }
  .bolum-cumle { font-size: 11px; margin-top: 5px; }
}

/* Bölüm avatarı: başlıktaki küçük maskot/simge (süslemeden çok ayrım için). */
.bolum-avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1;
  background: rgba(255, 255, 255, .22);
  border: 2px solid rgba(255, 255, 255, .38);
}

/* Bölüm cümlesi: maskot + kısa teşvik metni. */
.bolum-cumle {
  display: flex; align-items: center; gap: 7px;
  margin-top: 7px; font-size: 12.5px; font-weight: 700;
  color: rgba(255, 255, 255, .95); line-height: 1.35;
}
.bolum-cumle .bc-maskot { font-size: 15px; line-height: 1; flex: none; }

/* 📺 Bölüm video linki: bandın ALTINA değil, bandın içine küçük, sakin
   bağlantı olarak eklenir (dojo-yol.js). URL boşsa hiç oluşmaz. */
.bolum-video {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px; font-size: 12px; font-weight: 700;
  color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .16); border-radius: 999px;
  padding: 5px 12px; text-decoration: none;
  transition: background .15s, transform .12s;
}
.bolum-video:hover { background: rgba(255, 255, 255, .28); transform: translateY(-1px); }
@media (max-width: 480px) {
  .bolum-video { font-size: 11px; padding: 4px 10px; margin-top: 6px; }
}

/* ---------- Bölüm ilerleme halkası ---------- */
/* Bölüm başlığının sağında duran SVG halka: bitirilen ders oranını gösterir. */
.bolum-halka {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto; width: 40px; height: 40px; flex: none;
}
.bolum-halka svg { display: block; }
/* Dolan halka yumuşakça dolsun */
.bolum-halka .halka-dolu { transition: stroke-dasharray .8s cubic-bezier(.2,.9,.3,1); }
.bolum-halka-yazi {
  /* Halka yazısı: SVG'nin ORTASINDA durmalı ve dışarı taşmamalı.
     Eskiden absolute + boş konumlandırma vardı; "0/13" halka çizgisine
     biniyordu (ekran görüntüsünde görüldü). Artık tam ortalanıyor
     ve dar halkada yazı küçülüyor. */
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800; letter-spacing: -.4px;
  color: #fff; white-space: nowrap; line-height: 1;
  pointer-events: none;
}
@media (max-width: 480px) {
  .bolum-halka-yazi { font-size: 9px; }
}
@media (max-width: 480px) {
  .bolum-halka { width: 34px; height: 34px; }
  .bolum-halka svg { width: 34px; height: 34px; }
  .bolum-halka-yazi { font-size: 9.5px; }
}

/* ---------- Yol satiri + daire ---------- */
.yol-satir { position: relative; z-index: 2; display: flex; justify-content: center; padding: 15px 0; }
.dugme-kap { position: relative; display: flex; flex-direction: column; align-items: center; transform: translateX(var(--girinti, 0px)); }

/* MOBİL: düğüm aralıklarını sıkılaştır — tek ekranda daha çok düğüm görünsün.
   KURAL: düğme 76px'den KÜÇÜLMEZ; satır padding'i 15px -> 8px; harf şeridi ve
   başlık arası daralır. Dokunma hedefi: 76px daire zaten 44px'in üstünde. */
@media (max-width: 480px) {
  .yol-satir { padding: 8px 0; }
  .yol-satir:has(.dugme.aktif) { padding-top: 20px; }
  .dugme-ad { margin-top: 3px; font-size: 11.5px; }
  .dugme-harfler { margin-top: 1px; }
  .dugme-yildiz { margin-top: 3px; font-size: 11px; }
  .basla-balonu { top: -24px; font-size: 10.5px; padding: 4px 9px; }
  .bolum { margin: 20px auto 4px; }
}

.dugme {
  position: relative; width: 76px; height: 76px; border-radius: 50%; border: none;
  background: var(--dugme-renk, var(--mor)); cursor: pointer; padding: 0;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.22), inset 0 -5px 0 rgba(0, 0, 0, .12);
  transition: transform .1s, box-shadow .1s, filter .15s;
  display: flex; align-items: center; justify-content: center;
}
.dugme:hover { filter: brightness(1.06); }
.dugme:active { transform: translateY(6px); box-shadow: 0 0 0 rgba(0,0,0,.2), inset 0 -5px 0 rgba(0,0,0,.12); }
.dugme-ikon { font-size: 32px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.dugme.bitmis { background: var(--turkuaz); }
.dugme.bitmis .dugme-ikon { color: #fff; font-size: 36px; font-weight: 900; }
.dugme.ozel { width: 88px; height: 88px; }
.dugme.ozel .dugme-ikon { font-size: 40px; }
.dugme.aktif { box-shadow: 0 6px 0 rgba(0,0,0,.22), inset 0 -5px 0 rgba(0,0,0,.12), 0 0 0 6px rgba(123, 92, 240, .18); }
/* NABIZ HALKASI (aktif ders): düğümün etrafında yayılan iki halka.
   NEDEN: Tek halka vardı ve "sıradaki ders burada" çağrısı zayıftı.
   İki kademeli halka, hareket eden bir hedef gibi okunur.
   KURAL: yalnızca transform + opacity; layout kaymaz. */
.dugme.aktif::after {
  content: ''; position: absolute; inset: -18px; border-radius: 50%;
  border: 4px solid rgba(123, 92, 240, .35); animation: dalga 2.2s ease-out infinite;
}
/* İkinci halka: aynı animasyon, yarım periyot gecikmeli.
   NEDEN ::before: ::after zaten dolu; ikinci katman için ayrı eleman gerekmez. */
.dugme.aktif::before {
  content: ''; position: absolute; inset: -18px; border-radius: 50%;
  border: 4px solid rgba(123, 92, 240, .3); pointer-events: none;
  animation: dalga 2.2s ease-out infinite; animation-delay: 1.1s;
}
@keyframes dalga { 0% { transform: scale(.85); opacity: .9; } 70% { transform: scale(1.12); opacity: 0; } 100% { opacity: 0; } }

/* KİLİT AÇILDI: ders bitirip haritaya dönünce yeni düğümde bir kez oynar.
   NEDEN: Kullanıcı "ilerledim" hissini görmeli. Kısa ve tek seferlik;
   sürekli nabız (aktif ders) ile karışmasın diye farklı renk ve şekil. */
.dugme.kilit-acildi::after {
  border-color: rgba(24, 194, 166, .8);
  animation: kilitAcil .7s ease-out 2;
}
@keyframes kilitAcil {
  0%   { transform: scale(.6); opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}
.dugme.kilit-acildi { animation: kilitParla 1.3s ease-out; }
@keyframes kilitParla {
  0%   { filter: brightness(1); }
  25%  { filter: brightness(1.5) saturate(1.3); }
  100% { filter: brightness(1); }
}

.basla-balonu {
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%);
  background: var(--kart); color: var(--mor); border: 2px solid var(--cizgi);
  font-size: 12px; font-weight: 900; letter-spacing: 1px; padding: 5px 12px;
  border-radius: 10px; white-space: nowrap; animation: ziplaBalon 1.6s ease-in-out infinite;
}
.basla-balonu::after {
  content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  border-width: 8px 7px 0; border-style: solid; border-color: var(--kart) transparent;
  filter: drop-shadow(0 2px 0 var(--cizgi));
}
@keyframes ziplaBalon { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -6px); } }

.dugme-yildiz { margin-top: 6px; font-size: 13px; letter-spacing: 1px; }
.dugme-ad { margin-top: 5px; font-size: 12.5px; font-weight: 700; color: var(--yazi-soluk); max-width: 138px; text-align: center; line-height: 1.3; word-break: break-word; overflow-wrap: break-word; }
.dugme-ad.bitmis { color: var(--turkuaz-koyu); }
.dugme-ad.aktif { color: var(--mor); font-weight: 800; }

/* Dersin GERÇEK harfleri (あ い う) — "A satırı"ndan daha somut.
   Kilitli düğümde de görünür ama soluk durur; kilit kararı JS'te verilir. */
.dugme-harfler {
  margin-top: 3px; font-size: 15px; font-weight: 700; letter-spacing: 2px;
  color: var(--yazi); text-align: center; line-height: 1.2; max-width: 150px;
}
/* KİLİTLİ: harfler SOLUK kalır.
   NEDEN: Harf bilgisi kaybolmasın (kullanıcı ne geleceğini görsün) ama
   "henüz açılmadı" hissi bozulmasın. Renk + saydamlık birlikte kullanılır;
   böylece koyu temada da (--yazi-soluk açık renk olduğu için) soluk kalır. */
.dugme-harfler.kilitli { color: var(--yazi-soluk); opacity: .5; }
@media (max-width: 480px) {
  .dugme-harfler { font-size: 13.5px; letter-spacing: 1px; max-width: 128px; }
}

/* ---------- KİLİTLİ DAİRE ----------
   Aktif daireden sonraki dersler: gri, basılamaz görünür.
   NEDEN: Kilit olmadan kullanıcı rastgele seviyeye atlıyordu. */
.dugme.kilitli {
  background: var(--kilitli-renk);
  box-shadow: 0 5px 0 rgba(0,0,0,.10);
  cursor: not-allowed;
  filter: grayscale(1);
  opacity: .72;
}
.dugme.kilitli .dugme-ikon { font-size: 28px; }
.dugme-ad.kilitli { color: var(--yazi-soluk); opacity: .7; font-weight: 700; }
/* Kilitli daireye hover'da "yükselme" olmasın: basılabilir izlenimi vermesin. */
.dugme-kap:has(.dugme.kilitli):hover .dugme { transform: none; }

/* Aktif dersin adi ile balon cakismasin diye yol satirina nefes payi */
.yol-satir:has(.dugme.aktif) { padding-top: 26px; }

/* ---------- Daire onizlemesi (secili ders karti) ---------- */
.onizleme {
  position: absolute; z-index: 40; width: min(340px, 88vw);
  background: var(--kart); border: 2px solid var(--cizgi); border-radius: 20px;
  padding: 16px; box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
  animation: spGir .18s ease-out both;
}
.onizleme-ust { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.onizleme-renk { width: 12px; height: 34px; border-radius: 6px; background: var(--mor); }
.onizleme-ad { font-size: 17px; font-weight: 800; }
.onizleme-alt { font-size: 13px; color: var(--yazi-soluk); margin-bottom: 12px; line-height: 1.5; }
/* Ders önizlemesinde "ne öğreneceksin" satırı */
.onizleme-icerik {
  font-size: 13px; font-weight: 700; color: var(--mor); margin-bottom: 12px;
  padding: 8px 11px; background: #f3f0ff; border-radius: 10px; line-height: 1.4;
}
.onizleme-istat { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.onizleme-istat span { background: var(--zemin-2); border-radius: 10px; padding: 5px 10px; font-size: 12.5px; font-weight: 700; }
.onizleme-btnler { display: flex; gap: 10px; }
.onizleme-btnler .sp-btn { flex: 1; }
.onizleme-ok { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 18px; height: 18px; background: var(--kart); border-right: 2px solid var(--cizgi); border-bottom: 2px solid var(--cizgi); }

/* ---------- Sag panel ---------- */
/* PANEL NEDEN KAYDIRILAMIYORDU?
   Eskiden: position: sticky; top: 84px; height: fit-content;
   Panel ekran yüksekliğinden uzun olduğunda (kelime defteri + destek + geri bildirim
   eklendikçe uzadı) sticky yapışıyor ve ALT KISMI GÖRÜNMÜYORDU; sayfa kaydırınca
   panel sabit kaldığı için erişilemiyordu.
   Çözüm: paneli kendi içinde kaydırılabilir yap; alt kısım her zaman ulaşılabilir olsun. */
.sag-panel {
  flex: 0 0 300px; position: sticky; top: 84px;
  max-height: calc(100vh - 100px);      /* ekrandan taşmasın */
  overflow-y: auto;                     /* kendi içinde kaydır */
  overscroll-behavior: contain;         /* kaydırma sayfaya sızmasın */
  -webkit-overflow-scrolling: touch;
  background: var(--kart); padding: 18px; border-radius: 22px;
  border: 2px solid var(--cizgi); box-shadow: var(--golge-kart); text-align: center;
  scrollbar-width: thin;
}
/* İnce, göze batmayan kaydırma çubuğu */
.sag-panel::-webkit-scrollbar { width: 8px; }
.sag-panel::-webkit-scrollbar-thumb { background: var(--cizgi); border-radius: 999px; }
.sag-panel::-webkit-scrollbar-thumb:hover { background: var(--cizgi-koyu); }
.sag-panel h3 { color: var(--yazi); margin: 0 0 12px; font-size: 17px; }
.sag-panel .bar { background: var(--zemin-2); height: 14px; border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.sag-panel .bar > div { background: var(--mor); width: 0%; height: 100%; border-radius: 999px; transition: width .5s; }
.sag-panel .bar.altin > div { background: var(--altin); }
.kucuk { color: var(--yazi-soluk); font-size: 12.5px; margin-bottom: 14px; font-weight: 600; }
.balon {
  position: relative; background: var(--zemin-2); color: var(--yazi); padding: 14px 15px;
  border-radius: 16px; font-weight: 700; font-size: 14.5px; line-height: 1.45; margin-bottom: 16px; border: 2px solid var(--cizgi);
}
.balon::after {
  content: ''; position: absolute; bottom: -11px; left: 50%; transform: translateX(-50%);
  border-width: 11px 9px 0; border-style: solid; border-color: var(--zemin-2) transparent;
}
.chibi { width: 148px; height: auto; cursor: pointer; animation: spNefes 3s ease-in-out infinite; }
.chibi-emoji { font-size: 82px; cursor: pointer; }

.kart-kutu { background: var(--zemin-2); border: 2px solid var(--cizgi); border-radius: 16px; padding: 14px; margin-top: 16px; text-align: left; }
.kart-kutu h4 { margin: 0 0 10px; font-size: 14px; color: var(--yazi); }

/* BAĞLANTI KARTLARI (Karışık Sınav, Sözlük, İstatistik, Ayarlar)
   NEDEN GEREKLİ: Bu kartlar <a> etiketi. Tarayıcı varsayılan olarak bağlantı metnini
   ortalar ve alt çizgi koyar; ayrıca 300px'lik dar panelde başlık ile açıklama
   arası boşluk kaybolup satırlar birbirine giriyordu (ekran görüntüsünde görüldü).
   Çözüm: blok akış + net satır aralığı; açıklama başlığın hemen altında kalsın. */
.sag-panel a.kart-kutu { display: block; color: inherit; text-decoration: none; }
.sag-panel a.kart-kutu h4 { text-align: left; }
.sag-panel a.kart-kutu .kucuk { margin-bottom: 0; line-height: 1.5; }
.sag-panel a.kart-kutu:hover { border-color: var(--mor); }
/* Panelin genel ortalaması bu bloklara sızmasın: içerik her zaman sola yaslı */
.sag-panel .kart-kutu, .sag-panel .destek-btn, .sag-panel .kur-btn { text-align: left; }
.sag-panel .destek-btn { text-align: center; }
.tekrar-btn {
  width: 100%; background: var(--turkuaz); color: #fff; border: none; border-radius: 12px;
  padding: 12px; font-size: 15px; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 0 var(--turkuaz-koyu); transition: transform .08s, box-shadow .08s; font-family: inherit;
}
.tekrar-btn:active { transform: translateY(4px); box-shadow: none; }
.tekrar-btn.pasif { background: var(--cizgi); color: var(--yazi-soluk); box-shadow: none; cursor: default; }
.chip-kap { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--kart); border: 2px solid var(--cizgi); border-radius: 12px; padding: 6px 10px; text-align: center; min-width: 50px; }
.chip b { display: block; font-size: 24px; line-height: 1.1; }
.chip small { color: var(--kirmizi); font-size: 11px; font-weight: 700; }
.kur-btn { margin-top: 16px; width: 100%; background: none; border: 2px dashed var(--cizgi-koyu); color: var(--yazi-soluk); border-radius: 12px; padding: 10px; cursor: pointer; font-size: 14px; font-weight: 700; font-family: inherit; }

/* ---------- Geri bildirim kutusu ---------- */
.geri-kutu textarea, .geri-kutu input {
  width: 100%; box-sizing: border-box; background: var(--kart); color: var(--yazi);
  border: 2px solid var(--cizgi); border-radius: 12px; padding: 10px; font-size: 14px;
  font-family: inherit; resize: vertical; outline: none; transition: border-color .15s;
}
.geri-kutu textarea:focus, .geri-kutu input:focus { border-color: var(--mor); }
.geri-kutu textarea::placeholder, .geri-kutu input::placeholder { color: #b3aa9b; }
.geri-alt { display: flex; gap: 8px; margin-top: 8px; align-items: stretch; }
.geri-alt input { flex: 1; }
.geri-alt .tekrar-btn { width: auto; white-space: nowrap; padding: 10px 16px; font-size: 13px; }
.geri-durum { font-size: 12.5px; font-weight: 700; margin-top: 8px; min-height: 16px; }
.geri-durum.iyi { color: var(--turkuaz-koyu); }
.geri-durum.hata { color: var(--kirmizi); }

/* ---------- Teknik bilgi gönderimi (hata bildirimi) ---------- */
.geri-hata-notu {
  margin-top: 10px; padding: 9px 11px; background: #fff4d6; border: 2px solid #f2dda1;
  border-radius: 12px; font-size: 12.5px; font-weight: 700; color: #8a6100; line-height: 1.5;
}
.geri-hata-notu[hidden] { display: none; }
.geri-detay { background: none; border: none; padding: 0; margin-left: 3px; color: #8a6100;
              font-family: inherit; font-size: 12.5px; font-weight: 800; text-decoration: underline;
              cursor: pointer; }
.geri-teknik-satir { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px;
                     font-size: 12.5px; font-weight: 700; color: var(--yazi-soluk); cursor: pointer; line-height: 1.45; }
.geri-teknik-satir input { margin: 2px 0 0; flex: none; width: 17px; height: 17px; cursor: pointer; accent-color: var(--mor); }
.geri-onizleme {
  margin: 8px 0 0; padding: 10px; background: var(--zemin-2); border: 2px solid var(--cizgi);
  border-radius: 12px; font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  max-height: 190px; overflow-y: auto; font-family: 'Cascadia Mono', Consolas, monospace; color: var(--yazi-soluk);
}
.geri-onizleme[hidden] { display: none; }

/* ---------- Destek (Kreosus) ---------- */
.destek-btn {
  /* Metin "Sensei'ye bir çay ısmarla" dar panelde 4 satıra kırılıyordu.
     Çözüm: satır yüksekliğini sıkılaştır + emoji ile metni tek blok hâlinde tut;
     panel çok darsa yazı boyutu küçülür (aşağıdaki medya sorgusu). */
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 14px; padding: 12px 10px; text-align: center; text-decoration: none;
  background: #fff8e8; color: var(--altin-koyu); border: 2px solid var(--altin);
  border-radius: 14px; font-weight: 800; font-size: 14px; line-height: 1.3;
  box-shadow: 0 4px 0 var(--altin); transition: transform .08s, box-shadow .08s, background .15s;
}
.destek-btn .destek-emoji { font-size: 17px; flex: none; }
.destek-btn .destek-yazi { white-space: nowrap; }
.destek-btn:hover { background: #fff2d4; }
.destek-btn:active { transform: translateY(4px); box-shadow: none; }
.kur-btn[hidden] { display: none; }

/* ---------- Mobil ---------- */
@media (max-width: 820px) {
  .ana-kapsayici { flex-direction: column; gap: 18px; margin-top: 16px; padding: 0 14px; }
  /* MOBİLDE HARİTA ÖNCELİKLİ:
     Kullanıcı dojo'ya girdiğinde doğrudan haritasını ve aktif dersini görmeli.
     Sağ panel araçları ve Sensei paneli haritanın altında yer alır. */
  .harita-alani { width: 100%; max-width: 100%; order: 1; }
  .sag-panel { order: 2; position: static; width: 100%; flex: none; text-align: left;
               display: flex; flex-direction: column; gap: 14px; align-items: stretch;
               max-height: none; overflow: visible; }
  .sag-panel .kart-kutu, .sag-panel .destek-btn, .sag-panel .kur-btn { width: 100%; }
  /* Mobilde destek düğmesi tam genişlik; metin tek satır kalır */
  .destek-btn { justify-content: center; }
  .destek-btn .destek-yazi { white-space: normal; }
  .sag-panel h3 { margin-bottom: 0; }
  .balon { margin-bottom: 0; }
  .chibi { width: 104px; }
  .ust-menu { padding: 10px 12px; flex-wrap: wrap; }
  .logo { font-size: 17px; }
  .stat-kutu { padding: 5px 10px; font-size: 13.5px; }
  .dugme { width: 68px; height: 68px; }
  .dugme-ikon { font-size: 28px; }
  .dugme.ozel { width: 78px; height: 78px; }
  .dugme.ozel .dugme-ikon { font-size: 34px; }
  .yol-satir { padding: 12px 0; }
  /* ALT BİLGİ ŞERİDİ: harita açıkken altındaki destek düğmesine
     yapışmasın diye üstünden nefes payı bırakılır. */
  .sp-altbilgi { margin-top: 20px; }
}