/* ==========================================================================
   METİN TAHLİLİ SAYFALARI                02_cekirdek/css/sayfa-metintahlili.css
   --------------------------------------------------------------------------
   5-10. sınıf için kitabın sonuna eklenen sayfalar (03_veri/metintahlili_
   sayfalar.js üretir). sayfa-html.css ile aynı tuvalde çizilir: 595 birim
   genişlik, --hs ölçeği. Var olan sayfa stillerine dokunulmadı.
   14.10.2026
   ========================================================================== */
.hs-mt { padding: 50px 46px 40px;
  font-family: Calibri, Carlito, 'Segoe UI', system-ui, sans-serif; color: #122040; }

/* ---- tepe: sınıf ve kitap adı büyük ---- */
.hs-mt .mtp-ust { text-align: center; border-bottom: 2px solid #C00000;
  padding-bottom: 13px; margin-bottom: 14px; }
.hs-mt .mtp-etiket { font-size: 10.5px; letter-spacing: 3.4px; color: #C00000; }
.hs-mt .mtp-sinif { font-size: 60px; line-height: 1; font-weight: 300;
  letter-spacing: 1px; margin: 5px 0 3px; }
.hs-mt .mtp-kitap { font-size: 29px; line-height: 1.1; color: #17817E; }
.hs-mt .mtp-alt { font-size: 11px; color: #555; margin-top: 5px; }
.hs-mt .mtp-prg { font-size: 9.5px; color: #8a8a8a; margin-top: 2px; }

.hs-mt .mtp-yonerge { font-size: 10px; line-height: 1.35; color: #4a5a68;
  background: #F4FAF8; border: 1px solid #D6EBE5; border-radius: 4px;
  padding: 6px 9px; margin: 0 0 7px; text-align: center; }
.hs-mt .mtp-ozet { font-size: 9.5px; color: #8a8a8a; text-align: center;
  margin: 0 0 9px; }
.hs-mt .mtp-bekle { font-size: 11px; color: #9a6a10; background: #FFF8E8;
  border: 1px solid #F0DCAE; border-radius: 4px; padding: 7px 9px;
  text-align: center; margin: 0 0 9px; }

/* ---- ünite / ders satırları ---- */
/* Ders sayısı çoksa (6 ve 8. sınıf: 6 ünite + 18 ders) liste sayfayı
   aşıyordu; iki sütuna bölünüyor. Satırlar sütun ortasında bölünmüyor. */
.hs-mt .mtp-iki { column-count: 2; column-gap: 22px; }
.hs-mt .mtp-iki > * { break-inside: avoid; -webkit-column-break-inside: avoid; }
.hs-mt .mtp-iki .mtp-u { break-after: avoid; -webkit-column-break-after: avoid; }
.hs-mt .mtp-iki .mtp-d { font-size: 9.6px; padding: 2px 4px; }
.hs-mt .mtp-iki .mtp-sy { min-width: 44px; flex: 0 0 44px; font-size: 8.8px; }
.hs-mt .mtp-iki .ar { font-size: 1.15em; }

.hs-mt .mtp-u { color: #C00000; font-size: 11px; margin: 9px 0 2px;
  display: flex; gap: 7px; align-items: baseline; }
.hs-mt .mtp-u:first-child { margin-top: 0; }
.hs-mt .mtp-d { display: flex; align-items: baseline; gap: 6px; font-size: 10.4px;
  padding: 2.4px 6px; border-bottom: .6px solid #cdcdcd; border-radius: 2px;
  text-decoration: none; color: inherit; }
.hs-mt a.mtp-d { cursor: pointer; transition: background .12s; }
.hs-mt a.mtp-d:hover, .hs-mt a.mtp-d:active { background: #FBEFD6; }
/* Simgeler çizgi SVG (emoji değil): kutusu sabit, rengi satırdan gelir. */
.hs-mt .mtp-sim { width: 12px; height: 12px; flex: 0 0 12px; color: #17817E;
  position: relative; top: 1.5px; }
.hs-mt .mtp-yok .mtp-sim { color: #E3A02A; }
.hs-mt .mtp-sim-i { width: 100%; height: 100%; display: block; }
.hs-mt .mtp-yonerge .mtp-sim-i, .hs-mt .mtp-bekle .mtp-sim-i {
  width: 1.25em; height: 1.25em; display: inline-block;
  vertical-align: -.28em; margin-inline-end: .3em; }
.hs-mt .mtp-yonerge .mtp-sim-ic { color: #17817E; }
.hs-mt .mtp-ad { flex: 1; }
.hs-mt .mtp-sy { color: #17817E; font-size: 9.5px; min-width: 52px;
  text-align: right; flex: 0 0 52px; font-variant-numeric: tabular-nums; }
.hs-mt .mtp-yok { color: #9a9a9a; }
.hs-mt .mtp-yok .mtp-sy { color: #E3A02A; font-weight: 600; }

/* ---- basılı İçindekiler sayfasındaki (s.4) şerit ---- */
.hs-icindekiler .i-mt { margin-top: 13px; border-top: 1px solid #222; padding-top: 7px; }
.hs-icindekiler .i-mt-bas { color: #C00000; font-size: 9px; letter-spacing: .8px;
  margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.hs-icindekiler .i-mt-sim { width: 12px; height: 12px; flex: 0 0 12px; }
.hs-icindekiler .i-mt-cips { display: flex; flex-wrap: wrap; gap: 4px; }
.hs-icindekiler .i-mt-c { display: inline-flex; gap: 5px; align-items: baseline;
  border: .6px solid #c9c9c9; border-radius: 3px; padding: 1.6px 7px;
  text-decoration: none; color: inherit; cursor: pointer; }
.hs-icindekiler .i-mt-c:hover, .hs-icindekiler .i-mt-c:active { background: #FBEFD6; }
.hs-icindekiler .i-mt-c b { font-variant-numeric: tabular-nums; color: #17817E; }

/* Sınıfın birden çok kitabı varsa kitap başlığı (6, 7 ve 10. sınıf) */
.hs-mt .mtp-kt { margin: 10px 0 3px; padding: 4px 7px; border-radius: 4px;
  background: #F2FBF8; border: 1px solid #CFEFE6; break-inside: avoid; }
.hs-mt .mtp-kt b { display: block; font-size: 10.5px; color: #17817E; }
.hs-mt .mtp-kt span { display: block; font-size: 8.6px; color: #8a8a8a; }
.hs-mt .mtp-kt:first-child { margin-top: 0; }
.hs-mt .mtp-ust .mtp-kitap { line-height: 1.15; }

/* ==========================================================================
   TAM SAYFA ALIŞTIRMA  (#pEtkinlik.tam)                        14.10.2026
   Geylani: "5-10 cümleleri bi sayfa gibi açılsın, popup veya overlay
   şeklinde değil." Metin Tahlili gibi KENDİ başlığı olan belgeler ekranı
   kaplar; panelin başlığı gizlenir, köşede yalnız kapatma tuşu kalır.
   ========================================================================== */
.panel.orta.tam {
  top: 0; left: 0; width: 100%; height: 100%;
  max-width: none; max-height: none; border-radius: 0;
  transform: none; box-shadow: none;
  transition: opacity .22s ease;
}
.panel.orta.tam.acik { transform: none; }
.panel.orta.tam > .pbas {
  position: absolute; top: 9px; inset-inline-end: 12px; z-index: 5;
  padding: 0; margin: 0; background: none; border: 0; box-shadow: none; gap: 0;
}
.panel.orta.tam > .pbas .rozet,
.panel.orta.tam > .pbas h2 { display: none; }
.panel.orta.tam > .pbas .kapat {
  width: 40px; height: 40px; border-radius: 999px;
  background: #fff; border: 1.5px solid #E3EAF2; color: #5b6b7b;
  box-shadow: 0 4px 14px rgba(16, 42, 67, .14);
}
.panel.orta.tam > .pbas .kapat:hover { background: #FDECEA; border-color: #F3BDB4; color: #C0392B; }
.panel.orta.tam > .pgovde { flex: 1 1 auto; min-height: 0; }

/* İçindekiler panelindeki Metin Tahlili simgeleri (emoji değil, çizgi SVG) */
#tocListe .toc-sim { width: 1.05em; height: 1.05em; display: inline-block;
  vertical-align: -.18em; }
#tocListe .unite h3 .toc-sim { color: #17817E; }

/* ==========================================================================
   İÇİNDEKİLER AKORDİYONU                                       14.10.2026
   Geylani: "akordiyon sistem olsun". Gruplar kapalı duruyor, başlığa
   basınca açılıyor; tek seferde bir grup açık.
   ========================================================================== */
#tocListe .unite > h3 {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 10px; margin: 0 0 2px; border-radius: 10px;
  background: #F6F9FC; border: 1px solid transparent;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
  user-select: none;
}
#tocListe .unite > h3:hover { background: #EDF4FA; border-color: #DCE7F1; }
#tocListe .unite > h3:focus-visible { outline: 3px solid #9ED8CB; outline-offset: 2px; }
#tocListe .unite > h3 > .u-sayi {
  margin-inline-start: auto; font-size: 10.5px; font-weight: 700;
  color: #7b8a99; background: #fff; border: 1px solid #E3EAF2;
  border-radius: 999px; padding: 1px 8px; letter-spacing: 0;
}
#tocListe .unite > h3 > .u-ok {
  width: 15px; height: 15px; flex: 0 0 15px; color: #94a3b8;
  transition: transform .22s ease;
}
#tocListe .unite.acik > h3 { background: #E8F6F2; border-color: #BFE9DE; color: #0E7C66; }
#tocListe .unite.acik > h3 > .u-ok { transform: rotate(180deg); color: #16A085; }
#tocListe .unite.acik > h3 > .u-sayi { color: #0E7C66; border-color: #BFE9DE; }
#tocListe .unite > .dersler { display: none; }
#tocListe .unite.acik > .dersler {
  display: flex; padding: 4px 0 8px;
  animation: tocAcil .18s cubic-bezier(.3, .8, .3, 1);
}
@keyframes tocAcil { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }