/* OkuOku - kitap okuyucu */
:root {
    --cyan: #06A3D3;
    --orange: #F7891E;
    --orange-dark: #E07510;
    --navy: #0B4FA3;
    --ink: #1F2A44;
    --bar-h: 72px;
    --top-h: 58px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    font-family: "Nunito", system-ui, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 15% 15%, rgba(6,163,211,.22), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(247,137,30,.22), transparent 45%),
        #EEF6FB;
    overflow: hidden;
    display: flex; flex-direction: column;
    height: 100vh; height: 100dvh;
    -webkit-tap-highlight-color: transparent;
}
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Üst bar ---------- */
.r-top {
    height: var(--top-h); flex: none;
    display: flex; align-items: center; gap: 12px; padding: 0 12px;
    background: rgba(255,255,255,.85); backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(11,79,163,.08);
}
.r-back {
    width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: var(--navy); background: #fff; box-shadow: 0 2px 8px rgba(11,79,163,.12); flex: none;
}
.r-title { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.r-title strong {
    font-family: "Baloo 2", sans-serif; font-size: 1.2rem; color: var(--navy); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.r-title span { font-size: .85rem; color: #64748B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-logo img { height: 46px; width: auto; }

/* ---------- Sahne ---------- */
.r-stage { position: relative; flex: 1; min-height: 0; padding: 18px 64px; }
.r-book { position: relative; width: 100%; height: 100%; margin: 0 auto; }
.r-book .page {
    background: #fff; overflow: hidden;
}
.r-book .page canvas { display: block; width: 100%; height: 100%; }
.r-book .page .pg-loading {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #94A3B8; font-family: "Baloo 2", sans-serif; font-size: 1.4rem; background: #fff;
}
.r-book .page.rendered .pg-loading { display: none; }
.stf__parent { margin: 0 auto; }
.stf__block { filter: drop-shadow(0 18px 30px rgba(11,79,163,.22)); }

.r-side {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
    background: #fff; color: var(--navy); box-shadow: 0 4px 14px rgba(11,79,163,.18);
    display: flex; align-items: center; justify-content: center; z-index: 5;
    transition: transform .15s, opacity .2s;
}
.r-side:hover { transform: translateY(-50%) scale(1.08); }
.r-side:disabled { opacity: .3; cursor: default; transform: translateY(-50%); }
.r-side.prev { left: 8px; }
.r-side.next { right: 8px; }
.r-side svg { width: 28px; height: 28px; }

.r-loading {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; z-index: 10; font-family: "Baloo 2", sans-serif; font-size: 1.2rem; color: var(--navy);
}
.r-loading.hide { display: none; }
.r-spinner {
    width: 54px; height: 54px; border-radius: 50%;
    border: 6px solid rgba(6,163,211,.2); border-top-color: var(--orange);
    animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Alt bar ---------- */
.r-bar {
    height: var(--bar-h); flex: none;
    display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 12px;
    background: rgba(255,255,255,.9); backdrop-filter: blur(8px);
    border-top: 1px solid rgba(11,79,163,.08);
    padding-bottom: env(safe-area-inset-bottom);
}
.rbtn {
    font-family: "Baloo 2", sans-serif; font-weight: 700; font-size: 1rem;
    border: 0; cursor: pointer; border-radius: 999px; padding: 10px 18px;
    background: #fff; color: var(--navy); box-shadow: 0 2px 8px rgba(11,79,163,.12);
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    transition: background .2s, color .2s, transform .15s;
}
.rbtn:hover { transform: translateY(-1px); }
.rbtn.primary { background: var(--orange); color: #fff; }
.rbtn.primary:hover { background: var(--orange-dark); }
.rbtn.big { font-size: 1.3rem; padding: 14px 30px; }
.rbtn.big svg { fill: currentColor; stroke: none; }
.rbtn.icon { padding: 8px 14px; }
.rbtn[aria-pressed="true"] { background: var(--cyan); color: #fff; }
#btnSound .off { display: none; }
#btnSound[aria-pressed="false"] { background: #fff; color: #94A3B8; }
#btnSound[aria-pressed="false"] .on { display: none; }
#btnSound[aria-pressed="false"] .off { display: inline; }
#btnSound.speaking { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(6,163,211,.55); } 50% { box-shadow: 0 0 0 10px rgba(6,163,211,0); } }
#btnAuto svg { fill: currentColor; stroke: none; width: 18px; height: 18px; }

.r-pages { display: flex; align-items: center; gap: 10px; flex: 0 1 340px; min-width: 120px; }
.r-pages input { flex: 1; accent-color: var(--orange); min-width: 0; }
.r-pages span { font-family: "Baloo 2", sans-serif; font-weight: 700; color: var(--navy); white-space: nowrap; min-width: 58px; text-align: center; }

/* ---------- Başlangıç ekranı ---------- */
.r-start {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(11,79,163,.35); backdrop-filter: blur(4px);
}
.r-start[hidden] { display: none; }
.r-start-card {
    background: #fff; border-radius: 24px; padding: 28px 28px 22px; text-align: center;
    max-width: 380px; width: 100%; box-shadow: 0 30px 60px rgba(0,0,0,.25);
    animation: pop .35s cubic-bezier(.2,1.4,.4,1);
}
@keyframes pop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.r-cover-mini {
    width: 150px; aspect-ratio: 3/4; margin: 0 auto 14px; border-radius: 6px 12px 12px 6px; overflow: hidden;
    box-shadow: -6px 10px 24px rgba(11,79,163,.25); background: #EAF5FB;
}
.r-cover-mini img, .r-cover-mini canvas { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-start-card h2 { font-family: "Baloo 2", sans-serif; color: var(--navy); margin: 0; font-size: 1.5rem; line-height: 1.2; }
.r-start-card p { color: #64748B; margin: 4px 0 18px; }
.r-check { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font-weight: 600; cursor: pointer; }
.r-check input { width: 20px; height: 20px; accent-color: var(--cyan); }

/* ---------- Bulunamadı ---------- */
.notfound { margin: auto; text-align: center; padding: 24px; }
.notfound img { width: 220px; margin: 0 auto 10px; display: block; }
.notfound h1 { font-family: "Baloo 2", sans-serif; color: var(--navy); }

/* ---------- Mobil ---------- */
@media (max-width: 700px) {
    :root { --bar-h: 64px; --top-h: 52px; }
    .r-stage { padding: 10px 8px; }
    .r-side { width: 42px; height: 42px; opacity: .85; }
    .r-side.prev { left: 4px; } .r-side.next { right: 4px; }
    .rbtn .lbl { display: none; }
    .rbtn.icon { padding: 10px; }
    .r-bar { gap: 6px; }
    .r-logo { display: none; }
    #btnFull { display: none; }
}
:fullscreen .r-top { display: none; }