/* ============================================================
   PDF Book Stylesheet — anlatkitap
   Page size: A5 portrait (14.8 × 21 cm)  |  Font: sans fallback stack
   ============================================================ */

/* ---- Page setup ------------------------------------------- */
@page {
  size: 148mm 210mm;
  margin: 20mm 18mm 22mm 18mm; /* top right bottom left */
}

/* ---- Base -------------------------------------------------- */
* {
  box-sizing: border-box;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: "Noto Sans", "DejaVu Sans", "Liberation Sans", Arial, sans-serif;
  font-size: 11pt;
  line-height: 1.65;
  color: #1a1a1a;
  background: #ffffff;
  text-rendering: optimizeLegibility;
}

/* ---- Cover page ------------------------------------------- */
.cover {
  display: table;
  width: 100%;
  /* Content height: 210mm page − 20mm top − 22mm bottom (see wicked_pdf margins) */
  min-height: 168mm;
  background-color: #FAF6F0;
}

.cover__inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 0 24pt;
}

.cover__title {
  font-size: 34pt;
  font-weight: bold;
  color: #2C1A0E;
  margin: 0 0 18pt 0;
  line-height: 1.25;
}

.cover__narrator {
  font-size: 17pt;
  color: #6B5B45;
  margin: 0;
  font-style: italic;
}

.cover__divider {
  width: 60pt;
  height: 2pt;
  background: #C9A87C;
  margin: 20pt auto;
  border: none;
}

/* ---- HTML TOC page ----------------------------------------- */
.pdf-toc {
  margin: 0 0 20pt 0;
  page-break-after: always;
}

.pdf-toc__title {
  margin: 0 0 14pt 0;
  font-size: 18pt;
  color: #2C1A0E;
}

.pdf-toc__list {
  margin: 0;
  padding-left: 20pt;
}

.pdf-toc__item {
  margin: 0 0 7pt 0;
  line-height: 1.5;
  color: #2C1A0E;
}

.pdf-toc__text {
  color: #2C1A0E;
}

/* ---- Story pages ------------------------------------------ */
.stories {
  padding-top: 0;
}

.story__outline-extra {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  font-size: 1px;
  line-height: 1;
  margin: 0;
}

.story-page {
  min-height: 168mm;
  margin-bottom: 0;
  page-break-after: always;
  page-break-inside: auto;
}

.story-page:last-child {
  page-break-after: auto;
}

.story-page + .story-page {
  padding-top: 0;
}

.story__question {
  background: #FFF8F0;
  border-left: 4pt solid #C9A87C;
  padding: 10pt 14pt;
  font-size: 12.5pt;
  font-weight: bold;
  color: #2C1A0E;
  margin: 0 0 18pt 0;
  line-height: 1.4;
  page-break-after: avoid;
}

.story__body {
  font-size: 11pt;
  line-height: 1.7;
  color: #222222;
}

.story__body:after,
.story__body p:after {
  content: "";
  display: block;
  clear: both;
}

.story__body p {
  margin: 0 0 10pt 0;
}

.story__body p:last-child {
  margin-bottom: 0;
}

.story__photos {
  margin-top: 16pt;
  text-align: center;
}

.story__photo-row {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0 auto 12pt auto;
  page-break-inside: avoid;
}

.story__photo-row:last-child {
  margin-bottom: 0;
}

.story__photo-row--single {
  width: 54%;
  margin-left: auto;
  margin-right: auto;
  page-break-inside: avoid;
}

.story__figure {
  width: 50%;
  margin: 0;
  padding: 0 5pt;
  text-align: center;
  vertical-align: middle;
  page-break-inside: avoid;
}

.story__photo-row--single .story__figure {
  width: 100%;
}

.story__photo-frame {
  width: 100%;
  height: 54mm;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 2pt;
}

.story__photos--layout-1 .story__photo-row {
  width: 72%;
}

.story__photos--layout-1 .story__photo-frame {
  height: 88mm;
}

.story__photos--layout-2 .story__photo-frame {
  height: 58mm;
}

.story__photos--layout-4 .story__photo-frame {
  height: 42mm;
}

.story__photo-caption {
  font-size: 9pt;
  color: #888888;
  text-align: center;
  margin-top: 4pt;
  font-style: italic;
}

.story__qr-inline,
.story__qr-standalone {
  text-align: center;
  page-break-inside: avoid;
}

.story__qr-inline {
  float: right;
  width: 2.8cm;
  margin: 0 0 4pt 10pt;
}

.story__qr-standalone {
  width: 2.8cm;
  margin: 16pt 0 0 auto;
}

.story__qr-image {
  display: block;
  width: 2cm;
  height: 2cm;
  margin: 0 auto;
}

.story__qr-label {
  display: block;
  width: 2.8cm;
  margin: 5pt auto 0 auto;
  font-size: 8pt;
  line-height: 1.25;
  color: #6B5B45;
}