/*
* TRManga - Modern bolum okuyucu (chapter-v2)
* Bootswatch tema sisteminin ve assets/darkmode/* dosyalarinin yerini alir.
* Renkler CSS degiskenleri uzerinden; mod ile secilir.
* Tasarim dili profil (pf-*) ve fansub (fs-*) sayfalariyla ayni: accent #5b6be0,
* pill 999px, kart 12-14px, golge 0 2px 12px, gecis .15s ease.
*/
/* ============================================================
1) Tasarim token'lari ve okuma modlari
============================================================ */
:root {
--rd-accent: #5b6be0;
--rd-accent-hover: #4a58c9;
--rd-accent-soft: rgba(91, 107, 224, .1);
--rd-purple: #7b2ff7;
--rd-danger: #e0603a;
--rd-success: #2fb344;
--rd-radius-pill: 999px;
--rd-radius-card: 14px;
--rd-radius-sm: 10px;
--rd-shadow-card: 0 2px 12px rgba(0, 0, 0, .06);
--rd-shadow-pop: 0 8px 28px rgba(0, 0, 0, .18);
--rd-transition: .15s ease;
--rd-bar-height: 54px;
--rd-reader-width: 720px;
--rd-font: "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}
/* Acik mod (varsayilan) */
:root,
html[data-reader-mode="light"] {
--rd-bg: #eff1f5;
--rd-surface: #ffffff;
--rd-surface-2: #f6f7f9;
--rd-surface-3: #eceef2;
--rd-text: #1a1d21;
--rd-text-muted: #6b7280;
--rd-border: #e2e6ea;
--rd-reader-bg: #e4e7ec;
--rd-overlay: rgba(255, 255, 255, .92);
--rd-shadow-card: 0 2px 12px rgba(0, 0, 0, .06);
}
/* Koyu mod */
html[data-reader-mode="dark"] {
--rd-bg: #12151c;
--rd-surface: #1a1f29;
--rd-surface-2: #222834;
--rd-surface-3: #2a313f;
--rd-text: #e6eaf0;
--rd-text-muted: #98a2b3;
--rd-border: #2c3340;
--rd-reader-bg: #0d1015;
--rd-overlay: rgba(18, 21, 28, .94);
--rd-shadow-card: 0 2px 12px rgba(0, 0, 0, .35);
--rd-shadow-pop: 0 8px 28px rgba(0, 0, 0, .55);
}
/* OLED tam siyah */
html[data-reader-mode="oled"] {
--rd-bg: #000000;
--rd-surface: #0a0a0a;
--rd-surface-2: #141414;
--rd-surface-3: #1c1c1c;
--rd-text: #d8dde5;
--rd-text-muted: #8b929e;
--rd-border: #1f1f1f;
--rd-reader-bg: #000000;
--rd-overlay: rgba(0, 0, 0, .95);
--rd-shadow-card: 0 2px 12px rgba(0, 0, 0, .6);
--rd-shadow-pop: 0 8px 28px rgba(0, 0, 0, .8);
}
/* Okuma genisligi tercihleri */
html[data-reader-width="narrow"] { --rd-reader-width: 560px; }
html[data-reader-width="medium"] { --rd-reader-width: 720px; }
html[data-reader-width="wide"] { --rd-reader-width: 1100px; }
/* ============================================================
2) Temel
============================================================ */
html { scroll-behavior: smooth; }
body {
background: var(--rd-bg);
color: var(--rd-text);
font-family: var(--rd-font);
font-size: 15px;
line-height: 1.55;
margin: 0;
padding: 0;
overflow-x: hidden;
position: relative;
-webkit-tap-highlight-color: transparent;
}
body.rd-body { padding-bottom: 0; }
a { color: var(--rd-accent); text-decoration: none; transition: color var(--rd-transition); }
a:hover { color: var(--rd-accent-hover); }
/* Sayfa kabi */
.rd-wrap {
max-width: 1180px;
margin: 0 auto;
padding: 0 14px;
}
.rd-section { margin: 18px 0; }
/* Kart */
.rd-card {
background: var(--rd-surface);
border: 1px solid var(--rd-border);
border-radius: var(--rd-radius-card);
box-shadow: var(--rd-shadow-card);
}
/* Butonlar */
.rd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 9px 18px;
border-radius: var(--rd-radius-pill);
border: 1px solid var(--rd-border);
background: var(--rd-surface);
color: var(--rd-text);
font-size: .875rem;
font-weight: 600;
cursor: pointer;
text-decoration: none;
transition: all var(--rd-transition);
white-space: nowrap;
line-height: 1.2;
}
.rd-btn:hover {
border-color: var(--rd-accent);
color: var(--rd-accent);
background: var(--rd-accent-soft);
}
.rd-btn-primary {
background: var(--rd-accent);
border-color: var(--rd-accent);
color: #fff;
}
.rd-btn-primary:hover {
background: var(--rd-accent-hover);
border-color: var(--rd-accent-hover);
color: #fff;
}
.rd-btn-lg { padding: 12px 24px; font-size: .95rem; }
.rd-btn-sm { padding: 6px 13px; font-size: .8rem; }
.rd-btn-icon { padding: 8px; width: 38px; height: 38px; }
.rd-btn[disabled], .rd-btn.is-disabled { opacity: .45; pointer-events: none; }
/* Chip / etiket */
.rd-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: var(--rd-radius-pill);
background: var(--rd-surface-2);
border: 1px solid var(--rd-border);
color: var(--rd-text-muted);
font-size: .78rem;
font-weight: 600;
}
.rd-chip-accent {
background: var(--rd-accent-soft);
border-color: rgba(91, 107, 224, .28);
color: var(--rd-accent);
}
.rd-chip-read {
background: rgba(47, 179, 68, .12);
border-color: rgba(47, 179, 68, .3);
color: var(--rd-success);
}
/* Bildirim kutusu */
.rd-notice {
border: 1px solid var(--rd-border);
border-left: 3px solid var(--rd-accent);
border-radius: var(--rd-radius-sm);
background: var(--rd-surface);
padding: 14px 16px;
box-shadow: var(--rd-shadow-card);
}
.rd-notice h4 {
font-size: .95rem;
font-weight: 700;
margin: 0 0 6px;
}
.rd-notice p { margin: 0; font-size: .86rem; color: var(--rd-text-muted); }
.rd-notice-warn { border-left-color: #f0a020; }
.rd-notice-danger { border-left-color: var(--rd-danger); }
/* ============================================================
3) Sticky ust bar + ilerleme cubugu
============================================================ */
.rd-topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: var(--rd-bar-height);
background: var(--rd-overlay);
backdrop-filter: saturate(150%) blur(12px);
-webkit-backdrop-filter: saturate(150%) blur(12px);
border-bottom: 1px solid var(--rd-border);
z-index: 1035;
transition: transform .25s ease;
}
.rd-topbar.is-hidden { transform: translateY(-100%); }
.rd-topbar-inner {
max-width: 1180px;
height: 100%;
margin: 0 auto;
padding: 0 14px;
display: flex;
align-items: center;
gap: 10px;
}
.rd-logo { display: flex; align-items: center; flex: 0 0 auto; }
.rd-logo img { height: 30px; width: auto; display: block; }
.rd-topbar-title {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
line-height: 1.2;
}
.rd-topbar-series {
font-size: .86rem;
font-weight: 700;
color: var(--rd-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rd-topbar-series:hover { color: var(--rd-accent); }
.rd-topbar-chapter {
font-size: .72rem;
color: var(--rd-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rd-topbar-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* Ilerleme cubugu */
.rd-progress {
position: fixed;
top: var(--rd-bar-height);
left: 0;
right: 0;
height: 3px;
background: transparent;
z-index: 1036;
pointer-events: none;
transition: top .25s ease;
}
.rd-topbar.is-hidden + .rd-progress { top: 0; }
.rd-progress-fill {
height: 100%;
width: 0;
background: linear-gradient(90deg, var(--rd-accent), var(--rd-purple));
transition: width .1s linear;
}
/* Ust bar yuksekligi kadar bosluk */
.rd-topbar-spacer { height: var(--rd-bar-height); }
/* ============================================================
4) Bolum basligi karti (hero)
============================================================ */
.rd-hero {
display: flex;
gap: 16px;
padding: 16px;
align-items: flex-start;
}
.rd-hero-cover {
flex: 0 0 auto;
width: 76px;
height: 108px;
border-radius: var(--rd-radius-sm);
object-fit: cover;
background: var(--rd-surface-3);
box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
}
.rd-hero-body { flex: 1 1 auto; min-width: 0; }
.rd-hero-series {
display: block;
font-size: .8rem;
font-weight: 600;
color: var(--rd-text-muted);
margin-bottom: 2px;
}
.rd-hero-series:hover { color: var(--rd-accent); }
.rd-hero-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--rd-text);
margin: 0 0 10px;
line-height: 1.3;
}
.rd-hero-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-bottom: 12px;
}
.rd-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Emektarlar */
.rd-crew { margin-top: 14px; }
.rd-crew-label {
display: block;
font-size: .78rem;
font-weight: 700;
color: var(--rd-text-muted);
margin-bottom: 8px;
}
.rd-crew-list { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-crew-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 4px 12px 4px 4px;
border-radius: var(--rd-radius-pill);
background: var(--rd-surface-2);
border: 1px solid var(--rd-border);
color: var(--rd-text);
font-size: .8rem;
font-weight: 600;
text-decoration: none;
transition: all var(--rd-transition);
}
.rd-crew-chip:hover {
border-color: var(--rd-accent);
color: var(--rd-accent);
background: var(--rd-accent-soft);
}
.rd-crew-chip img {
width: 26px;
height: 26px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
}
/* ============================================================
5) Okuyucu alani
============================================================ */
.rd-reader {
background: var(--rd-reader-bg);
border-radius: var(--rd-radius-card);
padding: 0;
overflow: hidden;
transition: background var(--rd-transition);
}
#images {
max-width: var(--rd-reader-width);
margin: 0 auto;
min-height: 100vh;
font-size: 0;
transition: max-width var(--rd-transition);
}
/*
* Gorsel yer rezervasyonu (CLS): kutu yuksekligi bastan ayrilir, spinner CSS
* arka plani olarak gosterilir (ayri gif istegi atilmaz). Eski surumden bire bir.
*/
#images .reader-img {
width: 100%;
height: auto;
display: block;
margin: 0;
background-color: var(--rd-surface-3);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center 40vh;
background-size: 48px 48px;
}
/*
* Boyutu bilinmeyen (henuz backfill edilmemis) gorseller icin varsayilan oran.
* Icerigin ~%85'i uzun-strip webtoon (medyan w/h ~= 0.235); tahmin 1/4.
*/
#images .reader-img-est { aspect-ratio: auto 1 / 4; }
#images .reader-img.is-loaded {
background-image: none;
background-color: transparent;
}
/* Uyelere ozel seri kilidi */
.rd-lock {
text-align: center;
padding: 40px 20px;
}
.rd-lock-icon {
font-size: 2.4rem;
color: var(--rd-accent);
margin-bottom: 14px;
}
.rd-lock h3 {
font-size: 1.2rem;
font-weight: 700;
margin: 0 0 10px;
}
.rd-lock p {
color: var(--rd-text-muted);
font-size: .9rem;
max-width: 440px;
margin: 0 auto 18px;
}
.rd-lock-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
/* ============================================================
6) Navigasyon
============================================================ */
.rd-nav {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
}
.rd-nav .rd-btn { flex: 1 1 0; min-width: 0; }
.rd-nav-center { flex: 1 1 auto; text-align: center; }
.rd-nav-last {
font-size: .82rem;
color: var(--rd-text-muted);
font-weight: 600;
text-align: center;
flex: 1 1 auto;
}
/* Bolum secici (native select: mobilde en hizli ve erisilebilir) */
.rd-select {
appearance: none;
-webkit-appearance: none;
background-color: var(--rd-surface);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
border: 1px solid var(--rd-border);
border-radius: var(--rd-radius-pill);
color: var(--rd-text);
font-size: .85rem;
font-weight: 600;
padding: 9px 32px 9px 16px;
cursor: pointer;
max-width: 100%;
text-overflow: ellipsis;
transition: border-color var(--rd-transition);
}
.rd-select:hover, .rd-select:focus {
border-color: var(--rd-accent);
outline: none;
}
.rd-select-sm { padding: 6px 30px 6px 13px; font-size: .8rem; }
/* Mobil sabit alt bar */
.rd-bottombar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: none;
background: var(--rd-overlay);
backdrop-filter: saturate(150%) blur(12px);
-webkit-backdrop-filter: saturate(150%) blur(12px);
border-top: 1px solid var(--rd-border);
z-index: 1034;
padding: 6px 8px;
padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
transition: transform .25s ease;
}
.rd-bottombar.is-hidden { transform: translateY(120%); }
.rd-bottombar-inner {
display: flex;
align-items: stretch;
gap: 4px;
max-width: 640px;
margin: 0 auto;
}
.rd-bb-item {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 6px 2px;
border: none;
background: transparent;
color: var(--rd-text-muted);
font-size: .68rem;
font-weight: 600;
border-radius: var(--rd-radius-sm);
cursor: pointer;
text-decoration: none;
transition: all var(--rd-transition);
}
.rd-bb-item i { font-size: 1.05rem; }
.rd-bb-item:active { background: var(--rd-surface-2); }
.rd-bb-item.is-disabled { opacity: .35; pointer-events: none; }
.rd-bb-item.is-accent { color: var(--rd-accent); }
/* Scroll to top */
.rd-totop {
position: fixed;
right: 18px;
bottom: 84px;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--rd-border);
background: var(--rd-surface);
color: var(--rd-text);
box-shadow: var(--rd-shadow-pop);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition: all .25s ease;
z-index: 1033;
}
.rd-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.rd-totop:hover { border-color: var(--rd-accent); color: var(--rd-accent); }
/* ============================================================
7) Reklam yuvalari
============================================================ */
.rd-ad {
background: var(--rd-surface);
border: 1px solid var(--rd-border);
border-radius: var(--rd-radius-sm);
padding: 10px;
overflow: hidden;
}
.rd-ad-label {
display: block;
font-size: .64rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--rd-text-muted);
margin-bottom: 8px;
text-align: center;
opacity: .7;
}
.rd-ad-body { text-align: center; min-height: 1px; }
.rd-ad-body img { max-width: 100%; height: auto; border-radius: 6px; }
.rd-ad-inline { margin: 14px 0; }
/* ============================================================
8) Fansub secim overlay
============================================================ */
.rd-fansub-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, .82);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1080;
padding: 18px;
}
.rd-fansub-modal {
background: var(--rd-surface);
color: var(--rd-text);
border: 1px solid var(--rd-border);
border-radius: var(--rd-radius-card);
box-shadow: var(--rd-shadow-pop);
padding: 26px 22px;
max-width: 440px;
width: 100%;
text-align: center;
}
.rd-fansub-modal h4 {
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 8px;
}
.rd-fansub-modal p {
color: var(--rd-text-muted);
font-size: .86rem;
margin: 0 0 18px;
}
.rd-fansub-options { display: flex; flex-direction: column; gap: 10px; }
.rd-fansub-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 13px 18px;
border-radius: var(--rd-radius-pill);
background: var(--rd-accent);
border: 1px solid var(--rd-accent);
color: #fff;
font-weight: 600;
font-size: .9rem;
text-decoration: none;
transition: all var(--rd-transition);
}
.rd-fansub-option:hover {
background: var(--rd-accent-hover);
border-color: var(--rd-accent-hover);
color: #fff;
transform: translateY(-1px);
}
/* ============================================================
9) Okuma modu / genislik secici paneli
============================================================ */
.rd-pop {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 208px;
background: var(--rd-surface);
border: 1px solid var(--rd-border);
border-radius: var(--rd-radius-sm);
box-shadow: var(--rd-shadow-pop);
padding: 10px;
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity .12s ease, transform .12s ease, visibility .12s;
z-index: 1040;
}
.rd-pop.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.rd-pop-wrap { position: relative; }
.rd-pop-title {
display: block;
font-size: .68rem;
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--rd-text-muted);
margin: 4px 4px 8px;
}
.rd-pop-row { display: flex; gap: 6px; margin-bottom: 10px; }
.rd-pop-row:last-child { margin-bottom: 0; }
.rd-mode-btn {
flex: 1 1 0;
padding: 9px 6px;
border-radius: var(--rd-radius-sm);
border: 1px solid var(--rd-border);
background: var(--rd-surface-2);
color: var(--rd-text);
font-size: .74rem;
font-weight: 600;
cursor: pointer;
transition: all var(--rd-transition);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.rd-mode-btn i { font-size: .95rem; }
.rd-mode-btn:hover { border-color: var(--rd-accent); color: var(--rd-accent); }
.rd-mode-btn.is-active {
background: var(--rd-accent);
border-color: var(--rd-accent);
color: #fff;
}
/* ============================================================
10) Yorum kurallari / duyuru bloklari
============================================================ */
.rd-rules { display: grid; gap: 8px; }
.rd-rule {
padding: 11px 14px;
border-radius: var(--rd-radius-sm);
background: var(--rd-surface-2);
border: 1px solid var(--rd-border);
border-left: 3px solid var(--rd-border);
font-size: .84rem;
color: var(--rd-text-muted);
}
.rd-rule b { color: var(--rd-text); }
.rd-rule:nth-child(1) { border-left-color: var(--rd-danger); }
.rd-rule:nth-child(2) { border-left-color: #f0a020; }
.rd-rule:nth-child(3) { border-left-color: var(--rd-accent); }
.rd-rule:nth-child(4) { border-left-color: var(--rd-success); }
/* Paylasim */
.rd-share { text-align: center; padding: 16px; }
.rd-share-label {
display: block;
font-size: .78rem;
font-weight: 700;
color: var(--rd-text-muted);
margin-bottom: 12px;
letter-spacing: .04em;
}
.rd-share .ss-box { justify-content: center; display: flex; flex-wrap: wrap; gap: 6px; }
/* Yorum bolumu kabi */
.rd-comments { margin-top: 18px; }
/* ============================================================
11) Baslik / bolum ayirici
============================================================ */
.rd-heading {
display: flex;
align-items: center;
gap: 10px;
font-size: .95rem;
font-weight: 700;
color: var(--rd-text);
margin: 0 0 12px;
}
.rd-heading i { color: var(--rd-accent); }
/* ============================================================
12) Bootstrap uyumu (modal / dropdown temasi)
============================================================ */
.modal-content {
background: var(--rd-surface);
color: var(--rd-text);
border: 1px solid var(--rd-border);
border-radius: var(--rd-radius-card);
}
.modal-header, .modal-footer { border-color: var(--rd-border); }
.modal-title { font-weight: 700; font-size: 1rem; }
.modal-content .form-control {
background: var(--rd-surface-2);
border: 1px solid var(--rd-border);
color: var(--rd-text);
border-radius: var(--rd-radius-sm);
font-size: .88rem;
}
.modal-content .form-control:focus {
background: var(--rd-surface-2);
border-color: var(--rd-accent);
color: var(--rd-text);
box-shadow: 0 0 0 3px var(--rd-accent-soft);
}
.modal-content .form-label {
font-size: .82rem;
font-weight: 600;
color: var(--rd-text-muted);
margin-bottom: 5px;
}
.modal-content .btn-primary {
background: var(--rd-accent);
border-color: var(--rd-accent);
border-radius: var(--rd-radius-pill);
font-weight: 600;
padding: 8px 20px;
}
.modal-content .btn-primary:hover {
background: var(--rd-accent-hover);
border-color: var(--rd-accent-hover);
}
.modal-content .btn-secondary {
background: var(--rd-surface-2);
border-color: var(--rd-border);
color: var(--rd-text);
border-radius: var(--rd-radius-pill);
font-weight: 600;
padding: 8px 20px;
}
/* ============================================================
13) Responsive
============================================================ */
@media (max-width: 767.98px) {
.rd-wrap { padding: 0 10px; }
.rd-section { margin: 12px 0; }
.rd-bottombar { display: block; }
/* Alt bar yuksekligi kadar bosluk */
body.rd-body { padding-bottom: 62px; }
.rd-totop { bottom: 76px; right: 12px; width: 40px; height: 40px; }
.rd-hero { padding: 14px; gap: 12px; }
.rd-hero-cover { width: 60px; height: 86px; }
.rd-hero-title { font-size: 1rem; }
/* Okuyucu mobilde tam genislik */
.rd-reader { border-radius: 0; margin-left: -10px; margin-right: -10px; }
#images { max-width: 100%; }
.rd-nav { padding: 12px; flex-wrap: wrap; }
.rd-nav .rd-btn { flex: 1 1 45%; }
.rd-logo img { height: 26px; }
.rd-topbar-inner { gap: 8px; padding: 0 10px; }
.rd-fansub-modal { padding: 22px 16px; }
}
@media (max-width: 400px) {
.rd-hero { flex-direction: column; align-items: center; text-align: center; }
.rd-hero-meta, .rd-hero-actions, .rd-crew-list { justify-content: center; }
}
/* Masaustunde alt bari gizle */
@media (min-width: 768px) {
.rd-bottombar { display: none !important; }
}
/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.rd-topbar, .rd-bottombar, .rd-totop, .rd-progress-fill { transition: none; }
}
/* Yazdirma: sadece gorseller */
@media print {
.rd-topbar, .rd-bottombar, .rd-totop, .rd-progress, .rd-ad,
.rd-nav, .rd-share, .rd-rules, .rd-comments { display: none !important; }
body { background: #fff; }
}