/* İSNAD Künye Atölyesi — stil. Uygulamalar/isnad-atolye/stil.css
   (P2'de index.html'den taşındı; içerik aynı, yeni ekranların stili sonda.) */
:root{
  --kagit:#F7FAFD; --panel:#FFFFFF; --panel-2:#EFF5FB;
  /* --murekkep-3 açık temada koyu temanın değerini almıştı (#A9C8E9, beyazda
     1,7:1); Etik Kurul'la aynı değer (denetim turu 4). */
  --murekkep:#1B2A4A; --murekkep-2:#42556F; --murekkep-3:#56698A;
  --cizgi:rgba(4,44,83,.12); --cizgi-koyu:rgba(4,44,83,.28);
  --vurgu:#185FA5; --vurgu-yum:#E6F1FB; --lacivert:#042C53;
  --olur:#1F6B4D; --olur-zem:#E4F1EB;
  --olmaz:#9B2C2C; --olmaz-zem:#FAE8E8;
  --isaret:#C0392B; --isaret-zem:#FBEAE7;
  --uyari:#8A6414; --uyari-zem:#FAF2E0;
  --serif:Georgia,"Palatino Linotype","Times New Roman",serif;
  --govde:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --veri:ui-monospace,"Cascadia Mono","SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --kagit:#042C53; --panel:#08386A; --panel-2:#0C447C;
    --murekkep:#FFFFFF; --murekkep-2:#CFE1F5; --murekkep-3:#A9C8E9;
    --cizgi:rgba(156,198,238,.16); --cizgi-koyu:rgba(156,198,238,.34);
    --vurgu:#9CC6EE; --vurgu-yum:#08386A; --lacivert:#CFE1F5;
    --olur:#79CBA5; --olur-zem:#16302A;
    --olmaz:#E79A98; --olmaz-zem:#3A2223;
    --isaret:#F09A94; --isaret-zem:#3D2320;
    --uyari:#D9B76A; --uyari-zem:#332C19;
  }
}
:root[data-theme="dark"]{
  --kagit:#042C53; --panel:#08386A; --panel-2:#0C447C;
  --murekkep:#FFFFFF; --murekkep-2:#CFE1F5; --murekkep-3:#A9C8E9;
  --cizgi:rgba(156,198,238,.16); --cizgi-koyu:rgba(156,198,238,.34);
  --vurgu:#9CC6EE; --vurgu-yum:#08386A; --lacivert:#CFE1F5;
  --olur:#79CBA5; --olur-zem:#16302A;
  --olmaz:#E79A98; --olmaz-zem:#3A2223;
  --isaret:#F09A94; --isaret-zem:#3D2320;
  --uyari:#D9B76A; --uyari-zem:#332C19;
}

*{box-sizing:border-box}
/* hidden her zaman kazanır (.geri-bildirim gibi display verilmiş öğelerde de). */
[hidden]{display:none!important}
body{
  margin:0;background:var(--kagit);color:var(--murekkep);
  font-family:var(--govde);font-size:1.0625rem;line-height:1.6;
  padding:0 1.1rem 4rem;-webkit-font-smoothing:antialiased;
}
.sarmal{max-width:60rem;margin:0 auto}

header{padding:2.5rem 0 1.4rem;border-bottom:1px solid var(--cizgi)}
.ust-etiket{font-family:var(--veri);font-size:0.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--murekkep-3)}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,5vw,2.5rem);line-height:1.15;margin:.45rem 0 .5rem}
.alt-baslik{color:var(--murekkep-2);max-width:60ch;margin:0;font-size:.95rem}

/* ── Kimlik kartı ──
   İlk girişte ad, bölüm ve isteğe bağlı sınıf kodu (B aşaması). */
.katilim-kart{
  margin:1.6rem 0;padding:1.3rem 1.4rem;
  background:var(--panel);border:1px solid var(--cizgi);border-left:3px solid var(--vurgu);
  display:flex;flex-direction:column;gap:1rem;
}
.katilim-kart h2{margin:0;font-family:var(--serif);font-weight:400;font-size:1.45rem}
.katilim-kart h3{margin:0 0 .4rem;font-size:.95rem;color:var(--vurgu)}
.katilim-secim{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.katilim-secim legend{padding:0;font-weight:650;font-size:.92rem;margin-bottom:.45rem}
.secenek{
  display:flex;gap:.6rem;align-items:flex-start;cursor:pointer;
  padding:.6rem .7rem;border:1px solid var(--cizgi);border-radius:4px;
  transition:border-color .2s,background .2s;
}
.secenek:hover{border-color:var(--cizgi-koyu)}
.secenek input{margin-top:.28rem;flex:0 0 auto}
.secenek small{color:var(--murekkep-2)}
.secenek.onay{background:var(--vurgu-yum);border-color:var(--vurgu)}

/* Kimlik (B aşaması): ad, sınıf kodu, liste seçimi */
.kimlik-kart{max-width:36rem}
.kimlik-alan{display:flex;flex-direction:column;gap:.15rem}
#kimlik-ad,#kimlik-sinif,#kimlik-liste{
  width:100%;max-width:22rem;min-height:44px;padding:.55rem .7rem;font:inherit;
  background:var(--kagit);color:var(--murekkep);
  border:1px solid var(--cizgi-koyu);border-radius:4px;
}
#kimlik-sinif{max-width:11rem;font-family:var(--veri);letter-spacing:.08em}
#kimlik-ad:focus,#kimlik-sinif:focus,#kimlik-liste:focus{outline:none;border-color:var(--vurgu)}
#kimlik-ad:focus-visible,#kimlik-sinif:focus-visible,#kimlik-liste:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}
.kimlik-bolum .secenek{min-height:44px;align-items:center}
.kimlik-bolum .secenek input{margin-top:0}
.kimlik-hata{margin:0;min-height:1.2rem;font-size:.9rem;color:var(--olmaz);font-weight:600}
.katilim-not.uyari{color:var(--olmaz)}
.kimlik-kart .dugmeler{display:flex;gap:.6rem;flex-wrap:wrap}
.kimlik-kart .dugmeler .birincil{margin-left:auto}
.kimlik-soz{margin:0}
/* Aydınlatma pencereleri */
.pencere.bildirim ul{margin:.2rem 0 .4rem;padding-left:1.2rem;font-size:.92rem}
.pencere.bildirim li{margin:.35rem 0}
.pencere.aydinlatma p{font-size:.92rem;margin:.5rem 0}
.pencere.bildirim a,.pencere.aydinlatma a{color:var(--vurgu)}

.katilim-not{margin:.35rem 0 0;font-size:.84rem;color:var(--murekkep-3)}
.katilim-not a{color:var(--vurgu)}
.katilim-not b{color:var(--murekkep-2)}

button.bag{
  background:none;border:0;padding:0;font:inherit;font-size:.84rem;
  color:var(--vurgu);text-decoration:underline;cursor:pointer;
}


/* ── Seviye şeridi ── */
.seviye-serit{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;
  margin:1.4rem 0 1rem;padding:.85rem 1rem;
  background:var(--panel);border:1px solid var(--cizgi);border-left:3px solid var(--vurgu);
}
.seviye-rozet{
  font-family:var(--veri);font-size:.78rem;font-weight:650;
  background:var(--vurgu);color:var(--kagit);padding:.2rem .55rem;border-radius:3px;
}
.seviye-baslik{font-weight:650}
.seviye-serit p{margin:0;font-size:.88rem;color:var(--murekkep-2);flex:1 1 20rem}
.ustalik{display:flex;gap:.2rem;font-size:1.1rem;color:var(--cizgi-koyu)}
.ustalik .dolu{color:var(--uyari)}

/* ══ ÖĞRENME BÖLÜMÜ ══
   Künye kendini kurar. Ses Yolculuğu'ndaki ses olayı canlandırmasıyla aynı
   kalıp: zaman çizelgeli, parça parça, renkle işaretli.

     altın   (--uyari)  → şu an işlenen parça
     yeşil   (--olur)   → yerine oturmuş, işi bitmiş parça
     mavi    (--vurgu)  → biçim taşıyan öğe (italik / tırnak)
     kırmızı (--isaret) → noktalama; ders boyunca kırmızı kalır

   Ders iki turlu: önce kalıp (Ad Soyad, Eser Adı, Yer: Yayıncı, Yıl…), sonra
   aynı satırda kalıp gerçek künyeye dönüşür. Kural, tanınmayan bir eser
   adının gürültüsü olmadan kuruluyor; ardından hangi yuvaya ne girdiği
   görülüyor.

   Sıra alıştırma seviyeleriyle aynı: önce sıra (A), sonra biçim (C), en son
   noktalama (B). Öğrenci önce bütün dönüşümü seyrediyor, sonra aynı
   dönüşümü tek tek kendisi yapıyor. */
.ders-serit{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;
  margin:1.4rem 0 0;padding:.85rem 1rem;
  background:var(--panel);border:1px solid var(--cizgi);border-left:3px solid var(--lacivert);
}
/* Zemin --lacivert, yazı --kagit: ikisi de belirteç olduğu için karanlık
   temada kendiliğinden yer değiştirir, ayrı kural gerekmez. */
.ders-rozet{
  font-family:var(--veri);font-size:.78rem;font-weight:650;
  background:var(--lacivert);color:var(--kagit);padding:.2rem .55rem;border-radius:3px;
}
.ders-sayac{margin-left:auto;font-family:var(--veri);font-size:.78rem;color:var(--murekkep-3)}

.ders-sahne{
  background:var(--panel);border:1px solid var(--cizgi);border-top:none;
  padding:1.7rem 1.2rem 1.1rem;min-height:12rem;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
}
.ders-kunye{
  font-family:var(--serif);font-size:clamp(1rem,3.6vw,1.3rem);line-height:2.1;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  min-height:3.4rem;
}
/* Noktalama düşmeden önce parçaları ayıran şey boşluğun kendisi; ayırıcılar
   geldikten sonra aralığı onlar taşır. */
.ders-kunye.gevsek{gap:.3rem .55rem}

.kp{
  display:inline-block;position:relative;padding:.06rem .2rem;border-radius:3px;
  transition:transform .55s cubic-bezier(.34,1.4,.5,1),color .35s ease,
             background .35s ease,box-shadow .35s ease;
}
.kp.giris{animation:kpDus .34s cubic-bezier(.2,.8,.3,1) both}
@keyframes kpDus{
  from{opacity:0;transform:translateY(-10px) rotate(-4deg)}
  to  {opacity:1;transform:none}
}
/* İşaretli parça: şu an anlatılan parça. Altın renk + nabız + alt çizgi. */
.kp.isaretli{color:var(--uyari);background:var(--uyari-zem);animation:kpNabiz 1.05s ease-in-out infinite}
.kp.isaretli::after{
  content:"";position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);
  height:2px;background:var(--uyari);border-radius:2px;width:0;
  animation:kpCizgi .34s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes kpCizgi{to{width:82%}}
