* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink: #38260f;
  --ink-soft: #49341a;
  --ink-faded: rgba(70, 50, 26, 0.8);
  --rule: rgba(82, 54, 24, 0.6);
  --gold: #c9a961;
  --gold-dim: #a8873f;
  --paper-hi: #e3c98e;
  --paper-mid: #d4b877;
  --paper-lo: #b3945e;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  --mottle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='700' height='700'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.016' numOctaves='4' seed='7' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23m)' opacity='0.55'/></svg>");
}

html, body {
  height: 100%;
}

body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(120, 84, 40, 0.28), transparent 65%),
    radial-gradient(ellipse at 50% 110%, rgba(0, 0, 0, 0.55), transparent 60%),
    linear-gradient(160deg, #241708 0%, #17100a 45%, #0d0805 100%);
  background-attachment: fixed;
  min-height: 100%;
  /* sayfa hic kaydirilmasin: telefonda kaydirma adres cubugunu
     acip kapatiyor, bu da kitabi yeniden boyutlandiriyordu */
  overflow: hidden;
  overscroll-behavior: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}

#book-stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 3vh 2vw 1.5vh;
}

/* kitap yuksekligi: ekrandan tasmasin diye navigasyon + bosluk dusuluyor */
:root { --book-chrome: 152px; }

/* Yukseklik biriminde svh kullaniliyor: dvh, telefonda adres cubugu
   gizlenip gorununce degisiyor ve kitap her sayfa cevirmede
   buyuyup kuculuyordu. svh en kucuk viewport'a sabitlenir. */
#book-wrap {
  position: relative;
  width: min(94vw, 1150px, (100vh - var(--book-chrome)) * 1.31);
  width: min(94vw, 1150px, (100svh - var(--book-chrome)) * 1.31);
  filter: drop-shadow(0 30px 45px rgba(0, 0, 0, 0.65));
  transition: transform 0.8s ease;
}

#book {
  height: calc(100vh - var(--book-chrome));
  max-height: calc(100vh - var(--book-chrome));
  height: calc(100svh - var(--book-chrome));
  max-height: calc(100svh - var(--book-chrome));
}

/* tek sayfa modu (kutuphane esigi: blok genisligi < 600px) */
@media (max-width: 636px) {
  #book-wrap { width: min(94vw, (100vh - var(--book-chrome)) * 0.655); }
  #book-wrap { width: min(94vw, (100svh - var(--book-chrome)) * 0.655); }
}

/* iki yanda istiflenmis yaprak destesi */

#book-wrap.at-front-cover { transform: translateX(-25%); }
#book-wrap.at-back-cover { transform: translateX(25%); }

/* ============ SAYFA TABANI ============ */

.page {
  container-type: inline-size;
  overflow: visible;
  background-color: transparent;
  color: var(--ink);
}

