/* Reader enhancements: themes, typography, toolbar, progress, search */

:root {
	--bg: #ffffff;
	--fg: #2b2b2b;
	--muted: #7a7a7a;
	--accent: #038D98;
	--accent-2: #dd1338;
	--panel: #ffffff;
	--panel-border: rgba(0,0,0,0.12);
	--fs: 1.15rem;
	--ff: 'Times New Roman', Times, serif;
}

html.theme-sepia {
	--bg: #f4ecd8;
	--fg: #4a3b26;
	--muted: #8a7557;
	--panel: #fbf6e8;
	--panel-border: rgba(74,59,38,0.2);
}

html.theme-dark {
	--bg: #16191d;
	--fg: #d6d2c8;
	--muted: #8b8f96;
	--panel: #20252b;
	--panel-border: rgba(255,255,255,0.14);
}

body,
.bb-bookblock,
.bb-content,
.js .bb-item,
.jspCap,
.jspCorner {
	background: var(--bg);
	color: var(--fg);
}

html.theme-dark,
html.theme-sepia { background: var(--bg); }

.js .content:before {
	background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
}
.js .content:after {
	background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
}

.content h1 {
	font-family: var(--ff);
	font-weight: 700;
	font-size: 1.9em;
	letter-spacing: 0.04em;
	text-align: center;
	color: var(--accent-2);
	margin: 0.4em 0 0.8em;
	padding-bottom: 0.4em;
	border-bottom: 1px solid var(--panel-border);
}

.content p {
	font-family: var(--ff);
	font-size: var(--fs);
	line-height: 1.75;
	font-weight: 400;
	color: var(--fg);
	margin: 0 auto 0.85em;
	max-width: var(--measure, 46em);
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* short paragraphs are section headings in this book (e.g. "Ölüm Sekeratı") */
.content p.sub-heading {
	font-weight: 700;
	text-align: left;
	color: var(--accent);
	margin-top: 1.4em;
	margin-bottom: 0.5em;
}

/* TOC page: dotted leaders look cleaner when allowed to clip */
.content p.toc-line {
	text-align: left;
	margin-bottom: 0.15em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: clip;
	cursor: pointer;
}
.content p.toc-line:hover { color: var(--accent-2); }

.scroller { padding: 10px 6% 40px; }

.jspDrag { background: var(--bg); border-color: var(--accent-2); }
.jspTrack { background: var(--panel-border); }

/* flash after jumping to a search hit */
.content p.search-flash { animation: searchFlash 2.4s ease-out; }
@keyframes searchFlash {
	0%, 40% { background: rgba(255, 200, 0, 0.45); }
	100%    { background: transparent; }
}
mark.hit { background: rgba(255, 200, 0, 0.55); color: inherit; border-radius: 2px; }

/* ---------- top reading progress ---------- */
#reader-progress {
	position: fixed; top: 0; left: 0; height: 3px; width: 0;
	background: var(--accent-2);
	z-index: 2000;
	transition: width 0.15s linear;
}