@keyframes kpNabiz{
  0%,100%{transform:translateY(0) scale(1)}
  50%    {transform:translateY(-3px) scale(1.06)}
}
.kp.yerlesti{color:var(--olur);background:var(--olur-zem)}
/* Biçim dönüşümü: parça önce sıkışır, sonra yeni biçimiyle patlar. */
.kp.sik{animation:none;transform:scaleX(.14) scaleY(1.1)}
.kp.patla{animation:kpPatla .5s cubic-bezier(.34,1.5,.5,1) both}
@keyframes kpPatla{
  0%  {transform:scaleX(.14) scaleY(1.1)}
  55% {transform:scaleX(1.22) scaleY(.94)}
  100%{transform:none}
}
/* Biçim taşıyan öğe kalıcı olarak ayrı renkte kalır: göz, eserin bağımsız
   mı yoksa bir bütünün parçası mı olduğunu renkten de okusun. */
.kp.bicimli{color:var(--vurgu)}
.kp i{font-style:italic}

/* Noktalama kırmızı: künyenin en çok gözden kaçan, en çok hata yapılan
   parçası. Ders boyunca kırmızı kalıyor — dikkat oradan ayrılmasın.
   Künyenin gerçek görünümü aşağıdaki üç biçim karşılaştırmasında düz
   mürekkeple duruyor, yani öğrenci doğru hâli de görüyor. */
.ka{
  display:inline-block;white-space:pre;font-weight:700;color:var(--isaret);
  transition:color .8s ease;
}
.ka.dus{animation:kaDus .52s cubic-bezier(.34,1.5,.5,1) both}
@keyframes kaDus{
  0%  {opacity:0;transform:translateY(-.6em) scale(.5)}
  60% {opacity:1;transform:translateY(.04em) scale(1.25)}
  100%{opacity:1;transform:none}
}
/* "Oturdu": düşme hareketi bitti. Renk değişmiyor, yalnızca nabız duruyor. */
.ka.oturdu{color:var(--isaret)}

/* Ders bittiğinde parçalar tıklanır: canlandırma geçtikten sonra da
   "bu parça neden böyle" sorusunun cevabı elde kalsın. */
.kp.tiklanir{cursor:pointer}
.kp.tiklanir:hover,.kp.tiklanir:focus-visible{background:var(--vurgu-yum)}
.kp.secili{background:var(--vurgu-yum);box-shadow:0 0 0 1px var(--vurgu)}

.olay-etiketler{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;min-height:1.7rem}
.olay{
  font-family:var(--veri);font-size:0.78rem;letter-spacing:.08em;text-transform:uppercase;
  font-weight:650;padding:.25rem .6rem;border-radius:999px;
  opacity:0;transform:translateY(7px);transition:opacity .34s,transform .34s;
}
.olay.gorunur{opacity:1;transform:none}
.olay.sira      {background:var(--vurgu-yum);color:var(--vurgu);border:1px solid var(--vurgu)}
.olay.bicim     {background:var(--olur-zem); color:var(--olur); border:1px solid var(--olur)}
.olay.noktalama {background:var(--isaret-zem);color:var(--isaret);border:1px solid var(--isaret)}
.olay.gercek    {background:var(--panel-2);  color:var(--murekkep);border:1px solid var(--cizgi-koyu)}

.ders-adim{
  font-size:.95rem;color:var(--murekkep-2);text-align:center;max-width:52ch;min-height:3rem;
}
.ders-adim b{color:var(--murekkep)}

.ders-ilerleme{width:100%;max-width:34rem;height:3px;background:var(--cizgi);border-radius:2px;overflow:hidden}
.ders-ilerleme span{display:block;height:100%;width:0;background:var(--vurgu)}
.ders-ilerleme span.akiyor{width:100%}

@media (prefers-reduced-motion:reduce){:root:not(.hareket-zorla){
  /* Anlatım yine kendiliğinden akar — kapanan şey yalnızca yer değiştirme
     ve düşme hareketi. Renkle işaretleme kaldığı için hiçbir bilgi
     kaybolmaz. */
  .kp,.ka{animation:none!important;transition:color .3s!important,background .3s!important}
  .kp.sik{transform:none!important}
}}
:root.hareket-kapali .kp,:root.hareket-kapali .ka{animation:none!important;transition:color .3s!important,background .3s!important}
:root.hareket-kapali .kp.sik{transform:none!important}
.ders-anlatim{
  background:var(--panel);border:1px solid var(--cizgi);border-top:none;
  padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.5rem;
}
.ders-anlatim h3{margin:0;font-size:1rem;color:var(--vurgu)}
.ders-anlatim p{margin:0;font-size:.94rem;color:var(--murekkep-2);max-width:62ch}
.ders-anlatim .not{font-size:.86rem;color:var(--uyari);margin-top:.3rem}

.bicim-karsilastirma{
  display:grid;grid-template-columns:9rem 1fr;gap:.6rem;
  padding:.5rem 0;border-bottom:1px solid var(--cizgi);
}
.bicim-karsilastirma:last-of-type{border-bottom:none}
.bk-etiket{font-family:var(--veri);font-size:0.78rem;color:var(--murekkep-3);padding-top:.15rem}
.bk-kunye{font-family:var(--serif);font-size:.96rem;line-height:1.5}
@media(max-width:560px){ .bicim-karsilastirma{grid-template-columns:1fr;gap:.15rem} }

/* ── Kaynak bilgi kartı ── */
.kaynak-kart{
  background:var(--panel);border:1px solid var(--cizgi);padding:1rem 1.1rem;margin-bottom:1.1rem;
}
.kaynak-kart > b{
  display:block;font-family:var(--veri);font-size:0.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--murekkep-3);margin-bottom:.6rem;font-weight:500;
}
.bilgi-satiri{display:grid;grid-template-columns:8rem 1fr;gap:.5rem;padding:.22rem 0;font-size:.92rem}
.bilgi-etiket{color:var(--murekkep-3);font-size:.82rem}
.bilgi-deger{color:var(--murekkep)}
@media(max-width:520px){ .bilgi-satiri{grid-template-columns:1fr} .bilgi-etiket{font-size:0.78rem} }

/* ── Çalışma alanı ── */
.calisma{
  background:var(--panel);border:1px solid var(--cizgi);padding:1.1rem;margin-bottom:1.1rem;
  display:flex;flex-direction:column;gap:.6rem;
}
.alan-etiket{
  font-family:var(--veri);font-size:0.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--murekkep-3);margin-top:.4rem;
}
.kurulan{
  min-height:3.4rem;padding:.6rem;background:var(--kagit);
  border:1px dashed var(--cizgi-koyu);border-radius:4px;
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
}
.bos-ipucu{color:var(--murekkep-3);font-size:.88rem;font-style:italic}
.havuz{display:flex;flex-wrap:wrap;gap:.4rem}
.cip{
  font-family:var(--serif);font-size:.95rem;
  padding:.45rem .7rem;border-radius:4px;cursor:pointer;
  background:var(--panel-2);color:var(--murekkep);
  border:1px solid var(--cizgi-koyu);text-align:left;
}
.cip:hover{border-color:var(--vurgu)}
.cip.secili{background:var(--vurgu-yum);border-color:var(--vurgu)}

.kunye-kurma{
  font-family:var(--serif);font-size:1rem;line-height:2.2;
  display:flex;flex-wrap:wrap;align-items:center;gap:.15rem;
  padding:.7rem;background:var(--kagit);border:1px solid var(--cizgi);border-radius:4px;
}
.sabit-oge{padding:.1rem .1rem}
.ayirici-sec{
  font-family:var(--veri);font-size:.85rem;padding:.15rem .3rem;
  background:var(--panel);color:var(--murekkep);
  border:1px solid var(--vurgu);border-radius:3px;
}

.bicim-satiri{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  padding:.55rem 0;border-bottom:1px solid var(--cizgi);
}
.bicim-satiri:last-child{border-bottom:none}
.bicim-metin{font-family:var(--serif);flex:1 1 14rem;font-size:.95rem}
.bicim-secenekler{display:flex;gap:.35rem}
.bicim-dugme{
  font-family:var(--serif);font-size:.88rem;padding:.32rem .6rem;
  background:var(--panel-2);color:var(--murekkep-2);
  border:1px solid var(--cizgi-koyu);border-radius:4px;cursor:pointer;
}
.bicim-dugme:hover{border-color:var(--vurgu)}
.bicim-dugme.secili{background:var(--vurgu);color:var(--kagit);border-color:var(--vurgu)}

/* D seviyesinde yazı alanı düz metin kutusu değil: öğrenci eser adını
   italik yapabilmeli, çünkü biçim de sınanan bir kazanım. Bu yüzden
   contenteditable + italik düğmesi. */
/* E seviyesinde çevrilecek dipnot: verili bilgi, dokunulmaz. Çalışma
   alanından ayrı görünsün diye ayrı zemin. */
#verilen-dipnot{margin:0 0 .9rem}
.verilen-kunye{
  font-family:var(--serif);font-size:1rem;line-height:1.7;
  padding:.65rem .8rem;background:var(--panel-2);
  border-left:3px solid var(--cizgi-koyu);border-radius:0 4px 4px 0;
}
.verilen-kunye i{font-style:italic}

.yazi-araclari{display:flex;align-items:center;gap:.6rem;margin:0 0 .45rem;flex-wrap:wrap}
.arac{
  font:inherit;font-size:.86rem;padding:.3rem .7rem;
  background:var(--panel-2);color:var(--murekkep-2);
  border:1px solid var(--cizgi-koyu);border-radius:4px;cursor:pointer;
}
.arac:hover{border-color:var(--vurgu);color:var(--vurgu)}
.arac i{font-style:italic;font-weight:700}
.arac-ipucu{font-size:.78rem;color:var(--murekkep-3)}

#serbest-giris{
  width:100%;min-height:5rem;padding:.7rem;font-family:var(--serif);font-size:1rem;
  line-height:1.7;background:var(--kagit);color:var(--murekkep);
  border:1px solid var(--cizgi-koyu);border-radius:4px;
  overflow-wrap:anywhere;
}
#serbest-giris:focus{outline:none;border-color:var(--vurgu)}
#serbest-giris i,#serbest-giris em{font-style:italic}
/* contenteditable'ın placeholder'ı yok; boşken data-bos gösteriliyor. */
#serbest-giris:empty::before{content:attr(data-bos);color:var(--murekkep-3)}
.serbest-ipucu{font-size:.82rem;color:var(--murekkep-3);margin:.35rem 0 0}
.oge-listesi{margin:.2rem 0 0;padding-left:1.2rem;font-size:.9rem;color:var(--murekkep-2)}
.oge-listesi li{margin:.15rem 0}
.oge-listesi b{color:var(--murekkep)}

/* ── Üç biçim karşılaştırmasında değişenler ──
   Aynı kaynağın üç biçimi yan yana durunca fark gözden kaçıyor. İki yer
   işaretli: yazar adının dizilişi (Ad Soyad ↔ Soyad, Ad) ve ayırıcılar
   (virgül ↔ nokta). Öğrencilerin en çok hata yaptığı iki yer bunlar.

   Yazar bloğu tek renkteyken dizilişin değiştiği görünmüyordu: iki biçim de
   aynı boyda aynı renk bir blok oluyordu. Ad ile soyadı ayrı renk alınca
   sıranın döndüğü gözle okunuyor — dipnotta mavi-altın, kaynakçada
   altın-mavi. Bu yüzden .fark-yazar artık boya taşımıyor, yalnızca iki
   parçayı bir arada tutan sarmalayıcı.

   Renk tek başına anlam taşımasın diye (WCAG 1.4.1) açıklama satırı farkı
   sözle de söylüyor; kural notu da hemen altında duruyor.

   Renk seçimi: soyadı, dersten gelen altını koruyor — karşılaştırmada zaten
   "yazar" altındı ve öğretilmek istenen parça bu. Ad için mavi alınıyor;
   derste mavi "biçimli öğe" demek, ama bu panelde biçimli öğeye (italik eser
   adına) hiç renk verilmiyor, dolayısıyla çakışma yok. Yeni bir ton
   uydurmak yerine palette hazır ve iki temada da denenmiş bir çift
   kullanılıyor. */
/* Koyu temada --vurgu-yum panel rengine çok yakın; ince çerçeve olmasa
   mavi kutucuk zeminsiz, altın kutucuk zeminli görünüyordu. */
.fark-ad,.fark-soyad{padding:.02rem .18rem;border-radius:3px;
  box-shadow:inset 0 0 0 1px var(--cizgi)}
.fark-ad{color:var(--vurgu);background:var(--vurgu-yum)}
.fark-soyad{color:var(--uyari);background:var(--uyari-zem)}
.fark-isaret{color:var(--isaret);font-weight:700;white-space:pre}
.fark-anahtar{font-size:.82rem;color:var(--murekkep-3);margin:.2rem 0 0}

/* ── Kazanımlar ──
   Uygulamanın ölçtüğü şey burada görünür duruyor: öğrenci hangi kazanımda
   nerede olduğunu, öğretmen de hangi kazanımın zor olduğunu okuyabilsin. */
.kazanim-panel{
  margin:1.4rem 0 0;padding:0;background:var(--panel);
  border:1px solid var(--cizgi);border-left:3px solid var(--murekkep-3);
}
.kazanim-panel>summary{
  padding:.8rem 1rem;cursor:pointer;font-weight:650;font-size:.95rem;
  list-style:none;display:flex;align-items:center;gap:.5rem;
}
.kazanim-panel>summary::after{content:"▾";color:var(--murekkep-3);margin-left:auto}
.kazanim-panel[open]>summary::after{content:"▴"}
.kazanim-panel>div{padding:0 1rem 1rem}
.kazanim{padding:.6rem 0;border-top:1px solid var(--cizgi)}
.kazanim-bas{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}
.kazanim-durum{font-size:1rem;line-height:1}
.kazanim-durum.ulasildi{color:var(--olur)}
.kazanim-durum.geliyor{color:var(--uyari)}
.kazanim-durum.baslanmadi{color:var(--murekkep-3)}
.kazanim-durum.bekliyor{color:var(--cizgi-koyu)}
.kazanim-kod{font-family:var(--veri);font-size:.78rem;color:var(--murekkep-3)}
.kazanim-ad{font-weight:650;font-size:.92rem}
.kazanim-sayi{
  margin-left:auto;font-family:var(--veri);font-size:.78rem;color:var(--murekkep-3);
  font-variant-numeric:tabular-nums;
}
.kazanim-ifade{margin:.25rem 0 0;font-size:.86rem;color:var(--murekkep-2);max-width:66ch}

/* ── Geri bildirim ── */
.geri-bildirim{
  padding:1rem 1.1rem;margin-bottom:1.1rem;border-left:3px solid;
  display:flex;flex-direction:column;gap:.6rem;
}
.geri-bildirim h3{margin:0;font-size:1rem}
/* Telefonda Atıf'ın sözü kartın içinde (R6-Ö2/4): hiçbir şeyi örtmez. */
.gb-atif{align-items:center}
.gb-atif .as-g{width:56px}
.gb-atif .as-balon{margin:0;box-shadow:none;font-size:.92rem;font-weight:500}
.geri-bildirim.dogru{background:var(--olur-zem);border-color:var(--olur)}
.geri-bildirim.dogru h3{color:var(--olur)}
.geri-bildirim.yanlis{background:var(--olmaz-zem);border-color:var(--olmaz)}
.geri-bildirim.yanlis h3{color:var(--olmaz)}
.geri-bildirim p{margin:0;font-size:.92rem}
.geri-bildirim .not{color:var(--murekkep-2);font-size:.86rem}
.kunye-satiri{
  font-family:var(--serif);font-size:1rem;padding:.6rem .75rem;
  background:var(--panel);border:1px solid var(--cizgi);border-radius:4px;overflow-x:auto;
}
.kural{
  background:var(--panel);border:1px solid var(--cizgi);border-radius:4px;
  padding:.6rem .75rem;font-size:.9rem;
}
.kural b{display:block;color:var(--vurgu);font-size:.82rem;margin-bottom:.15rem}

/* ── Düğmeler ── */
.dugmeler{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
button.birincil,button.ikincil{
  font-family:var(--govde);font-size:.95rem;padding:.6rem 1.2rem;
  border-radius:4px;cursor:pointer;border:1px solid;
}
button.birincil{background:var(--vurgu);color:var(--kagit);border-color:var(--vurgu);font-weight:600}
button.ikincil{background:var(--panel);color:var(--murekkep-2);border-color:var(--cizgi-koyu)}
button.ikincil:hover{border-color:var(--vurgu);color:var(--vurgu)}
button:disabled{opacity:.45;cursor:not-allowed}
button:disabled:hover{border-color:var(--cizgi-koyu);color:inherit}
button:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}

.taslak{
  margin-top:1.6rem;padding:.85rem 1rem;background:var(--uyari-zem);
  border-left:3px solid var(--uyari);font-size:.86rem;
}
.taslak b{color:var(--uyari)}

footer{
  margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--cizgi);
  font-size:.82rem;color:var(--murekkep-3);
}
@media (prefers-reduced-motion:reduce){:root:not(.hareket-zorla) *{transition:none!important}}

/* ══ P2: ekranlar, köşe düğmeleri, pencereler ══════════════════════════════ */
/* Canlandırma ⚙'den kapatılınca her cihazda durur (hareketAzalt). */
:root.hareket-kapali *,:root.hareket-kapali *::before,:root.hareket-kapali *::after{animation:none!important;transition:none!important}
/* Yazı boyutu: kök boyutu değişir, rem ile verilen her şey orantılı büyür. */
:root.yazi-k{font-size:14.5px}
:root.yazi-b{font-size:18.5px}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Oyun kipi: sitenin çubuğu ve alt bilgisi gizlenir, köşede ? ⚙ ⤢.
   Katılım ve arka plan ekranlarında (araştırma formları) site çerçevesi kalır. */
body.oyun-modu .kabuk-serit,body.oyun-modu .kabuk-alt,body.oyun-modu .kabuk-atla{display:none!important}
body.oyun-modu{padding-top:3.4rem}
/* Odakla kaydırılan öğe üstteki şeridin (köşe düğmeleri) altında kalmasın. */
html:has(body.oyun-modu){scroll-padding-top:calc(3.4rem + env(safe-area-inset-top))}
.uygulama-baslik{padding:1.6rem 0 .9rem;border-bottom:1px solid var(--cizgi)}
body.oyun-modu .uygulama-baslik{padding-top:.2rem}
.kose{display:none}
/* Üstte zemin renginde şerit: köşe düğmeleri kayan içeriğin üstüne binmesin. */
body.oyun-modu::before{content:"";position:fixed;left:0;right:0;top:0;height:calc(3.2rem + env(safe-area-inset-top));background:var(--kagit);z-index:79}
body.oyun-modu .kose{display:flex;gap:.4rem;position:fixed;top:max(.5rem,env(safe-area-inset-top));right:max(.6rem,env(safe-area-inset-right));z-index:80}
.kose-dugme{font:inherit;font-size:1.1rem;line-height:1;width:44px;height:44px;padding:0;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--cizgi-koyu);background:var(--panel);color:var(--murekkep);box-shadow:0 2px 8px rgba(4,44,83,.12);cursor:pointer}
.kose-dugme:hover,.kose-dugme:focus-visible{border-color:var(--vurgu)}
@media print{.kose,body.oyun-modu::before{display:none!important}body.oyun-modu{padding-top:0}}

/* Yan ekran başlığı (karne…): solda Geri */
.ekran-bas{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:1.2rem 0 .8rem}
.ekran-bas h2{margin:0;font-family:var(--serif);font-weight:400;font-size:1.45rem}
.geri-bag{font:inherit;font-size:.92rem;background:none;border:1px solid var(--cizgi-koyu);color:var(--murekkep-2);
  border-radius:999px;padding:.45rem .9rem;min-height:44px;cursor:pointer}
.geri-bag:hover,.geri-bag:focus-visible{border-color:var(--vurgu);color:var(--vurgu)}
.karne-kart{background:var(--panel);border:1px solid var(--cizgi);border-left:3px solid var(--murekkep-3);padding:.4rem 1rem 1rem}
.alt-baglar{display:flex;gap:1.2rem;justify-content:center;margin:1.6rem 0 0}
.alt-baglar .bag{font-size:.92rem;min-height:44px}

/* Pencere (ayarlar, nasıl çalışır) */
.pencere-arka{position:fixed;inset:0;z-index:100;background:rgba(4,20,40,.45);display:grid;place-items:center;padding:1rem;overflow-y:auto}
.pencere{background:var(--panel);color:var(--murekkep);border:1px solid var(--cizgi-koyu);border-radius:12px;
  width:min(100%,34rem);max-height:calc(100dvh - 2rem);overflow-y:auto;padding:1.2rem 1.3rem;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.pencere h2{margin:0 0 .6rem;font-family:var(--serif);font-weight:400;font-size:1.35rem}
.pencere .alt-baslik{color:var(--murekkep-2);font-size:.95rem;margin:0 0 .8rem}
.pencere .taslak{margin-top:.9rem}
.nasil-adim{margin:.2rem 0 .4rem;padding-left:1.3rem;font-size:.94rem}
.nasil-adim li{margin:.3rem 0}
.nasil-alt{font-size:.82rem;color:var(--murekkep-3);margin:.8rem 0 0}
.nasil-alt a,.pencere .taslak a{color:var(--vurgu)}
.pencere-tamam{display:block;width:100%;margin-top:1rem;min-height:48px}
.ayar-satir{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.7rem 0;border-top:1px solid var(--cizgi)}
.ayar-satir:first-of-type{border-top:0}
.ayar-satir b{font-size:.95rem}
.ayar-satir .not{margin:.15rem 0 0;font-size:.84rem;color:var(--murekkep-2)}
.ayar-anahtar,.ayar-secim{font:inherit;font-size:.88rem;min-height:44px;min-width:4.6rem;padding:.4rem .8rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--cizgi-koyu);background:var(--panel-2);color:var(--murekkep);flex:none}
.ayar-anahtar.acik,.ayar-secim.secili{background:var(--vurgu);border-color:var(--vurgu);color:var(--kagit)}
.ayar-secim.tehlike{border-color:var(--olmaz);color:var(--olmaz);background:var(--olmaz-zem)}
.yazi-sec{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:480px){.ayar-satir{flex-wrap:wrap}.yazi-sec{justify-content:flex-start}}