.page-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* sayfa kenari referans kitabin gercek kagidindan alindi */
.page.paper[data-side="left"] .page-inner {
  -webkit-mask-image: url("img/mask-l.png");
  mask-image: url("img/mask-l.png");
}
.page.paper[data-side="right"] .page-inner {
  -webkit-mask-image: url("img/mask-r.png");
  mask-image: url("img/mask-r.png");
}
.page.paper .page-inner {
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* kagit dokusu: gercek parsomen taramasi + lekeler */
.paper .page-inner {
  background: var(--paper-mid);
}

.paper-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.page.paper[data-side="left"] .paper-bg { background-image: url("img/page-l.jpg"); }
.page.paper[data-side="right"] .paper-bg { background-image: url("img/page-r.jpg"); }

.paper .page-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: var(--noise), var(--mottle);
  background-size: 260px 260px, 140cqw 140cqw;
  opacity: 0.22;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.page.paper[data-side="right"] .page-inner::before {
  background-position: 0 0, -45cqw -35cqw;
}

/* sirt golgesi */
.paper .page-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.page.paper[data-side="left"] .page-inner::after {
  box-shadow: inset -4cqw 0 6cqw -2.5cqw rgba(58, 34, 10, 0.5);
}
.page.paper[data-side="right"] .page-inner::after {
  box-shadow: inset 4cqw 0 6cqw -2.5cqw rgba(58, 34, 10, 0.5);
}

/* ince cift cerceve */
.frame {
  position: absolute;
  inset: 7cqw 6.5cqw;
  border: 1px solid rgba(90, 62, 32, 0.4);
  pointer-events: none;
}

/* susleme sekilleri: gri maske + CSS rengi (hafif dosya) */
.corner,
.title-orn-sekil,
.showcase-orn-sekil,
.cover-emblem {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.corner {
  position: absolute;
  width: 9.5cqw;
  aspect-ratio: 116 / 137;
  background-color: rgba(58, 38, 14, 0.8);
  pointer-events: none;
}
.corner.tl { top: 2.6cqw; left: 2.8cqw; }
.corner.tr { top: 2.6cqw; right: 2.8cqw; transform: scaleX(-1); }
.corner.bl { bottom: 2.6cqw; left: 2.8cqw; transform: scaleY(-1); }
.corner.br { bottom: 2.6cqw; right: 2.8cqw; transform: scale(-1); }

/* ============ ICERIK SAYFASI ============ */

.content {
  position: absolute;
  inset: 0;
  padding: 7cqw 12cqw 4.5cqw;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.fasil {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.7cqw;
  letter-spacing: 0.55em;
  text-indent: 0.55em;
  color: var(--ink-faded);
  text-transform: uppercase;
}
.fasil::before { content: "\2014\00A0"; letter-spacing: 0; }
.fasil::after { content: "\00A0\2014"; letter-spacing: 0; }

.orn {
  font-size: 3.2cqw;
  color: var(--ink-faded);
  letter-spacing: 0.8em;
  text-indent: 0.8em;
  margin: 1.2cqw 0;
}

.page-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 8.2cqw;
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: #241708;
  text-shadow: 0.15cqw 0.15cqw 0 rgba(255, 244, 205, 0.5);
  white-space: nowrap;
}

.page-title--long { font-size: 6.2cqw; }

.title-orn {
  margin: 1cqw 0 2.4cqw;
  display: flex;
  justify-content: center;
}
.title-orn-sekil {
  width: 44cqw;
  aspect-ratio: 314 / 41;
  background-color: rgba(62, 42, 16, 0.72);
}


.dishes {
  flex: 0 0 auto;
  width: 100%;
  max-width: 78cqw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2.2cqw;
  text-align: left;
}

/* ============ SAYFA ALTI VITRIN ============ */

.showcase {
  flex: 1 1 auto;
  min-height: 17cqw;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5cqw 0 0.5cqw;
}

.showcase-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 100%;
}

.showcase-orn-sekil {
  width: 40cqw;
  height: 20cqw;
  background-color: rgba(60, 40, 16, 0.62);
}

.showcase-photo {
  display: none;
  margin: 0;
  height: 100%;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.showcase.acik .showcase-orn { display: none; }

.showcase.acik .showcase-photo {
  display: flex;
  animation: vitrin-gir 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes vitrin-gir {
  from { opacity: 0; transform: translateY(1.4cqw) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* fotograf kagida yapistirilmis eski baski gibi; hafif eskitme,
   rengi tamamen kaybolmadan. Alt bosluk daraldikca kendini kucultur. */
.showcase-photo img {
  display: block;
  flex: 0 1 auto;
  min-height: 0;
  width: auto;
  max-width: 66cqw;
  max-height: 31cqw;
  object-fit: contain;
  border: 0.3cqw solid rgba(64, 42, 16, 0.55);
  outline: 1px solid rgba(70, 46, 18, 0.3);
  outline-offset: 0.55cqw;
  /* eski baski gorunumu: renk yok, sicak sepya, hafif solgun */
  filter: grayscale(1) sepia(0.62) contrast(1.02) brightness(1.04) saturate(1.15);
  box-shadow: 0 0.6cqw 1.8cqw rgba(44, 28, 8, 0.42);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.showcase-photo:hover img {
  transform: translateY(-0.3cqw) scale(1.015);
  box-shadow: 0 0.9cqw 2.2cqw rgba(44, 28, 8, 0.5);
}

/* fotografin buyutulebilecegini belli eden isaret */
.showcase-buyut {
  flex: 0 0 auto;
  margin-top: 1.1cqw;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 2.4cqw;
  letter-spacing: 0.06em;
  color: var(--ink-faded);
}

.showcase-cap {
  flex: 0 0 auto;
  margin-top: 1.8cqw;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.9cqw;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
}

/* vitrinde gosterilen yemek satiri isaretlenir */
.dish.secili .dish-name,
.dish.secili .dish-price { color: #6b4416; }


.dish {
  -webkit-tap-highlight-color: transparent;
}

.dish.fotografli { cursor: pointer; }

.dish-body { flex: 1; min-width: 0; }

.dish-line {
  display: flex;
  align-items: baseline;
  gap: 1.2cqw;
  flex-wrap: wrap;
}

.dish-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 3.5cqw;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #241708;
  white-space: nowrap;
}

.dish-name--uzun {
  font-size: 2.85cqw;
  letter-spacing: 0.02em;
}

.dish-dots {
  flex: 1;
  min-width: 3cqw;
  border-bottom: 0.32cqw dotted rgba(58, 42, 24, 0.75);
  transform: translateY(-0.7cqw);
}

.dish-price {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 3.4cqw;
  white-space: nowrap;
  color: #241708;
}

.dish-desc {
  font-style: italic;
  font-weight: 500;
  font-size: 3cqw;
  line-height: 1.32;
  color: var(--ink-soft);
  margin-top: 0.5cqw;
}

.page-note {
  font-style: italic;
  font-size: 2.6cqw;
  color: var(--ink-faded);
  margin-top: 1.8cqw;
}

.folio {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 3cqw;
  color: var(--ink-faded);
  margin-top: auto;
  padding-top: 1.5cqw;
}

/* ============ KAPAK ============ */

.cover {
  background:
    radial-gradient(ellipse 90% 70% at 50% 38%, rgba(133, 84, 34, 0.5), transparent 75%),
    linear-gradient(135deg, #4a2f14 0%, #33200c 40%, #241505 75%, #180d03 100%);
}

.cover .page-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--noise);
  opacity: 0.3;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.cover .page-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 7cqw rgba(0, 0, 0, 0.75),
    inset 0 0 1.2cqw rgba(0, 0, 0, 0.6);
}

.cover-frame {
  position: absolute;
  inset: 5cqw;
  border: 0.55cqw double var(--gold-dim);
  outline: 1px solid rgba(201, 169, 97, 0.4);
  outline-offset: 1.1cqw;
  pointer-events: none;
  box-shadow:
    0 0 2cqw rgba(0, 0, 0, 0.55),
    inset 0 0 2cqw rgba(0, 0, 0, 0.55);
}

.cover .content { justify-content: center; }

.cover-kicker {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 3cqw;
  letter-spacing: 0.6em;
  text-indent: 0.6em;
  color: var(--gold-dim);
  text-transform: uppercase;
}

.cover-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 900;
  font-size: 11cqw;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--gold);
  text-shadow:
    0 0.25cqw 0.3cqw rgba(0, 0, 0, 0.8),
    0 -0.15cqw 0.2cqw rgba(255, 230, 170, 0.25);
  margin: 1cqw 0 0.5cqw;
}

.cover-sub {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 4.2cqw;
  letter-spacing: 0.45em;
  text-indent: 0.45em;
  color: var(--gold-dim);
  text-transform: uppercase;
}

.cover-orn {
  font-size: 5cqw;
  color: var(--gold-dim);
  margin: 4cqw 0;
}

.cover-amblem {
  display: block;
  width: 30cqw;
  height: auto;
  margin: 0 auto 3cqw;
  filter: drop-shadow(0 0.3cqw 0.5cqw rgba(0, 0, 0, 0.6));
}

.cover-yazi {
  display: block;
  width: 62cqw;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 0.2cqw 0.35cqw rgba(0, 0, 0, 0.55));
}

.cover-amblem--kucuk { width: 22cqw; margin-bottom: 2cqw; }
.cover-yazi--kucuk { width: 48cqw; margin-top: 3cqw; }

.cover-emblem {
  margin: 3.5cqw auto;
  width: 20cqw;
  height: 19cqw;
  background-color: var(--gold);
  opacity: 0.9;
}

.cover .corner {
  width: 8cqw;
  background-color: var(--gold);
  opacity: 0.85;
}
.cover .corner.tl { top: 6.6cqw; left: 6.8cqw; }
.cover .corner.tr { top: 6.6cqw; right: 6.8cqw; }
.cover .corner.bl { bottom: 6.6cqw; left: 6.8cqw; }
.cover .corner.br { bottom: 6.6cqw; right: 6.8cqw; }

.cover-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9cqw;
  font-style: italic;
  font-size: 3.2cqw;
  color: var(--gold-dim);
  letter-spacing: 0.2em;
}

/* ============ FIHRIST ============ */

.toc-list {
  flex: 1;
  width: 100%;
  max-width: 74cqw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5cqw;
  text-align: left;
}

.toc-row {
  display: flex;
  align-items: baseline;
  gap: 1.4cqw;
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  padding: 0;
  width: 100%;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.toc-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 3.1cqw;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #241708;
  white-space: nowrap;
}

.toc-row:hover .toc-name { color: #6b4416; }

.toc-dots {
  flex: 1;
  border-bottom: 0.32cqw dotted rgba(58, 42, 24, 0.75);
  transform: translateY(-0.8cqw);
}

.toc-page {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 2.9cqw;
  color: var(--ink-soft);
}

.toc-hint {
  font-style: italic;
  font-size: 2.9cqw;
  color: var(--ink-faded);
  margin-top: 2cqw;
  padding: 0 8cqw;
}

/* ============ ARKA KAPAK ============ */

.backcover-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: 8cqw;
  color: var(--gold);
  text-shadow: 0 0.25cqw 0.3cqw rgba(0, 0, 0, 0.8);
}

/* ============ ALT NAVIGASYON ============ */

/* ============ DIL SECICI ============ */

#lang-switch {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: rgba(32, 20, 8, 0.82);
  border: 1px solid rgba(201, 169, 97, 0.42);
  border-radius: 2px;
  backdrop-filter: blur(2px);
}