/* ---------- toolbar ---------- */
#reader-tools {
	position: fixed; top: 16px; right: 16px; z-index: 1500;
	display: flex; gap: 8px; align-items: flex-start;
}
.rt-btn {
	width: 36px; height: 36px; border-radius: 50%;
	border: 1px solid var(--panel-border);
	background: var(--panel); color: var(--fg);
	font: 700 15px/34px Georgia, serif; text-align: center;
	cursor: pointer; user-select: none;
	box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.rt-btn:hover, .rt-btn:focus-visible { background: var(--accent); color: #fff; outline: none; }

#reader-settings {
	position: absolute; top: 46px; right: 0; width: 250px;
	padding: 14px; border-radius: 10px;
	background: var(--panel); color: var(--fg);
	border: 1px solid var(--panel-border);
	box-shadow: 0 6px 24px rgba(0,0,0,0.25);
	font: 14px/1.4 Arial, Helvetica, sans-serif;
	display: none;
	max-height: 80vh; overflow-y: auto;
}
#reader-settings.open { display: block; }
#reader-settings h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 10px 0 6px; }
#reader-settings h4:first-child { margin-top: 0; }
.rs-row { display: flex; gap: 6px; }
.rs-row button {
	flex: 1; padding: 7px 4px; cursor: pointer; border-radius: 6px;
	border: 1px solid var(--panel-border); background: transparent; color: var(--fg);
	font: inherit;
}
.rs-row button.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.rs-row button[data-theme="light"] { background: #fff; color: #222; }
.rs-row button[data-theme="sepia"] { background: #f4ecd8; color: #4a3b26; }
.rs-row button[data-theme="dark"]  { background: #16191d; color: #d6d2c8; }
.rs-row button[data-theme].active  { outline: 2px solid var(--accent-2); outline-offset: 1px; }

/* ---------- footer status ---------- */
#reader-status {
	position: fixed; left: 0; right: 0; bottom: 14px; z-index: 1400;
	text-align: center; font: 13px Arial, Helvetica, sans-serif; color: var(--muted);
	pointer-events: none;
}

/* ---------- nav arrows ---------- */
.bb-custom-wrapper nav span,
.menu-button { box-shadow: 0 1px 4px rgba(0,0,0,0.25); }
.bb-custom-wrapper nav span { background: var(--accent-2); }
.bb-custom-wrapper nav span:hover, .menu-button:hover { background: var(--accent); }

/* ---------- search in menu panel ---------- */
.menu-search { padding: 0 14px; margin-top: 12px !important; }
.menu-search input {
	width: 100%; padding: 8px 10px; border-radius: 6px; border: none;
	font: 14px Arial, Helvetica, sans-serif; background: rgba(255,255,255,0.95); color: #222;
}
#search-results { list-style: none; margin: 8px 0 0; max-height: 40vh; overflow-y: auto; }
#search-results li {
	padding: 8px 14px; font: 12.5px/1.4 Arial, Helvetica, sans-serif; color: #fff;
	border-bottom: 1px solid #78CBD1; cursor: pointer;
}
#search-results li:hover { background: var(--accent-2); }
#search-results li b { display: block; font-size: 11px; opacity: 0.85; letter-spacing: 0.05em; }
#search-results li.empty { cursor: default; background: transparent; }
.menu-panel .menu-toc li a { transition: background 0.15s; }

@media (max-width: 600px) {
	#reader-settings { width: 220px; }
	.scroller { padding: 10px 5% 40px; }
	.content h1 { font-size: 1.5em; }
}

@media print {
	#reader-tools, #reader-progress, #reader-status, nav, .menu-button { display: none !important; }
}

/* ---------- bookmarks, speech, chapter end ---------- */
#bookmark-list { list-style: none; margin-top: 8px; max-height: 140px; overflow-y: auto; }
#bookmark-list li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--panel-border); font-size: 13px; }
#bookmark-list .bm-go { cursor: pointer; flex: 1; }
#bookmark-list .bm-go:hover { color: var(--accent); }
#bookmark-list .bm-del { cursor: pointer; color: var(--muted); padding: 0 4px; }
#bookmark-list .bm-del:hover { color: var(--accent-2); }
.content p.reading { background: rgba(3,141,152,0.18); border-radius: 4px; }
.chapter-end { text-align: center; margin: 2.5em 0 1em; }
.chapter-end button {
	padding: 10px 18px; border-radius: 22px; cursor: pointer; font: 14px Arial, Helvetica, sans-serif;
	border: 1px solid var(--accent); background: transparent; color: var(--accent);
}
.chapter-end button:hover { background: var(--accent); color: #fff; }

/* override the legacy 25% font-size rule that broke tiny screens */
@media screen and (max-width: 400px) {
	.menu-panel, .content { font-size: 100%; }
	#reader-status { font-size: 11px; }
}

/* ---------- cover ---------- */
#book-cover {
	position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
	background: radial-gradient(circle at 50% 35%, #0a6f78 0%, #04353a 70%);
	color: #f4ecd8; text-align: center; transition: opacity 0.6s ease, transform 0.6s ease;
}
#book-cover.hide { opacity: 0; transform: scale(1.04); pointer-events: none; }
#book-cover .cover-inner { padding: 40px 24px; max-width: 560px; border: 1px solid rgba(244,236,216,0.35); outline: 6px solid rgba(244,236,216,0.08); outline-offset: 10px; margin: 0 20px; }
#book-cover .cover-ornament { font-size: 28px; letter-spacing: 12px; opacity: 0.8; margin-bottom: 18px; }
#book-cover h1 { font: 700 clamp(30px, 6vw, 52px)/1.1 Georgia, 'Times New Roman', serif; letter-spacing: 0.03em; margin: 0 0 12px; }
#book-cover h2 { font: italic 400 20px Georgia, serif; opacity: 0.85; margin: 0 0 28px; }
#book-cover .cover-author { font: 600 18px Georgia, serif; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 34px; }
#cover-start { padding: 12px 30px; border-radius: 28px; border: 1px solid #f4ecd8; background: transparent; color: #f4ecd8; font: 16px Arial, sans-serif; cursor: pointer; }
#cover-start:hover, #cover-start:focus-visible { background: #f4ecd8; color: #04353a; outline: none; }

/* ---------- highlights ---------- */
mark.hl { background: rgba(255, 214, 10, 0.55); color: inherit; border-radius: 2px; }
html.theme-dark mark.hl { background: rgba(255, 214, 10, 0.35); }
mark.hl.has-note { border-bottom: 2px solid var(--accent-2); cursor: help; }
#hl-bar { position: fixed; z-index: 2500; display: flex; gap: 4px; padding: 5px; border-radius: 8px; background: #222; box-shadow: 0 4px 14px rgba(0,0,0,0.35); }
#hl-bar button { padding: 6px 12px; border: none; border-radius: 5px; background: #333; color: #fff; font: 13px Arial, sans-serif; cursor: pointer; }
#hl-bar button:hover { background: var(--accent); }
#hl-list { list-style: none; margin-top: 8px; max-height: 180px; overflow-y: auto; }
#hl-list li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--panel-border); font-size: 12.5px; }
#hl-list li.empty { color: var(--muted); }
#hl-list .bm-go { cursor: pointer; flex: 1; }
#hl-list .bm-go i { color: var(--muted); font-style: normal; font-size: 11px; display: block; }
#hl-list .bm-del { cursor: pointer; color: var(--muted); padding: 0 4px; }

.rs-links a {
	flex: 1; text-align: center; padding: 7px 4px; border-radius: 6px; text-decoration: none;
	border: 1px solid var(--panel-border); color: var(--fg);
}
.rs-links a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- table of contents page ---------- */
.toc { max-width: 38em; margin: 0 auto; padding-bottom: 1em; font-family: var(--ff); }
.toc-row {
	display: flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--fg);
	padding: 4px 6px; border-radius: 4px; line-height: 1.4;
}
.toc-row:hover { background: var(--panel-border); color: var(--fg); }
.toc-row .t { flex: 0 1 auto; }
.toc-row .dots { flex: 1 1 auto; min-width: 16px; border-bottom: 1px dotted var(--muted); transform: translateY(-3px); opacity: 0.7; }
.toc-row .n { flex: 0 0 auto; min-width: 2em; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.toc-chapter { margin-top: 1.1em; font-weight: 700; font-size: 1.05em; color: var(--accent-2); letter-spacing: 0.02em; border-bottom: 1px solid var(--panel-border); border-radius: 0; }
.toc-chapter .dots { opacity: 0.35; }
.toc-chapter .n { color: var(--accent-2); }
.toc-part {
	justify-content: center; margin: 1.8em 0 0.2em; font-size: 0.85em; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--muted); font-weight: 700; cursor: default;
}
.toc-part:hover { background: transparent; }
.toc-sub { padding-left: 1.6em; font-size: 0.95em; }
.toc-sub:hover .t { color: var(--accent); }
@media (max-width: 600px) { .toc-sub { padding-left: 0.8em; } .toc-row .t { font-size: 0.95em; } }

/* ---------- modern side menu ---------- */
:root { --menu-w: 290px; }
.menu-panel { width: var(--menu-w); }
.js .menu-panel { left: calc(-1 * var(--menu-w)); }
.slideRight { left: var(--menu-w); }
.no-js .container { padding-left: var(--menu-w); }

.menu-panel.menu-modern {
	display: flex; flex-direction: column; overflow: hidden !important;
	background: linear-gradient(180deg, #0c6169 0%, #06353b 100%);
	box-shadow: 4px 0 24px rgba(0,0,0,0.25);
	text-shadow: none;
}
html.theme-dark .menu-panel.menu-modern { background: linear-gradient(180deg, #1b2127 0%, #0d1013 100%); }
html.theme-sepia .menu-panel.menu-modern { background: linear-gradient(180deg, #7a5c2e 0%, #43321a 100%); }
.menu-panel.menu-modern div { margin-top: 0; }

.menu-modern h3 {
	padding: 26px 22px 14px; text-align: left !important; box-shadow: none; font-weight: 400;
	display: flex; flex-direction: column; gap: 4px;
}
.menu-modern .mh-title { font: 700 1.45em/1.15 Georgia, 'Times New Roman', serif; color: #fff; letter-spacing: 0.01em; }
.menu-modern .mh-author { font: 600 0.72em Arial, Helvetica, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.65); }

.menu-modern .menu-search { padding: 4px 16px 12px; }
.menu-modern .menu-search input {
	width: 100%; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2);
	background: rgba(255,255,255,0.1); color: #fff; font: 14px Arial, Helvetica, sans-serif; outline: none;
	transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.menu-modern .menu-search input::placeholder { color: rgba(255,255,255,0.6); }
.menu-modern .menu-search input:focus { background: #fff; color: #222; box-shadow: 0 0 0 3px rgba(242,193,78,0.5); }
.menu-modern .menu-search input:focus::placeholder { color: #888; }
.menu-modern #search-results { max-height: 36vh; margin-top: 8px; border-radius: 8px; background: rgba(0,0,0,0.18); }
.menu-modern #search-results li { border-bottom: 1px solid rgba(255,255,255,0.1); }
.menu-modern #search-results li.empty.count { font-size: 11px; opacity: 0.7; }

.menu-modern .menu-toc { flex: 1 1 auto; overflow-y: auto; padding: 4px 8px 12px; }
.menu-modern .menu-toc li a {
	display: flex; align-items: center; gap: 12px; padding: 11px 12px; margin: 2px 0; line-height: 1.3;
	background: transparent; border-bottom: none; border-radius: 10px;
	color: rgba(255,255,255,0.86); font: 600 0.82em Arial, Helvetica, sans-serif; letter-spacing: 0.03em;
	transition: background 0.15s, color 0.15s;
}
.menu-modern .menu-toc li a:hover { background: rgba(255,255,255,0.1); color: #fff; }
.menu-modern .menu-toc li.menu-toc-current a { background: rgba(255,255,255,0.16); color: #fff; box-shadow: inset 3px 0 0 #f2c14e; }
.menu-modern .mi-num {
	flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,0.35); font-size: 0.85em; font-variant-numeric: tabular-nums;
}
.menu-modern li.menu-toc-current .mi-num { background: #f2c14e; border-color: #f2c14e; color: #3a2a00; }
.menu-modern .mi-label { flex: 1 1 auto; }
.menu-modern .mi-bar { flex: 0 0 34px; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.18); overflow: hidden; }
.menu-modern .mi-bar i { display: block; height: 100%; width: 0; background: #7be0c0; transition: width 0.3s; }

.menu-modern .menu-foot { padding: 14px 20px 18px; border-top: 1px solid rgba(255,255,255,0.12); font: 12px Arial, Helvetica, sans-serif; color: rgba(255,255,255,0.75); }
.menu-modern .mf-line { display: flex; justify-content: space-between; margin-bottom: 8px; }
.menu-modern .mf-line b { color: #fff; }
.menu-modern .mf-prog { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.18); overflow: hidden; }
.menu-modern .mf-prog i { display: block; height: 100%; width: 0; background: #7be0c0; transition: width 0.3s; }

@media (max-width: 400px) { :root { --menu-w: 84vw; } }

/* ---------- search navigator ---------- */
#search-nav {
	position: fixed; left: 50%; bottom: 42px; transform: translateX(-50%); z-index: 1600;
	display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 24px;
	background: var(--panel); color: var(--fg); border: 1px solid var(--panel-border);
	box-shadow: 0 4px 18px rgba(0,0,0,0.25); font: 13px Arial, Helvetica, sans-serif;
}
#search-nav button { width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent; color: var(--fg); font-size: 20px; line-height: 1; cursor: pointer; }
#search-nav button:hover { background: var(--accent); color: #fff; }
#search-nav .sn-close { font-size: 18px; color: var(--muted); }
#search-nav .sn-count { min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }
html.theme-dark mark.hit { background: rgba(255, 190, 0, 0.45); }

/* ---------- statistics ---------- */
#stats-box { font-size: 13px; }
.st-line { display: flex; justify-content: space-between; padding: 3px 0; }
.st-line span { color: var(--muted); }
.st-chart { display: flex; gap: 5px; height: 64px; align-items: flex-end; margin: 8px 0 10px; }
.st-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.st-bar { width: 100%; background: var(--accent); border-radius: 3px; min-height: 2px; }
.st-col span { font-size: 10px; color: var(--muted); }
.st-prog { height: 6px; border-radius: 3px; background: var(--panel-border); overflow: hidden; margin: 4px 0 8px; }
.st-prog div { height: 100%; background: var(--accent-2); }

.menu-modern .menu-toc { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) transparent; }
.menu-modern .menu-toc::-webkit-scrollbar { width: 6px; }
.menu-modern .menu-toc::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.28); border-radius: 3px; }
.menu-modern .menu-toc::-webkit-scrollbar-button { display: none; }
#container.slideRight ~ #reader-status,
#container.slideRight ~ #search-nav { opacity: 0; pointer-events: none; }