/* Düzen: üstte iki parça "kahraman" alanı. Solda canvas'la çizilmiş masa sahnesi (kitap yığını = konular),
   sağda mercan panel (başlık + raflar). Altında okuma kısmı: solda konu ve sorular, sağda kaynaklar.
   Telefonda her şey tek sütun olur. Sadece açık tema. */
:root {
  --kagit: #f8f3e8;
  --krem: #fffcf4;
  --murekkep: #221d19;
  --soluk: #6d6357;
  --mercan: #e3685b;
  --mercan-koyu: #c44f43;
  --kolay: #5f9b5a;
  --orta: #d8a630;
  --zor: #c44f43;
  --bos-cizgi: rgba(34,29,25,0.14);

  --f-baslik: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-metin: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;

  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font-family: var(--f-metin);
  font-size: 19px;
  line-height: 1.55;
  overflow-x: hidden;
}

.mono { font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.06em; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--murekkep); outline-offset: 3px; }

/* =================== KAHRAMAN =================== */
.kahraman {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 38%);
  min-height: 600px;
}

/* ---------- Sahne ---------- */
.sahne {
  position: relative;
  overflow: hidden;
  min-height: 600px;
  background: #e6cfa9;
  isolation: isolate;
}

/* masa, kitaplar, fiş ve gözlük tek bir canvas'a çiziliyor (script.js, 4. bölüm) */
.sahne-tuval {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ışık: sahnenin sağ altına doğru hafif bir gölgelenme */
.isik {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(160deg, rgba(255,255,255,0) 55%, rgba(90,55,15,0.16));
}

.sahne-ust {
  position: absolute;
  top: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  padding: 24px 32px 0;
  z-index: 3;
}
.marka {
  font-family: var(--f-baslik);
  font-size: 34px;
  line-height: 1;
  color: var(--murekkep);
  text-shadow: 0 1px 0 rgba(255,250,235,0.6);
}
.sayac {
  text-transform: uppercase;
  background: rgba(255,252,244,0.82);
  padding: 7px 12px;
  border-radius: 2px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.sayac b { font-weight: 500; }

.sahne-alt {
  position: absolute;
  left: max(32px, env(safe-area-inset-left, 0px));
  right: 32px;
  bottom: 28px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
#cekButonu {
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 15px 30px;
  background: var(--murekkep);
  color: var(--krem);
  border: 0;
  border-radius: 2px;
  box-shadow: 0 10px 24px -10px rgba(40,25,5,0.6);
  transition: transform 0.12s, background 0.2s;
}
#cekButonu:hover { background: #000; }
#cekButonu:active:not(:disabled) { transform: translateY(1px); }
#cekButonu:disabled { opacity: 0.55; cursor: not-allowed; }
.raf-yazi {
  text-transform: uppercase;
  background: rgba(255,252,244,0.82);
  padding: 7px 12px;
  border-radius: 2px;
}

/* ---------- Mercan panel ---------- */
.panel {
  position: relative;
  background: var(--mercan);
  color: var(--murekkep);
  padding-block: 48px 32px;
  padding-left: 44px;
  padding-right: max(36px, env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.panel h1 {
  margin: 0 0 4px;
  padding-right: 112px;
  font-family: var(--f-baslik);
  font-weight: 400;
  font-size: clamp(46px, 4.4vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.panel h1::first-line { font-style: normal; }
.panel-alt { margin: 0; max-width: 32ch; font-size: 19px; line-height: 1.5; }

.raflar-baslik { margin: 14px 0 0; font-weight: 500; text-transform: uppercase; }
.raflar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  border-top: 1px solid rgba(34,29,25,0.2);
}
.raflar .raf-btn:first-child { border-top: 0; }
.raf-btn {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  text-align: left;
  padding: 7px 6px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(34,29,25,0.2);
}
.raf-btn:first-child { border-top: 1px solid rgba(34,29,25,0.2); }
.raf-renk { width: 7px; height: 22px; border-radius: 1px; background: var(--renk); box-shadow: 0 0 0 1px rgba(34,29,25,0.2); }
.raf-btn.hepsi .raf-renk { background: linear-gradient(#8a4632 0 25%, #5d7d5f 25% 50%, #2e4866 50% 75%, #d9a540 75%); }
.raf-ad { font-family: var(--f-baslik); font-size: 25px; line-height: 1.1; }
.raf-sayi { font-family: var(--f-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.raf-btn:hover .raf-ad { font-style: italic; }
.raf-btn[aria-pressed="true"] { background: var(--murekkep); color: var(--krem); }
.raf-btn[aria-pressed="true"] .raf-ad { font-style: italic; }

.ekslibris {
  position: absolute;
  top: 36px;
  right: max(30px, env(safe-area-inset-right, 0px));
  width: 104px; height: 104px;
  font-family: var(--f-mono);
  opacity: 0.85;
}
.donen { transform-origin: 100px 100px; animation: don 60s linear infinite; }
.ekslibris.dur .donen { animation-play-state: paused; } /* ekranda görünmüyorsa dönmesin */
@keyframes don { to { transform: rotate(360deg); } }

/* =================== OKUMA =================== */
.bildirim {
  max-width: 1160px;
  margin: 32px auto 0;
  padding-left: max(32px, env(safe-area-inset-left, 0px));
  padding-right: max(32px, env(safe-area-inset-right, 0px));
  font-style: italic;
  color: var(--mercan-koyu);
}

.okuma {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  padding-block: 64px 96px;
  padding-left: max(32px, env(safe-area-inset-left, 0px));
  padding-right: max(32px, env(safe-area-inset-right, 0px));
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.okuma:not(.bos) { animation: acil 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes acil { from { transform: translateY(16px); opacity: 0.2; } to { transform: none; opacity: 1; } }

.okuma.bos { display: block; padding-block: 40px 72px; }
.ipucu { margin: 0; color: var(--soluk); text-transform: uppercase; }
.ipucu b { color: var(--murekkep); font-weight: 500; }

.okuma-sol { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.okuma-ust { display: flex; flex-wrap: wrap; gap: 6px 18px; text-transform: uppercase; color: var(--soluk); }
.okuma-bolum { color: var(--murekkep); display: inline-flex; align-items: center; gap: 8px; }
.okuma-bolum::before { content: ""; width: 7px; height: 18px; background: var(--renk); border-radius: 1px; }

/* zorluk seviyesi: 1 kolay (yeşil), 2 orta (sarı), 3 zor (kırmızı) */
.zorluk { display: inline-flex; align-items: center; gap: 10px; }
.seviye { display: inline-flex; align-items: center; gap: 3px; }
.seviye i { display: block; width: 14px; height: 6px; border-radius: 1px; background: var(--bos-cizgi); }
.seviye[data-seviye="1"] i:nth-child(-n+1) { background: var(--kolay); }
.seviye[data-seviye="2"] i:nth-child(-n+2) { background: var(--orta); }
.seviye[data-seviye="3"] i { background: var(--zor); }

.okuma-baslik {
  margin: 0;
  font-family: var(--f-baslik);
  font-weight: 400;
  font-size: clamp(52px, 7.4vw, 104px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-wrap: balance;
  padding-right: 120px;
}
.ozet {
  margin: 4px 0 0;
  max-width: 46ch;
  font-size: 21px;
  line-height: 1.5;
  padding-left: 18px;
  border-left: 2px solid var(--mercan);
}
.okurken { margin: 14px 0 0; font-style: italic; color: var(--soluk); }
.sorular { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 14px; }
.sorular li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  font-size: 22px;
  line-height: 1.35;
}
.sorular li::before {
  content: counter(s, upper-roman) ".";
  font-family: var(--f-baslik);
  font-style: italic;
  color: var(--mercan-koyu);
}

.okuma-sag { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 6px; }
.kaynak-baslik-ust { margin: 0 0 6px; font-weight: 500; text-transform: uppercase; color: var(--soluk); }
.kaynaklar { display: grid; }
.kaynak {
  display: grid;
  gap: 6px;
  padding: 20px 0 22px;
  border-top: 1px solid var(--murekkep);
  color: inherit;
  text-decoration: none;
}
.kaynak:last-child { border-bottom: 1px solid var(--murekkep); }
.kaynak-site { color: var(--soluk); }
.kaynak-ad {
  font-family: var(--f-baslik);
  font-size: 34px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}
.kaynak-oku {
  justify-self: start;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.kaynak:hover .kaynak-ad { font-style: italic; }
.kaynak:hover .kaynak-oku { color: var(--mercan-koyu); }

.derin { margin-top: 30px; display: flex; flex-direction: column; gap: 8px; }
.derin-not { margin: 0; color: var(--soluk); font-style: italic; font-size: 17px; }
.derin-linkler { display: flex; flex-wrap: wrap; gap: 10px; }
.derin-linkler a {
  color: var(--murekkep);
  text-decoration: none;
  text-transform: uppercase;
  padding: 9px 14px;
  border: 1px solid var(--murekkep);
  border-radius: 2px;
}
.derin-linkler a:hover { background: var(--murekkep); color: var(--krem); }

.okuma-alt { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 28px; }
.btn-okudum {
  font-family: var(--f-mono);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 14px 28px;
  background: var(--mercan);
  color: var(--murekkep);
  border: 0;
  border-radius: 2px;
}
.btn-okudum:hover { background: var(--mercan-koyu); color: var(--krem); }
.btn-okudum.tamam { background: transparent; box-shadow: inset 0 0 0 1px var(--murekkep); color: var(--murekkep); }
.btn-pas { background: none; border: 0; padding: 4px 0; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; }
.btn-pas:hover { color: var(--mercan-koyu); }
.btn-pas:disabled { opacity: 0.4; cursor: not-allowed; }

/* OKUNDU mührü */
.muhur {
  position: absolute;
  top: 70px;
  left: calc(55% - 150px);
  width: 120px; height: 120px;
  border-radius: 50%;
  border: 3px double var(--mercan);
  color: var(--mercan);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transform: rotate(-14deg);
  opacity: 0.9;
  pointer-events: none;
}
.muhur span:first-child { font-size: 17px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.muhur-tarih { font-size: 10px; }
.muhur.bas { animation: damga 0.35s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes damga { from { transform: rotate(-26deg) scale(1.8); opacity: 0; } to { transform: rotate(-14deg) scale(1); opacity: 0.9; } }

/* =================== OKUMA KARTI =================== */
.sayac .defter-ac {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sayac .defter-ac:hover { color: var(--mercan-koyu); }

.defter-arka {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(34,29,25,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  animation: perdeAc 0.2s ease-out;
}
@keyframes perdeAc { from { opacity: 0; } to { opacity: 1; } }
.defter-kart {
  width: min(640px, 100%);
  max-height: min(80vh, 760px);
  overflow-y: auto;
  background-color: #fdfaf1;
  background-image:
    linear-gradient(90deg, transparent 38px, rgba(214,82,72,0.7) 38px 40px, transparent 40px),
    repeating-linear-gradient(to bottom, transparent 0 35px, rgba(90,135,175,0.22) 35px 36px);
  background-attachment: local;
  border-radius: 3px;
  box-shadow: 0 30px 60px -20px rgba(40,25,5,0.6);
  padding: 26px 28px 30px 58px;
  animation: kartGel 0.35s cubic-bezier(0.2, 0.85, 0.25, 1);
}
@keyframes kartGel { from { transform: translateY(24px) rotate(-1.5deg); opacity: 0; } to { transform: none; opacity: 1; } }
.defter-ust { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.defter-etiket { color: var(--soluk); text-transform: uppercase; font-size: 11px; }
.defter-ust h2 { margin: 2px 0 0; font-family: var(--f-baslik); font-weight: 400; font-size: 46px; line-height: 1; }
.defter-kapat { background: none; border: 1px solid var(--murekkep); border-radius: 2px; padding: 7px 12px; text-transform: uppercase; font-size: 12px; }
.defter-kapat:hover { background: var(--murekkep); color: var(--krem); }
.defter-sutunlar, .defter-satir {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 96px 104px;
  gap: 10px;
  align-items: baseline;
}
.defter-sutunlar { text-transform: uppercase; font-size: 11px; color: var(--soluk); padding-bottom: 6px; border-bottom: 1px solid var(--murekkep); }
.defter-liste { list-style: none; margin: 0; padding: 0; }
.defter-satir {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(34,29,25,0.12);
  padding: 9px 0;
  text-align: left;
  min-height: 36px;
}
.defter-satir:hover .d-konu { font-style: italic; color: var(--mercan-koyu); }
.d-raf { font-family: var(--f-mono); font-size: 12px; color: var(--soluk); }
.d-no { align-self: center; }
.d-no i { width: 9px; height: 5px; }
.d-konu { font-family: var(--f-baslik); font-size: 23px; line-height: 1.1; overflow-wrap: anywhere; }
.d-tarih {
  justify-self: start;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mercan-koyu);
  border: 1.5px solid var(--mercan);
  border-radius: 3px;
  padding: 2px 6px;
  transform: rotate(-3deg);
  white-space: nowrap;
}
.defter-bos { margin: 18px 0 0; font-style: italic; color: var(--soluk); }

/* =================== YENİ: seviye, günün konusu, ses, favori, defter sekmeleri =================== */
.gunun {
  display: block; width: 100%; margin-top: 16px; text-align: left;
  padding: 12px 14px; background: rgba(255,252,244,0.7);
  border: 1px solid rgba(34,29,25,0.25); border-left: 6px solid var(--renk, var(--mercan)); border-radius: 2px;
  color: var(--murekkep);
  transition: background 0.15s, transform 0.12s;
}
.gunun:hover { background: #fff; }
.gunun:active { transform: translateY(1px); }
.gunun-etiket { display: block; font-size: 11px; text-transform: uppercase; color: var(--soluk); }
.gunun-konu { display: block; margin-top: 2px; font-family: var(--f-baslik); font-size: 26px; line-height: 1.1; }
.gunun:hover .gunun-konu { font-style: italic; }

.btn-fav {
  background: none; border: 1px solid var(--murekkep); border-radius: 2px; padding: 13px 16px;
  text-transform: uppercase; font-size: 13px; letter-spacing: 0.08em; color: var(--murekkep);
}
.btn-fav:hover { background: var(--murekkep); color: var(--krem); }
.btn-fav[aria-pressed="true"] { background: #f1d27a; border-color: #b8902c; }
.btn-fav[aria-pressed="true"]:hover { background: #e8c35c; color: var(--murekkep); }

.defter-arac { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; font-size: 12px; text-transform: uppercase; }
.defter-arac button {
  font: inherit; text-transform: uppercase; background: none; color: var(--murekkep);
  border: 1px solid var(--murekkep); border-radius: 2px; padding: 8px 12px; min-height: 36px;
}
.defter-arac button:hover:not(:disabled) { background: var(--murekkep); color: var(--krem); }
.defter-arac button:disabled { opacity: 0.4; cursor: not-allowed; }
.defter-arac .arac-evet { background: var(--mercan-koyu); border-color: var(--mercan-koyu); color: var(--krem); }
.arac-hepsi { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; cursor: pointer; margin-right: auto; }
.arac-soru { text-transform: none; font-size: 13px; }
.defter-arac input, .d-sec input { width: 18px; height: 18px; accent-color: var(--mercan-koyu); cursor: pointer; }
.defter-liste li { display: flex; align-items: center; }
.d-sec { flex: 0 0 38px; display: flex; align-items: center; justify-content: flex-start; align-self: stretch; cursor: pointer; }
.defter-liste li .defter-satir { flex: 1 1 auto; min-width: 0; width: auto; }
.defter-sutunlar { padding-left: 38px; }
.defter-ozet { margin: 0 0 8px; font-size: 12px; color: var(--soluk); }
.defter-ilerleme { height: 6px; background: rgba(34,29,25,0.12); border-radius: 3px; overflow: hidden; margin-bottom: 14px; }
.defter-ilerleme i { display: block; height: 100%; width: 0; background: var(--mercan); transition: width 0.4s ease-out; }
.defter-sekmeler { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.defter-sekmeler button {
  font-size: 12px; text-transform: uppercase; background: none; color: var(--murekkep);
  border: 1px solid rgba(34,29,25,0.3); border-radius: 2px; padding: 8px 10px; min-height: 36px;
}
.defter-sekmeler button[aria-selected="true"] { background: var(--murekkep); color: var(--krem); border-color: var(--murekkep); }

/* =================== HESAP (giriş kartı) =================== */
.hesap-kart { width: min(520px, 100%); }
.hesap-adim { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hesap-not { margin: 0 0 6px; font-size: 18px; line-height: 1.45; }
.hesap-etiket { font-size: 11px; text-transform: uppercase; color: var(--soluk); }
.hesap-girdi {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 20px;
  background: rgba(255,255,255,0.75); color: var(--murekkep);
  border: 1px solid var(--murekkep); border-radius: 2px;
}
.hesap-girdi:focus { outline: 2px solid var(--mercan); outline-offset: 2px; }
.kod-girdi { font-size: 26px; letter-spacing: 0.4em; text-align: center; }
.hesap-adim .btn-okudum { margin-top: 6px; }
.hesap-adim .btn-okudum:disabled { opacity: 0.6; cursor: wait; }
.hesap-baglantilar { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 4px; }
.hesap-adim .okuma-alt { margin-top: 8px; }
.hesap-mesaj { min-height: 1.4em; margin: 14px 0 0; font-size: 13px; color: var(--soluk); }
.hesap-mesaj.hata { color: var(--mercan-koyu); }
.hesap-gizlilik { margin: 10px 0 0; font-size: 14px; font-style: italic; color: var(--soluk); }
.sayac .hesap-ac {
  font: inherit; letter-spacing: inherit; text-transform: uppercase;
  background: var(--murekkep); color: var(--krem);
  border: 0; border-radius: 2px; padding: 6px 12px; margin: -2px 0 -2px 4px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background 0.15s;
}
.sayac .hesap-ac:hover { background: var(--mercan-koyu); }
.sayac .hesap-ac.acik::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #5fd08a; box-shadow: 0 0 0 2px rgba(95,208,138,0.35);
}

/* =================== DAR EKRAN =================== */
/* (masanın telefondaki ölçeği ve yeri script.js'te: sahneDuzeni) */
@media (max-width: 900px) {
  .kahraman { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .sahne { min-height: 460px; }
  .panel { order: -1; }
  .panel { padding: 32px max(18px, env(safe-area-inset-right, 0px)) 28px max(18px, env(safe-area-inset-left, 0px)); gap: 12px; }
  .panel h1 { font-size: clamp(42px, 11vw, 64px); padding-right: 0; }
  .panel-alt { font-size: 17px; }
  .raflar { display: flex; flex-wrap: wrap; gap: 6px; border-top: 0; }
  .raf-btn, .raf-btn:first-child {
    grid-template-columns: 6px auto auto;
    gap: 8px;
    padding: 4px 10px 4px 8px;
    border: 1px solid rgba(34,29,25,0.3);
    border-radius: 2px;
  }
  .raf-renk { width: 6px; height: 16px; }
  .raf-ad { font-size: 20px; }
  .raf-sayi { font-size: 11px; }
  .ekslibris { display: none; }
  .sahne-ust { padding: 16px 18px 0; }
  .sahne-alt { left: max(18px, env(safe-area-inset-left, 0px)); bottom: 18px; }
  .raf-yazi { display: none; }
  .okuma, .bildirim { padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
  .okuma { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-block: 40px 64px; }
  .okuma-baslik { padding-right: 0; font-size: clamp(46px, 13vw, 72px); }
  .sorular li { font-size: 19px; }
  .kaynak-ad { font-size: 28px; }
  .defter-kart { padding: 20px 18px 24px 46px; background-image:
    linear-gradient(90deg, transparent 30px, rgba(214,82,72,0.7) 30px 32px, transparent 32px),
    repeating-linear-gradient(to bottom, transparent 0 35px, rgba(90,135,175,0.22) 35px 36px); }
  .defter-ust h2 { font-size: 36px; }
  .defter-sutunlar { display: none; }
  .defter-satir { grid-template-columns: 34px minmax(0, 1fr); row-gap: 4px; }
  .d-raf, .d-tarih { grid-column: 2; }
  .d-raf { display: none; }
  .ozet { font-size: 19px; }
  .muhur { top: auto; bottom: 150px; left: auto; right: 16px; width: 92px; height: 92px; }
  .muhur span:first-child { font-size: 13px; }
  .okuma-alt { padding-right: 100px; }
}
@media (max-width: 480px) {
  .sahne { min-height: 400px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .donen { animation: none; }
}

/* =================== QUIZ VE KALP =================== */
.kalpler {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
  text-transform: uppercase;
  background: rgba(255,252,244,0.82);
  padding: 7px 12px;
  border-radius: 2px;
}
.kalp-ikonlar { display: inline-flex; gap: 3px; font-size: 20px; line-height: 1; }
.kalp { color: var(--mercan); }
.kalp.bos { color: rgba(34,29,25,0.3); }
.kalp-sure { font-size: 11px; color: var(--soluk); }
.quiz-not { margin: 14px 0 0; font-size: 12px; text-transform: uppercase; color: var(--mercan-koyu); }
.btn-okudum:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-okudum:disabled:hover { background: var(--mercan); color: var(--murekkep); }

.quiz-kart { width: min(640px, 100%); }
.quiz-sayac { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 11px; text-transform: uppercase; color: var(--soluk); }
.quiz-cubuk { height: 6px; background: rgba(34,29,25,0.12); border-radius: 3px; overflow: hidden; margin: 8px 0 18px; }
.quiz-cubuk i { display: block; height: 100%; background: var(--mercan); transition: width 0.3s ease-out; }
.quiz-soru { margin: 0 0 16px; font-family: var(--f-baslik); font-weight: 400; font-size: 32px; line-height: 1.15; }
.quiz-siklar { display: grid; gap: 10px; }
.quiz-sik {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 10px;
  text-align: left; padding: 12px 14px;
  font: inherit; font-size: 19px; line-height: 1.3; color: var(--murekkep);
  background: rgba(255,255,255,0.78); border: 1px solid var(--murekkep); border-radius: 2px;
}
.quiz-sik:hover:not(:disabled) { background: var(--murekkep); color: var(--krem); }
.quiz-sik:focus-visible { outline: 2px solid var(--mercan); outline-offset: 2px; }
.quiz-sik:disabled { cursor: default; }
.quiz-sik:disabled:not(.dogru):not(.yanlis) { opacity: 0.55; }
.quiz-sik.dogru { background: #d3e8cc; border-color: #3f7d3a; color: var(--murekkep); }
.quiz-sik.yanlis { background: #f6cdc7; border-color: var(--mercan-koyu); color: var(--murekkep); }
.quiz-harf { font-family: var(--f-mono); font-size: 12px; opacity: 0.7; }
.quiz-sonuc { margin-top: 16px; font-size: 19px; line-height: 1.45; }
.quiz-sonuc b { font-weight: 600; }
.quiz-otosure { height: 3px; margin-top: 10px; background: var(--kolay); transform-origin: left; animation: otoSure 3s linear forwards; }
@keyframes otoSure { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.quiz-devam { display: block; margin-top: 14px; }

.quiz-karar { margin: 0; font-family: var(--f-baslik); font-size: 52px; line-height: 1; }
.quiz-karar.gecti { color: var(--kolay); }
.quiz-skor { margin: 8px 0 0; font-size: 12px; text-transform: uppercase; color: var(--soluk); }
.quiz-aciklama-metin { margin: 12px 0 18px; font-size: 19px; line-height: 1.45; }
.quiz-yanlis { margin: 0 0 14px; padding: 4px 0 4px 14px; border-left: 3px solid var(--mercan); }
.quiz-yanlis p { margin: 0 0 4px; }
.quiz-yanlis-soru { font-size: 19px; font-weight: 500; line-height: 1.3; }
.quiz-yanlis-cevap { font-size: 12px; color: #3f7d3a; }
.quiz-yanlis-secim { font-size: 12px; color: var(--mercan-koyu); }
.quiz-yanlis-aciklama { font-size: 17px; line-height: 1.4; font-style: italic; }
.quiz-kaynaklar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 6px 0 4px; }
.quiz-etiket { margin: 0 6px 0 0; font-size: 11px; text-transform: uppercase; color: var(--soluk); }
.quiz-kaynak { font-size: 12px; text-transform: uppercase; padding: 7px 12px; border: 1px solid var(--murekkep); border-radius: 2px; color: var(--murekkep); text-decoration: none; }
.quiz-kaynak:hover { background: var(--murekkep); color: var(--krem); }

@media (max-width: 900px) {
  .kalpler { padding: 6px 10px; }
  .quiz-soru { font-size: 26px; }
  .quiz-sik { font-size: 18px; padding: 11px 12px; }
  .quiz-karar { font-size: 42px; }
}