/* ══ P3: Atıf (KARAKTER.md'deki sınanmış katmanlama, aynen) ══════════════════ */
.atif{position:relative;display:block;width:100%;height:100%}
.atif img,.atif .a-ust{position:absolute;inset:0;width:100%;height:100%;display:block}
.a-golge{position:absolute;left:31%;right:25%;bottom:.6%;height:5.5%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.32),rgba(0,0,0,0))}
.atif .a-ust{transform-origin:52% 81%;animation:aNefes 2.8s ease-in-out infinite}
@keyframes aNefes{50%{transform:scale(1.025,.98)}}
.atif .a-bacak.sol{transform-origin:41.8% 81.7%}
.atif .a-bacak.sag{transform-origin:63.1% 81.7%}
.atif .a-kapak{transform-origin:54.3% 48.8%}
.atif .a-kalem{transform-origin:28.9% 64.5%}
.atif .a-kirp{opacity:0;animation:aKirp 5.1s linear infinite}
@keyframes aKirp{0%,95%{opacity:0}96%,98.5%{opacity:1}100%{opacity:0}}
/* Nötr: kalem asa gibi salınır, kapak arada bir kalkar */
.atif.notr .a-kalem{animation:aKalem 4.4s ease-in-out infinite}
@keyframes aKalem{0%,100%{transform:rotate(-1.8deg)}50%{transform:rotate(1.8deg)}}
.atif.notr .a-kapak{animation:aKapakPit 6.5s ease-in-out infinite}
@keyframes aKapakPit{0%,88%,100%{transform:none}92%{transform:translateY(-3.5%) rotate(-5deg)}96%{transform:rotate(1deg)}}
/* Sevinç: zıplar, kapak iki kez sıçrar, parıltı bir kez */
.atif.sevinc{animation:aHopla .8s cubic-bezier(.3,.7,.4,1) both;transform-origin:50% 98%}
@keyframes aHopla{15%{transform:scale(1.08,.88)}45%{transform:translateY(-14%) scale(.96,1.06)}70%{transform:translateY(0) scale(1.06,.94)}100%{transform:none}}
.atif.sevinc .a-kapak{animation:aKapakSek 1.3s cubic-bezier(.3,.7,.4,1) both}
@keyframes aKapakSek{20%{transform:translateY(-12%) rotate(-10deg)}40%{transform:rotate(3deg)}58%{transform:translateY(-6%) rotate(6deg)}76%,100%{transform:none}}
.atif .a-isaret{opacity:0}
.atif.sevinc .a-isaret{animation:aParilda 1.3s ease-out .1s both}
@keyframes aParilda{0%{opacity:0;transform:scale(.5)}25%{opacity:1;transform:scale(1.1)}80%{opacity:1;transform:none}100%{opacity:0}}
/* Üzgün / yeniden dene: kapak yatar, damla süzülür */
.atif.uzgun .a-kapak{animation:aKapakEgil 1.2s ease-in-out both}
@keyframes aKapakEgil{40%{transform:rotate(9deg)}70%{transform:rotate(4deg)}100%{transform:rotate(6deg)}}
.atif.uzgun .a-isaret{animation:aDamla 1.8s ease-in .25s both}
@keyframes aDamla{0%{opacity:0;transform:translateY(-2%)}20%{opacity:1;transform:none}75%{opacity:1;transform:translateY(3%)}100%{opacity:0;transform:translateY(6%)}}
/* Selam */
.atif .a-selam-el{transform-origin:77.2% 61.6%;animation:aSalla .5s ease-in-out .3s 3}
@keyframes aSalla{25%{transform:rotate(-14deg)}75%{transform:rotate(12deg)}}
/* Yazıyor */
.atif .a-yaz-el{transform-origin:53.1% 75.7%;animation:aYaz .55s ease-in-out infinite}
@keyframes aYaz{25%{transform:rotate(-2deg) translate(.6%,-.4%)}50%{transform:rotate(1deg) translate(1.2%,.3%)}75%{transform:rotate(-1deg) translate(.4%,-.2%)}}
.atif .a-satir{clip-path:inset(0 100% 0 0)}
.atif .a-satir.s1{animation:aS1 6s linear infinite}
.atif .a-satir.s2{animation:aS2 6s linear infinite}
.atif .a-satir.s3{animation:aS3 6s linear infinite}
@keyframes aS1{0%{clip-path:inset(0 27% 0 0)}25%,92%{clip-path:inset(0 15% 0 0)}100%{clip-path:inset(0 15% 0 0);opacity:0}}
@keyframes aS2{0%,25%{clip-path:inset(0 29% 0 0)}50%,92%{clip-path:inset(0 17% 0 0)}100%{clip-path:inset(0 17% 0 0);opacity:0}}
@keyframes aS3{0%,50%{clip-path:inset(0 31% 0 0)}68%,92%{clip-path:inset(0 22% 0 0)}100%{clip-path:inset(0 22% 0 0);opacity:0}}
/* Yürüme: kap .yuru alınca. Adım döngüsü (0,6 sn):
   değme (bacak önde) → yük alma (gövde en alçak) → itiş (bacak arkada) → kaldırma → geçiş (ayak havada, gövde en yüksek).
   İki bacak yarım döngü arayla. Yanda bacaklar kalçadan döner; önde ve arkada ayak kalkıp basar. */
.yuru .atif{transform-origin:50% 98%}
.yuru .atif.yan{animation:aGovdeYan .6s linear infinite}
@keyframes aGovdeYan{0%,50%,100%{transform:translateY(0) rotate(2deg)}15%,65%{transform:translateY(1.4%) rotate(2.5deg)}35%,85%{transform:translateY(-2.6%) rotate(1.5deg)}}
.yuru .atif.yan .a-bacak.on{animation:aAdimOn .6s linear infinite}
.yuru .atif.yan .a-bacak.arka{animation:aAdimArkaBacak .6s linear -.3s infinite}
/* "on" bacağın dinlenme hâli öndedir (değme), "arka"nınki arkada (itiş). */
@keyframes aAdimOn{0%{transform:rotate(0)}25%{transform:rotate(7deg)}50%{transform:rotate(24deg)}62%{transform:translateY(-4%) rotate(19deg)}82%{transform:translateY(-6%) rotate(4deg)}100%{transform:rotate(0)}}
@keyframes aAdimArkaBacak{0%{transform:rotate(-24deg)}25%{transform:rotate(-17deg)}50%{transform:rotate(0)}62%{transform:translateY(-4%) rotate(-5deg)}82%{transform:translateY(-6%) rotate(-20deg)}100%{transform:rotate(-24deg)}}
.yuru .atif.yan .a-golge{animation:aGolge .3s linear infinite}
@keyframes aGolge{0%,100%{transform:scaleX(1)}60%{transform:scaleX(.88);opacity:.8}}
/* Ön: gövde iki yana yaylanır, ayaklar sırayla kalkar. */
.yuru .atif.notr,.yuru .atif.on{animation:aGovdeOn .6s ease-in-out infinite}
@keyframes aGovdeOn{0%,100%{transform:translateY(0) rotate(-2.5deg)}25%,75%{transform:translateY(-2.5%) rotate(0)}50%{transform:translateY(0) rotate(2.5deg)}}
.yuru .atif.notr .a-bacak.sol,.yuru .atif.on .a-bacak.sol{animation:aAyakOn .6s ease-in-out infinite}
.yuru .atif.notr .a-bacak.sag,.yuru .atif.on .a-bacak.sag{animation:aAyakOn .6s ease-in-out -.3s infinite}
@keyframes aAyakOn{0%,50%,100%{transform:none}20%{transform:translateY(-6%) rotate(-4deg) scaleY(.95)}35%{transform:translateY(-2%)}}
.atif .a-bacak.arka{transform-origin:44.1% 82.4%}
.atif .a-bacak.on{transform-origin:64.2% 82.9%}
.atif.arka .a-bacak.sol{transform-origin:45% 82.4%}
.atif.arka .a-bacak.sag{transform-origin:61.4% 82.4%}
/* Arka: topuklar sırayla kalkar, gövde hafif yaylanır. */
.yuru .atif.arka{animation:aGovdeOn .6s ease-in-out infinite}
.yuru .atif.arka .a-bacak.sol{animation:aTopuk .6s ease-in-out infinite}
.yuru .atif.arka .a-bacak.sag{animation:aTopuk .6s ease-in-out -.3s infinite}
@keyframes aTopuk{0%,50%,100%{transform:none}20%{transform:translateY(-5%) scaleY(.93)}35%{transform:translateY(-1.5%)}}
/* Dönüş: önden yana (ve geri). Üç görünüm üst üste; .sag oynatır, .geri tersine. */
.atif-donus{position:relative;display:block;width:100%;height:100%}
.atif-donus>.d{position:absolute;inset:0;transform-origin:52% 60%}
.atif-donus>.d-ceyrek,.atif-donus>.d-yan{opacity:0}
.atif-donus>.d img.tek{position:absolute;inset:0;width:100%;height:100%}
.atif-donus.sag>.d-on{animation:dOn .42s linear both}
.atif-donus.sag>.d-ceyrek{animation:dCeyrek .42s linear both}
.atif-donus.sag>.d-yan{animation:dYan .42s linear both}
.atif-donus.geri>.d{animation-direction:reverse}
@keyframes dOn{0%{opacity:1;transform:none}30%{opacity:1;transform:scaleX(.86)}33.3%,100%{opacity:0;transform:scaleX(.86)}}
@keyframes dCeyrek{0%,33.2%{opacity:0;transform:scaleX(.9)}33.3%{opacity:1;transform:scaleX(.9)}50%{opacity:1;transform:none}63%{opacity:1;transform:scaleX(.9)}66.6%,100%{opacity:0;transform:scaleX(.9)}}
@keyframes dYan{0%,66.5%{opacity:0;transform:scaleX(.9)}66.6%{opacity:1;transform:scaleX(.9)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){:root:not(.hareket-zorla) .atif,:root:not(.hareket-zorla) .atif *{animation:none!important}:root:not(.hareket-zorla) .atif .a-satir{clip-path:none}}
:root.hareket-kapali .atif .a-satir{clip-path:none}
.atif.tek img{position:absolute;inset:0;width:100%;height:100%}
.atif.notr .a-kalem{will-change:transform}

/* Görsel + balon (genel) */
.atif-soz{display:flex;align-items:flex-end;gap:.5rem}
.as-g{width:96px;aspect-ratio:1;flex:none}
.as-balon{position:relative;margin:0 0 1.2rem;background:var(--panel);color:var(--murekkep);border:2px solid #C9A227;border-radius:14px;
  padding:.55rem .8rem;font-weight:600;font-size:.98rem;line-height:1.4;box-shadow:0 6px 18px rgba(4,44,83,.15)}
.atif-soz .as-balon::before{content:"";position:absolute;left:-9px;bottom:14px;width:14px;height:14px;background:var(--panel);
  border-left:2px solid #C9A227;border-bottom:2px solid #C9A227;transform:rotate(45deg)}

/* Adım başlığı (kimlik) */
.adim-bas{display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.adim-sayac{font-family:var(--veri);font-size:.8rem;color:var(--murekkep-3);white-space:nowrap}
.katilim-kart button.birincil,.katilim-kart button.ikincil{min-height:44px}

/* ── Açılış: okuma salonu, köşesinde dizgi tezgâhı ──
   Atıf için boş alan ön plandaki masanın ortası (yatay %25–%70); üstte
   başlık için koyu yarı saydam perde (KARAKTER.md §6). */
body[data-ekran="acilis"] .uygulama-baslik{display:none}
.acilis-sahne{position:relative;margin:.4rem 0 0;border-radius:14px;overflow:hidden;cursor:pointer;
  height:clamp(300px,calc(100dvh - 10.5rem),640px);
  background:#0b2140 url(gorsel/okuma-salonu.jpg) 47% 60%/cover no-repeat}
.acilis-sahne::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(6,26,51,.65),rgba(6,26,51,.12) 38%,rgba(6,26,51,.0) 60%,rgba(6,26,51,.35))}
.acilis-baslik{position:absolute;left:0;right:0;top:0;padding:1.1rem 1.2rem;color:#fff}
.acilis-baslik .ust-etiket{color:#CFE1F5}
.acilis-baslik h2{margin:.3rem 0 0;font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,6vw,2.6rem);line-height:1.1;text-shadow:0 2px 12px rgba(0,0,0,.4)}
.acilis-atif{position:absolute;left:50%;bottom:2%;width:clamp(140px,34vh,220px);aspect-ratio:1;transform:translateX(-62%)}
.acilis-balon{position:absolute;right:max(.8rem,4%);bottom:calc(2% + clamp(140px,34vh,220px) * .62);left:auto;max-width:min(26rem,62%);margin:0}
.acilis-balon::before{content:"";position:absolute;left:18%;bottom:-9px;width:14px;height:14px;background:var(--panel);border-right:2px solid #C9A227;border-bottom:2px solid #C9A227;transform:rotate(45deg)}
.acilis-balon.yeni{animation:balonGel .35s ease-out both}
/* Saydamlıktan başlamaz: bir an yarı saydam yakalanan balon salon görselinde
   okunmuyordu (denetim; hocanın isteği). */
@keyframes balonGel{from{transform:translateY(6px) scale(.96)}to{transform:none}}
.acilis-dugmeler{display:flex;gap:.6rem;justify-content:flex-end;margin:.9rem 0 0}
.acilis-dugmeler button{min-height:48px;font-size:1rem}
@media (max-width:560px){
  .acilis-atif{transform:translateX(-50%);left:42%}
  .acilis-balon{left:.8rem;right:.8rem;max-width:none;bottom:calc(2% + clamp(140px,34vh,220px) * .9)}
  .acilis-dugmeler{justify-content:stretch}.acilis-dugmeler button{flex:1}
}
/* Yatay telefon: sahne alçak, Atıf küçük, balon yanında */
@media (max-height:500px) and (min-width:600px){
  .acilis-sahne{height:calc(100dvh - 7.6rem)}
  .acilis-atif{width:min(46vh,170px);left:30%}
  .acilis-balon{bottom:auto;top:28%;left:46%;right:1rem;max-width:none}
  .acilis-balon::before{left:-9px;bottom:auto;top:40%;border-right:0;border-left:2px solid #C9A227;transform:rotate(45deg)}
  .acilis-baslik{padding:.6rem 1rem}
  .acilis-dugmeler{margin-top:.5rem}
}

/* ══ P4: atölye haritası, kasa girişi ve sonu ══════════════════════════════ */
.ikon{width:1.6rem;height:1.6rem;object-fit:contain;flex:none}
.baslik-ikon{width:2rem;height:2rem;vertical-align:-.45rem;margin-right:.45rem}
button.buyuk{min-height:52px;font-size:1.05rem;padding:.7rem 1.5rem}
.ekran-bas.ince{margin:.6rem 0 .2rem}
.ekran-bas h2{display:flex;align-items:center}

/* Atıf + balon (harita, kasa) */
.harita-soz,.kasa-soz{margin:1rem 0 .6rem}
.harita-soz .as-g,.kasa-soz .as-g{width:104px}
@media (max-width:560px){.harita-soz .as-g,.kasa-soz .as-g{width:84px}.as-balon{font-size:.95rem}}

.kasa-liste{display:grid;gap:.7rem;grid-template-columns:1fr}
@media (min-width:640px){.kasa-liste{grid-template-columns:1fr 1fr}}
.kasa-h{background:var(--panel);border:1px solid var(--cizgi);border-radius:12px;overflow:hidden}
.kasa-h.simdi{border-color:var(--vurgu);box-shadow:0 0 0 1px var(--vurgu)}
.kasa-h.kilitli{opacity:.72}
.kasa-ana{font:inherit;color:inherit;background:none;border:0;width:100%;text-align:left;cursor:pointer;
  display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"i y k" "i n n";align-items:center;gap:.25rem .8rem;padding:.85rem 1rem;min-height:72px}
.kasa-ana:focus-visible{outline:2px solid var(--vurgu);outline-offset:-3px}
.kasa-ikon{grid-area:i;width:2.6rem;height:2.6rem}
.kasa-yazi{grid-area:y;display:flex;flex-direction:column}
.kasa-ad{font-family:var(--serif);font-size:1.12rem}
.kasa-durum{font-size:.84rem;color:var(--murekkep-2)}
.kasa-h.bitti .kasa-durum{color:var(--olur);font-weight:650}
.kilit{grid-area:k;font-size:1.05rem}
.adim-noktalar{grid-area:n;display:flex;gap:.35rem}
.adim-nokta{width:.8rem;height:.8rem;border-radius:50%;border:2px solid var(--cizgi-koyu);background:transparent}
.adim-nokta.dolu{background:var(--olur);border-color:var(--olur)}
.adim-nokta.yarim{background:linear-gradient(90deg,var(--uyari) 50%,transparent 50%);border-color:var(--uyari)}
.kasa-ek{padding:0 1rem .7rem 4.4rem;margin-top:-.3rem}
.kasa-ek .bag,.oturan-liste .bag{font-size:.86rem;min-height:44px}
.harita-dugme{display:flex;justify-content:center;margin:1.1rem 0 0}
.harita-dugme .birincil{min-width:min(100%,20rem)}

/* Kasa girişi */
.kasa-kart{background:var(--panel);border:1px solid var(--cizgi);border-left:3px solid var(--vurgu);padding:.8rem 1rem;border-radius:0 8px 8px 0}
.kasa-kalip{font-family:var(--serif);font-size:1.05rem;line-height:1.7;margin-top:.2rem}
.kasa-kalip i{font-style:italic}
.kasa-dugmeler{flex-direction:column;align-items:stretch;gap:.4rem;margin-top:.4rem}
@media (min-width:640px){.kasa-dugmeler{flex-direction:row;align-items:center}}
.kasa-dugmeler .bag{min-height:44px;font-size:.92rem}

/* Kasa sonu: "basılmış" üç biçim */
.baski{background:var(--panel);border:1px solid var(--cizgi);border-radius:8px;padding:.4rem 1rem;margin:.6rem 0 1rem;
  box-shadow:0 1px 0 var(--cizgi),0 6px 18px rgba(4,44,83,.08)}
.baski-satir{display:grid;grid-template-columns:10rem 1fr;gap:.6rem;padding:.6rem 0;border-bottom:1px solid var(--cizgi)}
.baski-satir:last-child{border-bottom:0}
.baski-etiket{font-family:var(--veri);font-size:.76rem;color:var(--murekkep-3);padding-top:.2rem}
.baski-kunye{font-family:var(--serif);font-size:1rem;line-height:1.55;color:var(--murekkep)}
.baski-kunye i{font-style:italic}
@media (max-width:560px){.baski-satir{grid-template-columns:1fr;gap:.1rem}}
.kasa-oturan h3{margin:0 0 .4rem;font-size:1rem;color:var(--vurgu)}
.oturan-liste{list-style:none;margin:0 0 1rem;padding:0}
.oturan-liste li{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .7rem;padding:.45rem 0;border-bottom:1px solid var(--cizgi)}
.oturan-ad{font-weight:600;font-size:.94rem}
.oturan-duzey{font-size:.84rem;padding:.1rem .55rem;border-radius:999px;border:1px solid}
.oturan-liste .oturdu .oturan-duzey{color:var(--olur);background:var(--olur-zem)}
.oturan-liste .gelisiyor .oturan-duzey{color:var(--uyari);background:var(--uyari-zem)}
.oturan-liste .bak .oturan-duzey{color:var(--isaret);background:var(--isaret-zem)}

/* ══ P5: Atıf'ın köşesi ve ders balonu ═════════════════════════════════════ */
/* Köşe: cevaptan sonra sol alttan yükselir, konuşur, iner (Etik Kurul'daki
   Mizan köşesi kalıbı). Masaüstünde dokunuşları engellemez. */
.atif-kose{position:fixed;left:max(.4rem,env(safe-area-inset-left));bottom:calc(max(.5rem,env(safe-area-inset-bottom)) + 4.6rem);z-index:70;
  display:flex;align-items:flex-end;gap:.3rem;pointer-events:none;max-width:min(92vw,28rem);animation:akCik .55s cubic-bezier(.3,1.5,.5,1) both}
.atif-kose.iniyor{animation:akIn .45s ease-in both}
.ak-govde{width:112px;height:112px;flex:none}
.ak-balon{position:relative;margin-bottom:62px;background:var(--panel);color:var(--murekkep);border:2px solid #C9A227;border-radius:14px;
  padding:.55rem .8rem;font-weight:650;font-size:.98rem;line-height:1.35;box-shadow:0 6px 18px rgba(4,44,83,.22);animation:akBalon .35s .25s both}
.ak-balon::before{content:"";position:absolute;left:-9px;bottom:14px;width:14px;height:14px;background:var(--panel);
  border-left:2px solid #C9A227;border-bottom:2px solid #C9A227;transform:rotate(45deg)}
@keyframes akCik{from{transform:translateY(140%)}to{transform:none}}
@keyframes akIn{to{transform:translateY(140%);opacity:0}}
@keyframes akBalon{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
/* Telefonda küçük; metni daha az örter, dokununca hemen iner. */
@media (max-width:899px){.atif-kose{pointer-events:auto;cursor:pointer;gap:.15rem}.ak-govde{width:72px;height:72px}
  .ak-balon{margin-bottom:34px;padding:.4rem .65rem;font-size:.92rem;line-height:1.3}}
@media (min-width:900px){.atif-kose{bottom:1.2rem}.ak-govde{width:140px;height:140px}}
/* Yatay telefon: köşe üstte, alttaki düğmeyi örtmesin. */
@media (max-height:500px) and (min-width:600px){
  .atif-kose{bottom:auto;top:calc(max(.5rem,env(safe-area-inset-top)) + 44px + .5rem);animation-name:akCikUst}
  .atif-kose.iniyor{animation-name:akInUst}
  .ak-govde{width:56px;height:56px}.ak-balon{margin-bottom:18px}
}
@keyframes akCikUst{from{transform:translateY(-160%)}to{transform:none}}
@keyframes akInUst{to{transform:translateY(-160%);opacity:0}}

/* Ders: adım metni Atıf'ın balonu */
.ders-atif-satir{display:flex;align-items:flex-end;gap:.4rem;width:100%;max-width:40rem;justify-content:center}
.ders-atif{width:96px;aspect-ratio:1;flex:none}
.ders-atif-satir .ders-adim{flex:1 1 auto;text-align:left;margin:0 0 1.4rem;min-height:3rem;font-weight:500}
.ders-atif-satir .ders-adim::before{content:"";position:absolute;left:-9px;bottom:14px;width:14px;height:14px;background:var(--panel);
  border-left:2px solid #C9A227;border-bottom:2px solid #C9A227;transform:rotate(45deg)}
@media (max-width:560px){.ders-atif{width:72px}.ders-atif-satir .ders-adim{font-size:.9rem}}

/* ══ P6: dizgi (alıştırma) ekranı ══════════════════════════════════════════ */
/* Uygulama başlığı yalnız haritada (iş ekranlarında yer kaplamasın). */
body.oyun-modu:not([data-ekran="harita"]):not([data-ekran="karne"]) .uygulama-baslik{display:none}

/* Şerit: ← · kasa ve adım · altı nokta · prova yuvaları · ipucu */
.dizgi-serit{display:flex;align-items:center;gap:.5rem .8rem;flex-wrap:wrap;margin:.6rem 0 .3rem;padding:.6rem .7rem;
  background:var(--panel);border:1px solid var(--cizgi);border-left:3px solid var(--vurgu);border-radius:0 8px 8px 0}
.geri-bag.kare{width:44px;min-width:44px;padding:0;font-size:1.1rem}
.ds-baslik{display:flex;flex-direction:column;line-height:1.25;flex:1 1 5rem;min-width:0}
.ds-kasa{font-size:.8rem;color:var(--murekkep-2)}
.ds-adim{display:flex;align-items:center;gap:.4rem;font-size:1.02rem}
.dizgi-serit .adim-noktalar{flex:none}
.ustalik{display:flex;gap:.3rem;align-items:center}
.prova-yuva{width:1.15rem;height:1.15rem;border-radius:3px;border:2px solid var(--cizgi-koyu);background:transparent}
.prova-yuva.dolu{background:var(--uyari);border-color:var(--uyari);box-shadow:inset 0 0 0 2px var(--panel)}
.ipucu-dugme{height:44px;flex:none;display:inline-flex;align-items:center;gap:.3rem;padding:0 .8rem 0 .35rem;border-radius:22px;cursor:pointer;
  border:2px solid #C9A227;background:var(--uyari-zem);color:var(--murekkep);font:inherit;font-weight:700;font-size:.95rem}
.ipucu-dugme img{width:30px;height:30px}
.ipucu-dugme:hover,.ipucu-dugme:focus-visible{border-color:var(--vurgu)}
/* Aynı kural ikinci kez takılınca ipucu öne çıkar (Karar K3). */
body.ipucu-one .ipucu-dugme{border-color:#C9A227;box-shadow:0 0 0 3px rgba(201,162,39,.35);animation:ipucuParla 1.6s ease-in-out infinite}
@keyframes ipucuParla{50%{box-shadow:0 0 0 7px rgba(201,162,39,.12)}}
.dizgi-aciklama{margin:.2rem 0 .6rem;font-size:.9rem;color:var(--murekkep-2)}
@media (max-width:560px){.dizgi-serit .adim-noktalar{order:5;flex-basis:100%;padding-left:52px}}

/* İş fişi (katlanır) */
.is-fisi{background:var(--panel);border:1px solid var(--cizgi);border-radius:8px;margin-bottom:.8rem}
.is-fisi>summary{cursor:pointer;list-style:none;display:flex;align-items:baseline;gap:.5rem;padding:.7rem 1rem;min-height:44px}
.is-fisi>summary::-webkit-details-marker{display:none}
.is-fisi>summary::after{content:"▾";margin-left:auto;color:var(--murekkep-3)}
.is-fisi[open]>summary::after{content:"▴"}
.is-fisi>summary span{font-size:.82rem;color:var(--murekkep-3)}
/* R7: basamak göstergesi (●○○), fiş başlığının sağında. */
.is-fisi>summary .zd-gosterge{margin-left:auto;font-size:.8rem;letter-spacing:.12em;color:var(--vurgu)}
.is-fisi>summary:has(.zd-gosterge)::after{margin-left:.6rem}
.is-fisi #kaynak-bilgi{padding:0 1rem .8rem}

/* Tezgâh */
.tezgah{border-radius:8px}
.cip,.bicim-dugme{min-height:44px}
.arac{min-height:44px;min-width:44px}
.kunye-kurma{line-height:2.4}
.ayirici-yuva{font:inherit;font-family:var(--veri);font-weight:700;min-width:44px;min-height:44px;margin:0 .1rem;padding:0 .35rem;cursor:pointer;
  border:2px dashed var(--vurgu);border-radius:6px;background:var(--panel);color:var(--murekkep-3);vertical-align:middle}
.ayirici-yuva.dolu{border-style:solid;color:var(--isaret)}
.ayirici-yuva.bosluk{color:var(--murekkep-3)}
.ayirici-yuva.secili{background:var(--vurgu-yum);box-shadow:0 0 0 3px rgba(24,95,165,.25)}
.ayirici-secici{display:flex;gap:.5rem;flex-wrap:wrap}
.ayirici-cip{font:inherit;font-family:var(--veri);font-size:1.05rem;font-weight:700;min-width:56px;min-height:48px;padding:.3rem .9rem;cursor:pointer;
  border:1px solid var(--cizgi-koyu);border-radius:8px;background:var(--panel-2);color:var(--murekkep)}
.ayirici-cip:hover,.ayirici-cip:focus-visible{border-color:var(--vurgu)}

/* Geri bildirim */
.geri-bildirim h3{display:flex;align-items:center;gap:.4rem}
.geri-bildirim h3 .ikon{width:1.4rem;height:1.4rem}
.geri-bildirim:focus{outline:none}
.kunye-satiri.basildi{font-size:1.04rem;color:var(--murekkep);animation:basildi .6s ease-out both}
@keyframes basildi{0%{opacity:.2;filter:blur(1px);box-shadow:0 0 0 0 rgba(201,162,39,.5)}60%{opacity:1;filter:none;box-shadow:0 0 0 6px rgba(201,162,39,.12)}100%{box-shadow:none}}

/* Yapışkan alt çubuk; klavye açıkken onun üstünde */
.alt-cubuk{position:sticky;bottom:calc(var(--klavye,0px) + env(safe-area-inset-bottom));z-index:20;display:flex;gap:.6rem;justify-content:flex-end;
  margin:0 -1.1rem;padding:.6rem 1.1rem;background:linear-gradient(rgba(0,0,0,0),var(--kagit) 30%)}
.alt-cubuk{flex-wrap:wrap}
.alt-cubuk .birincil{min-width:min(100%,14rem)}
.alt-cubuk .ayirici-secici{flex-basis:100%;justify-content:center;padding:.4rem;background:var(--panel);border:1px solid var(--cizgi);border-radius:10px}
@media (max-width:560px){.alt-cubuk .birincil{flex:1}}
/* Köşe Atıf'ı alt çubuğun üstünde çıksın */
body[data-ekran="dizgi"] .atif-kose{bottom:calc(var(--klavye,0px) + max(.5rem,env(safe-area-inset-bottom)) + 4.4rem)}

/* Ders: bitmiş satırda ayırıcı önceki parçaya yapışık (K.dipnot ile aynı görünüm) */
.ders-kunye.bitti .kp{padding-left:0;padding-right:0}
.oge-kutu{background:var(--panel-2);border-radius:6px;padding:.7rem .9rem;margin-top:.4rem}
.oge-kutu h3{margin:0 0 .2rem}
.oge-kutu p{margin:.4rem 0 0}

/* ══ P7: tören, forma, kalfalık belgesi, karne, serbest dizgi ══════════════ */
/* Forma: dergi sayfası. Gövde metni yerine gri çizgiler; dipnotlar altta. */
.forma{display:grid;gap:1rem;margin:.8rem 0 1.2rem}
@media (min-width:900px){.forma{grid-template-columns:1fr 1fr}.forma .kaynakca-sayfa{grid-column:1 / -1}}
.forma-sayfa{position:relative;background:#FBF8F1;color:#1B2A4A;border:1px solid #E4DCC8;border-radius:4px;padding:1.4rem 1.3rem 1rem;
  box-shadow:0 2px 0 #E9E2D0,0 8px 24px rgba(4,44,83,.12);font-family:var(--serif)}
.forma-sayfa{padding-bottom:1.8rem}
.forma-no{position:absolute;bottom:.45rem;left:50%;transform:translateX(-50%);font-size:.78rem;color:#665E4D;font-family:var(--veri)}  /* R3-Ö14: #FBF8F1 üzerinde ≥ 4.5:1 */
.forma-govde{display:flex;flex-direction:column;gap:.55rem;margin-bottom:1rem}
.forma-govde .fc{position:relative;display:block;height:.55rem;border-radius:3px;background:#DCD5C4}
.forma-govde sup{position:absolute;right:-1.1rem;top:-.5rem;font-size:.72rem;font-weight:700;color:#185FA5}
.forma-dipnot{margin:0;padding:.7rem 0 0 1.4rem;border-top:1px solid #CFC6B1;font-size:.86rem;line-height:1.5}
.forma-dipnot li{margin:.25rem 0;padding-left:.2rem}
.forma-dipnot li::marker{font-size:.75rem;color:#185FA5;font-weight:700}
.forma-dipnot i,.kaynakca-satir i{font-style:italic}
.kaynakca-sayfa h4{margin:0 0 .6rem;font-weight:400;font-size:1.15rem;text-align:center}
/* Kaynakça: numarasız, madde işaretsiz, her eser yeni satırda */
.kaynakca-satir{margin:.4rem 0;font-size:.92rem;line-height:1.5}

.kalfa-kart{background:var(--panel);border:1px solid var(--cizgi);border-left:3px solid #C9A227;border-radius:0 8px 8px 0;padding:.9rem 1.1rem;
  display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.kalfa-kart h3{margin:0;font-family:var(--serif);font-weight:400;font-size:1.25rem}
.kalfa-kart .not{margin:0;font-size:.86rem;color:var(--murekkep-2)}
#kalfa-ad{width:100%;max-width:24rem;padding:.6rem .7rem;font:inherit;background:var(--kagit);color:var(--murekkep);border:1px solid var(--cizgi-koyu);border-radius:4px;min-height:44px}
#kalfa-ad:focus{outline:none;border-color:var(--vurgu)}
.toren-dugmeler{justify-content:space-between}
.toren-dugmeler button{min-height:48px}

/* Belge yalnız yazdırırken */
.kalfa-belge{display:none}
@media print{
  body.belge-yazdir *{visibility:hidden}
  body.belge-yazdir .kalfa-belge,body.belge-yazdir .kalfa-belge *{visibility:visible}
  body.belge-yazdir .kalfa-belge{display:block;position:fixed;inset:0;background:#fff;color:#1B2A4A}
  body.belge-yazdir #ekran-toren{display:block!important}
  .kb-ic{margin:12mm auto;max-width:170mm;border:3px double #B8962E;padding:14mm 16mm;text-align:center;font-family:Georgia,serif}
  .kb-atif{display:block;width:34mm;height:34mm;margin:0 auto 4mm}
  .kb-ust{font-family:ui-monospace,monospace;font-size:9pt;letter-spacing:.14em;text-transform:uppercase;color:#6b7a90;margin:0}
  .kalfa-belge h1{font-weight:400;font-size:28pt;margin:3mm 0 8mm}
  .kb-ad{font-size:20pt;border-bottom:1px solid #999;min-height:12mm;margin:0 15mm 8mm;padding-bottom:2mm}
  .kalfa-belge p{font-size:12pt;line-height:1.6}
  .kb-tarih{margin-top:10mm!important}
  .kb-alt{font-size:9pt!important;color:#6b7a90}
}

/* Karne: düzey rozetleri (sayı ve süre yok) */
.kazanim-duzey{margin-left:auto;font-size:.8rem;padding:.1rem .55rem;border-radius:999px;border:1px solid;white-space:nowrap}
.kazanim-duzey.oturdu{color:var(--olur);background:var(--olur-zem)}
.kazanim-duzey.gelisiyor{color:var(--uyari);background:var(--uyari-zem)}
.kazanim-duzey.bak{color:var(--isaret);background:var(--isaret-zem)}
.kazanim-duzey.yok{color:var(--murekkep-3);border-color:var(--cizgi-koyu)}
.kazanim .oneri{display:inline-block;margin-top:.3rem;font-size:.86rem;min-height:44px}

/* Harita: serbest dizgi adım seçici */
.kasa-ek{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;align-items:center}
.serbest-sec{flex-basis:100%;display:flex;flex-wrap:wrap;gap:.35rem;padding:.3rem 0 .2rem}
.adim-sec{font:inherit;font-size:.86rem;min-height:44px;min-width:44px;padding:.3rem .7rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--cizgi-koyu);background:var(--panel-2);color:var(--murekkep)}
.adim-sec:hover,.adim-sec:focus-visible{border-color:var(--vurgu)}

/* ══ P8: denetim düzeltmeleri ══════════════════════════════════════════════ */
.kalfa-kart .birincil{min-height:48px}
/* Yatay telefon: alt çubuk tek satır (seçici ve Diz yan yana), işi örtmesin. */
@media (max-height:500px) and (min-width:600px){
  .alt-cubuk{flex-wrap:nowrap;padding:.3rem 1.1rem;align-items:center}
  .alt-cubuk .ayirici-secici{flex:1 1 auto;flex-basis:auto;padding:.15rem;border:0;background:none;justify-content:flex-start}
  .alt-cubuk .birincil{min-width:9rem;min-height:44px}
  .ayirici-cip{min-height:44px;padding:.2rem .7rem}
  .dizgi-serit{margin-top:.3rem;padding:.35rem .6rem}
}

/* ══ Denetim turu 4 ════════════════════════════════════════════════════════
   Yatay telefonda 44 px altına inen hedefler: ders düğmeleri (43), kısa
   çip ("22", 41 genişlik), kimlik alanları (42). */
#ders-bolumu .dugmeler button{min-height:44px}
.cip,.bicim-dugme{min-width:44px}
/* Yatay telefonda köşe üstte durur (P5); dizgideki "alt çubuğun üstünde"
   kuralı daha özgül olduğu için bottom'ı geri getiriyor, kutu top ile bottom
   arasında uzayıp balonu metnin üstüne indiriyordu. */
@media (max-height:500px) and (min-width:600px){
  body[data-ekran="dizgi"] .atif-kose{bottom:auto}
}
/* Yazı alanlarında odak yalnız 1 px kenar rengiyle seçiliyordu; düğmelerdeki
   halka gibi görünür olsun (WCAG 2.4.7). */
#serbest-giris:focus-visible,#kalfa-ad:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}
/* Yatay telefonda köşe Atıf alt çubuğun içinde, düğmenin solunda (yerlestir). */
.atif-kose.cubukta{align-items:center;animation-name:akCik}
.atif-kose.cubukta.iniyor{animation-name:akIn}
.atif-kose.cubukta .ak-govde{width:48px;height:48px}
.atif-kose.cubukta .ak-balon{margin-bottom:0}
.atif-kose.cubukta .ak-balon::before{bottom:auto;top:calc(50% - 7px)}

/* ══ Yazma (D–F): fiş parçaları, tuş şeridi, yazma kipi ════════════════════
   Hocanın isteği (03.10.2026): telefonda fiş, yazı alanı, tuş şeridi ve Diz
   birlikte görünsün; klavye açıkken şerit ve Diz klavyenin üstünde. */
.yazi-duzen{display:flex;flex-direction:column;gap:.6rem}
.fis-parcalar{background:var(--panel-2);border:1px solid var(--cizgi);border-radius:8px;padding:.45rem .5rem .55rem}
.fp-bas{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin:0 .1rem .35rem;font-size:.86rem}
.fp-bas span{font-size:.78rem;color:var(--murekkep-3)}
.fp-liste{display:flex;flex-wrap:wrap;gap:.35rem}
.fis-parca{display:inline-flex;flex-direction:column;justify-content:center;min-height:44px;min-width:44px;max-width:100%;
  padding:.2rem .6rem;border-radius:8px;border:1px solid var(--cizgi-koyu);background:var(--panel);color:var(--murekkep);cursor:pointer;
  -webkit-user-select:text;user-select:text;-webkit-touch-callout:default;line-height:1.25}
.fis-parca:hover,.fis-parca:focus-visible{border-color:var(--vurgu);outline:none;box-shadow:0 0 0 2px rgba(24,95,165,.25)}
.fp-etiket{font-size:.68rem;color:var(--murekkep-3);letter-spacing:.02em}
.fp-deger{font-family:var(--serif);font-size:.95rem;overflow-wrap:anywhere}
.fis-parca.eklendi{animation:parcaEklendi .45s ease-out}
@keyframes parcaEklendi{0%{background:var(--olur-zem);border-color:var(--olur)}100%{}}
.fp-not{align-self:center;font-size:.8rem;color:var(--murekkep-2);padding:0 .3rem}

/* Tuş şeridi: yazı alanının hemen üstünde. 12 tuş, her biri en az 44 px;
   dar ekranda iki satıra sarar. */
.tus-serit{display:grid;grid-template-columns:repeat(12,minmax(44px,1fr));gap:.3rem;margin:.1rem 0 .35rem}
.tus{font:inherit;font-family:var(--serif);font-size:1.15rem;font-weight:600;min-width:44px;min-height:44px;padding:0 .5rem;cursor:pointer;
  border:1px solid var(--cizgi-koyu);border-radius:8px;background:var(--panel-2);color:var(--murekkep);
  touch-action:manipulation;-webkit-user-select:none;user-select:none}
.tus i{font-style:italic;font-weight:700}
.tus:hover,.tus:focus-visible{border-color:var(--vurgu)}
.tus:active{background:var(--vurgu-yum)}
/* Dar ekranda tam iki satır (6 + 6). */
@media (max-width:719px){.tus-serit{grid-template-columns:repeat(6,minmax(44px,1fr));gap:.25rem}.tus{padding:0}}
/* Telefonda yazı alanının çevresindeki panel dolgusu daralır (yer kazanılır). */
@media (max-width:640px){body[data-ekran="dizgi"] .tezgah{padding:.6rem}}
#serbest-giris{white-space:pre-wrap}

/* Yazma kipi (telefon, odak yazı alanında): açıklamalar gizlenir, fiş kendi
   içinde kayar; görünen pencere (--gorunur) klavyeyle küçüldükçe sığar. */
/* R2-Ö3: yazma kipinde açıklamalar gizlenmez: gizlenince parçalar 86 px
   yukarı kayıyor, ikinci dokunuş yanlış öğeye düşüyordu. */
body.yazma-kipi .fis-parcalar{max-height:calc(var(--gorunur,100dvh) * .3);overflow-y:auto;overscroll-behavior:contain}
/* E ve F'de verilen dipnot da ekranda: fiş biraz daha kısalır. */
body.yazma-kipi #serbest-alan:has(#verilen-dipnot:not([hidden])) .fis-parcalar{max-height:calc(var(--gorunur,100dvh) * .24)}
body.yazma-kipi .fp-bas span{display:none}
body.yazma-kipi #verilen-dipnot .verilen-kunye{max-height:3.2em;overflow-y:auto;font-size:.88rem;line-height:1.5;padding:.25rem .6rem}
body.yazma-kipi #verilen-dipnot .alan-etiket{display:none}
body.yazma-kipi #verilen-dipnot{margin:0}
body.yazma-kipi #serbest-giris{min-height:4.2rem}
body.yazma-kipi .alt-cubuk{padding-top:.35rem;padding-bottom:.35rem}

/* Yatay telefon: fiş solda, yazı sağda; ikisi birlikte görünen pencereye
   sığar, fiş kendi içinde kayar. */
@media (max-height:500px) and (min-width:600px){
  .yazi-duzen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);align-items:start;gap:.6rem}
  .fis-parcalar{max-height:calc(var(--gorunur,100dvh) - 7.5rem);overflow-y:auto;overscroll-behavior:contain}
  .tus-serit{grid-template-columns:repeat(6,minmax(44px,1fr));gap:.25rem}
  .tus{min-height:44px;font-size:1.05rem;padding:0}
  body.yazma-kipi .fis-parcalar{max-height:calc(var(--gorunur,100dvh) - 4.5rem)}
  body.yazma-kipi #serbest-giris{min-height:2.8rem}
  body.yazma-kipi .dizgi-serit{display:none}
  /* Klavye açıkken Diz sol sütunun altında: sağdaki yazı alanını örtmez. */
  body.yazma-kipi .alt-cubuk{justify-content:flex-start;background:none;pointer-events:none}
  body.yazma-kipi .alt-cubuk .birincil{pointer-events:auto;min-width:0;width:calc((100% - .6rem) / 2.35);background-clip:padding-box}
}
/* Yazma kipinde köşe düğmeleri ve üst şerit gizlenir: telefonda fişin
   başını örtüyordu; odak yazı alanından çıkınca geri gelir. */
body.yazma-kipi.oyun-modu .kose,body.yazma-kipi.oyun-modu::before{display:none}
body.yazma-kipi.oyun-modu{padding-top:.4rem}

/* ── Kör hakem 2 (03.10.2026): düzeltme, hatalı yer, satır içi ipucu ── */
/* Hatalı yerin YERİ (doğrusu değil): kesik kırmızı çerçeve ve sözle değil
   yalnız işaretle; renk tek başına anlam taşımasın diye kalın kesikli. */
#alistirma-bolumu .hatali{outline:3px dashed var(--isaret);outline-offset:2px}
#alistirma-bolumu .bicim-satiri.hatali{outline-offset:-2px;border-radius:6px}
::highlight(hatali-yer){background-color:rgba(192,57,43,.22);text-decoration:underline wavy var(--isaret) 2px}
.tus[aria-pressed="true"]{background:var(--vurgu);border-color:var(--vurgu);color:var(--kagit)}

.ipucu-kutu{position:relative;margin:0 0 .6rem;padding:.2rem 2.6rem .2rem .2rem;background:var(--uyari-zem);border:1px solid #C9A227;border-radius:10px}
.ipucu-kutu .atif-soz{align-items:center}
.ipucu-kutu .as-g{width:64px}
.ipucu-kutu .as-balon{margin:0;box-shadow:none;font-weight:500;font-size:.92rem}
.ipucu-kapat{position:absolute;top:.2rem;right:.2rem;width:44px;height:44px;border:0;background:none;color:var(--murekkep-2);font-size:1.1rem;cursor:pointer;border-radius:50%}
.ipucu-kapat:hover,.ipucu-kapat:focus-visible{background:var(--panel-2)}
body.yazma-kipi .ipucu-kutu .as-g{display:none}
body.yazma-kipi .ipucu-kutu .as-balon{font-size:.84rem;padding:.3rem .5rem}
body.yazma-kipi .ipucu-kutu .as-balon::before{display:none}

/* Yatay telefonda ders: künye ile Atıf'ın açıklaması yan yana sığsın. */
@media (max-height:500px) and (min-width:600px){
  .ders-sahne{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:.4rem .8rem;padding:.8rem;min-height:0}
  .ders-sahne .ders-kunye{grid-column:1;grid-row:1 / span 2;font-size:1.02rem;line-height:1.9}
  .ders-sahne .olay-etiketler{grid-column:2;grid-row:1}
  .ders-sahne .ders-atif-satir{grid-column:2;grid-row:2;max-width:none}
  .ders-sahne .ders-ilerleme{grid-column:1 / -1}
  .ders-sahne .ders-atif{width:64px}
  .ders-sahne .ders-adim{font-size:.86rem;margin-bottom:.6rem}
}
.alt-cubuk.duzeltme{flex-wrap:nowrap}
.alt-cubuk.duzeltme button{min-width:0;flex:1 1 0}
.alt-cubuk.duzeltme .ayirici-secici{flex-basis:100%}
.alt-cubuk.duzeltme:has(.ayirici-secici){flex-wrap:wrap}

/* ── G7: üç katlı harita, yakında, öbür bölümler (TASARIM §8.2) ── */
.kasa-liste{grid-template-columns:1fr}
@media (min-width:640px){.kasa-liste{grid-template-columns:1fr}}
.kat{border:1px solid var(--cizgi);border-radius:14px;background:var(--panel-2)}
.kat>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;min-height:44px;font-family:var(--serif);font-size:1.08rem}
.kat>summary::-webkit-details-marker{display:none}
.kat>summary::before{content:"▸";color:var(--murekkep-2);transition:transform .15s}
.kat[open]>summary::before{transform:rotate(90deg)}
.kat>summary:focus-visible{outline:2px solid var(--vurgu);outline-offset:-3px;border-radius:14px}
.kat-ad{flex:1}
.kat-sayi{font-family:var(--govde);font-size:.9rem;color:var(--murekkep-2)}
.kat-raflar{display:grid;gap:.7rem;grid-template-columns:1fr;padding:0 .7rem .8rem}
@media (min-width:640px){.kat-raflar{grid-template-columns:1fr 1fr}}
.kasa-h.yakinda{opacity:.6}
.kasa-h.yakinda .kasa-ana{cursor:default}
.kasa-h.obur .kasa-ana{grid-template-areas:"i y y";min-height:60px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* G adımı: hazır satır başı; yeni parça kartı. */
.g-hazir{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem .7rem;margin:0 0 .6rem}
.g-hazir-metin{font-family:var(--serif)}
.yeni-parca-ornek{margin:.5rem 0 .6rem;padding:.6rem .8rem;background:var(--panel);border-radius:10px;border:1px dashed var(--cizgi-koyu)}
.yeni-parca-tamam{min-height:44px}

/* G8: ipucu kademeleri */
.ipucu-alt{display:flex;align-items:center;gap:.7rem;margin:.2rem 0 .3rem .4rem}
.ipucu-kademe{font-size:.85rem;color:var(--murekkep-2)}
.ipucu-daha{min-height:44px}
.serbest-sec.obur-sec{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1rem .8rem}

/* ══ R2-Ö3: yatay telefon dizgi ekranı ═══════════════════════════════════════
   Başlık şeridi ve köşe düğmeleri sıkışır, açıklama satırı küçülür, fiş
   daralır; Diz akışın sonunda durur, çalışma alanının üstüne binmez. */
@media (max-height:500px) and (min-width:600px){
  body.oyun-modu[data-ekran="dizgi"]{padding-top:.3rem}
  body.oyun-modu[data-ekran="dizgi"]::before{display:none}
  /* Köşe düğmeleri şeritle aynı satırda, sayfayla birlikte kayar (çalışma alanını örtmez). */
  body.oyun-modu[data-ekran="dizgi"] .kose{position:absolute;top:max(.3rem,env(safe-area-inset-top))}
  body.oyun-modu[data-ekran="dizgi"] .kose-dugme{width:40px;height:40px}
  body[data-ekran="dizgi"] .dizgi-serit{margin:.2rem calc(3 * 40px + 1.4rem) .2rem 0;padding:.25rem .5rem;gap:.3rem .6rem}
  body[data-ekran="dizgi"] .dizgi-serit .geri-bag.kare{width:40px;min-width:40px;min-height:40px}
  body[data-ekran="dizgi"] .ds-baslik{flex-direction:row;align-items:baseline;gap:.5rem}
  body[data-ekran="dizgi"] .ipucu-dugme{height:40px}
  body[data-ekran="dizgi"] .dizgi-aciklama{font-size:.82rem;margin:.1rem 0 .3rem}
  /* Yazma kipindeki (klavye açık) --gorunur kuralını ezmesin (R2 inceleme 2/7). */
  body[data-ekran="dizgi"]:not(.yazma-kipi) .fis-parcalar{max-height:42dvh}
  body[data-ekran="dizgi"] #is-fisi > summary{padding-top:.25rem;padding-bottom:.25rem}
  body[data-ekran="dizgi"] #kaynak-bilgi{max-height:28dvh;overflow-y:auto;overscroll-behavior:contain;columns:2;column-gap:1.2rem}
  body[data-ekran="dizgi"] #kaynak-bilgi > *{break-inside:avoid}
  body[data-ekran="dizgi"]:not(.yazma-kipi) .alt-cubuk{position:static;background:none;margin-top:.3rem}
}

/* R3-Ö1: "başka öğrenci" geçişinde gönderim bekleme göstergesi */
.bekleme-gosterge{width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid var(--cizgi-koyu);border-top-color:var(--vurgu);animation:bekle 1s linear infinite;align-self:center}
@keyframes bekle{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bekleme-gosterge{animation:none}}

/* R4-A: ⚙ penceresinin en altında hoca ekranı bağlantısı (küçük, sade) */
.hoca-bag{margin:.9rem 0 0;text-align:right;font-size:.8rem}
.hoca-bag a{color:var(--murekkep-3,var(--murekkep-2));text-decoration:underline;text-underline-offset:2px;display:inline-block;min-height:24px;padding:.2rem 0}
.hoca-bag a:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}

/* ══ R4-B: taban ve fark ════════════════════════════════════════════════════ */
.kasa-fark{margin:.8rem 0;padding:.8rem 1rem;background:var(--panel);border:1px solid var(--cizgi);border-left:3px solid var(--uyari,#C9A227);border-radius:0 8px 8px 0}
.kasa-fark-bas{margin:0 0 .4rem;font-size:1rem;font-family:var(--serif);font-weight:400}
.kasa-fark-kalip{font-size:.92rem;color:var(--murekkep-2);margin-bottom:.4rem}
.kasa-fark-kalip .alan-etiket{margin-bottom:.1rem}
.kasa-fark-liste{margin:.2rem 0 0;padding-left:1.1rem;line-height:1.5}
.kasa-fark-liste li{margin:.15rem 0}
.fark-rozet{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.03em;padding:0 .35rem;border-radius:999px;background:var(--uyari,#C9A227);color:#1B2A4A;vertical-align:.08em}
.fis-parca.fark-yeni,.bilgi-satiri.fark-yeni{box-shadow:inset 3px 0 0 var(--uyari,#C9A227)}

/* Canlı oyun bağlantısı (haritanın alt bağları; canli.html). */
a.bag.canli-bag{display:inline-flex;align-items:center;min-height:44px;font-size:.92rem;color:var(--vurgu)}

/* Takılınca yardım (12.10.2026): kartta ipucu metni, "Bir ipucu daha", "Doğrusunu göster". */
.gb-yardim{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem;margin-top:.4rem;padding:.55rem .65rem;background:var(--uyari-zem);border:1px solid #C9A227;border-radius:8px}
.gb-ipucu-metin{display:flex;align-items:flex-start;gap:.4rem}
.gb-ipucu-metin img{width:26px;height:26px;flex:none}
.gb-yardim button{min-height:44px;display:inline-flex;align-items:center;gap:.35rem}
.gb-yardim button img{width:24px;height:24px}
.geri-bildirim.dogrusu{background:var(--panel-2);border-color:var(--vurgu)}
.geri-bildirim.dogrusu h3{color:var(--vurgu)}