/* assets/css/okuyucu.css: PDF sayıların dergi okuyucusu (oku.php, assets/js/reader.js). */
:root {
  --ok-zemin: #071d40;
  --ok-yazi: #dbeafe;
  --ok-soluk: rgba(219, 234, 254, .62);
  --ok-dugme: rgba(219, 234, 254, .1);
  --ok-dugme-ust: rgba(219, 234, 254, .2);
  --ok-kagit: #f5f2ea;
  --ok-font: 'Manrope', -apple-system, system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body.ok-govde { height: 100%; margin: 0; overflow: hidden; background: var(--ok-zemin); }
body.ok-govde { color: var(--ok-yazi); font-family: var(--ok-font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }

.ok { position: fixed; inset: 0; display: flex; flex-direction: column;
  background: radial-gradient(ellipse 90% 75% at 50% 42%, #173a70 0%, #0b2a5b 48%, #051633 100%); }

/* ---- üst ve alt çubuk */
.ok-ust, .ok-alt { display: flex; align-items: center; gap: 6px; flex: none; position: relative; z-index: 5; }
.ok-ust { padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); }
.ok-alt { gap: 10px; padding: 8px max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.ok.sade .ok-ust, .ok.sade .ok-alt { display: none; }
.ok-baslik { flex: 1; min-width: 0; display: grid; line-height: 1.25; padding: 0 4px; }
.ok-baslik span { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #93c5fd; }
.ok-baslik h1 { margin: 0; font-family: 'Sora', var(--ok-font); font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ok-dugme { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%;
  background: none; color: var(--ok-yazi); cursor: pointer; text-decoration: none; }
.ok-dugme:hover { background: var(--ok-dugme); }
.ok-dugme:focus-visible, .ok-indir:focus-visible, .ok-ok:focus-visible, .ok-kucuk:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.ok-dugme:disabled { opacity: .35; cursor: default; background: none; }
.ok-indir { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; margin-left: 4px; border-radius: 18px;
  background: var(--ok-dugme); color: var(--ok-yazi); font-size: 13.5px; font-weight: 700; text-decoration: none; flex: none; }
.ok-indir:hover { background: var(--ok-dugme-ust); }
.ok-indir-menu { position: relative; flex: none; }
.ok-indir-menu > summary { list-style: none; cursor: pointer; }
.ok-indir-menu > summary::-webkit-details-marker { display: none; }
.ok-indir-liste { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: max-content; max-width: min(300px, calc(100vw - 24px));
  display: grid; padding: 6px; border-radius: 14px; background: #0b234b; box-shadow: 0 16px 40px rgba(0, 0, 0, .45); }
.ok-indir-liste a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; color: var(--ok-yazi); text-decoration: none; }
.ok-indir-liste a:hover, .ok-indir-liste a:focus-visible { background: var(--ok-dugme-ust); outline: none; }
.ok-indir-liste b { font-size: 14px; }
.ok-indir-liste small { font-size: 12px; color: var(--ok-soluk); }
.ok-indir svg { width: 19px; height: 19px; }
.ok-no { min-width: 74px; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ok-yazi); white-space: nowrap; }
.ok-kaydirici { flex: 1; min-width: 60px; accent-color: #93c5fd; height: 28px; margin: 0; cursor: pointer; }

/* ---- sahne ve kitap */
.ok-sahne { flex: 1; min-height: 0; position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.ok-kaydir { position: absolute; inset: 0; overflow: hidden; }
.ok-kaydir.zumlu { cursor: grab; }
.ok-kaydir.zumlu:active { cursor: grabbing; }
.ok-tasiyici { min-width: 100%; min-height: 100%; width: max-content; display: flex; align-items: center; justify-content: center; padding: var(--ok-bosluk, 24px); }
.ok-kitap { position: relative; flex: none; perspective: 2800px; }
.ok-yaprak, .ok-yuz { position: absolute; top: 0; overflow: hidden; background: var(--ok-kagit); }
.ok-yaprak { box-shadow: 0 22px 40px -12px rgba(0, 0, 0, .55), 0 3px 10px rgba(0, 0, 0, .22); }
.ok-yaprak img, .ok-yuz img { display: block; width: 100%; height: 100%; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.ok-yaprak img:not([src]), .ok-yuz img:not([src]) { visibility: hidden; }
/* hazır resimde açılımın yarısı: resim iki kat geniş, sol ya da sağ yarısı görünür; arkada küçük resim bekler */
.ok-yaprak img.yari-0, .ok-yuz img.yari-0 { width: 200%; max-width: none; }
.ok-yaprak img.yari-1, .ok-yuz img.yari-1 { width: 200%; max-width: none; margin-left: -100%; }
.ok-yaprak, .ok-yuz { background-repeat: no-repeat; }
/* çizilmemiş sayfa: kâğıt ve hafif bir ışıltı */
.ok-yaprak.bos::before, .ok-yuz.bos::before { content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%) var(--ok-kagit);
  background-size: 250% 100%; animation: ok-isilti 1.4s linear infinite; }
@keyframes ok-isilti { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* kitabın sırtı: çift sayfada iç kenarlar gölgeli */
.ok-kitap.cift .ok-yaprak.sol::after, .ok-yuz.sol-sayfa::after,
.ok-kitap.cift .ok-yaprak.sag::after, .ok-yuz.sag-sayfa::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9%; pointer-events: none; }
.ok-kitap.cift .ok-yaprak.sol::after, .ok-yuz.sol-sayfa::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, .22), rgba(0, 0, 0, .06) 35%, transparent); }
.ok-kitap.cift .ok-yaprak.sag::after, .ok-yuz.sag-sayfa::after { left: 0; background: linear-gradient(to right, rgba(0, 0, 0, .2), rgba(0, 0, 0, .05) 35%, transparent); }
.ok-kitap.tek-taraf .ok-yaprak::after { display: none; }

/* sayfa kenarları: kalan sayfalar kadar kalın */
.ok-kitap::before, .ok-kitap::after { content: ""; position: absolute; top: .6%; bottom: .6%; pointer-events: none;
  background: repeating-linear-gradient(to right, #ece7dc 0 1px, #cbc4b5 1px 2px); }
.ok-kitap::before { right: 100%; width: var(--ok-sol-kenar, 0px); border-radius: 3px 0 0 3px; }
.ok-kitap::after { left: 100%; width: var(--ok-sag-kenar, 0px); border-radius: 0 3px 3px 0; }

/* dönen yaprak */
.ok-donen { position: absolute; top: 0; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; will-change: transform; z-index: 3; }
.ok-donen.sagda { transform-origin: 0 50%; }
.ok-donen.solda { transform-origin: 100% 50%; }
.ok-yuz { inset: 0; left: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.ok-yuz.arka { transform: rotateY(180deg); }
.ok-yuz > i { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.ok-yuz.on > i { background: linear-gradient(to right, rgba(0, 0, 0, .35), rgba(0, 0, 0, .1) 50%, rgba(255, 255, 255, .12)); }
.ok-donen.solda .ok-yuz.on > i { background: linear-gradient(to left, rgba(0, 0, 0, .35), rgba(0, 0, 0, .1) 50%, rgba(255, 255, 255, .12)); }
.ok-yuz.arka > i { background: linear-gradient(to left, rgba(0, 0, 0, .3), rgba(0, 0, 0, .06) 60%, transparent); }
.ok-donen.solda .ok-yuz.arka > i { background: linear-gradient(to right, rgba(0, 0, 0, .3), rgba(0, 0, 0, .06) 60%, transparent); }

/* yan oklar (fareyle) */
.ok-ok { position: absolute; top: 50%; z-index: 4; width: 48px; height: 48px; margin-top: -24px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgba(5, 22, 51, .55); color: var(--ok-yazi); cursor: pointer; transition: background .15s, opacity .15s; }
.ok-ok:hover { background: rgba(5, 22, 51, .85); }
.ok-ok:disabled { opacity: 0; pointer-events: none; }
.ok-ok.onceki { left: max(12px, env(safe-area-inset-left)); }
.ok-ok.sonraki { right: max(12px, env(safe-area-inset-right)); }
.ok-ok svg { width: 26px; height: 26px; }
@media (hover: none), (max-width: 700px) { .ok-ok { display: none; } }

.ok-durum { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  margin: 0; padding: 24px; text-align: center; font-size: 14.5px; line-height: 1.5; color: var(--ok-yazi); }
.ok-durum a { color: #fff; }
.ok-durum .ok-durum-dugmeler { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ok-durum-cubuk { width: min(240px, 70vw); height: 4px; border-radius: 2px; background: rgba(219, 234, 254, .18); overflow: hidden; }
.ok-durum-cubuk i { display: block; height: 100%; width: 0; background: #93c5fd; transition: width .2s; }
.ok-yukleniyor { width: 30px; height: 30px; border: 2.5px solid rgba(219, 234, 254, .2); border-top-color: #93c5fd; border-radius: 50%; animation: ok-don .8s linear infinite; }
@keyframes ok-don { to { transform: rotate(360deg); } }
.ok-ipucu { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 4; max-width: calc(100% - 32px); width: max-content;
  padding: 10px 16px; border-radius: 20px; background: rgba(5, 22, 51, .88); font-size: 13px; text-align: center; pointer-events: none;
  animation: ok-belir .3s ease; }
@keyframes ok-belir { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---- bütün sayfalar */
.ok-izgara { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; background: rgba(5, 18, 42, .97); animation: ok-solgun .18s ease; }
@keyframes ok-solgun { from { opacity: 0; } }
.ok-izgara-ust { display: flex; align-items: center; gap: 14px; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(18px, env(safe-area-inset-left)); }
.ok-izgara-ust b { flex: 1; font-family: 'Sora', var(--ok-font); font-size: 17px; }
.ok-izgara-ust a { color: var(--ok-soluk); font-size: 13px; }
.ok-izgara-liste { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 18px 14px; align-content: start;
  padding: 8px max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
.ok-kucuk { display: grid; gap: 6px; justify-items: center; padding: 0; border: 0; background: none; color: var(--ok-soluk); font: 700 12px var(--ok-font); cursor: pointer; }
.ok-kucuk i { position: relative; display: block; width: 100%; aspect-ratio: var(--ok-oran, .707); background: var(--ok-kagit) center / cover no-repeat;
  border-radius: 2px; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); outline: 3px solid transparent; outline-offset: 2px; transition: outline-color .15s; }
.ok-kucuk:hover i { outline-color: rgba(147, 197, 253, .45); }
.ok-kucuk.simdi { color: #fff; }
.ok-kucuk.simdi i { outline-color: #93c5fd; }

@media (max-width: 600px) {
  .ok-indir { width: 40px; padding: 0; justify-content: center; margin-left: 0; background: none; }
  .ok-indir span { display: none; }
  .ok-baslik h1 { font-size: 14px; }
  .ok-izgara-liste { grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ok-yaprak.bos::before, .ok-yuz.bos::before, .ok-yukleniyor { animation: none; }
}