/* PIXEL'IN HIKAYE KITABI - ortak stil
   Hedef kitle: 10-11 yas. Buyuk hedefler, yuksek kontrast, az metin. */

:root {
  --kagit: #fff9f2;
  --kagit-2: #ffffff;
  --murekkep: #2a2440;
  --soluk: #6d6685;
  --cizgi: #e8e0d5;

  --mor: #5b4dd3;
  --mor-acik: #ece9ff;
  --turuncu: #ff8a3d;
  --yesil: #22b573;
  --yesil-acik: #e3f8ee;
  --kirmizi: #e5484d;
  --sari: #ffc93c;

  --r: 18px;
  --r-buyuk: 28px;
  --golge: 0 4px 0 rgba(42, 36, 64, 0.12);
  --golge-yumusak: 0 10px 30px rgba(42, 36, 64, 0.1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font-family: "Segoe UI", system-ui, -apple-system, "Trebuchet MS", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; }

button {
  font: inherit;
  cursor: pointer;
  border: none;
  border-radius: var(--r);
  padding: 14px 24px;
  font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease, background .12s;
}
button:active { transform: translateY(2px); }
button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.dugme-ana {
  background: var(--mor);
  color: #fff;
  box-shadow: 0 4px 0 #4437ad;
}
.dugme-ana:hover:not(:disabled) { background: #6a5ce0; }
.dugme-ana:active:not(:disabled) { box-shadow: 0 2px 0 #4437ad; }

.dugme-ikincil {
  background: #fff;
  color: var(--mor);
  border: 2px solid var(--cizgi);
  box-shadow: var(--golge);
}
.dugme-ikincil:hover:not(:disabled) { border-color: var(--mor); }

.dugme-kucuk { padding: 8px 14px; font-size: .9rem; border-radius: 12px; }

input, textarea, select {
  font: inherit;
  padding: 13px 16px;
  border: 2px solid var(--cizgi);
  border-radius: var(--r);
  background: #fff;
  color: var(--murekkep);
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--mor);
  box-shadow: 0 0 0 4px var(--mor-acik);
}

.kap { max-width: 1000px; margin: 0 auto; padding: 24px 20px 80px; }
.kart {
  background: var(--kagit-2);
  border: 2px solid var(--cizgi);
  border-radius: var(--r-buyuk);
  padding: 22px;
  box-shadow: var(--golge-yumusak);
}

.rozet {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.rozet-1 { background: var(--yesil-acik); color: #12805a; }
.rozet-2 { background: #fff2e0; color: #b85c12; }
.rozet-3 { background: var(--mor-acik); color: #4437ad; }
.rozet-bitti { background: var(--yesil); color: #fff; }

.uyari {
  background: #fff0f0;
  border: 2px solid #ffd0d2;
  color: #a3282c;
  border-radius: var(--r);
  padding: 14px 18px;
  margin: 14px 0;
  font-weight: 600;
}
.bilgi {
  background: var(--mor-acik);
  border: 2px solid #d9d3ff;
  color: #4437ad;
  border-radius: var(--r);
  padding: 14px 18px;
  margin: 14px 0;
}
.gizli { display: none !important; }

/* ---------- Ust cubuk ---------- */
.ust {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  background: #fff;
  border-bottom: 2px solid var(--cizgi);
  position: sticky;
  top: 0;
  z-index: 20;
}
.ust .marka { font-weight: 900; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.ust .bosluk { flex: 1; }
.ust .kalan { font-size: .85rem; color: var(--soluk); font-weight: 700; }

/* ---------- Giris ekrani ---------- */
.giris-sahne {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 20% -10%, #ffe6cc 0%, transparent 60%),
    radial-gradient(800px 500px at 90% 10%, #e3dcff 0%, transparent 55%),
    var(--kagit);
}
.giris-kutu { width: min(460px, 100%); text-align: center; }
.sekme-cubugu { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--kagit); border-radius: var(--r); padding: 4px; margin-bottom: 16px; }
.sekme { background: transparent; color: var(--soluk); padding: 10px 8px; font-size: .92rem; border-radius: 14px; min-height: 44px; }
.sekme.secili { background: #fff; color: var(--mor); box-shadow: var(--golge); }
.alan-etiket { font-weight: 700; display: block; margin: 12px 0 6px; }
.alan-etiket:first-child { margin-top: 0; }
.giris-not { font-size: .85rem; color: var(--soluk); margin: 14px 0 0; text-align: center; }
.baglanti-dugme { background: none; border: none; padding: 0; font: inherit; font-size: .85rem; color: var(--mor); text-decoration: underline; cursor: pointer; }
.baglanti-dugme:hover { color: var(--murekkep); }
.kedi {
  font-size: 5rem;
  line-height: 1;
  display: inline-block;
  animation: sallan 3.5s ease-in-out infinite;
}
@keyframes sallan {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(-6px); }
}
#kodGiris {
  text-align: center;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
/* Uzun kod (OK1-ME5-XXXXXX) dar ekranda kutuya sigsin */
@media (max-width: 480px) {
  #kodGiris { font-size: .8rem; letter-spacing: .01em; padding-left: 8px; padding-right: 8px; }
}

/* ---------- Kitaplik ---------- */
.unite-basi {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 34px 0 14px;
  flex-wrap: wrap;
}
.unite-no {
  background: var(--mor);
  color: #fff;
  width: 38px; height: 38px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-weight: 900;
  flex: none;
}
.unite-alt { color: var(--soluk); font-size: .9rem; width: 100%; margin-top: -6px; }

.hikaye-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.hikaye-kart {
  background: #fff;
  border: 2px solid var(--cizgi);
  border-radius: var(--r-buyuk);
  padding: 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .15s ease, border-color .15s, box-shadow .15s;
  text-align: left;
  width: 100%;
}
.hikaye-kart:hover { transform: translateY(-4px); border-color: var(--mor); box-shadow: var(--golge-yumusak); }
.hikaye-kart h3 { font-size: 1.1rem; margin: 0; }
.hikaye-kart .tr { color: var(--soluk); font-size: .88rem; }
.hikaye-kart .ozet { font-size: .9rem; color: var(--soluk); flex: 1; }
.hikaye-kart .alt { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--soluk); }

/* ---------- Okuma ---------- */
.sahne {
  border-radius: var(--r-buyuk);
  padding: 30px 26px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--cizgi);
}
.sahne.sabah { background: linear-gradient(160deg, #fff4d9, #ffe3e8); }
.sahne.gunduz { background: linear-gradient(160deg, #dceeff, #e8f7ff); }
.sahne.aksam { background: linear-gradient(160deg, #e6e0ff, #d9e4ff); }

.sahne-emoji { font-size: 4.2rem; line-height: 1; text-align: center; }
.sahne-metin {
  font-size: 1.32rem;
  line-height: 1.85;
  white-space: pre-line;
  font-weight: 500;
  max-width: 34ch;
  margin: 0 auto;
}
.sahne-metin .k {
  cursor: pointer;
  border-bottom: 2px dotted rgba(91, 77, 211, .45);
  padding: 0 1px;
  border-radius: 4px;
}
.sahne-metin .k:hover, .sahne-metin .k.acik { background: #fff; border-bottom-color: var(--mor); }

.balon {
  position: fixed;
  z-index: 60;
  background: var(--murekkep);
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: .95rem;
  font-weight: 600;
  box-shadow: var(--golge-yumusak);
  pointer-events: none;
  max-width: 240px;
}
.balon .tur { display: block; font-size: .72rem; opacity: .65; font-weight: 500; }

.pixel-gizli {
  position: absolute;
  font-size: 1.5rem;
  opacity: .28;
  cursor: pointer;
  transition: transform .25s, opacity .25s;
  user-select: none;
}
.pixel-gizli:hover { opacity: .6; }
.pixel-gizli.bulundu {
  opacity: 1;
  transform: scale(1.9) rotate(12deg);
  cursor: default;
  animation: zipla .5s ease;
}
@keyframes zipla {
  0% { transform: scale(1); }
  50% { transform: scale(2.4) rotate(-14deg); }
  100% { transform: scale(1.9) rotate(12deg); }
}

.okuma-alt {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
}
.nokta-sirasi { display: flex; gap: 6px; flex: 1; justify-content: center; }
.nokta { width: 10px; height: 10px; border-radius: 50%; background: var(--cizgi); }
.nokta.aktif { background: var(--mor); transform: scale(1.3); }
.nokta.gecti { background: #b9b1ee; }

.ceviri-ipucu {
  text-align: center;
  color: var(--soluk);
  font-size: .95rem;
  font-style: italic;
  min-height: 1.5em;
}

/* ---------- Test ---------- */
.soru-kart { margin-bottom: 22px; }
.soru-kart h3 { font-size: 1.1rem; }
.secenek {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 2px solid var(--cizgi);
  border-radius: var(--r);
  padding: 14px 18px;
  margin-bottom: 10px;
  font-weight: 600;
  cursor: pointer;
}
.secenek:hover { border-color: var(--mor); }
.secenek.secili { border-color: var(--mor); background: var(--mor-acik); }
.secenek.dogru { border-color: var(--yesil); background: var(--yesil-acik); }
.secenek.yanlis { border-color: var(--kirmizi); background: #fff0f0; }

.sonuc-kutu { text-align: center; padding: 30px 20px; }
.sonuc-buyuk { font-size: 3.4rem; line-height: 1; margin-bottom: 10px; }

/* ---------- Ogretmen ---------- */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--cizgi); }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--soluk); }
td.kod { font-family: "Consolas", ui-monospace, monospace; font-weight: 800; letter-spacing: .04em; }
.tablo-sar { overflow-x: auto; }

@media (max-width: 600px) {
  body { font-size: 16px; }
  .sahne-metin { font-size: 1.18rem; }
  .kap { padding: 16px 14px 70px; }
  .sahne { padding: 22px 18px; }
}

/* ---------- Ses / vurgulama ---------- */
.dinle-satir { display: flex; justify-content: center; margin-top: 12px; }
#dinleDugme.okuyor { background: var(--turuncu); color: #fff; border-color: var(--turuncu); }
/* Sayfa henuz sonuna kadar dinlenmedi: ileri dugmesi kapali, Oynat dikkat cekiyor.
   (Okan'in kurali: cocuk hikayeyi okuyarak VE dinleyerek bitirir.) */
#dinleDugme.bekleniyor { box-shadow: 0 0 0 4px rgba(91, 77, 211, .22); }
@media (prefers-reduced-motion: no-preference) {
  #dinleDugme.bekleniyor { animation: dinleNabiz 1.9s ease-in-out infinite; }
}
@keyframes dinleNabiz {
  0%, 100% { box-shadow: 0 0 0 3px rgba(91, 77, 211, .22); }
  50% { box-shadow: 0 0 0 9px rgba(91, 77, 211, .10); }
}
.sahne-metin .s { padding: 0 1px; border-radius: 4px; }
.sahne-metin .okunuyor { background: var(--sari); box-shadow: 0 0 0 3px var(--sari); }

/* ---------- SVG sahne ---------- */
.sahne-svg { display: flex; justify-content: center; }
.sahne-svg svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(42, 36, 64, .12);
}

/* ---------- Kelime oyunu ---------- */
.oyun-bolum { margin-bottom: 30px; transition: opacity .3s; }
.oyun-bolum.oyun-bitti { opacity: .55; pointer-events: none; }
.oyun-ipucu { color: var(--soluk); margin-top: -6px; font-size: .92rem; }
.esle-alan { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.esle-sutun { display: grid; gap: 10px; align-content: start; }
.esle-kart {
  background: #fff;
  border: 2px solid var(--cizgi);
  border-radius: var(--r);
  padding: 14px 12px;
  font-weight: 700;
  text-align: center;
  min-height: 56px;
  transition: transform .12s, border-color .12s, background .12s;
}
.esle-kart:hover { border-color: var(--mor); }
.esle-kart.secili { border-color: var(--mor); background: var(--mor-acik); transform: scale(1.03); }
.esle-kart.eslesti { border-color: var(--yesil); background: var(--yesil-acik); color: #12805a; cursor: default; }
.esle-kart.yanlis { border-color: var(--kirmizi); background: #fff0f0; animation: titre .35s; }
@keyframes titre {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* ---------- Oynat + hiz ---------- */
.dinle-satir { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 12px 0 4px; }
.hiz-kutu { display: flex; align-items: center; gap: 6px; font-size: .9rem; color: var(--soluk); }
.hiz-kutu input[type=range] { width: 130px; accent-color: var(--mor); }
.hiz-etiket { min-width: 62px; font-weight: 700; color: var(--murekkep); font-size: .85rem; }
.sahne-metin .okunuyor { background: var(--sari); border-radius: 6px; box-shadow: 0 0 0 3px var(--sari); }
/* ---------- Aktivite ---------- */
.ikili { display: flex; gap: 10px; }
.ikili .secenek { flex: 1; text-align: center; }
.sira-liste { display: grid; gap: 8px; }
.sira-kart.dogru { background: var(--yesil-acik); }
/* ---------- Kelime avi ---------- */
.avi-alan { display: flex; flex-wrap: wrap; gap: 10px; }
.avi-cip { padding: 10px 16px; border-radius: 999px; }
.avi-cip.secili { border-color: var(--mor); background: var(--mor-acik); }
/* ---------- Cizilmis illustrasyon ---------- */
.sahne-resim { width: 100%; aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.45); }
.sahne-resim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sahne-resim.yukleniyor { animation: resimNabiz 1.2s ease-in-out infinite; }
@keyframes resimNabiz { 50% { opacity: .55; } }

/* ---------- Kitaplik: kart kapagi ---------- */
.hikaye-kart { overflow: hidden; }
.kart-kapak {
  position: relative;
  aspect-ratio: 3 / 2;
  margin: -18px -18px 4px;
  overflow: hidden;
  border-bottom: 2px solid var(--cizgi);
  flex: none;
}
.kart-kapak img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
}
.kart-kapak.yuklendi img { opacity: 1; }
.hikaye-kart:hover .kart-kapak img { transform: scale(1.03); }
.kapak-yer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.kapak-emoji { font-size: 2.6rem; line-height: 1; }
.kapak-no { font-weight: 900; font-size: 1.05rem; letter-spacing: .02em; }
.kapak-renk-0 { background: linear-gradient(150deg, var(--mor-acik), #d9d3ff); color: #4437ad; }
.kapak-renk-1 { background: linear-gradient(150deg, #fff2e0, #ffe0c2); color: #b85c12; }
.kapak-renk-2 { background: linear-gradient(150deg, var(--yesil-acik), #c9f0dd); color: #12805a; }
.kapak-renk-3 { background: linear-gradient(150deg, #fff4d9, #ffe3e8); color: #a3282c; }

/* ---------- Okuyucu duzeni: resim ustte, metin altta ---------- */
.okuma-kap { max-width: 760px; }
.ust .ust-baslik {
  display: block;
  font-size: .95rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ust .kalan { white-space: nowrap; }
#geriDugme, #cikisDugme { min-height: 44px; white-space: nowrap; flex: none; }

.okuma-kap .sahne {
  padding: 14px 14px 20px;
  min-height: 0;
  gap: 16px;
}
.sahne-cerceve {
  position: relative;
  /* Masaustunde resim ekrani doldurmasin: yukseklik ~%60 ile sinirli, oran hep 3:2. */
  width: min(100%, calc(50vh * 1.5));
  margin: 0 auto;
  aspect-ratio: 3 / 2;
  border-radius: 20px;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 6px 20px rgba(42, 36, 64, .12);
  flex: none;
}
.sahne-cerceve > #sahneGorsel {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
}
.sahne-cerceve .sahne-resim { aspect-ratio: auto; border-radius: inherit; background: transparent; }
.sahne-cerceve .sahne-svg { display: flex; align-items: center; justify-content: center; }
.sahne-cerceve .sahne-svg svg {
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 0;
  box-shadow: none;
}
.sahne-cerceve .sahne-emoji {
  display: grid;
  place-items: center;
  font-size: clamp(3.6rem, 14vw, 6.5rem);
}
.okuma-kap .sahne-metin {
  font-size: 1.5rem;
  line-height: 1.8;
  max-width: 44ch;
  width: 100%;
  padding: 0 6px;
  min-height: calc(1.8em * 3);
}

/* Gizli Pixel: resim alaninin kosesinde, kucuk ve yari saydam; parmak hedefi 44px. */
.sahne-cerceve .pixel-gizli {
  z-index: 2;
  font-size: 1.2rem;
  line-height: 1;
  padding: 11px;
  opacity: .38;
  -webkit-tap-highlight-color: transparent;
}
.sahne-cerceve .pixel-gizli:hover { opacity: .65; }
.sahne-cerceve .pixel-gizli.bulundu { opacity: 1; }

/* Oynat / hiz / ok dugmeleri: en az 44px parmak hedefi */
#dinleDugme { min-height: 48px; padding: 10px 22px; font-size: 1rem; }
.hiz-kutu { font-size: 1.1rem; }
.hiz-kutu input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 160px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}
.hiz-kutu input[type=range]:focus { box-shadow: none; }
.hiz-kutu input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: #d9d3ff; }
.hiz-kutu input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px; height: 28px;
  margin-top: -10px;
  border-radius: 50%;
  background: var(--mor);
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(42, 36, 64, .3);
}
.hiz-kutu input[type=range]::-moz-range-track { height: 8px; border-radius: 999px; background: #d9d3ff; }
.hiz-kutu input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--mor);
  border: 3px solid #fff;
}
.hiz-kutu input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--mor-acik), 0 0 0 6px var(--mor); }
.okuma-alt #oncekiDugme, .okuma-alt #sonrakiDugme { min-width: 64px; min-height: 52px; flex: none; }

@media (max-width: 600px) {
  .ust { gap: 8px; padding: 10px 12px; }
  .ust .marka { font-size: .95rem; min-width: 0; }
  .okuma-kap .sahne { padding: 8px 8px 16px; gap: 12px; }
  .sahne-cerceve { border-radius: 16px; }
  .okuma-kap .sahne-metin { font-size: 1.3rem; max-width: none; padding: 0 8px; }
  .hiz-kutu input[type=range] { width: 130px; }
  .okuma-alt { gap: 8px; }
  .nokta-sirasi { gap: 5px; }

  /* Telefonda cocuk her sayfada iki kez kaydiriyordu: Oynat'a basmak icin asagi,
     okumak icin yukari (Okan, 2026-09-16). Cozum: resim kisaliyor, kontroller
     ekranin altina yapisiyor. Metin kaydirilirken Oynat ve ileri/geri hep elde. */
  .sahne-cerceve { width: min(100%, calc(30vh * 1.5)); }
  .okuma-kap .sahne-metin { font-size: 1.18rem; }
  .ceviri-ipucu { margin-bottom: 4px; }

  .okuma-kontrol {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--kagit);
    /* Blok kabin kenarlarina kadar uzansin; kap yan boslugu kadar disari tasar. */
    margin: 10px -14px 0;
    padding: 6px 14px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--cizgi);
    box-shadow: 0 -6px 18px rgba(42, 36, 64, .07);
  }
  .okuma-kontrol .dinle-satir { margin: 4px 0 0; }
  .okuma-kontrol .okuma-alt { margin-top: 8px; }
  .okuma-kontrol .hiz-etiket { display: none; }   /* dar ekranda tek satirda kalsin */
}

/* ---------- Kitaplik: kitap basina unite izgarasi ---------- */
.kitap-bas { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 40px 0 14px; }
.kitap-bas h2 { margin: 0; font-size: 1.5rem; }
.kitap-alt { color: var(--soluk); font-size: .9rem; }
.unite-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.unite-izgara .hikaye-kart { padding: 0; overflow: hidden; gap: 0; }
.unite-izgara .kart-kapak { position: relative; border-radius: 0; margin: 0; }
.kart-govde { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.kart-unite { font-size: .75rem; font-weight: 800; color: var(--mor); text-transform: uppercase; letter-spacing: .04em; }
.unite-izgara .hikaye-kart h3 { font-size: 1.05rem; line-height: 1.25; }
.unite-izgara .hikaye-kart .ozet {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px;
}
.unite-izgara .hikaye-kart .alt { margin-top: auto; padding-top: 8px; }
.kapak-unite, .kapak-bitti {
  position: absolute; top: 10px; z-index: 2; font-size: .75rem; font-weight: 800;
  padding: 4px 10px; border-radius: 999px; box-shadow: 0 2px 6px rgba(42, 36, 64, .18);
}
.kapak-unite { left: 10px; background: rgba(255, 255, 255, .92); color: var(--murekkep); }
.kapak-bitti { right: 10px; background: var(--yesil); color: #fff; }
.hikaye-kart.okundu { border-color: var(--yesil); }
.kapak-bitti.kapak-yarim { background: var(--sari); color: var(--murekkep); }

/* ---------- Unite sayfasi: hikaye + iki aktivite ---------- */
.unite-bas { margin-bottom: 18px; }
.unite-adimlar { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.adim-kart {
  display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden;
  background: #fff; color: var(--murekkep); font-weight: 400;
  border: 2px solid var(--cizgi); border-radius: var(--r-buyuk); box-shadow: var(--golge-yumusak);
}
.adim-kart:hover:not(:disabled) { border-color: var(--mor); transform: translateY(-3px); }
.adim-kart.bitti { border-color: var(--yesil); }
.adim-hikaye { grid-column: 1 / -1; flex-direction: row; }
.adim-resim { flex: 0 0 46%; aspect-ratio: 3 / 2; background: var(--mor-acik); }
.adim-resim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adim-govde { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 18px 20px; }
.adim-govde h2 { margin: 0; font-size: 1.3rem; }
.adim-govde p { margin: 0; color: var(--soluk); font-size: .92rem; }
.adim-ozet { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.adim-etiket { font-size: .76rem; font-weight: 800; color: var(--mor); text-transform: uppercase; letter-spacing: .04em; }
.adim-ikon { font-size: 2.2rem; line-height: 1; }
.adim-durum { margin-top: auto; padding-top: 10px; font-weight: 800; color: var(--mor); }
.adim-kart.bitti .adim-durum { color: #12805a; }
.adim-kart.kilitli:disabled { opacity: 1; background: #f4f1ec; box-shadow: none; }
.adim-kart.kilitli .adim-durum { color: var(--soluk); }
@media (max-width: 700px) {
  .unite-adimlar { grid-template-columns: 1fr; }
  .adim-hikaye { flex-direction: column; }
  .adim-resim { flex: none; }
}

/* ---------- Aktivite kolaylastirmalari ---------- */
.tekrar-dene { margin: 6px 0 0; color: #b85c12; font-weight: 700; font-size: .92rem; }
.hikaye-goz { margin: 2px 0 10px; }
.hikaye-goz summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--mor); font-weight: 700; }
.goz-metin {
  max-height: 260px; overflow: auto; white-space: pre-line; font-size: .95rem;
  background: #fff; border: 2px dashed var(--cizgi); border-radius: var(--r); padding: 12px 14px;
}
.goz-metin mark { background: var(--sari); border-radius: 4px; padding: 0 2px; }
.unite-hikaye-bolum { margin-bottom: 30px; }
.unite-hikaye-baslik { font-size: 1.1rem; color: var(--soluk); margin: 0 0 10px; }
.teslim-bar {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--r); border: 2px dashed var(--cizgi); background: #fff; font-weight: 700; color: var(--soluk);
}
.teslim-bar.yollandi { border-style: solid; border-color: var(--yesil); background: var(--yesil-acik); color: #12805a; }
.teslim-bar.geri-gonderildi { border-style: solid; border-color: var(--turuncu); background: #fff2e0; color: #b85c12; }
.kapak-bitti.kapak-geri { background: var(--turuncu); color: #fff; }
/* Kitaplik ustunde "tekrar coz" cagrisi (ogretmen geri gonderdi) */
.geri-cagri-kutu { display: grid; gap: 10px; margin: 18px 0 4px; }
.geri-cagri { display: block; width: 100%; text-align: left; cursor: pointer; font: inherit;
  border: 2px solid var(--turuncu); background: #fff2e0; color: #b85c12; border-radius: 16px;
  padding: 16px 18px; box-shadow: 0 6px 18px -10px rgba(255, 138, 61, .6);
  transition: transform .12s ease, box-shadow .12s ease; }
.geri-cagri:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(255, 138, 61, .75); }
.geri-cagri:focus-visible { outline: 3px solid var(--turuncu); outline-offset: 2px; }
.geri-cagri-bas { display: block; font-weight: 800; font-size: 1.05rem; line-height: 1.35; }
.geri-cagri-not { display: block; margin-top: 6px; font-size: .92rem; color: #9a5514; }
.geri-cagri-git { display: block; margin-top: 8px; font-size: .88rem; font-weight: 700; color: var(--turuncu); }
@media (prefers-reduced-motion: reduce) { .geri-cagri { transition: none; } }
.kayit-uyari { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
@media (max-width: 600px) { .unite-izgara { grid-template-columns: 1fr; gap: 14px; } }

/* ---------- Canli destek (ogrenci, sag alt) ---------- */
.destek-balon {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px 0 14px;
  background: var(--mor); color: #fff; border: 0; border-radius: 999px; font: inherit; font-weight: 800;
  box-shadow: 0 4px 0 #3f33a8, var(--golge-yumusak); cursor: pointer;
}
.destek-balon:hover { background: #4d3fc4; }
.destek-balon.yukarida { bottom: calc(160px + env(safe-area-inset-bottom, 0px)); }
.destek-balon-ikon { font-size: 1.35rem; line-height: 1; }
.destek-nokta {
  position: absolute; top: -6px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--kirmizi); color: #fff; border-radius: 999px; font-size: .78rem; font-weight: 800;
  display: grid; place-items: center; border: 2px solid #fff;
}
.destek-kutu {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 70;
  width: min(360px, calc(100vw - 32px)); height: min(520px, calc(100vh - 32px)); display: flex; flex-direction: column;
  background: var(--kagit-2); border: 2px solid var(--cizgi); border-radius: 20px; overflow: hidden;
  box-shadow: 0 16px 48px rgba(42, 36, 64, .28);
}
.destek-ust { display: flex; align-items: center; gap: 8px; padding: 12px 14px; background: var(--mor); color: #fff; }
.destek-baslik { display: grid; flex: 1; line-height: 1.25; }
.destek-baslik span { font-size: .8rem; opacity: .9; }
.destek-kapat { min-width: 40px; min-height: 40px; border: 0; border-radius: 12px; background: rgba(255,255,255,.18); color: #fff; font-size: 1.1rem; cursor: pointer; }
.destek-kapat:hover { background: rgba(255,255,255,.3); }
.destek-liste { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--kagit); }
.destek-bos { margin: auto 0; color: var(--soluk); text-align: center; font-size: .9rem; }
.destek-mesaj { max-width: 82%; padding: 8px 12px; border-radius: 16px; display: grid; gap: 2px; word-break: break-word; }
.destek-giden { align-self: flex-end; background: var(--mor); color: #fff; border-bottom-right-radius: 4px; }
.destek-gelen { align-self: flex-start; background: #fff; border: 1px solid var(--cizgi); border-bottom-left-radius: 4px; }
.destek-kim { font-size: .72rem; font-weight: 800; color: var(--mor); }
.destek-metin { white-space: pre-wrap; font-size: .93rem; line-height: 1.35; }
.destek-saat { font-size: .7rem; opacity: .7; justify-self: end; }
.destek-form { padding: 10px; border-top: 1px solid var(--cizgi); background: #fff; display: grid; gap: 8px; }
.destek-kimlik { display: grid; gap: 6px; }
.destek-kimlik input { min-height: 44px; }
.destek-satir { display: flex; gap: 8px; align-items: flex-end; }
.destek-satir textarea { flex: 1; resize: none; min-height: 46px; max-height: 110px; }
.destek-yolla { min-height: 46px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--turuncu); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.destek-yolla:disabled { opacity: .6; cursor: default; }
.destek-hata { color: #b3261e; font-size: .85rem; }
@media (max-width: 480px) {
  .destek-balon-metin { display: none; }
  .destek-balon { padding: 0 14px; }
  .destek-kutu { right: 8px; left: 8px; width: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); height: min(78vh, calc(100vh - 16px)); }
}
@media (prefers-reduced-motion: reduce) { .destek-balon { transition: none; } }

/* Yonetim menusu: okunmamis destek mesaji rozeti */
.rozet-kirmizi { background: var(--kirmizi); color: #fff; border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px; font-size: .75rem; font-weight: 800; display: inline-grid; place-items: center; }
.destek-balon.yukarida { min-height: 44px; padding: 0 12px; opacity: .92; }
.destek-balon.yukarida .destek-balon-metin { display: none; }

/* ---------- Kitap yapragi cevirme (genel/js/yaprak.js + oku.js) ----------
   Kagidin GERCEKTEN kivrilmasi icin sayfa dikey seritlere bolunur ve her serit biraz daha
   fazla doner (aci ve isik her karede yaprak.js'te hesaplanir). Buradaki is yalniz sahne
   kurulumu: katmanlarin yeri, arka yuz kagidi, golge katmani. Hareketin kendisi JS'te.
   yaprak.js yuklenmezse alttaki .sayfa-yaprak-duz yedegi (tek parca donus) devreye girer. */
#okumaBolum { position: relative; perspective: 1700px; perspective-origin: 50% 45%; }
.okuma-kap { overflow-x: clip; }
.sayfa-yaprak {
  position: absolute; z-index: 5; margin: 0; pointer-events: none;
  transform-style: preserve-3d; will-change: transform, opacity;
}
/* --- Seritli (gercek kivrilma) --- */
.sayfa-yaprak-3b .yaprak-serit {
  position: absolute; top: 0; transform-style: preserve-3d;
  will-change: transform; backface-visibility: visible;
}
.sayfa-yaprak-3b .serit-pencere {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.sayfa-yaprak-3b .serit-pencere > .sayfa-yuz { position: absolute; top: 0; margin: 0; }
.sayfa-yaprak-3b .sayfa-arka {
  position: absolute; inset: 0; transform: rotateY(180deg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(to bottom, #fffdf8, var(--kagit) 45%, #efe8dc);
}
/* Seridin acisiyla koyulasan golge: kavisi gozun okudugu yer burasi */
.sayfa-yaprak-3b .serit-golge {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* Sayfanin yuvarlak koseleri seritlere bolununce kaybolmasin */
.sayfa-yaprak-3b .serit-bas .serit-pencere,
.sayfa-yaprak-3b .serit-bas .sayfa-arka,
.sayfa-yaprak-3b .serit-bas .serit-golge { border-radius: var(--r-buyuk) 0 0 var(--r-buyuk); }
.sayfa-yaprak-3b .serit-son .serit-pencere,
.sayfa-yaprak-3b .serit-son .sayfa-arka,
.sayfa-yaprak-3b .serit-son .serit-golge { border-radius: 0 var(--r-buyuk) var(--r-buyuk) 0; }
/* Yapragin butununde: kalkarken alttaki sayfaya dusen golge */
.sayfa-yaprak-3b { filter: drop-shadow(0 16px 26px rgba(42, 36, 64, .3)); }

/* --- Yedek: yaprak.js yoksa tek parca donus (CSS anahtar kareleri) --- */
.sayfa-yaprak-duz.sayfa-yaprak-ileri { transform-origin: 0 50%; animation: yaprak-ileri 1.25s .15s cubic-bezier(.36, .05, .25, 1) both; }
.sayfa-yaprak-duz.sayfa-yaprak-geri { transform-origin: 100% 50%; animation: yaprak-geri 1.25s .15s cubic-bezier(.36, .05, .25, 1) both; }
.sayfa-yaprak-duz > .sayfa-yuz,
.sayfa-yaprak-duz > .sayfa-arka {
  position: absolute; inset: 0; margin: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.sayfa-yaprak-duz > .sayfa-yuz { box-shadow: 0 14px 34px rgba(42, 36, 64, .28); }
.sayfa-yaprak-duz > .sayfa-arka {
  transform: rotateY(180deg); border-radius: var(--r-buyuk); border: 2px solid var(--cizgi);
  background: linear-gradient(to left, #e9e2d6, var(--kagit) 22%, #fffdf8);
}
@keyframes yaprak-ileri {
  0%   { transform: rotateY(0deg); opacity: 1; }
  50%  { transform: rotateY(-92deg); opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: rotateY(-180deg); opacity: 0; }
}
@keyframes yaprak-geri {
  0%   { transform: rotateY(0deg); opacity: 1; }
  50%  { transform: rotateY(92deg); opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: rotateY(180deg); opacity: 0; }
}
/* NOT: Windows'ta "animasyonlari goster" kapaliyken (prefers-reduced-motion) cevirmeyi
   KISALTMIYORUZ - kisaltilinca hareket sert goruluyordu (Okan, 2026-09-20). Ayni karar
   unite kartlarinda da alinmisti. */

/* ---------- Unite kartlari: 3B yuzen kart (gonderilen demo uyarlamasi) ----------
   Kart fareyi takip ederek egilir (--rx/--ry, kitaplik.js kartEgim). Katmanlar Z ekseninde
   ayrisir: arkada unite renginde daire, onde kuculup donerek yuzen resim, ustte baslik,
   en onde "Oku" dugmesi. Kose isimasi + renkli kenar. Telefonda dokununca acilir. */
.unite-izgara { perspective: 1400px; }
.unite-izgara .hikaye-kart {
  --kart-renk: var(--mor); --rx: 0deg; --ry: 0deg;
  position: relative; overflow: visible; transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .5s, border-color .5s;
  background: radial-gradient(ellipse at right top, color-mix(in srgb, var(--kart-renk) 16%, var(--kagit-2)) 0%, var(--kagit-2) 55%);
}
.unite-izgara .hikaye-kart:hover { transition: transform .12s linear, box-shadow .5s, border-color .5s; }
.unite-izgara .hikaye-kart::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 3px;
  background: linear-gradient(45deg, transparent 50%, var(--kart-renk)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .4; transition: opacity .5s; pointer-events: none;
}
.unite-izgara .hikaye-kart::after {
  content: attr(data-arka); position: absolute; right: 14px; top: 10px;
  font-weight: 900; font-style: italic; font-size: 3.2rem; line-height: 1; letter-spacing: -.03em;
  color: var(--kart-renk); opacity: 0; transition: opacity .5s; pointer-events: none;
}
/* Sahne katmani: daire + kapak */
.unite-izgara .kart-sahne { position: relative; transform-style: preserve-3d; }
.unite-izgara .kart-daire {
  /* Cap resim alaninin YUKSEKLIGINE bagli: kart ne kadar genis olursa olsun alttaki yaziya tasmaz */
  position: absolute; left: 50%; top: 50%; height: 78%; width: auto; aspect-ratio: 1; border-radius: 50%;
  background: var(--kart-renk); opacity: .9;
  transform: translate3d(-50%, -50%, 0) scale(.6); transition: transform .55s cubic-bezier(.2, .8, .2, 1);
}
.unite-izgara .kart-kapak {
  position: relative; transform-style: preserve-3d;
  border-radius: var(--r-buyuk) var(--r-buyuk) 0 0; overflow: hidden;
  transform: translate3d(0, 0, 0);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), border-radius .55s, box-shadow .55s;
}
.unite-izgara .kart-kapak img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.unite-izgara .hikaye-kart .kart-govde {
  z-index: 2; position: relative; padding-bottom: 74px; background: none; transform-style: preserve-3d;
}
.unite-izgara .hikaye-kart .kart-unite,
.unite-izgara .hikaye-kart h3 { transition: transform .5s, color .5s; }
.unite-izgara .hikaye-kart .kart-git {
  position: absolute; left: 50%; bottom: 0; z-index: 2;
  transform: translate3d(-50%, 0, 0); opacity: 0;
  background: var(--kart-renk); color: #fff; font-weight: 800; font-size: .92rem;
  padding: 9px 26px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--kart-renk) 45%, transparent);
  transition: bottom .5s cubic-bezier(.2, .8, .2, 1), opacity .5s, transform .5s;
}

/* ---- Aktif: uzerine gelince / klavye odagi / dokunus ---- */
.unite-izgara .hikaye-kart:is(:hover, :focus-visible, .dokunuldu) {
  border-color: var(--kart-renk);
  box-shadow: 0 26px 50px color-mix(in srgb, var(--kart-renk) 32%, transparent);
}
.unite-izgara .hikaye-kart:is(:hover, :focus-visible, .dokunuldu)::before { opacity: 1; }
.unite-izgara .hikaye-kart:is(:hover, :focus-visible, .dokunuldu)::after { opacity: .12; }
.unite-izgara .hikaye-kart:is(:hover, :focus-visible, .dokunuldu) .kart-daire {
  transform: translate3d(-50%, -50%, 8px) scale(1);
}
.unite-izgara .hikaye-kart:is(:hover, :focus-visible, .dokunuldu) .kart-kapak {
  transform: translate3d(0, 0, 60px) scale(.78) rotate(-5deg);
  border-radius: 18px;
  box-shadow: 0 22px 34px rgba(42, 36, 64, .35);
}
.unite-izgara .hikaye-kart:is(:hover, :focus-visible, .dokunuldu) .kart-unite {
  transform: translate3d(4px, 0, 20px); color: var(--kart-renk);
}
.unite-izgara .hikaye-kart:is(:hover, :focus-visible, .dokunuldu) h3 { transform: translate3d(0, 0, 24px); }
.unite-izgara .hikaye-kart:is(:hover, :focus-visible, .dokunuldu) .kart-git {
  bottom: 18px; opacity: 1; transform: translate3d(-50%, 0, 30px);
}
/* Dokunmatikte "Oku" dugmesi hep gorunsun */
@media (hover: none) {
  .unite-izgara .hikaye-kart .kart-git { bottom: 16px; opacity: 1; }
}