:root {
  /* OKU marka paleti */
  --orman: #123B2A; --orman-koyu: #0B2A1E; --orman-bas: #0F3122; --adacay: #9CAA86; --adacay-acik: #C8D1BE;
  --fildisi: #F6F3EC; --krem: #EFE7D6; --altin: #D8B97A; --altin-acik: #E7D3A4;
  /* açık tema (ana yüz) */
  --zemin: #F6F3EC; --zemin2: #F2EEE6; --yuzey: #FBFAF7; --yuzey2: #EFE7D6; --cizgi: #D9DED7;
  --metin: #1B241F; --metin2: #4E5B54; --soluk: #7A857F; --baslik: #123B2A;
  --vurgu: #123B2A; --vurgu-koyu: #F6F3EC;          /* seçili durum, ilerleme, ana buton */
  --dugme: #123B2A; --dugme-metin: #F6F3EC; --dugme-bas: #0F3122;
  --dugme2: #EFE7D6; --dugme2-metin: #123B2A;
  --hata: #b5523b; --basari: #5f8f4e; --altin-metin: #8a6a2c;
  --golge: rgba(18, 59, 42, .14);
  --gorunen: "Fraunces", "Literata", Georgia, serif;
  --arayuz: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --ust-bosluk: env(safe-area-inset-top, 0px);
  --alt-bosluk: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
/* koyu tema: gece okuma */
@media (prefers-color-scheme: dark) {
  :root:not([data-gorunum=acik]) {
    --zemin: #0B2A1E; --zemin2: #0F3122; --yuzey: #123B2A; --yuzey2: #18452F; --cizgi: rgba(214, 220, 207, .14);
    --metin: #F6F3EC; --metin2: #D6DCCF; --soluk: #AAB5A7; --baslik: #F6F3EC;
    --vurgu: #D8B97A; --vurgu-koyu: #0B2A1E; --dugme: #F6F3EC; --dugme-metin: #123B2A; --dugme-bas: #E7E2D5;
    --dugme2: #18452F; --dugme2-metin: #F6F3EC; --altin-metin: #D8B97A; --hata: #e08a6f; --basari: #9CAA86; --golge: rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-gorunum=koyu] {
  --zemin: #0B2A1E; --zemin2: #0F3122; --yuzey: #123B2A; --yuzey2: #18452F; --cizgi: rgba(214, 220, 207, .14);
  --metin: #F6F3EC; --metin2: #D6DCCF; --soluk: #AAB5A7; --baslik: #F6F3EC;
  --vurgu: #D8B97A; --vurgu-koyu: #0B2A1E; --dugme: #F6F3EC; --dugme-metin: #123B2A; --dugme-bas: #E7E2D5;
  --dugme2: #18452F; --dugme2-metin: #F6F3EC; --altin-metin: #D8B97A; --hata: #e08a6f; --basari: #9CAA86; --golge: rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--zemin);
  color: var(--metin);
  font: 16px/1.45 var(--arayuz);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }

/* ---------- uygulama kabuğu ---------- */
#uygulama {
  position: fixed; inset: 0;
  background:
    radial-gradient(1200px 600px at 85% -10%, color-mix(in srgb, var(--altin) 10%, transparent), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(140, 70, 40, .10), transparent 60%),
    var(--zemin);
}
.ekran {
  position: absolute; inset: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(var(--ust-bosluk) + 20px) max(20px, env(safe-area-inset-right)) calc(var(--alt-bosluk) + 96px) max(20px, env(safe-area-inset-left));
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}
.ekran.aktif { opacity: 1; pointer-events: auto; transform: none; }
.ekran > * { max-width: 1100px; margin-left: auto; margin-right: auto; }

.ust-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; min-height: 48px; }
.marka { font: 500 34px/1.1 var(--gorunen); letter-spacing: -.01em; margin: 0; font-variation-settings: "opsz" 120; }
.marka em { font-style: italic; color: var(--vurgu); font-weight: 400; }
.ust-eylem { display: flex; gap: 8px; }

.dugme {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 999px;
  font-weight: 600; font-size: 15px; white-space: nowrap;
  transition: transform .12s ease, background .2s;
}
.dugme:active { transform: scale(.97); }
.dugme svg { width: 19px; height: 19px; }
.dugme.ana { background: var(--vurgu); color: var(--vurgu-koyu); }
.dugme.hafif { background: var(--yuzey); border: 1px solid var(--cizgi); }
.dugme.kucuk { height: 34px; padding: 0 14px; font-size: 14px; }

/* ---------- alt sekmeler ---------- */
.sekmeler {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--alt-bosluk) + 14px);
  display: flex; gap: 4px; padding: 6px;
  background: rgba(39, 31, 26, .78);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border: 1px solid var(--cizgi); border-radius: 999px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  z-index: 5;
}
.sekmeler button {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  font-size: 15px; font-weight: 600; color: var(--soluk);
  transition: background .2s, color .2s;
}
.sekmeler button.secili { background: var(--metin); color: var(--zemin); }

/* ---------- kaldığın yer ---------- */
.devam {
  display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center;
  padding: 24px; margin-bottom: 36px; border-radius: 22px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--altin) 14%, transparent), color-mix(in srgb, var(--altin) 3%, transparent) 60%), var(--yuzey);
  border: 1px solid var(--cizgi);
}
.devam .kapak-sar { width: 128px; }
.devam .etiket { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--vurgu); font-weight: 700; }
.devam h3 { font: 500 28px/1.15 var(--gorunen); margin: 6px 0 4px; }
.devam .yazar { color: var(--soluk); margin: 0 0 16px; }
.ilerleme { height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--metin) 10%, transparent); overflow: hidden; }
.ilerleme > i { display: block; height: 100%; background: var(--vurgu); border-radius: 4px; }
.devam .ilerleme { max-width: 320px; margin-bottom: 6px; }
.devam .yuzde { font-size: 13px; color: var(--soluk); margin-bottom: 16px; }

