/** * plugins/generic/zeusCloudReader/styles/reader.css * * Copyright (c) 2026 Zeus Publishing * Distributed under the GNU GPL v3. * * Okuyucu kendi sayfasini bastigi icin temanin stil dosyasi burada yok; palet * bastan tanimlaniyor. * * Varsayilan tema KOYU: okuma yuzeyinde parlak beyaz bir cerceve sayfanin * kendisiyle yarisiyor, koyu kabuk goze sayfayi birakiyor. Acik ve sepya * secenek olarak duruyor, tercih hatirlaniyor. * * --zcr-accent derginin kendi rengi (sablondan gelir) ama KABUK rengi degil: * kabuk her dergide ayni koyu tonda, vurgu yalnizca etkin ogelerde ve * baglantilarda beliriyor. Boylece okuyucu uc dergide de ayni yuzey oluyor, * derginin kimligi ise icinde duruyor. */ :root { /* Kabuk rengi artik derginin renginden BAGIMSIZ. Once dergi rengini kullaniyordum ama IDR'de lacivert cikinca okuyucu Wiley'nin sakin teal kabugundan uzaklasti; kullanici Wiley'nin renklerini istedi. Dergi kimligi panelde ve baglantilarda degil, kabukta artik yok. */ --zcr-teal: #1b7f92; --zcr-teal-line: #4fc3d7; --zcr-accent: #0795af; --zcr-bar-h: 52px; --zcr-rail-w: 46px; --zcr-panel-w: 360px; } /* Koyu (varsayilan) */ body.zcr[data-zcr-theme="dark"] { --zcr-shell: #2a2f37; --zcr-shell-2: #22262d; --zcr-shell-ink: #e6e9ec; --zcr-shell-dim: #a7aeb7; --zcr-shell-soft: #ccd2d8; --zcr-shell-line: #3a4049; --zcr-stage: #14171b; --zcr-link: #4ec3d9; --zcr-page-shadow: rgba(0, 0, 0, .55); } body.zcr[data-zcr-theme="light"] { --zcr-shell: #ffffff; --zcr-shell-2: #f2f4f6; --zcr-shell-ink: #24313a; --zcr-shell-dim: #5c6874; --zcr-shell-soft: #3c4954; --zcr-shell-line: #dfe4e8; --zcr-stage: #eef1f4; --zcr-link: #0b6d8a; --zcr-page-shadow: rgba(0, 0, 0, .16); } body.zcr[data-zcr-theme="sepia"] { --zcr-shell: #fbf4e6; --zcr-shell-2: #f2e8d4; --zcr-shell-ink: #4a3f2f; --zcr-shell-dim: #7a6b55; --zcr-shell-soft: #5d5041; --zcr-shell-line: #ded1b8; --zcr-stage: #efe6d6; --zcr-link: #8a5a1b; --zcr-page-shadow: rgba(90, 70, 40, .2); } /* Bu sayfa okuyucunun KENDI belgesi (reader.tpl tam bir basiyor), bu yuzden html'e dokunmak baska hicbir OJS sayfasini etkilemiyor. */ html { height: 100%; overflow: hidden; } body.zcr { margin: 0; background: var(--zcr-stage); color: var(--zcr-shell-ink); font: 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; /* Sabit kabuk. Mobil tarayicilarda 100vh, adres cubugu GORUNURKEN bile cubugun gizli oldugu buyuk gorunume gore olculuyor: govde ekranin altina tasiyor, sayfanin kendisi kayabiliyor ve ust bant yukari kayarak gozden kayboluyordu. position:fixed kutuyu gorunur alana civiliyor, 100dvh de adres cubugu acilip kapandikca yuksekligi guncelliyor; 100vh destegi olmayan tarayicilar icin yedek olarak ONCE yaziliyor. */ position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; /* Sayfanin sonuna gelindiginde kaydirmanin belgeye zincirlenmesini engeller - iOS'ta lastik gibi geri gelen hareket bandi da suruklyordu. */ overscroll-behavior: none; } .zcr_defs { position: absolute; width: 0; height: 0; } .zcr_i { width: 20px; height: 20px; fill: currentColor; } /* --- Ust bant ----------------------------------------------------------- */ .zcr_bar { flex: 0 0 var(--zcr-bar-h); display: flex; align-items: center; gap: 1rem; padding: 0 0.85rem; background: var(--zcr-shell); color: var(--zcr-shell-ink); /* Alt cizgi Wiley'deki gibi: ince bir kenarlik degil, markanin altinda duran KALIN bir teal seri. Tam genislikte degil - genislikte oldugunda arac cubugu bir sekme cubuguna benziyordu. */ border-bottom: 1px solid #12161b; position: relative; z-index: 20; } .zcr_brand { position: relative; display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; font-weight: 700; white-space: nowrap; } .zcr_brand::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * (var(--zcr-bar-h) - 100%) / 2 + 1px); height: 5px; background: var(--zcr-teal-line); } .zcr_brand:hover { color: var(--zcr-link); } .zcr_brand_txt { font-size: 1rem; } .zcr_center { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 0.6rem; min-width: 0; } .zcr_chip { padding: 0.15rem 0.55rem; border: 1px solid var(--zcr-shell-line); border-radius: 4px; background: var(--zcr-shell-2); font-size: 0.78rem; font-weight: 700; letter-spacing: .03em; } /* Sayfa sayaci ve gezinme dugmeleri tek bir satir ici grup. */ .zcr_pageline { display: inline-flex; align-items: center; gap: 0.15rem; } .zcr_pagenum { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0 0.3rem; font-size: 0.85rem; color: var(--zcr-shell-dim); white-space: nowrap; } .zcr_pagenum input { width: 3em; height: 26px; text-align: center; border: 1px solid var(--zcr-shell-line); border-radius: 4px; background: var(--zcr-shell-2); color: var(--zcr-shell-ink); font: inherit; } .zcr_pagenum input:focus { outline: none; border-color: var(--zcr-teal-line); } /* Gezinme dugmeleri arac cubugundaki digerlerinden biraz kucuk: sayacin yanindaki bes oge cubugun ortasini fazla genisletmemeli. Secici `.zcr_ico.zcr_nav`: .zcr_ico bu kuraldan SONRA tanimli ve tek sinifla ayni ozgullukte kalinca 34px'lik olcusu kazaniyordu. */ .zcr_ico.zcr_nav { width: 28px; height: 28px; } .zcr_ico.zcr_nav .zcr_i { width: 17px; height: 17px; } /* Sinirdaki komut sonuk: tiklayip hicbir sey olmamasindan iyi. */ .zcr_ico.zcr_nav[disabled] { opacity: .32; cursor: default; } .zcr_ico.zcr_nav[disabled]:hover { background: none; color: inherit; } .zcr_right { display: flex; align-items: center; gap: 0.15rem; } .zcr_ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--zcr-shell-dim); cursor: pointer; } .zcr_ico:hover { background: var(--zcr-shell-2); color: var(--zcr-shell-ink); } .zcr_ico:focus-visible { outline: 2px solid var(--zcr-teal-line); outline-offset: 1px; } .zcr_ico.zcr_on { color: var(--zcr-teal-line); } /* Indirme, cubugun tek dolu dugmesi - sayfadaki birincil eylem o. */ .zcr_dl { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-left: 0.35rem; border-radius: 50%; background: var(--zcr-teal); color: #fff; text-decoration: none; } .zcr_dl:hover { filter: brightness(1.15); } /* --- Arama seridi ------------------------------------------------------- */ .zcr_find { display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; background: var(--zcr-shell-2); border-bottom: 1px solid var(--zcr-shell-line); z-index: 19; } .zcr_find input { flex: 0 1 320px; height: 30px; padding: 0 0.5rem; border: 1px solid var(--zcr-shell-line); border-radius: 4px; background: var(--zcr-shell); color: var(--zcr-shell-ink); font: inherit; } .zcr_find_count { font-size: 0.8rem; color: var(--zcr-shell-dim); min-width: 5em; } /* --- Govde -------------------------------------------------------------- */ .zcr_body { flex: 1 1 auto; display: flex; min-height: 0; position: relative; } .zcr_panel { position: relative; flex: 0 0 var(--zcr-panel-w); display: flex; flex-direction: column; min-height: 0; background: var(--zcr-shell); border-right: 1px solid var(--zcr-shell-line); transition: margin-left 0.18s ease; } /* Kapali panel: genisligi kadar sola kaydiriliyor. `display:none` yerine bu, cunku ray panelin cocugu ve kapaliyken de gorunur kalmali. */ body.zcr[data-zcr-panel="off"] .zcr_panel { margin-left: calc(-1 * var(--zcr-panel-w)); } body.zcr[data-zcr-panel="off"] .zcr_panel > :not(.zcr_rail) { visibility: hidden; } .zcr_p_h { margin: 0; padding: 1rem 1.1rem 0.6rem; font-size: 1.5rem; font-weight: 400; } /* --- Dikey ikon rayi ---------------------------------------------------- */ .zcr_rail { position: absolute; top: 1rem; left: 100%; display: flex; flex-direction: column; gap: 0.15rem; padding: 0.3rem 0.2rem; background: var(--zcr-shell); border: 1px solid var(--zcr-shell-line); border-left: none; border-radius: 0 10px 10px 0; box-shadow: 2px 2px 8px rgba(0, 0, 0, .18); z-index: 15; } .zcr_rail_b { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--zcr-shell-dim); cursor: pointer; } .zcr_rail_b:hover { background: var(--zcr-shell-2); color: var(--zcr-shell-ink); } .zcr_rail_b:focus-visible { outline: 2px solid var(--zcr-teal-line); outline-offset: 1px; } /* Etkin bolum: dolu daire - Wiley'de de secili ikon boyle isaretleniyor. */ .zcr_rail_b.zcr_rail_on { background: var(--zcr-teal); color: #fff; } body.zcr[data-zcr-panel="off"] #zcrCollapse .zcr_i { transform: rotate(180deg); } /* --- Panel bolumleri ---------------------------------------------------- */ .zcr_pane { display: none; overflow-y: auto; padding: 0 1.1rem 2rem; } .zcr_pane.zcr_pane_on { display: block; } .zcr_p_title { margin: 0.2rem 0 0.8rem; font-size: 1.02rem; line-height: 1.35; font-weight: 700; } .zcr_authors { list-style: none; margin: 0 0 1rem; padding: 0; } .zcr_authors li { margin-bottom: 0.5rem; font-size: 0.9rem; } .zcr_a_name { font-weight: 600; } .zcr_a_aff { display: block; color: var(--zcr-shell-dim); font-size: 0.82rem; } .zcr_orcid { margin-left: 0.35rem; font-size: 0.68rem; letter-spacing: .04em; color: var(--zcr-link); text-decoration: none; } .zcr_facts { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; margin: 0 0 1rem; font-size: 0.86rem; } .zcr_facts dt { color: var(--zcr-shell-dim); } .zcr_facts dd { margin: 0; } .zcr_pane a { color: var(--zcr-link); } .zcr_pane h3 { margin: 1.1rem 0 0.4rem; font-size: 0.74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--zcr-shell-dim); } .zcr_abs { margin: 0; font-size: 0.88rem; } .zcr_kw { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; padding: 0; } .zcr_kw li { padding: 0.12rem 0.5rem; border: 1px solid var(--zcr-shell-line); border-radius: 999px; font-size: 0.76rem; color: var(--zcr-shell-dim); } .zcr_lic { margin-top: 1.2rem; font-size: 0.78rem; color: var(--zcr-shell-dim); } .zcr_outline { font-size: 0.87rem; } .zcr_outline a { display: block; padding: 0.3rem 0; text-decoration: none; } .zcr_outline a:hover { text-decoration: underline; } .zcr_outline .zcr_ol_2 { padding-left: 1rem; } .zcr_bos { color: var(--zcr-shell-dim); font-size: 0.85rem; } .zcr_refs { margin: 0; padding-left: 1.2rem; font-size: 0.85rem; } .zcr_refs li { margin-bottom: 0.7rem; } /* --- Sahne -------------------------------------------------------------- */ /* overscroll-behavior: kaydirma sahnenin ucuna geldiginde belgeye zincirlenmiyor; ust bandin yerinden oynamasinin ikinci nedeni buydu. */ .zcr_stage { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 1.2rem 0 3rem; background: var(--zcr-stage); } .zcr_pages { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; } /* --- Okuma akisi ve sayfa yerlesimi ------------------------------------ * Ikisi de govdedeki data- ozniteliklerinden suruluyor; JS yalnizca * ozniteligi degistirip sayfalari yeniden olculendiriyor. DOM yapisi ayni * kaliyor - sarmalayici eklenseydi .zcr_page[data-page] secicileri, * IntersectionObserver kayitlari, arama ve yazdirma birlikte kirilirdi. */ /* Cift sayfa: satir olup sariyor. Genislik butcesi JS tarafinda ikiye bolundugu icin bir satira tam iki sayfa siginiyor. */ body.zcr[data-zcr-layout="cift"] .zcr_pages { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 0.9rem; } /* Yatay akis: sayfalar yan yana, sahne yatay kayiyor ve her sayfa merkeze oturuyor. Dikey kaydirma kapali - iki eksende birden kayan bir yuzey dokunmatikte yon secemiyor. */ body.zcr[data-zcr-flow="yatay"] .zcr_stage { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 0.8rem 0; } body.zcr[data-zcr-flow="yatay"] .zcr_pages { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; min-height: 100%; padding: 0 50%; } body.zcr[data-zcr-flow="yatay"] .zcr_page { flex: 0 0 auto; scroll-snap-align: center; /* max-width:none SART. Ustteki `padding: 0 50%` - ilk ve son sayfanin da ortaya oturabilmesi icin - kabin ICERIK kutusunu 0 genislige indiriyor; temel kuraldaki `max-width: 100%` o sifira gore cozulunce butun sayfa kutulari 0 genislige cokuyor ve yalnizca tuval tasarak gorunuyordu. */ max-width: none; } /* --- Format paneli ------------------------------------------------------ */ .zcr_fmt { position: absolute; top: calc(100% + 9px); /* Yatay konum JS'ten (--zcr-pop-x): panel, kendisini acan dugmenin altinda durmali. Sabit `right` degeriyle panel her zaman barin sag ucuna yapisiyordu ve ok, indirme dugmesini isaret ediyor gibi duruyordu. Dugme sayisi ekran genisligine gore degistigi icin bu konum stil sayfasindan hesaplanamaz. */ left: var(--zcr-pop-x, 0px); z-index: 30; width: 268px; padding: 0.9rem 1rem 1rem; background: var(--zcr-shell-2, var(--zcr-shell)); border: 1px solid var(--zcr-shell-line); border-top: 4px solid var(--zcr-teal-line); border-radius: 6px; box-shadow: 0 10px 28px rgba(0, 0, 0, .32); } /* Dugmeyi isaret eden ucgen: panelin hangi dugmeye ait oldugunu soyluyor. Iki ucgen ust uste - disttaki kenarlik rengi, ictteki govde rengi. */ .zcr_fmt::before, .zcr_fmt::after { content: ""; position: absolute; left: var(--zcr-caret-x, 50%); margin-left: -9px; border: 9px solid transparent; } .zcr_fmt::before { bottom: 100%; border-bottom-color: var(--zcr-teal-line); } .zcr_fmt::after { bottom: calc(100% - 4px); border-bottom-color: var(--zcr-shell-2, var(--zcr-shell)); } .zcr_fmt_b + .zcr_fmt_b, .zcr_fmt_row { margin-top: 0.95rem; } .zcr_fmt_row { display: flex; gap: 1.1rem; } .zcr_fmt_row .zcr_fmt_b { margin-top: 0; } .zcr_fmt_l { display: block; margin-bottom: 0.45rem; font-size: 0.7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--zcr-shell-dim); } .zcr_fmt_size { display: flex; align-items: center; gap: 0.6rem; } .zcr_fmt_rb { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; background: none; border: 1px solid var(--zcr-shell-line); border-radius: 50%; color: var(--zcr-shell-ink); cursor: pointer; } .zcr_fmt_rb:hover { border-color: var(--zcr-teal-line); color: var(--zcr-teal-line); } .zcr_fmt_pct { min-width: 3.4rem; text-align: center; font-size: 0.86rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--zcr-shell-ink); } /* Segment: iki dugme tek hap icinde, secili olan dolu. */ .zcr_seg { display: inline-flex; border: 1px solid var(--zcr-shell-line); border-radius: 999px; overflow: hidden; } .zcr_seg_b { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 34px; padding: 0; background: none; border: none; color: var(--zcr-shell-dim); cursor: pointer; } .zcr_seg_b + .zcr_seg_b { border-left: 1px solid var(--zcr-shell-line); } .zcr_seg_b:hover { color: var(--zcr-shell-ink); } .zcr_seg_b[aria-pressed="true"] { background: var(--zcr-teal); color: #fff; } /* Sayfa kutusu once BOS bir yer tutucu; tuval gorus alanina yaklasinca icine konuyor. Kutu bastan dogru olcude oldugu icin kaydirma cubugu ziplamiyor. */ .zcr_page { display: block; max-width: 100%; background: #fff; box-shadow: 0 2px 12px var(--zcr-page-shadow); } .zcr_page canvas { display: block; } .zcr_noscript, .zcr_hata { text-align: center; padding: 2rem; color: var(--zcr-shell-ink); } .zcr_hata a, .zcr_noscript a { color: var(--zcr-link); font-weight: 600; } /* --- Dar ekran ---------------------------------------------------------- */ @media (max-width: 860px) { :root { --zcr-panel-w: 86vw; } /* Mutlak konumda flex-basis islemiyor; genislik acikca verilmezse panel tum ekrani kapliyor ve kapanma mesafesi (86vw) yetmeyip kenarda bir serit birakiyordu. */ .zcr_panel { position: absolute; inset: 0 auto 0 0; width: var(--zcr-panel-w); z-index: 15; transition: transform 0.18s ease; } /* Mutlak konumda negatif margin islemedi (hesaplanan deger 0px kaldi); transform panelin KENDI genisligine gore kaydiriyor, dolayisiyla degisken ne olursa olsun tam olarak disari cikiyor. Masaustunde margin kaliyor: orada panel bir flex ogesi ve yerini de birakmasi gerekiyor, transform yer birakmaz. */ body.zcr[data-zcr-panel="off"] .zcr_panel { margin-left: 0; transform: translateX(-100%); } .zcr_brand_txt, .zcr_chip { display: none; } .zcr_right .zcr_ico:not(#zcrSearch):not(#zcrTheme):not(#zcrFormat) { display: none; } /* Panel dar ekranda barin sagina degil, tam genisligine yakin aciliyor. */ /* Dar ekranda ayri konum kurali YOK: JS paneli bar icine kirpiyor ve oku dugmenin uzerinde tutuyor, iki ekran icin tek davranis kaliyor. */ .zcr_fmt { max-width: calc(100vw - 1rem); } /* Telefonda cubuk tasiyordu: sag uctaki tema ve indirme dugmeleri ekran disinda kaliyordu (kullanicinin 430pt'lik ekran goruntusu). Yer kazanmak icin basa/sona dugmeleri, "Page" kelimesi ve bosluklar kisiliyor. */ #zcrGoFirst, #zcrGoLast { display: none; } .zcr_pagelabel { display: none; } .zcr_bar { gap: 0.4rem; padding: 0 0.45rem; } .zcr_center { gap: 0.25rem; } .zcr_right { gap: 0.05rem; } /* Dergi adi gizlenince geri oku ile "onceki sayfa" oku yan yana kaliyor ve tek bir ikon gibi okunuyordu; ince bir ayrac ikisini ayiriyor. */ .zcr_center { margin-left: 0.35rem; padding-left: 0.45rem; border-left: 1px solid var(--zcr-shell-line); } } /* Cok dar telefonlarda (iPhone SE/13 mini ve 375-414pt sinifi) ileri/geri de sigmiyor. Kaydirma zaten birincil gezinme; sayac ve dogrudan sayfa yazma kaliyor. */ @media (max-width: 414px) { #zcrGoPrev, #zcrGoNext { display: none; } } /* --- Details paneli ----------------------------------------------------- */ /* Ust blok: sayi kapagi solda, dergi adi saginda. Kapak yoksa metin tek sutuna dusuyor - grid yerine flex, cunku eksik hucre bosluk birakmamali. */ .zcr_head { display: flex; gap: 0.85rem; align-items: flex-start; margin: 0.2rem 0 1rem; } .zcr_cover { flex: 0 0 84px; display: block; } .zcr_cover img { width: 100%; height: auto; display: block; border: 1px solid var(--zcr-shell-line); } .zcr_head_t { min-width: 0; } .zcr_jname { display: block; font-weight: 600; text-decoration: underline; } .zcr_iname { display: block; margin-top: 0.2rem; color: var(--zcr-shell-dim); font-size: 0.86rem; } .zcr_sect { margin: 0 0 0.35rem; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--zcr-shell-dim); } .zcr_viewpage { margin: 0 0 0.8rem; font-size: 0.9rem; } /* Yazarlar kunyenin gerisinden bir tik one cikiyor: baslikla birlikte makaleyi tanitan asil satir o, gri bir dipnot degil. */ .zcr_alist { margin: 0 0 0.9rem; font-size: 0.97rem; color: var(--zcr-shell-soft); } /* Yazar adi ile ORCID isareti tek parca: satir sonuna denk gelen son yazarin ikonu tek basina alt satira dusuyordu. Kirilma yalnizca virgulden sonra olsun diye ad+ikon bir arada tutuluyor. */ .zcr_a { white-space: nowrap; } .zcr_actions { margin: 0 0 0.9rem; } .zcr_cite { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 4px; background: var(--zcr-shell-2); color: var(--zcr-shell-ink); font-size: 0.78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; } .zcr_cite:hover { filter: brightness(1.12); } /* Panelin son satiri: artik lisansin altinda duruyor, bu yuzden alt bosluk yerine ust bosluk aliyor. */ .zcr_copy { margin: 0.35rem 0 0; font-size: 0.82rem; font-weight: 600; color: var(--zcr-shell-dim); } .zcr_doi { margin: 0; font-size: 0.86rem; word-break: break-all; } .zcr_rule { border: none; border-top: 1px solid var(--zcr-shell-line); margin: 1.1rem 0; } /* Ozet HTML tasiyor (Aim/Methods/Results). Yazarin girdigi baslik etiketleri panelin olcusune indiriliyor ki 24px'lik bir

panelde patlamasin. */ .zcr_abs :is(h1,h2,h3,h4) { font-size: 0.86rem; margin: 0.8rem 0 0.2rem; } .zcr_abs p { margin: 0 0 0.6rem; } .zcr_abs strong { color: var(--zcr-shell-ink); } /* ORCID: makale sayfasindaki gibi ikon, ikonun kendisi baglanti. Yazi yerine ikon, cunku yazar listesi virgullu tek satir - "ORCID" kelimesi her adin ardinda tekrarlaninca satir okunmaz oluyordu. */ .zcr_orcid { display: inline-block; margin-left: 0.25rem; vertical-align: -0.18em; text-decoration: none; } .zcr_orcid_i { width: 15px; height: 15px; display: block; } .zcr_sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* AMA atfi: CITE dugmesinin hemen altinda, secilebilir. */ .zcr_ama { margin: -0.4rem 0 0.9rem; padding: 0.55rem 0.7rem; border-left: 3px solid var(--zcr-teal); background: var(--zcr-shell-2); font-size: 0.82rem; line-height: 1.45; color: var(--zcr-shell-dim); user-select: all; } /* DOI adresi ORTASINDAN bolunmesin: "https://doi" den sonra kesilip alt satira gecince adres okunmaz oluyordu. Baglanti butun olarak alt satira iniyor; panel 360px, adres ~230px, sigiyor. */ .zcr_ama a { white-space: nowrap; } .zcr_ama { overflow-wrap: break-word; } /* --- Yazdirma ----------------------------------------------------------- */ /* Kabuk, panel ve ray yazdirmada yok; yalnizca sayfalar, her biri kendi yapragina. Golge ve zemin de kalkiyor - yazicida gri bir cerceve olarak cikiyorlardi. */ @media print { .zcr_bar, .zcr_panel, .zcr_find, .zcr_rail { display: none !important; } /* position:static SART: sabit kabuk yazdirmada tek sayfaya sikisiyordu. */ body.zcr, .zcr_body, .zcr_stage { position: static; height: auto; overflow: visible; background: #fff; display: block; } /* Akis/yerlesim secicileri (0,2,1) yukaridaki baski kurallarindan (0,1,1) daha ozgul; baskida bunlarin hicbiri gecerli olmamali. */ body.zcr[data-zcr-flow] .zcr_stage { overflow: visible !important; scroll-snap-type: none !important; padding: 0 !important; } body.zcr[data-zcr-flow] .zcr_pages, body.zcr[data-zcr-layout] .zcr_pages { display: block !important; min-height: 0 !important; padding: 0 !important; } .zcr_fmt { display: none !important; } html { height: auto; overflow: visible; } .zcr_stage { padding: 0; } .zcr_pages { display: block; } .zcr_page { box-shadow: none; margin: 0 auto; break-after: page; page-break-after: always; } .zcr_page:last-child { break-after: auto; page-break-after: auto; } .zcr_page canvas { width: 100% !important; height: auto !important; } } /* --- Bolum basliklarinin renkleri --------------------------------------- */ /* ABSTRACT turuncu, KEYWORDS ORCID yesili: panelde uc bolum var ve hepsi ayni gri tonda oldugunda goz nerede oldugunu kaybediyordu. Renkler sayfada zaten bulunan tonlardan seciliyor - yeni bir renk katmiyor. */ :root { --zcr-orange: #f59042; --zcr-green: #a6ce39; } .zcr_pane h3.zcr_h_abs { color: var(--zcr-orange); } /* KEYWORDS basligi, ozetteki Aim/Methodology etiketleriyle ayni ton. */ .zcr_pane h3.zcr_h_kw { color: var(--zcr-teal-line); } /* Ozetteki yazar basliklari (Aim, Methodology, Results...) sayfanin mavi-yesili. Kalin metnin tamami degil - yalnizca cumle basindaki etiketler bold geliyor, gerisi duz. */ .zcr_abs strong, .zcr_abs b, .zcr_abs :is(h1,h2,h3,h4) { color: var(--zcr-teal-line); } /* Anahtar kelimeler: uzerine gelince turuncu. Tiklanabilir degiller, ama hover geri bildirimi listeyi taranabilir kiliyor. */ .zcr_kw li { transition: color 0.14s ease, border-color 0.14s ease; } .zcr_kw li a { display: block; color: inherit; text-decoration: none; } .zcr_kw li:hover { color: var(--zcr-orange); border-color: var(--zcr-orange); } /* --- Metin katmani ------------------------------------------------------ */ /* Tuvalin uzerinde seffaf, secilebilir metin. PDF.js span'lari mutlak konumluyor; asagidaki kume viewer.css'ten yalnizca isleyen icin gerekli olanlar - vurgulama ve duzenleme kurallari alinmadi, o ozellikler burada yok. */ .zcr_page { position: relative; } .textLayer { position: absolute; inset: 0; overflow: clip; opacity: 1; line-height: 1; text-align: initial; text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; caret-color: CanvasText; z-index: 1; } .textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; } .textLayer span.markedContent { top: 0; height: 0; } .textLayer span[role="img"] { user-select: none; cursor: default; } /* Secim rengi: seffaf metnin uzerinde varsayilan mavi, koyu temada sayfayla catisiyordu. */ .textLayer ::selection { background: rgba(79, 195, 215, 0.35); } /* Yazdirmada metin katmani gereksiz - tuval zaten her seyi tasiyor ve seffaf span'lar bazi yazicilarda hayalet iz birakiyor. */ @media print { .textLayer { display: none !important; } } /* --- Arama isaretleri --------------------------------------------------- */ /* Custom Highlight API: dokuman degismiyor, yalnizca boyaniyor. Metin katmani SEFFAF oldugu icin isaret, altindaki tuvalde duran gercek harflerin uzerine bir renk katmani gibi biniyor - bu yuzden yari saydam. */ ::highlight(zcr-find) { background-color: rgba(245, 200, 66, 0.42); } /* Etkin eslesme daha belirgin: goz onlarca isaret arasinda hangisinde oldugunu bulabilmeli. */ ::highlight(zcr-find-on) { background-color: rgba(245, 144, 66, 0.75); } /* --- Baglanti katmani --------------------------------------------------- */ /* PDF'in kendi baglantilari icin saydam tiklama alanlari. Gorunmez duruyorlar; yalnizca imlec degisiyor ve uzerine gelince hafif bir vurgu beliriyor - okuyucu tiklanabilir bir yer oldugunu anlasin diye. Metin katmaninin USTUNDE, cunku ikisi de ayni bolgeyi kapliyor ve tikin baglantiya gitmesi gerekiyor; metin secimi baglanti disinda kalan her yerde calisiyor. */ .zcr_links { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .zcr_link { position: absolute; display: block; pointer-events: auto; border-radius: 2px; transition: background-color 0.12s ease, box-shadow 0.12s ease; } .zcr_link:hover, .zcr_link:focus-visible { background-color: rgba(79, 195, 215, 0.22); box-shadow: 0 0 0 1px rgba(79, 195, 215, 0.55); outline: none; } /* Yazdirmada tiklama alanlari gereksiz. */ @media print { .zcr_links { display: none !important; } } /* --- Atfi kopyala dugmesi ----------------------------------------------- */ .zcr_actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; } .zcr_copy_b { display: inline-flex; align-items: center; justify-content: center; /* flex-shrink kapali: .zcr_actions bir flex satiri ve dugmenin gorunur icerigi artik yalnizca 16px'lik bir ikon - varsayilan kucultmeyle 34px'lik kutu 18px'e iniyordu. */ flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 1px solid var(--zcr-shell-line); border-radius: 4px; background: transparent; color: var(--zcr-shell-dim); font: inherit; cursor: pointer; } .zcr_copy_b:hover { color: var(--zcr-shell-ink); border-color: var(--zcr-shell-dim); } .zcr_copy_b:focus-visible { outline: 2px solid var(--zcr-teal-line); outline-offset: 1px; } .zcr_copy_b .zcr_i { width: 16px; height: 16px; } /* Onay durumu: ayni dugme yesile donuyor ve ikon tike degisiyor. Iki ikon da isaretlemede duruyor, yalnizca hangisinin gorunecegi degisiyor - ikon degistirmek icin JS'te SVG kurmak gereksiz. */ .zcr_check_i { display: none; } .zcr_copy_b.zcr_copied { color: #7fc98f; border-color: #7fc98f; } .zcr_copy_b.zcr_copied .zcr_copy_i { display: none; } .zcr_copy_b.zcr_copied .zcr_check_i { display: block; }