#lang-switch button {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(217, 192, 138, 0.55);
  background: none;
  border: none;
  padding: 2px 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
}

#lang-switch button:hover { color: rgba(240, 220, 174, 0.9); }

#lang-switch button.secili {
  color: #f0dcae;
  border-bottom: 1px solid rgba(201, 169, 97, 0.8);
}

.lang-sep {
  color: rgba(201, 169, 97, 0.35);
  font-size: 13px;
}

#book-nav {
  display: flex;
  gap: 10px;
  margin-top: 2.2vh;
}

#book-nav button {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d9c08a;
  background: rgba(46, 30, 12, 0.82);
  border: 1px solid rgba(201, 169, 97, 0.45);
  padding: 8px 18px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

#book-nav button:hover {
  background: rgba(78, 52, 20, 0.9);
  color: #f0dcae;
}

/* ============ TAM GORUNUM (POPUP) ============ */

#lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vmin;
}

#lightbox[hidden] { display: none; }

#lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 9, 3, 0.94);
}

#lightbox-card {
  position: relative;
  width: min(90vw, 900px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: url("img/page-r.jpg") 50% 45% / 260% auto;
  padding: clamp(12px, 2.2vmin, 20px);
  box-shadow:
    0 0 0 1px rgba(120, 88, 40, 0.8),
    0 0 0 5px rgba(38, 24, 10, 0.96),
    0 0 0 6px rgba(190, 158, 92, 0.45),
    0 24px 64px rgba(0, 0, 0, 0.8);
  animation: lb-in 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes lb-in {
  0%   { opacity: 0; transform: scale(0.9) translateY(12px); }
  100% { opacity: 1; transform: none; }
}

/* fotograf burada TAM RENKLI ve buyuk gorunur */
#lightbox-imgframe {
  border: 1px solid rgba(78, 52, 20, 0.7);
  box-shadow: 0 2px 12px rgba(40, 24, 8, 0.4);
  overflow: hidden;
  flex: 0 0 auto;
  height: min(64vh, 56vw, 560px);
}