/* ---------- raf ---------- */
.raf-baslik { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 18px; }
.raf-baslik h2 { font: 500 22px/1.2 var(--gorunen); margin: 0; }
.raf-baslik span { color: var(--soluk); font-size: 14px; }
.raf {
  display: grid; gap: 34px 26px;
  grid-template-columns: repeat(auto-fill, minmax(138px, 1fr));
}
.kart { position: relative; display: flex; flex-direction: column; text-align: left; min-width: 0; }
.kapak-sar { position: relative; aspect-ratio: 2 / 3; width: 100%; perspective: 800px; }
.kapak {
  position: absolute; inset: 0; border-radius: 3px 7px 7px 3px; overflow: hidden;
  background: var(--yuzey2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 10px 22px -6px rgba(0, 0, 0, .7), 0 22px 40px -18px rgba(0, 0, 0, .6);
  transition: transform .3s ease;
}
.kart:active .kapak { transform: scale(.97); }
.kapak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kapak::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .28) 0, rgba(255, 255, 255, .18) 3%, rgba(255, 255, 255, 0) 6%, rgba(0, 0, 0, .08) 8%, rgba(0, 0, 0, 0) 12%),
    linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .12));
}
.uretilmis {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 14% 12% 12%; text-align: center; color: #f6ecd9;
}
.uretilmis::before {
  content: ""; position: absolute; inset: 7px 7px 7px 12px; border: 1px solid rgba(246, 236, 217, .35); border-radius: 2px;
}
.uretilmis b { font: 500 clamp(14px, 1.5vw + 6px, 19px)/1.15 var(--gorunen); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; position: relative; }
.uretilmis small { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: .75; position: relative; }
.uretilmis .susleme { width: 26px; height: 1px; background: currentColor; opacity: .5; margin: 0 auto; position: relative; }
.kart .bilgi { padding-top: 12px; }
.kart .ad { font: 500 15px/1.25 var(--gorunen); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kart .yazar { font-size: 13px; color: var(--soluk); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kart .ilerleme { margin-top: 9px; height: 3px; }
.kart .menu {
  position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(20, 15, 12, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-size: 18px; line-height: 1; z-index: 2;
}
.yeni-rozet {
  position: absolute; bottom: 8px; left: 12px; z-index: 2;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--vurgu); color: var(--vurgu-koyu); padding: 3px 7px; border-radius: 99px;
}

.bos-durum { text-align: center; padding: 60px 20px; color: var(--soluk); }
.bos-durum p { font: italic 20px/1.4 var(--gorunen); margin: 18px 0 22px; color: var(--metin); }
.bos-kitap { width: 74px; height: 100px; margin: 0 auto; border-radius: 3px 8px 8px 3px; border: 1.5px dashed rgba(255, 236, 214, .25); }

/* ---------- keşfet ---------- */
.kaynak-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 16px; background: var(--yuzey); border: 1px solid var(--cizgi); margin-bottom: 14px; }
.kaynak-sec button { padding: 10px 12px; border-radius: 12px; font-weight: 600; color: var(--soluk); display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.kaynak-sec small { font-weight: 400; font-size: 12px; opacity: .8; }
.kaynak-sec button.secili { background: var(--yuzey2); color: var(--metin); box-shadow: 0 2px 10px rgba(0, 0, 0, .3); }
.arama { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; border-radius: 16px; background: var(--yuzey); border: 1px solid var(--cizgi); margin-bottom: 14px; }
.arama svg { color: var(--soluk); }
.arama input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--metin); font-size: 17px; -webkit-appearance: none; }
.arama input::placeholder { color: var(--soluk); }
.diller { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px; scrollbar-width: none; }
.diller::-webkit-scrollbar { display: none; }
.diller button { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--cizgi); color: var(--soluk); font-size: 14px; font-weight: 600; }
.diller button.secili { background: var(--metin); color: var(--zemin); border-color: transparent; }
#kesfet-baslik { margin-top: 10px; }
.sonuc-raf .kart .eylem { margin-top: 10px; }
.indir-dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 14px; border-radius: 999px; min-width: 84px;
  background: color-mix(in srgb, var(--altin) 16%, transparent); color: var(--vurgu); font-size: 13px; font-weight: 700;
  position: relative; overflow: hidden;
}
.indir-dugme svg { width: 16px; height: 16px; }
.indir-dugme .dolgu { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--altin) 28%, transparent); width: 0; transition: width .15s; }
.indir-dugme span { position: relative; }
.indir-dugme.hazir { background: var(--vurgu); color: var(--vurgu-koyu); }
.kaynak-not { color: var(--soluk); font-size: 13px; text-align: center; margin-top: 34px; }
.yukleniyor { grid-column: 1 / -1; text-align: center; color: var(--soluk); padding: 40px 0; font-style: italic; }
.ozet { font-size: 12px; color: var(--soluk); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- odak ---------- */
.hazirlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 28px; }
.hazir-kart {
  position: relative; height: 128px; border-radius: 20px; padding: 16px; text-align: left;
  display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
  border: 1px solid var(--cizgi); transition: transform .15s, box-shadow .2s;
}
.hazir-kart:active { transform: scale(.98); }
.hazir-kart b { font: 500 19px/1.2 var(--gorunen); position: relative; }
.hazir-kart small { color: rgba(255, 255, 255, .7); position: relative; font-size: 12px; }
.hazir-kart.secili { box-shadow: 0 0 0 2px var(--vurgu); }
.hazir-kart.secili::after { content: "Çalıyor"; position: absolute; top: 14px; right: 14px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--vurgu); color: var(--vurgu-koyu); padding: 3px 8px; border-radius: 99px; }
.hazir-kart[data-id=kutuphane] { background: radial-gradient(circle at 80% 10%, rgba(120, 150, 190, .5), transparent 60%), linear-gradient(160deg, #2b3440, #1b2027); }
.hazir-kart[data-id=somine] { background: radial-gradient(circle at 20% 110%, rgba(240, 130, 50, .65), transparent 60%), linear-gradient(160deg, #3a2318, #1e130e); }
.hazir-kart[data-id=sahil] { background: radial-gradient(circle at 90% 100%, rgba(80, 170, 180, .5), transparent 60%), linear-gradient(160deg, #1f3a3d, #142325); }
.hazir-kart[data-id=odak] { background: radial-gradient(circle at 50% 0%, rgba(200, 170, 140, .35), transparent 65%), linear-gradient(160deg, #2c2722, #191613); }
.karisim { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 20px; padding: 6px 18px; margin-bottom: 20px; }
.kanal { display: grid; grid-template-columns: 28px 120px 1fr; align-items: center; gap: 12px; padding: 12px 0; }
.kanal + .kanal { border-top: 1px solid var(--cizgi); }
.kanal .i { font-size: 20px; text-align: center; }
.kanal .a { font-weight: 600; font-size: 15px; }
.kanal.acik .a { color: var(--vurgu); }
input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: none; margin: 0;
}
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--vurgu) var(--d, 0%), color-mix(in srgb, var(--metin) 14%, transparent) var(--d, 0%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #f7efe2; margin-top: -9px; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.ipucu-kart { display: flex; gap: 14px; padding: 18px; border-radius: 20px; background: linear-gradient(135deg, color-mix(in srgb, var(--altin) 12%, transparent), transparent), var(--yuzey); border: 1px solid var(--cizgi); }
.ipucu-kart .rozet { flex: none; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--altin) 18%, transparent); display: grid; place-items: center; color: var(--vurgu); }
.ipucu-kart h4 { margin: 0 0 4px; font-size: 16px; }
.ipucu-kart p { margin: 0; color: var(--soluk); font-size: 14px; }
.ipucu-kart ol { margin: 8px 0 0; padding-left: 18px; color: var(--soluk); font-size: 14px; }
.odak-alt { display: flex; gap: 10px; margin: 20px 0; flex-wrap: wrap; }

/* ---------- panel (alttan açılan) ---------- */
#perde { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 40; animation: belir .2s ease; }
.panel {
  position: fixed; z-index: 41; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(620px, 100%); max-height: 82vh; overflow-y: auto;
  background: var(--zemin2); border: 1px solid var(--cizgi); border-bottom: 0;
  border-radius: 26px 26px 0 0; padding: 10px 22px calc(var(--alt-bosluk) + 24px);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .5);
  animation: yuksel .28s cubic-bezier(.2, .9, .3, 1);
}
.panel-tutamak { width: 40px; height: 5px; border-radius: 5px; background: color-mix(in srgb, var(--metin) 20%, transparent); margin: 0 auto 14px; }
.panel h3 { font: 500 22px/1.2 var(--gorunen); margin: 4px 0 16px; }
@keyframes yuksel { from { transform: translate(-50%, 100%); } }
@keyframes belir { from { opacity: 0; } }

.ayar-grup { margin-bottom: 20px; }
.ayar-grup > label { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--soluk); font-weight: 700; margin-bottom: 10px; }
.secenekler { display: flex; gap: 8px; flex-wrap: wrap; }
.secenekler button { flex: 1; min-width: 70px; padding: 12px 10px; border-radius: 14px; background: var(--yuzey); border: 1px solid var(--cizgi); font-weight: 600; font-size: 14px; }
.secenekler button.secili { border-color: var(--vurgu); box-shadow: inset 0 0 0 1px var(--vurgu); color: var(--vurgu); }
.tema-sec button { height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.tema-sec button i { font: 500 20px var(--gorunen); font-style: normal; }
.tema-sec [data-v=kagit] { background: #f7f1e5; color: #2a2420; }
.tema-sec [data-v=sepya] { background: #ecdcbf; color: #3d3024; }
.tema-sec [data-v=gri] { background: #4a4743; color: #e9e4dc; }
.tema-sec [data-v=gece] { background: #121110; color: #c9c0b2; }
.boyut-satir { display: flex; align-items: center; gap: 14px; }
.boyut-satir .kucuk-a { font-size: 14px; } .boyut-satir .buyuk-a { font-size: 24px; }
.anahtar { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.anahtar input { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 99px; background: color-mix(in srgb, var(--metin) 15%, transparent); position: relative; transition: background .2s; flex: none; }
.anahtar input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform .2s; }
.anahtar input:checked { background: var(--vurgu); }
.anahtar input:checked::after { transform: translateX(20px); }

.icindekiler { list-style: none; margin: 0; padding: 0; }
.icindekiler button { display: block; width: 100%; text-align: left; padding: 13px 4px; border-bottom: 1px solid var(--cizgi); font-size: 16px; }
.icindekiler button.burada { color: var(--vurgu); font-weight: 600; }
.icindekiler .d1 { padding-left: 22px; font-size: 15px; color: var(--soluk); }
.icindekiler .d2 { padding-left: 40px; font-size: 14px; color: var(--soluk); }

.bildirim {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 60;
  top: calc(var(--ust-bosluk) + 16px);
  background: #F6F3EC; color: #1d1712; font-weight: 600; font-size: 15px;
  padding: 12px 20px; border-radius: 999px; box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
  animation: belir .2s ease; max-width: calc(100% - 32px);
}

/* ===================== OKUYUCU ===================== */
#okuyucu {
  --kagit: #F6F3EC; --murekkep: #1B241F; --masa: #123B2A; --masa2: #0B2A1E;
  --yazi: "Literata", Georgia, serif; --boyut: 20px; --satir: 1.55; --hiza: justify; --kenar: 52px;
  position: fixed; inset: 0; z-index: 20;
  background: radial-gradient(ellipse at 50% 40%, var(--masa), var(--masa2));
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  animation: belir .25s ease;
}
#okuyucu[data-tema=sepya] { --kagit: #ecdcbf; --murekkep: #3b2e22; --masa: #33261b; --masa2: #160f0a; }
#okuyucu[data-tema=gri] { --kagit: #4a4743; --murekkep: #ebe6de; --masa: #2a2826; --masa2: #121110; }
#okuyucu[data-tema=gece] { --kagit: #141312; --murekkep: #c6bdaf; --masa: #0b0a09; --masa2: #000; }
#sahne { position: absolute; inset: 0; overflow: hidden; }

.kitap { position: absolute; }
.kitap.kenarli { filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .55)); }
.sayfa-yigini { display: none; position: absolute; inset: 0; border-radius: 0 4px 4px 0; background: var(--kagit); }
.kitap.kenarli .sayfa-yigini {
  display: block;
  box-shadow: 1px 1px 0 rgba(0,0,0,.06), 2px 1px 0 var(--kagit), 3px 2px 0 rgba(0,0,0,.08), 4px 2px 0 var(--kagit), 5px 3px 0 rgba(0,0,0,.1), 6px 3px 0 var(--kagit), 7px 4px 0 rgba(0,0,0,.14);
}
.sayfa {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  overflow: hidden; color: var(--murekkep);
  background-color: var(--kagit);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .18 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: clip-path;
}
.kitap.kenarli .sayfa { border-radius: 0 4px 4px 0; }
#okuyucu[data-tema=gece] .sayfa, #okuyucu[data-tema=gri] .sayfa { background-image: none; }
.sirt { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.13), rgba(0,0,0,.03) 14px, rgba(0,0,0,0) 34px), linear-gradient(270deg, rgba(0,0,0,.05), rgba(0,0,0,0) 10px); }
.sayfa-baslik {
  position: absolute; top: calc(22px + var(--ust-bosluk) * 0); left: 15%; right: 15%;
  text-align: center; font: 600 10.5px/1 var(--yazi); letter-spacing: .16em; text-transform: uppercase;
  opacity: .45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sayfa-no { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font: 13px/1 var(--yazi); opacity: .5; font-variant-numeric: oldstyle-nums; }
.sayfa-metin { position: absolute; overflow: hidden; }
.kolon { position: relative; column-fill: auto; will-change: transform; }
.olcum { visibility: hidden; left: -30000px !important; pointer-events: none; }
.sayfa-arka { transform-origin: 0 0; }
.arka-kagit { position: absolute; inset: 0; background: var(--kagit); opacity: .9; }
.arka-golge { position: absolute; inset: 0; }
.arka-sar { position: absolute; inset: 0; overflow: hidden; z-index: 4; pointer-events: none; visibility: hidden; filter: drop-shadow(-2px 0 5px rgba(0,0,0,.22)); }
.alt-golge { position: absolute; inset: 0; z-index: 2; pointer-events: none; visibility: hidden; }

/* kitap metni */
.metin {
  font-family: var(--yazi); font-size: var(--boyut); line-height: var(--satir);
  text-align: var(--hiza); hyphens: auto; -webkit-hyphens: auto;
  font-kerning: normal; font-variant-ligatures: common-ligatures; text-rendering: optimizeLegibility;
  overflow-wrap: break-word; orphans: 2; widows: 2;
}
.metin * { max-width: 100%; }
.metin p { margin: 0; text-indent: 1.45em; }
.metin :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--yazi); font-weight: 500; text-align: center; text-indent: 0;
  line-height: 1.25; margin: 1.6em 0 1em; hyphens: none; -webkit-hyphens: none; break-after: avoid;
}
.metin h1 { font-size: 1.55em; } .metin h2 { font-size: 1.32em; } .metin h3 { font-size: 1.12em; }
.metin h4, .metin h5, .metin h6 { font-size: 1em; font-style: italic; }
.metin > :first-child:is(h1, h2, h3), .metin > :first-child :is(h1, h2, h3):first-child { margin-top: 2.6em; }
.metin :is(h1, h2, h3, h4, hr, blockquote, figure, div.figcenter, table) + p,
.metin p:first-child, .metin .center, .metin [class*=center] { text-indent: 0; }
.metin :is(h1, h2, h3) + p::first-line { font-variant: small-caps; letter-spacing: .04em; }
.metin blockquote { margin: .9em 1.2em; font-size: .95em; }
.metin img, .metin svg { display: block; max-width: 100%; max-height: var(--resim-yuk, 70vh); height: auto; width: auto; margin: .8em auto; break-inside: avoid; object-fit: contain; }
.metin figure { margin: 1em 0; break-inside: avoid; }
.metin figcaption, .metin .caption { font-size: .85em; text-align: center; text-indent: 0; font-style: italic; }
.metin hr { border: 0; height: 1px; width: 28%; margin: 1.3em auto; background: currentColor; opacity: .25; }
.metin a { color: inherit; }
.metin a[data-ic] { text-decoration: underline dotted; text-underline-offset: 3px; }
.metin sup, .metin sub { font-size: .7em; line-height: 0; }
.metin table { border-collapse: collapse; font-size: .85em; margin: 1em auto; }
.metin td, .metin th { padding: .2em .5em; vertical-align: top; }
.metin pre { white-space: pre-wrap; font-size: .85em; }
.metin ul, .metin ol { padding-left: 1.4em; margin: .6em 0; text-align: left; }
.metin .pg-boilerplate, .metin #pg-header, .metin #pg-footer { font-size: .78em; line-height: 1.45; }
.metin .son-isaret { height: 0; break-before: avoid; }
.metin small { font-size: .85em; }

/* okuyucu araç çubukları */
.okuyucu-bar {
  position: absolute; left: 0; right: 0; z-index: 10;
  display: flex; align-items: center; gap: 6px;
  padding: 10px max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
  background: rgba(11, 42, 30, .82); color: #F6F3EC;
  -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3);
  transition: transform .28s cubic-bezier(.2, .9, .3, 1), opacity .2s;
  touch-action: manipulation;
}
.okuyucu-bar.ust { top: 0; padding-top: calc(var(--ust-bosluk) + 10px); transform: translateY(-110%); opacity: 0; }
.okuyucu-bar.alt { bottom: 0; padding-bottom: calc(var(--alt-bosluk) + 14px); transform: translateY(110%); opacity: 0; gap: 14px; font-size: 13px; color: #D6DCCF; }
#okuyucu.arayuz .okuyucu-bar { transform: none; opacity: 1; }
.ikon-dugme { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ikon-dugme:active { background: color-mix(in srgb, var(--metin) 10%, transparent); }
.ikon-dugme.acik { color: var(--vurgu); }
.aa { font: 600 18px var(--gorunen); }
.ok-baslik { flex: 1; min-width: 0; text-align: center; display: flex; flex-direction: column; line-height: 1.25; }
.ok-baslik strong { font: 500 16px var(--gorunen); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ok-baslik span { font-size: 12px; color: #AAB5A7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ok-kaydir { flex: 1; }
#ok-sayfa, #ok-yuzde { flex: none; min-width: 64px; font-variant-numeric: tabular-nums; }
#ok-yuzde { text-align: right; }
.odak-ipucu {
  position: absolute; z-index: 12; left: 50%; bottom: calc(var(--alt-bosluk) + 28px); transform: translateX(-50%);
  background: rgba(11, 42, 30, .88); color: #F6F3EC; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  padding: 12px 18px; border-radius: 16px; font-size: 14px; max-width: min(520px, calc(100% - 32px)); text-align: center;
  animation: belir .3s ease; pointer-events: none;
}

@media (max-width: 600px) {
  .marka { font-size: 28px; }
  .devam { grid-template-columns: 96px 1fr; gap: 16px; padding: 16px; }
  .devam .kapak-sar { width: 96px; }
  .devam h3 { font-size: 21px; }
  .raf { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 26px 16px; }
  .kanal { grid-template-columns: 26px 92px 1fr; }
  .sekmeler button { padding: 10px 14px; }
}

/* her zaman görünen silik menü düğmesi */
.ok-menu {
  position: absolute; z-index: 11; top: calc(var(--ust-bosluk) + 12px); right: max(14px, env(safe-area-inset-right));
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(11, 42, 30, .42); color: #F6F3EC; opacity: .6;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity .2s, transform .2s; touch-action: manipulation;
}
.ok-menu:active { transform: scale(.92); opacity: 1; }
#okuyucu.arayuz .ok-menu { opacity: 0; pointer-events: none; }

/* ===================== v2: hesap, ilerleme, başarılar ===================== */
.genis { width: 100%; justify-content: center; height: 50px; font-size: 16px; }
.soluk { color: var(--soluk); }
.etiket { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--vurgu); font-weight: 700; }
.tehlike { color: var(--hata) !important; }
.panel-not { color: var(--soluk); font-size: 14px; margin: -6px 0 16px; }
.ekran-giris { color: var(--soluk); margin: -10px 0 22px; max-width: 640px; }
.kaynak-not { line-height: 1.5; }

/* giriş */
#giris {
  position: fixed; inset: 0; z-index: 30; overflow-y: auto; display: grid; place-items: center;
  padding: calc(var(--ust-bosluk) + 24px) 20px calc(var(--alt-bosluk) + 24px);
  background: radial-gradient(900px 600px at 50% 0%, color-mix(in srgb, var(--altin) 16%, transparent), transparent 60%), var(--zemin);
}
.giris-kutu { width: min(420px, 100%); text-align: center; }
.giris-logo { width: 84px; height: 84px; border-radius: 22px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.giris-kutu .marka { font-size: 40px; margin: 18px 0 6px; }
.giris-alt { color: var(--soluk); margin: 0 0 26px; }
.giris-sec { margin-bottom: 18px; }
.giris-sec button { padding: 12px; }
#giris-form { text-align: left; display: grid; gap: 14px; }
.alan { display: grid; gap: 6px; }
.alan span { font-size: 13px; font-weight: 600; color: var(--soluk); }
.alan input {
  height: 50px; border-radius: 14px; border: 1px solid var(--cizgi); background: var(--yuzey);
  color: var(--metin); font-size: 17px; padding: 0 16px; outline: none; -webkit-appearance: none;
}
.alan input:focus { border-color: var(--vurgu); box-shadow: 0 0 0 3px color-mix(in srgb, var(--altin) 20%, transparent); }
.form-hata { margin: 0; color: var(--hata); font-size: 14px; }
#parola-form { display: grid; gap: 14px; }

/* profil */
.profil-dugme {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--vurgu), #b06d34); color: var(--vurgu-koyu);
  font: 600 18px var(--gorunen);
}
.profil-dugme.buyuk { width: 60px; height: 60px; font-size: 26px; }
.profil-ust { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.profil-ust h3 { margin: 0 0 4px; }
.profil-ust .panel-not { margin: 0; }
.secenekler.dikey { flex-direction: column; }
.secenekler.dikey button { text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; }
.secenekler.dikey small { color: var(--soluk); font-weight: 400; }

/* bugün şeridi */
.bugun-serit {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 22px;
  border-radius: 18px; background: var(--yuzey); border: 1px solid var(--cizgi);
}
.bugun-serit:empty { display: none; }
.halka-kucuk { position: relative; width: 46px; height: 46px; flex: none; }
.halka-kucuk svg { width: 46px; height: 46px; transform: rotate(-90deg); }
.halka-kucuk b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; }
.iz { fill: none; stroke: color-mix(in srgb, var(--metin) 10%, transparent); stroke-width: 3.5; }
.dolu { fill: none; stroke: var(--vurgu); stroke-width: 3.5; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.serit-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.serit-metin span { color: var(--soluk); font-size: 14px; }
.serit-seri { display: flex; align-items: baseline; gap: 4px; font-size: 20px; }
.serit-seri b { font: 600 22px var(--gorunen); }
.serit-seri span { font-size: 13px; color: var(--soluk); }
.serit-seri.sonuk { filter: grayscale(1); opacity: .5; }

/* dil etiketleri */
.dil-rozet {
  position: absolute; top: 8px; left: 12px; z-index: 2;
  font: 700 10px/1 var(--arayuz); letter-spacing: .06em; padding: 4px 6px; border-radius: 6px;
  background: rgba(20, 15, 12, .72); color: #f4ead9; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.devam .dil-rozet { top: 6px; left: 10px; }
.dil-satir { font-size: 12px; color: var(--vurgu); margin-top: 3px; font-weight: 600; opacity: .9; }
.bitti-rozet {
  position: absolute; bottom: 8px; left: 12px; z-index: 2; font-size: 11px; font-weight: 700;
  background: #7fb069; color: #10200a; padding: 3px 8px; border-radius: 99px;
}
.filtre-etiket { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--soluk); font-weight: 700; margin: 4px 0 8px; }
#raf-filtre { margin-top: -6px; }

/* içe aktarma */
.bicim-baslik { font-weight: 700; margin: 14px 0 8px; font-size: 14px; }
.bicim-baslik small { color: var(--soluk); font-weight: 400; }
.bicimler { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.bicim { padding: 10px 12px; border-radius: 12px; background: var(--yuzey); border: 1px solid var(--cizgi); display: flex; flex-direction: column; }
.bicim b { font-size: 15px; }
.bicim span { font-size: 12px; color: var(--soluk); }
.bicim.ana { border-color: color-mix(in srgb, var(--altin) 50%, transparent); background: color-mix(in srgb, var(--altin) 8%, transparent); }
.uyarilar { color: var(--soluk); font-size: 13px; padding-left: 18px; margin: 16px 0; }
.yukleme-listesi { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.yukleme-listesi li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 12px; border-radius: 12px; background: var(--yuzey); font-size: 14px; }
.yukleme-listesi .ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.yukleme-listesi .dr { color: var(--soluk); font-size: 13px; }
.yukleme-listesi .cubuk { grid-column: 1 / -1; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--metin) 10%, transparent); overflow: hidden; display: block; }
.yukleme-listesi .cubuk i { display: block; height: 100%; width: 0; background: var(--vurgu); transition: width .2s; }
.yukleme-listesi li.tamam .dr { color: #9fd18b; }
.yukleme-listesi li.hata .dr { color: var(--hata); grid-column: 1 / -1; }

.kitap-bilgi { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 15px; }
.kitap-bilgi dt { color: var(--soluk); }
.kitap-bilgi dd { margin: 0; }

/* keşfet ek */
.panel-ara { width: 100%; height: 46px; border-radius: 12px; border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--metin); padding: 0 14px; font-size: 16px; margin-bottom: 12px; -webkit-appearance: none; }
.yazar-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.yazar-liste button { text-align: left; padding: 10px 12px; border-radius: 10px; background: var(--yuzey); font-size: 14px; }

/* ilerleme */
.kart-yuzey { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 22px; padding: 20px; margin-bottom: 18px; }
.ilerleme-ust { display: grid; grid-template-columns: 1fr auto; gap: 18px; }
.bugun-kart { display: flex; gap: 22px; align-items: center; }
.bugun-kart h3 { font: 500 21px/1.3 var(--gorunen); margin: 6px 0; }
.bugun-kart p { margin: 0; }
.halka { position: relative; width: 120px; height: 120px; flex: none; }
.halka svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.halka .iz, .halka .dolu { stroke-width: 9; }
.halka.tamam .dolu { stroke: #9fd18b; }
.halka-ic { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.halka-ic b { font: 600 34px/1 var(--gorunen); }
.halka-ic span { color: var(--soluk); font-size: 13px; }
.seri-kart { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 150px; text-align: center; }
.seri-kart .alev { font-size: 34px; }
.seri-kart b { font: 600 40px/1 var(--gorunen); }
.seri-kart small { color: var(--soluk); margin-top: 6px; }
.seri-kart.sonuk .alev { filter: grayscale(1); opacity: .5; }
.istatistikler { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 18px; }
.istat { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; }
.istat b { font: 600 26px/1.15 var(--gorunen); }
.istat span { color: var(--soluk); font-size: 13px; }
.bolum-baslik { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.bolum-baslik h3 { font: 500 19px var(--gorunen); margin: 0; }
.grafik-sar { position: relative; }
.grafik { width: 100%; height: auto; display: block; overflow: visible; stroke: none; }
.grafik text, .grafik rect, .grafik path { stroke: none; }
.halka .dolu.sifir, .halka-kucuk .dolu.sifir { opacity: 0; }
.grafik .izgara { stroke: color-mix(in srgb, var(--metin) 7%, transparent); stroke-width: 1; }
.grafik .eksen { fill: var(--soluk); font-size: 11px; font-family: var(--arayuz); }
.grafik .hedef-cizgi { stroke: var(--vurgu); stroke-width: 1.5; stroke-dasharray: 5 5; opacity: .7; }
.grafik .hedef-yazi { fill: var(--vurgu); }
.grafik .cubuk { fill: color-mix(in srgb, var(--altin) 55%, transparent); }
.grafik .hedefli .cubuk { fill: var(--vurgu); }
.grafik .bugun .cubuk { fill: #f2c98f; }
.grafik .vurgu-alan { fill: transparent; }
.grafik .cubuk-g:hover .vurgu-alan { fill: rgba(255, 255, 255, .04); }
.grafik-ipucu { position: absolute; top: -8px; width: 150px; text-align: center; background: #F6F3EC; color: #1d1712; font-size: 13px; font-weight: 600; padding: 6px 8px; border-radius: 10px; pointer-events: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
.tablo-gorunum { margin-top: 10px; font-size: 14px; color: var(--soluk); }
.tablo-gorunum summary { cursor: pointer; }
.tablo-gorunum table { width: 100%; border-collapse: collapse; margin-top: 8px; color: var(--metin); }
.tablo-gorunum td, .tablo-gorunum th { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--cizgi); }
.yil-sayi { font-size: 18px; margin-bottom: 10px; }
.yil-sayi b { font: 600 34px var(--gorunen); }
.ilerleme.kalin { height: 8px; }
.ilerleme.ince { height: 3px; margin-top: 8px; }
.yil-kart p { margin: 10px 0 0; }
.devam-liste { list-style: none; margin: 0; padding: 0; }
.devam-liste li { display: grid; grid-template-columns: 1fr minmax(120px, 34%); gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid var(--cizgi); }
.devam-liste li[data-oku] { cursor: pointer; }
.devam-liste li:first-child { border-top: 0; }
.devam-liste b { display: block; font: 500 16px var(--gorunen); }
.devam-liste span { color: var(--soluk); font-size: 13px; }
.devam-liste .sag small { color: var(--soluk); font-size: 12px; display: block; margin-top: 6px; }
.alinti { margin: 30px auto 10px; max-width: 620px; text-align: center; font: italic 20px/1.5 var(--gorunen); color: var(--metin); }
.alinti cite { display: block; margin-top: 8px; font: 13px var(--arayuz); color: var(--soluk); font-style: normal; letter-spacing: .04em; }

/* başarılar */
.seviye-kart {
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 24px; margin-bottom: 16px;
  border-radius: 24px; border: 1px solid var(--cizgi);
  background: radial-gradient(500px 220px at 0% 0%, color-mix(in srgb, var(--altin) 22%, transparent), transparent 70%), var(--yuzey);
}
.seviye-madalya {
  width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(from 200deg, #f6d08d, #b77a35, #f6d08d, #8f5a24, #f6d08d);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--altin) 35%, transparent), inset 0 0 0 6px rgba(255, 255, 255, .18);
}
.seviye-madalya span { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: #2a1d10; color: #f6d08d; font: 600 32px var(--gorunen); }
.seviye-bilgi h2 { font: 500 30px/1.15 var(--gorunen); margin: 4px 0 12px; }
.seviye-bilgi p { margin: 8px 0 0; font-size: 14px; }
.seviye-ozet { text-align: center; }
.seviye-ozet b { font: 600 36px var(--gorunen); display: block; }
.seviye-ozet span { color: var(--soluk); font-size: 13px; }
.gorev-kart { display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 18px; background: color-mix(in srgb, var(--altin) 10%, transparent); border: 1px solid color-mix(in srgb, var(--altin) 30%, transparent); margin-bottom: 8px; }
.gorev-ikon { font-size: 28px; }
.gorev-kart b { display: block; font-size: 16px; }
.gorev-kart span { color: var(--soluk); font-size: 14px; }
.grup-baslik { font: 500 20px var(--gorunen); margin: 28px 0 12px; }
.siradaki { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.siradaki-kart { display: flex; gap: 14px; padding: 16px; border-radius: 18px; background: var(--yuzey); border: 1px solid var(--cizgi); }
.r-ikon { font-size: 32px; line-height: 1; }
.r-bilgi { flex: 1; min-width: 0; }
.r-bilgi b { display: block; }
.r-bilgi span { color: var(--soluk); font-size: 13px; }
.r-bilgi .ilerleme { margin-top: 10px; }
.r-bilgi small { color: var(--soluk); font-size: 12px; }
.rozet-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.rozet { padding: 16px 12px; border-radius: 18px; text-align: center; background: var(--yuzey); border: 1px solid var(--cizgi); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rozet-ikon { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; margin-bottom: 6px; background: color-mix(in srgb, var(--metin) 6%, transparent); }
.rozet.kazanildi .rozet-ikon { background: radial-gradient(circle at 35% 30%, #fbe2b0, #d9973f 70%); box-shadow: 0 8px 20px color-mix(in srgb, var(--altin) 30%, transparent); }
.rozet b { font-size: 14px; }
.rozet span { color: var(--soluk); font-size: 12px; line-height: 1.35; }
.rozet.kilitli .rozet-ikon { filter: grayscale(1); opacity: .45; }
.rozet.kilitli b { color: var(--soluk); }
.rozet .ilerleme { width: 80%; }

/* kutlama */
.kutlama {
  position: fixed; z-index: 70; left: 50%; top: calc(var(--ust-bosluk) + 18px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; padding: 14px 22px 14px 14px; border-radius: 22px;
  background: linear-gradient(135deg, #f8e3bb, #e7b56f); color: #2a1a08; box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  max-width: calc(100% - 32px); pointer-events: none;
}
.kutlama.gir { animation: kutla-gir .5s cubic-bezier(.2, 1.4, .4, 1); }
.kutlama-ikon { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .55); display: grid; place-items: center; font-size: 28px; flex: none; }
.kutlama b { display: block; font-size: 16px; }
.kutlama span { font-size: 14px; opacity: .8; }
@keyframes kutla-gir { from { transform: translate(-50%, -30px) scale(.9); opacity: 0; } }

/* odak v2 */
.hazirlar { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.hazir-kart { height: 150px; }
.hazir-kart small { margin-top: 2px; line-height: 1.3; }
.hazir-kart .katmanlar { position: absolute; top: 14px; left: 16px; font-size: 16px; letter-spacing: 2px; }
.odak-arac { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 10px; }
.zamanlayici { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; color: var(--soluk); }
.zamanlayici button { padding: 7px 12px; border-radius: 99px; border: 1px solid var(--cizgi); font-size: 13px; font-weight: 600; color: var(--soluk); }
.zamanlayici button.secili { background: var(--metin); color: var(--zemin); border-color: transparent; }
.karisim-baslik { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--soluk); font-weight: 700; margin: 18px 0 8px; }
.kanal { grid-template-columns: 28px 150px 1fr; }

/* okuyucu ek */
.ok-hedef { flex: none; font-size: 12px; color: #D6DCCF; white-space: nowrap; }
.metin .pdf-sayfa { height: var(--metin-yuk, 80vh); display: flex; align-items: center; justify-content: center; break-inside: avoid; }
.metin .pdf-sayfa img { max-height: 100%; max-width: 100%; margin: 0; box-shadow: 0 1px 6px rgba(0, 0, 0, .15); background: #fff; }

@media (max-width: 700px) {
  .sekmeler button span { display: none; }
  .sekmeler button { padding: 11px 14px; }
  .ilerleme-ust { grid-template-columns: 1fr; }
  .bugun-kart { flex-direction: column; text-align: center; }
  .seviye-kart { grid-template-columns: auto 1fr; }
  .seviye-ozet { display: none; }
  .kanal { grid-template-columns: 26px 110px 1fr; }
  .ok-hedef { display: none; }
}
@media (max-width: 900px) and (min-width: 701px) {
  .sekmeler button { padding: 10px 13px; font-size: 14px; }
}

.durum-etiket { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 99px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--vurgu); color: var(--vurgu-koyu); vertical-align: 1px; }
.durum-etiket.bitti { background: #7fb069; color: #10200a; }

/* ===================== v4: ek temalar ve yazı tipleri ===================== */
#okuyucu[data-tema=fildisi] { --kagit: #fbf7ee; --murekkep: #2e2a25; --masa: #2c241d; --masa2: #120e0b; }
#okuyucu[data-tema=beyaz] { --kagit: #ffffff; --murekkep: #1c1c1c; --masa: #3a3a3a; --masa2: #161616; }
#okuyucu[data-tema=eski] { --kagit: #e5d1a6; --murekkep: #3a2a18; --masa: #3a2a1a; --masa2: #170f08; }
#okuyucu[data-tema=cay] { --kagit: #dde6d0; --murekkep: #243022; --masa: #26301f; --masa2: #0e130b; }
#okuyucu[data-tema=sis] { --kagit: #e4eaef; --murekkep: #1f2a33; --masa: #26303a; --masa2: #0d1217; }
#okuyucu[data-tema=kahve] { --kagit: #2b211b; --murekkep: #e3d3bd; --masa: #1a130f; --masa2: #080504; }
#okuyucu[data-tema=lacivert] { --kagit: #172031; --murekkep: #c9d3e3; --masa: #0e1420; --masa2: #04070c; }
#okuyucu[data-tema=oled] { --kagit: #000; --murekkep: #b5ada1; --masa: #000; --masa2: #000; }
/* koyu temalarda kâğıt dokusu yok */
#okuyucu:is([data-tema=kahve], [data-tema=lacivert], [data-tema=oled]) .sayfa { background-image: none; }
#okuyucu:is([data-tema=beyaz], [data-tema=sis]) .sayfa { background-image: none; }
#okuyucu[data-tema=oled] .sirt { display: none; }
/* eski kitap: sararmış kenarlar ve belirgin doku */
#okuyucu[data-tema=eski] .sayfa {
  background-image:
    radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(120,72,20,.22) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .28 0 0 0 0 .1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#okuyucu[data-tema=cay] .sayfa, #okuyucu[data-tema=fildisi] .sayfa { background-blend-mode: multiply; }
.metin { font-weight: var(--kalinlik, 400); }
.metin :is(b, strong, h1, h2, h3) { font-weight: calc(var(--kalinlik, 400) + 200); }

.tema-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
.tema-izgara button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 14px; border: 1px solid transparent; }
.tema-izgara button.secili { border-color: var(--vurgu); background: color-mix(in srgb, var(--altin) 8%, transparent); }
.tema-izgara small { font-size: 12px; color: var(--soluk); text-align: center; line-height: 1.2; }
.tema-izgara button.secili small { color: var(--vurgu); font-weight: 600; }
.tema-ornek {
  width: 54px; height: 70px; border-radius: 4px 8px 8px 4px; display: grid; place-items: center;
  font: 500 22px var(--gorunen); box-shadow: 0 4px 12px rgba(0,0,0,.35), inset 3px 0 6px rgba(0,0,0,.1);
  border: 1px solid rgba(255,255,255,.08);
}
.tema-ornek.tema-eski { background-image: radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(120,72,20,.35)) !important; background-color: #e5d1a6 !important; }
.yazi-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.yazi-izgara button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; text-align: left;
  border-radius: 14px; background: var(--yuzey); border: 1px solid var(--cizgi);
}
.yazi-izgara button b { font-weight: 500; line-height: 1.2; }
.yazi-izgara button span { color: var(--soluk); line-height: 1.3; }
.yazi-izgara button.secili { border-color: var(--vurgu); box-shadow: inset 0 0 0 1px var(--vurgu); }
.yazi-izgara button.secili b { color: var(--vurgu); }

/* yazı tipi önizlemesi: ad arayüz fontuyla küçük, örnek o fontla büyük */
.yazi-izgara button { gap: 4px; padding: 10px 14px 12px; }
.yazi-izgara .yazi-ad { font-family: var(--arayuz); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); }
.yazi-izgara .yazi-ornek { color: var(--metin); line-height: 1.25; white-space: nowrap; }
.yazi-izgara button.secili .yazi-ad { color: var(--vurgu); }

/* ===================== v5: profil, aile, çocuk modu, sesli okuma ===================== */
.avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: linear-gradient(140deg, var(--vurgu), #b06d34); color: var(--vurgu-koyu); font: 600 18px var(--gorunen); }
.avatar.cocuk { background: linear-gradient(140deg, #ffd27a, #ff9f68); font-size: 22px; }
.avatar.buyuk { width: 64px; height: 64px; font-size: 30px; }
.profil-dugme { background: none; width: auto; height: auto; }
.profil-dugme .avatar { width: 42px; height: 42px; }
.profil-gecis { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.profil-gecis button { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 99px; background: var(--yuzey); border: 1px solid var(--cizgi); font-weight: 600; font-size: 14px; }
.profil-gecis .avatar { width: 32px; height: 32px; font-size: 18px; }

/* anket */
#anket, #kim { position: fixed; inset: 0; z-index: 35; overflow-y: auto; background: radial-gradient(900px 500px at 50% -10%, color-mix(in srgb, var(--altin) 18%, transparent), transparent 60%), var(--zemin);
  padding: calc(var(--ust-bosluk) + 20px) 20px calc(var(--alt-bosluk) + 24px); animation: belir .25s ease; }
.anket-kutu { max-width: 720px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; }
.anket-ust { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.anket-ilerleme { flex: 1; height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--metin) 10%, transparent); overflow: hidden; }
.anket-ilerleme i { display: block; height: 100%; background: var(--vurgu); transition: width .3s ease; }
.anket-gec { color: var(--soluk); font-size: 14px; font-weight: 600; }
.anket-giris { color: var(--soluk); font-size: 16px; line-height: 1.5; margin: 0 0 14px; }
.anket-kutu h2 { font: 500 30px/1.2 var(--gorunen); margin: 0 0 6px; }
.anket-alt { color: var(--soluk); margin: 0 0 18px; }
.anket-secenekler { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 18px 0 24px; }
.anket-secenekler.sik { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.anket-secenekler button { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; text-align: left;
  background: var(--yuzey); border: 1.5px solid var(--cizgi); font-size: 15px; font-weight: 600; transition: transform .1s, border-color .15s, background .15s; }
.anket-secenekler button:active { transform: scale(.98); }
.anket-secenekler button .ik { font-size: 22px; }
.anket-secenekler button.secili { border-color: var(--vurgu); background: color-mix(in srgb, var(--altin) 14%, transparent); color: var(--metin); }
.anket-secenekler.buyuk { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.anket-secenekler.buyuk button { flex-direction: column; justify-content: center; text-align: center; padding: 18px 10px; min-height: 120px; font-size: 16px; }
.anket-secenekler.buyuk .ik { font-size: 42px; }
.anket-alt-bar { display: flex; justify-content: space-between; margin-top: auto; padding-top: 12px; }
.anket-alt-bar .dugme { height: 50px; padding: 0 26px; font-size: 16px; }
.anket-alt-bar .dugme:disabled { opacity: .4; }
.cocuk-anket { background: radial-gradient(900px 500px at 50% -10%, rgba(255,190,90,.35), transparent 60%), #2a1f2e; }

/* profil kartı */
.profil-karti { border-radius: 24px; padding: 22px; background: radial-gradient(500px 240px at 0% 0%, color-mix(in srgb, var(--altin) 20%, transparent), transparent 70%), var(--yuzey); border: 1px solid var(--cizgi); }
.profil-karti.cocuk { background: radial-gradient(500px 240px at 0% 0%, rgba(255,190,90,.3), transparent 70%), var(--yuzey); }
.pk-ust { display: flex; gap: 18px; align-items: center; }
.pk-ikon { width: 76px; height: 76px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 40px; background: color-mix(in srgb, var(--metin) 8%, transparent); }
.pk-ust h2 { font: 500 28px/1.15 var(--gorunen); margin: 4px 0 6px; }
.pk-ust p { margin: 0; color: var(--soluk); }
.pk-ozellik { margin: 16px 0 0; padding-left: 20px; color: var(--metin); font-size: 15px; line-height: 1.6; }
.pk-hedef { margin: 16px 0; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--altin) 12%, transparent); font-size: 15px; }
.pk-ipuclari, .icgoru-liste { display: grid; gap: 10px; }
.pk-ipucu, .icgoru { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--metin) 6%, transparent); border: 1px solid var(--cizgi); }
.pk-ipucu > span, .icgoru > span { font-size: 24px; line-height: 1.2; }
.pk-ipucu b, .icgoru b { display: block; font-size: 15px; }
.pk-ipucu p, .icgoru p { margin: 3px 0 0; color: var(--soluk); font-size: 14px; line-height: 1.45; }
.profil-serit, .oneri-davet, .ck-karakter { width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; padding: 16px 18px; margin-bottom: 18px;
  border-radius: 20px; background: radial-gradient(400px 160px at 0% 0%, color-mix(in srgb, var(--altin) 18%, transparent), transparent 70%), var(--yuzey); border: 1px solid var(--cizgi); }
.profil-serit .pk-ikon { width: 56px; height: 56px; font-size: 30px; }
.profil-serit div, .oneri-davet div, .ck-karakter div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.profil-serit small, .ck-karakter small { color: var(--vurgu); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.profil-serit b, .ck-karakter b { font: 500 20px var(--gorunen); }
.profil-serit span, .oneri-davet small { color: var(--soluk); font-size: 14px; }
.oneri-davet > span, .ck-karakter > span { font-size: 32px; }
.profil-serit em, .oneri-davet em, .ck-karakter em { font-style: normal; font-size: 28px; color: var(--soluk); }
.panel.genis-panel { width: min(760px, 100%); }

/* öneri rafları */
.oneri-raf { margin-bottom: 26px; }
.yatay-raf { display: grid; grid-auto-flow: column; grid-auto-columns: 128px; gap: 18px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.yatay-raf::-webkit-scrollbar { display: none; }
.kart.mini .ad { font-size: 14px; }
.kart.mini .indir-dugme { min-width: 70px; height: 30px; }
#senin-icin:not(:empty) { margin-bottom: 10px; }

/* kim okuyor */
.kim-kutu { max-width: 760px; margin: 12vh auto 0; text-align: center; }
.kim-kutu .marka { font-size: 40px; margin-bottom: 36px; }
.kim-liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px; margin-bottom: 28px; }
.kim-liste button { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 17px; }
.kim-liste .avatar.buyuk { width: 110px; height: 110px; font-size: 54px; border-radius: 28px; transition: transform .15s, box-shadow .15s; }
.kim-liste button:active .avatar { transform: scale(.95); }
.kim-liste button:hover .avatar { box-shadow: 0 0 0 3px var(--metin); }

/* PIN */
.pin-kutu { text-align: center; max-width: 320px; margin: 0 auto; }
.pin-noktalar { display: flex; justify-content: center; gap: 16px; margin: 18px 0; }
.pin-noktalar i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--soluk); }
.pin-noktalar i.dolu { background: var(--vurgu); border-color: var(--vurgu); }
.pin-tuslar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pin-tuslar button { height: 62px; border-radius: 50%; width: 62px; margin: 0 auto; background: var(--yuzey); font-size: 24px; font-weight: 500; }
.pin-tuslar button:active { background: var(--yuzey2); }

/* aile paneli */
.cocuk-kart { padding: 16px; border-radius: 20px; background: var(--yuzey); border: 1px solid var(--cizgi); margin-bottom: 14px; }
.ck-ust { display: flex; align-items: center; gap: 14px; }
.ck-bilgi { flex: 1; display: flex; flex-direction: column; }
.ck-bilgi b { font: 500 20px var(--gorunen); }
.ck-bilgi span { color: var(--soluk); font-size: 14px; }
.ck-seri { font-size: 20px; font-weight: 700; }
.ck-istat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 10px; }
.ck-istat > div { padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--metin) 6%, transparent); display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ck-istat b { font-size: 18px; }
.ck-istat span { color: var(--soluk); font-size: 11px; }
.mini-grafik { display: flex; align-items: flex-end; gap: 3px; height: 24px; }
.mini-grafik i { width: 6px; background: var(--vurgu); border-radius: 2px 2px 0 0; }
.ck-son { color: var(--soluk); font-size: 14px; margin: 0 0 10px; }
.pin-ayar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--cizgi); }
.pin-ayar p { margin: 2px 0 0; }
.form-dikey { display: grid; gap: 14px; }
.secim { height: 50px; border-radius: 14px; border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--metin); font-size: 16px; padding: 0 12px; }
.avatar-sec { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.avatar-sec button { aspect-ratio: 1; border-radius: 12px; font-size: 24px; background: var(--yuzey); border: 2px solid transparent; }
.avatar-sec button.secili { border-color: var(--vurgu); background: color-mix(in srgb, var(--altin) 14%, transparent); }

/* sesli okuma */
::highlight(okunan) { background-color: rgba(255, 196, 70, .55); color: inherit; }
.bana-oku {
  position: absolute; z-index: 11; left: 50%; transform: translateX(-50%); bottom: calc(var(--alt-bosluk) + 22px);
  display: flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 99px; font: 700 18px var(--arayuz);
  background: linear-gradient(135deg, #ffcf6e, #ff9f5a); color: #3a1d00; box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.bana-oku span { font-size: 24px; }
#okuyucu.arayuz .bana-oku { bottom: calc(var(--alt-bosluk) + 86px); }
.sesli-kontrol {
  position: absolute; z-index: 12; left: 50%; transform: translateX(-50%); bottom: calc(var(--alt-bosluk) + 22px);
  display: flex; align-items: center; gap: 6px; padding: 8px; border-radius: 99px;
  background: rgba(11, 42, 30, .88); color: #F6F3EC; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.sesli-kontrol button { min-width: 44px; height: 44px; border-radius: 99px; font-size: 18px; padding: 0 10px; }
.sesli-kontrol button.secili { background: rgba(255,255,255,.16); }
.sesli-kontrol [data-ses=dur] { background: #F6F3EC; color: #1d1712; }
.sk-ad { font-size: 13px; color: #D6DCCF; padding: 0 8px; }
#okuyucu.arayuz .sesli-kontrol { bottom: calc(var(--alt-bosluk) + 86px); }

/* ---------- çocuk modu: aydınlık, renkli, büyük ---------- */
body.cocuk-modu {
  --zemin: #fff7ea; --zemin2: #fff3e0; --yuzey: #ffffff; --yuzey2: #fff0dc; --cizgi: rgba(120, 72, 20, .14);
  --metin: #3b2a1c; --soluk: #8a7360; --vurgu: #ff8a3d; --vurgu-koyu: #3a1600; color-scheme: light;
  font-size: 17px;
}
body.cocuk-modu #uygulama { background: radial-gradient(900px 500px at 90% -10%, rgba(255, 196, 90, .35), transparent 60%), radial-gradient(800px 500px at -10% 110%, rgba(120, 200, 170, .25), transparent 60%), var(--zemin); }
body.cocuk-modu .marka em { color: #ff7a2f; }
body.cocuk-modu .sekmeler { background: rgba(255,255,255,.9); }
body.cocuk-modu .sekmeler button.secili { background: #ff8a3d; color: #fff; }
body.cocuk-modu .sekmeler [data-git=odak] { display: none; }
body.cocuk-modu #ice-aktar-ac, body.cocuk-modu #arama, body.cocuk-modu .filtre-etiket, body.cocuk-modu #kaynaklar, body.cocuk-modu #diller,
body.cocuk-modu #kesfet-baslik, body.cocuk-modu #sonuclar, body.cocuk-modu #kesfet-not, body.cocuk-modu #senin-icin, body.cocuk-modu .kart .menu { display: none !important; }
body:not(.cocuk-modu) #cocuk-kesfet { display: none; }
body.cocuk-modu .kapak { box-shadow: 0 8px 20px -6px rgba(120,70,20,.45); }
body.cocuk-modu .dil-rozet { background: rgba(255,255,255,.9); color: #3b2a1c; }
body.cocuk-modu .bildirim { background: #3b2a1c; color: #fff; }
body.cocuk-modu .panel { background: #fffaf2; }
body.cocuk-modu .seviye-kart, body.cocuk-modu .rozet.kazanildi .rozet-ikon { box-shadow: 0 8px 24px rgba(255,138,61,.25); }
body.cocuk-modu .rozet-ikon { width: 74px; height: 74px; font-size: 38px; }
.ck-baslik { font: 600 24px var(--gorunen); margin: 26px 0 14px; }
.ck-raf { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.ck-kitap { display: flex; gap: 16px; padding: 14px; border-radius: 22px; background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: 0 6px 18px rgba(120,70,20,.08); }
.ck-kitap .kapak-sar { width: 110px; flex: none; }
.ck-kitap-bilgi { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ck-kitap-bilgi b { font: 600 18px/1.2 var(--gorunen); }
.ck-kitap-bilgi span { color: var(--soluk); font-size: 14px; line-height: 1.4; }
.ck-kitap-bilgi small { color: var(--soluk); font-size: 13px; }
.ck-kitap-bilgi .dugme { margin-top: auto; align-self: flex-start; }
.ck-agac-kart { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: 22px; align-items: center; padding: 18px; border-radius: 26px; background: var(--yuzey); border: 1px solid var(--cizgi); margin-bottom: 16px; }
.agac { width: 100%; height: auto; display: block; }
.ck-agac-bilgi h2 { font: 600 32px var(--gorunen); margin: 4px 0 8px; }
.ck-agac-acik { padding-left: 0; list-style: none; color: var(--soluk); line-height: 1.9; }
.ck-bugun { padding: 18px; border-radius: 20px; background: var(--yuzey); border: 1px solid var(--cizgi); margin-bottom: 16px; }
.ck-bugun-cubuk { height: 18px; border-radius: 99px; background: #ffe8cc; overflow: hidden; margin-bottom: 10px; }
.ck-bugun-cubuk i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffb347, #ff7a2f); }
.ck-bugun.tamam .ck-bugun-cubuk i { background: linear-gradient(90deg, #7fd36b, #3bb36b); }
@media (max-width: 700px) {
  .ck-agac-kart { grid-template-columns: 1fr; }
  .ck-raf { grid-template-columns: 1fr; }
  .ck-istat { grid-template-columns: repeat(2, 1fr); }
  .anket-kutu h2 { font-size: 24px; }
}
.agac, .agac * { stroke: none; }
.agac path[stroke] { stroke: #8d6e4a; }
.sekmeler button span { white-space: nowrap; }
body.cocuk-modu #hedef-ac { display: none; }
.kutlama { top: calc(var(--ust-bosluk) + 84px); }
/* İlk satır küçük büyük harf süsü yalnız gerçek small-caps glifi olan fontlarda (diğerlerinde ş/ğ kutucuk çıkabiliyor) */
#okuyucu:not([data-yazi=literata]):not([data-yazi=garamond]) .metin :is(h1, h2, h3) + p::first-line { font-variant: normal; letter-spacing: normal; }
.anket-secenekler .ik.kod { font: 700 12px/1 var(--arayuz); letter-spacing: .06em; min-width: 30px; padding: 6px 0; text-align: center; border-radius: 8px; background: color-mix(in srgb, var(--metin) 8%, transparent); color: var(--soluk); }
.anket-secenekler button.secili .ik.kod { background: var(--vurgu); color: var(--vurgu-koyu); }

/* ===================== v6: Oku logosu ===================== */
.oku-logo { display: inline-flex; align-items: center; gap: .32em; line-height: 1; vertical-align: middle; }
.oku-isaret { width: 1.65em; height: auto; flex: none; overflow: visible; }
.oku-yazi { font-family: "Cormorant Garamond", "EB Garamond", Garamond, serif; font-weight: 600; letter-spacing: .14em; color: #f3ead8; padding-left: .04em; }
.oku-logo.acik .oku-yazi, body.cocuk-modu .oku-logo .oku-yazi { color: #1b4a2f; }
.oku-logo.dikey { flex-direction: column; gap: .18em; }
.oku-logo.dikey .oku-isaret { width: 3.4em; }
.ust-bar .marka .oku-logo { font-size: 38px; }
.giris-logo-kap { font-size: 52px; margin-bottom: 14px; }
.giris-logo-kap .oku-isaret { filter: drop-shadow(0 10px 30px color-mix(in srgb, var(--altin) 25%, transparent)); }
.kim-logo { font-size: 30px; margin-bottom: 18px; }
@media (max-width: 600px) { .ust-bar .marka .oku-logo { font-size: 30px; } }
.oku-isaret { stroke: none; stroke-width: 0; fill: none; }

/* ===================== v7: OKU marka paleti ===================== */
body { background: var(--zemin); color: var(--metin); }
#uygulama {
  background:
    radial-gradient(1100px 560px at 90% -12%, color-mix(in srgb, var(--altin) 16%, transparent), transparent 62%),
    radial-gradient(900px 520px at -10% 110%, color-mix(in srgb, var(--adacay) 22%, transparent), transparent 62%),
    var(--zemin);
}
#giris { background: radial-gradient(900px 600px at 50% 0%, color-mix(in srgb, var(--altin) 20%, transparent), transparent 60%), var(--zemin); }
#anket, #kim { background: radial-gradient(900px 500px at 50% -10%, color-mix(in srgb, var(--altin) 16%, transparent), transparent 60%), var(--zemin); }
.marka, .raf-baslik h2, .bolum-baslik h3, .grup-baslik, .panel h3, .anket-kutu h2, .devam h3, .pk-ust h2, .seviye-bilgi h2, .ck-baslik, .bugun-kart h3 { color: var(--baslik); }
.marka em { color: var(--altin-metin); }
.etiket, .profil-serit small, .ck-karakter small, .devam .etiket { color: var(--altin-metin); }
.soluk, .raf-baslik span, .kart .yazar, .panel-not, .anket-alt, .ekran-giris { color: var(--metin2); }

/* butonlar */
.dugme.ana { background: var(--dugme); color: var(--dugme-metin); }
.dugme.ana:active { background: var(--dugme-bas); }
.dugme.hafif { background: var(--dugme2); color: var(--dugme2-metin); border-color: var(--cizgi); }
.dugme.altin { background: var(--altin); color: #123B2A; }
.indir-dugme { background: var(--dugme2); color: var(--dugme2-metin); border: 1px solid var(--cizgi); }
.indir-dugme .dolgu { background: color-mix(in srgb, var(--adacay) 45%, transparent); }
.indir-dugme.hazir { background: var(--dugme); color: var(--dugme-metin); border-color: transparent; }
.secenekler button { background: var(--yuzey); color: var(--metin); }
.secenekler button.secili { border-color: var(--vurgu); box-shadow: inset 0 0 0 1px var(--vurgu); color: var(--vurgu); }

/* gezinme ve çipler */
.sekmeler { background: color-mix(in srgb, var(--yuzey) 86%, transparent); border-color: var(--cizgi); box-shadow: 0 12px 36px var(--golge); }
.sekmeler button { color: var(--soluk); }
.sekmeler button.secili { background: var(--dugme); color: var(--dugme-metin); }
.diller button { border-color: var(--cizgi); color: var(--metin2); background: var(--yuzey); }
.diller button.secili, .zamanlayici button.secili { background: var(--dugme); color: var(--dugme-metin); border-color: transparent; }
.kaynak-sec { background: var(--yuzey2); }
.kaynak-sec button.secili { background: var(--yuzey); color: var(--baslik); box-shadow: 0 2px 10px var(--golge); }

/* kartlar ve yüzeyler */
.kart-yuzey, .istat, .bugun-serit, .karisim, .cocuk-kart, .siradaki-kart, .rozet, .yukleme-listesi li, .bicim, .ipucu-kart { background: var(--yuzey); border-color: var(--cizgi); }
.devam { background: linear-gradient(135deg, color-mix(in srgb, var(--altin) 18%, transparent), transparent 60%), var(--yuzey); }
.kapak { box-shadow: 0 1px 1px rgba(0,0,0,.18), 0 10px 22px -6px var(--golge), 0 22px 40px -18px var(--golge); }
.bicim.ana { border-color: color-mix(in srgb, var(--orman) 40%, transparent); background: color-mix(in srgb, var(--adacay) 16%, transparent); }
.avatar { background: linear-gradient(140deg, #1f5a3f, var(--orman)); color: var(--fildisi); }
:root[data-gorunum=koyu] .avatar:not(.cocuk) { background: linear-gradient(140deg, var(--altin-acik), var(--altin)); color: var(--orman); }

/* bildirim ve ipuçları: ters renk */
.bildirim, .grafik-ipucu { background: var(--dugme); color: var(--dugme-metin); }
.kutlama { background: linear-gradient(135deg, var(--altin-acik), var(--altin)); color: var(--orman); }

/* grafik */
.grafik .cubuk { fill: color-mix(in srgb, var(--adacay) 75%, transparent); }
.grafik .hedefli .cubuk { fill: var(--vurgu); }
.grafik .bugun .cubuk { fill: var(--altin); }
.grafik .hedef-cizgi { stroke: var(--altin); }
.grafik .hedef-yazi { fill: var(--altin-metin); }
.halka.tamam .dolu, .ck-bugun.tamam .ck-bugun-cubuk i { stroke: var(--basari); }
.dolu { stroke: var(--vurgu); }
.serit-seri b, .seri-kart b { color: var(--baslik); }

/* başarılar: altın yalnız burada belirgin (başarı / seri / premium) */
.seviye-kart { background: radial-gradient(500px 220px at 0% 0%, color-mix(in srgb, var(--altin) 26%, transparent), transparent 70%), var(--yuzey); }
.seviye-madalya { background: conic-gradient(from 200deg, var(--altin-acik), #b8913f, var(--altin-acik), #9c7a33, var(--altin-acik)); }
.seviye-madalya span { background: var(--orman); color: var(--altin-acik); }
.rozet.kazanildi .rozet-ikon { background: radial-gradient(circle at 35% 30%, var(--altin-acik), var(--altin) 70%); }
.gorev-kart { background: color-mix(in srgb, var(--adacay) 18%, transparent); border-color: color-mix(in srgb, var(--adacay) 50%, transparent); }

/* logo: temaya göre sürüm */
.oku-yazi { color: var(--baslik); }
.oku-logo .zemin-acik { display: none; }
:root:not([data-gorunum=koyu]) .oku-logo .zemin-koyu { display: none; }
:root:not([data-gorunum=koyu]) .oku-logo .zemin-acik { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-gorunum=acik]) .oku-logo .zemin-koyu { display: block; }
  :root:not([data-gorunum=acik]) .oku-logo .zemin-acik { display: none; }
}
body.cocuk-modu .oku-logo .zemin-koyu { display: none !important; }
body.cocuk-modu .oku-logo .zemin-acik { display: block !important; }

/* okuyucu temaları (marka önerisi) */
#okuyucu[data-tema=sicak] { --kagit: #EFE7D6; --murekkep: #1B241F; --masa: #123B2A; --masa2: #0B2A1E; }
#okuyucu[data-tema=gece] { --kagit: #0F1713; --murekkep: #EDE7DA; --masa: #070c09; --masa2: #000; }
#okuyucu[data-tema=orman] { --kagit: #10261D; --murekkep: #E7E2D5; --masa: #0B2A1E; --masa2: #04140d; }
#okuyucu:is([data-tema=orman]) .sayfa { background-image: none; }
#okuyucu:is([data-tema=sepya], [data-tema=fildisi], [data-tema=eski], [data-tema=cay], [data-tema=beyaz], [data-tema=sis]) { --masa: #123B2A; --masa2: #0B2A1E; }
::highlight(okunan) { background-color: color-mix(in srgb, var(--altin) 60%, transparent); }

/* çocuk modu: markanın açık yüzü + yumuşak, oyuncu dokunuşlar (her zaman açık tema) */
body.cocuk-modu {
  --zemin: #F6F3EC; --zemin2: #F2EEE6; --yuzey: #FBFAF7; --yuzey2: #EFE7D6; --cizgi: #D9DED7;
  --metin: #1B241F; --metin2: #4E5B54; --soluk: #7A857F; --baslik: #123B2A; --altin-metin: #8a6a2c;
  --vurgu: #123B2A; --vurgu-koyu: #F6F3EC; --dugme: #123B2A; --dugme-metin: #F6F3EC; --dugme-bas: #0F3122;
  --dugme2: #EFE7D6; --dugme2-metin: #123B2A; --golge: rgba(18, 59, 42, .14); color-scheme: light;
}
body.cocuk-modu #uygulama { background: radial-gradient(900px 500px at 90% -10%, color-mix(in srgb, var(--altin) 32%, transparent), transparent 60%), radial-gradient(800px 500px at -10% 110%, color-mix(in srgb, var(--adacay) 38%, transparent), transparent 60%), var(--zemin); }
body.cocuk-modu .marka em { color: var(--altin-metin); }
body.cocuk-modu .sekmeler button.secili { background: var(--orman); color: var(--fildisi); }
body.cocuk-modu .bildirim { background: var(--orman); color: var(--fildisi); }
body.cocuk-modu .kapak { box-shadow: 0 8px 20px -6px var(--golge); }
.cocuk-anket { background: radial-gradient(900px 500px at 50% -10%, color-mix(in srgb, var(--altin) 30%, transparent), transparent 60%), #F6F3EC !important; --zemin: #F6F3EC; --yuzey: #FBFAF7; --metin: #1B241F; --metin2: #4E5B54; --soluk: #7A857F; --cizgi: #D9DED7; --baslik: #123B2A; --dugme: #123B2A; --dugme-metin: #F6F3EC; --dugme2: #EFE7D6; --dugme2-metin: #123B2A; --vurgu: #123B2A; color: #1B241F; }
.ck-bugun-cubuk { background: color-mix(in srgb, var(--altin) 25%, transparent); }
.ck-bugun-cubuk i { background: linear-gradient(90deg, var(--altin), var(--adacay)); }
.ck-bugun.tamam .ck-bugun-cubuk i { background: linear-gradient(90deg, var(--adacay), var(--basari)); }
.bana-oku { background: linear-gradient(135deg, var(--altin-acik), var(--altin)); color: var(--orman); }
.avatar.cocuk { background: linear-gradient(140deg, var(--altin-acik), var(--altin)); color: var(--orman); }
.profil-karti, .profil-karti.cocuk { background: radial-gradient(500px 240px at 0% 0%, color-mix(in srgb, var(--altin) 20%, transparent), transparent 70%), var(--yuzey); }
.pk-hedef { background: color-mix(in srgb, var(--adacay) 20%, transparent); }
.anket-secenekler button { background: var(--yuzey); border-color: var(--cizgi); color: var(--metin); }
.anket-secenekler button.secili { border-color: var(--vurgu); background: color-mix(in srgb, var(--adacay) 22%, transparent); }
.anket-secenekler button.secili .ik.kod { background: var(--dugme); color: var(--dugme-metin); }
.anket-ilerleme i { background: var(--vurgu); }
.pin-noktalar i.dolu { background: var(--vurgu); border-color: var(--vurgu); }
.oneri-davet, .profil-serit, .ck-karakter { background: radial-gradient(400px 160px at 0% 0%, color-mix(in srgb, var(--altin) 20%, transparent), transparent 70%), var(--yuzey); }
.gorunum-sec button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px; }
.gorunum-sec span { font-size: 26px; }
.gorunum-sec small { color: var(--soluk); font-weight: 400; font-size: 12px; }
/* iOS uygulamasındaki WebView okuyucusu: tarayıcıya özgü kabuk yok */
body.uygulama-okuyucu { background: #0B2A1E; }