#lightbox-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#lightbox-card figcaption {
  padding: clamp(10px, 1.8vmin, 16px) 2px 2px;
  color: var(--ink);
  text-align: center;
}

#lightbox-card figcaption::before {
  content: "";
  display: block;
  width: 34%;
  margin: 0 auto clamp(8px, 1.4vmin, 12px);
  border-top: 1px solid rgba(90, 62, 32, 0.45);
}

#lightbox-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(10px, 2vmin, 18px);
  flex-wrap: wrap;
}

#lightbox-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(17px, 3.2vmin, 26px);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#lightbox-price {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: clamp(16px, 3vmin, 23px);
  white-space: nowrap;
}

#lightbox-desc {
  font-style: italic;
  font-size: clamp(14px, 2.4vmin, 18px);
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 6px auto 0;
  max-width: 52ch;
}

#lightbox-close {
  position: absolute;
  top: clamp(16px, 2.8vmin, 26px);
  right: clamp(16px, 2.8vmin, 26px);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(214, 184, 122, 0.75);
  background: rgba(28, 18, 6, 0.72);
  color: #e8d5a8;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  transition: background 0.18s ease;
}

#lightbox-close:hover { background: rgba(58, 38, 14, 0.9); }

/* stpageflip golgeleri biraz yumusat */
.stf__parent { margin: 0 auto; }