/* Paye Kırtasiye & Fotokopi
   Tasarım dili: kâğıt, toner, cilt bezi, fosforlu kalem.
   Ölçüler A serisi kâğıt oranına (1 : 1,414) ve kesim işaretlerine dayanır. */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2010-2027, U+2030, U+2039-203A, U+20AC, U+20BA, U+2122, U+2190-2193, U+2212;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  unicode-range: U+0100-017F;
}
@font-face {
  font-family: "Source Serif";
  src: url("../fonts/sourceserif-latin.woff2") format("woff2");
  font-weight: 200 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2010-2027, U+2030, U+2039-203A, U+20AC, U+20BA, U+2122, U+2190-2193, U+2212;
}
@font-face {
  font-family: "Source Serif";
  src: url("../fonts/sourceserif-latin-ext.woff2") format("woff2");
  font-weight: 200 900; font-display: swap;
  unicode-range: U+0100-017F;
}

:root {
  --paper: #f6f6f3;
  --sheet: #ffffff;
  --mat: #e9eae5;
  --toner: #232428;
  --toner-2: #2f3136;
  --steel: #5f636b;
  --rule: #d3d4ce;
  --cloth: #7a2234;
  --marker: #f0dc4a;
  --wa: #0e7a3e;
  --wa-deep: #0b6633;
  --bubble: #dcf5d2;
  --on-dark: #ededea;
  --on-dark-2: #aeb2b8;

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-text: "Source Serif", Georgia, "Times New Roman", serif;

  --wrap: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(4rem, 9vw, 7.5rem);
  --head-h: 72px;
  --bar-h: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--toner);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--bar-h);
  overflow-x: clip;
}
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); margin: 0; font-weight: 700; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
address { font-style: normal; }
button, input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--marker); color: var(--toner); }

:focus-visible { outline: 3px solid var(--cloth); outline-offset: 3px; border-radius: 2px; }
.place :focus-visible, .colophon :focus-visible, .actionbar :focus-visible { outline-color: var(--marker); }
main:focus { outline: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--toner); color: var(--on-dark); padding: .7rem 1rem;
  font-family: var(--f-display); text-decoration: none;
}
.skip:focus { top: 12px; }

.ico { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- Typography helpers ---------- */
.h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  font-stretch: 112%;
  font-weight: 720;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-bottom: .6em;
  max-width: 18ch;
}
.h2--light { color: var(--on-dark); }

.textlink {
  font-family: var(--f-display); font-weight: 600; font-stretch: 100%;
  color: var(--cloth); text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: .25em;
}
.textlink:hover { text-decoration-color: var(--marker); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .75rem 1.3rem;
  font-family: var(--f-display); font-weight: 650; font-size: 1rem; font-stretch: 100%;
  line-height: 1.1; text-decoration: none; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.btn--sm { min-height: 40px; padding: .5rem 1rem; font-size: .95rem; }
.btn--wa { background: var(--wa); color: #fff; }
.btn--wa:hover { background: var(--wa-deep); }
.btn--line { border-color: var(--toner); color: var(--toner); background: transparent; }
.btn--line:hover { background: var(--toner); color: var(--paper); }
.btn--paper { background: var(--paper); color: var(--toner); }
.btn--paper:hover { background: var(--marker); }
.btn--ghost { border-color: var(--on-dark-2); color: var(--on-dark); }
.btn--ghost:hover { border-color: var(--on-dark); }

/* ---------- Masthead ---------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.masthead__in { display: flex; align-items: center; gap: 1.25rem; height: var(--head-h); }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.brand__mark { width: 40px; height: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-family: var(--f-display); font-weight: 760; font-stretch: 125%; font-size: 1.45rem; letter-spacing: .02em; }
.brand__trade { font-family: var(--f-display); font-size: .78rem; font-stretch: 100%; color: var(--steel); margin-top: .25rem; }

.nav--wide { display: none; }
.nav__list { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav__list a {
  display: block; padding: .55rem .8rem; text-decoration: none;
  font-family: var(--f-display); font-weight: 560; font-size: .98rem;
  border-radius: 6px;
}
.nav__list a:hover { background: var(--mat); }
.nav__list a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--cloth); border-radius: 0; }

.masthead__actions { display: none; align-items: center; gap: 1rem; }
.masthead__phone { font-family: var(--f-display); font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; display: none; }
.masthead__phone:hover { text-decoration: underline; }

.drawer { position: static; }
.drawer__toggle {
  list-style: none; display: inline-flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: .4rem .85rem; border: 2px solid var(--toner); border-radius: 999px;
  font-family: var(--f-display); font-weight: 650; cursor: pointer; user-select: none;
}
.drawer__toggle::-webkit-details-marker { display: none; }
.drawer__bars, .drawer__bars::before, .drawer__bars::after {
  display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform .2s, background-color .2s;
}
.drawer__bars::before, .drawer__bars::after { content: ""; position: absolute; left: 0; }
.drawer__bars::before { top: -6px; }
.drawer__bars::after { top: 6px; }
.drawer[open] .drawer__bars { background: transparent; }
.drawer[open] .drawer__bars::before { transform: translateY(6px) rotate(45deg); }
.drawer[open] .drawer__bars::after { transform: translateY(-6px) rotate(-45deg); }
.drawer__panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--rule);
  padding: .5rem var(--gutter) 1.5rem;
  max-height: calc(100dvh - var(--head-h)); overflow-y: auto;
  box-shadow: 0 24px 40px -24px rgba(35, 36, 40, .35);
}
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list a {
  display: block; padding: 1rem 0; border-bottom: 1px solid var(--rule);
  font-family: var(--f-display); font-size: 1.35rem; font-weight: 650; font-stretch: 110%; text-decoration: none;
}
.drawer__list a[aria-current="page"] { color: var(--cloth); }
.drawer__contact { display: grid; gap: .25rem; margin-top: 1rem; }
.drawer__contact a { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 0; font-family: var(--f-display); font-weight: 560; text-decoration: none; }

@media (min-width: 600px) {
  .masthead__actions { display: flex; }
}
@media (min-width: 980px) {
  .nav--wide { display: block; }
  .drawer { display: none; }
  .brand { margin-right: 0; }
  .nav--wide { margin-inline: auto; }
}
@media (min-width: 1180px) {
  .masthead__phone { display: inline; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3rem, 7vw, 6rem); }
.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
.hero__where { margin-bottom: 1.4rem; font-family: var(--f-display); font-weight: 600; font-size: .98rem; }
.hero__where a { text-decoration: none; border-bottom: 2px solid var(--marker); padding-bottom: 2px; }
.hero__where a:hover { background: var(--marker); }
.hero__title {
  font-size: clamp(2.7rem, 8.4vw, 6.4rem);
  font-stretch: 118%;
  font-weight: 760;
  line-height: .94;
  letter-spacing: -0.025em;
  margin-bottom: 1.6rem;
  max-width: 11ch;
}
.hero__lede { font-size: clamp(1.12rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 38ch; margin-bottom: 2rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.5rem; }
.hero__facts {
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 2rem; margin: 0;
  padding-top: 1.25rem; border-top: 1px solid var(--rule);
}
.hero__facts dt { font-family: var(--f-display); font-size: .82rem; color: var(--steel); }
.hero__facts dd { margin: .15rem 0 0; font-family: var(--f-display); font-weight: 600; font-size: .98rem; font-variant-numeric: tabular-nums; }
.hero__facts a { text-decoration: none; }
.hero__facts a:hover { text-decoration: underline; }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}
@media (max-width: 560px) {
  .hero__facts { grid-template-columns: 1fr 1fr; gap: .9rem 1.5rem; }
  .hero__facts > div:last-child { grid-column: 1 / -1; }
  .hero__cta .btn { width: 100%; }
}

/* Kâğıt yığını (3D): A3 top arkada, A4 yaprak önde; köşelerde kesim işaretleri.
   Döndürme açıları --rx / --ry ile verilir; site.js fare/dokunuşla günceller. */
.hero__stack { max-width: 520px; width: 100%; justify-self: center; container-type: inline-size; perspective: 1500px; perspective-origin: 50% 40%; }
.press {
  --rx: 10deg; --ry: 22deg;
  position: relative; aspect-ratio: 1 / 1.2; margin: 18px;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  touch-action: pan-y; cursor: grab;
}
.press.is-dragging { cursor: grabbing; }
.press__sheet { position: absolute; background: var(--sheet); display: flex; flex-direction: column; transform-style: preserve-3d; }
/* Gerçek oran: A4, A3'ün kenar uzunluklarının 1/√2'si */
.press__sheet--a3 {
  --d: 22px;
  top: 0; right: 0; width: 72%; aspect-ratio: 297 / 420;
  box-shadow: inset 0 0 0 1px var(--rule);
  padding: 7% 7% 6%;
}
.press__sheet--a4 {
  --d: 3px;
  left: 0; bottom: 0; width: 50.9%; aspect-ratio: 210 / 297;
  padding: 9% 9% 8%;
  transform: translateZ(64px);
  box-shadow: inset 0 0 0 1px rgba(35,36,40,.06);
}
.press__shadow {
  position: absolute; left: 4%; bottom: -2%; width: 50%; aspect-ratio: 210 / 297;
  background: rgba(35,36,40,.32); filter: blur(18px); border-radius: 6px;
  transform: translateZ(1px) translate(10%, 2%);
  pointer-events: none;
}

/* Kâğıt kalınlığı: dört kenar yüzü + arka yüz (yaprak kenarı çizgili) */
.edge { position: absolute; display: block; background: #fbfbf9; pointer-events: none; }
.edge--t, .edge--b { left: 0; right: 0; height: var(--d); background: repeating-linear-gradient(to bottom, #fbfbf9 0 1px, #dedfd9 1px 2px); }
.edge--l, .edge--r { top: 0; bottom: 0; width: var(--d); background: repeating-linear-gradient(to right, #fbfbf9 0 1px, #dedfd9 1px 2px); }
.edge--t { top: 0; transform-origin: top; transform: rotateX(-90deg); }
.edge--b { bottom: 0; transform-origin: bottom; transform: rotateX(90deg); }
.edge--l { left: 0; transform-origin: left; transform: rotateY(90deg); }
.edge--r { right: 0; transform-origin: right; transform: rotateY(-90deg); }
.edge--back { inset: 0; background: #ecece7; transform: translateZ(calc(-1 * var(--d))) rotateY(180deg); }
.press__size {
  position: absolute; top: 4.5%; right: 7%;
  font-family: var(--f-display); font-stretch: 125%; font-weight: 300; font-size: 3.4cqi; line-height: 1; color: var(--steel);
}
.press__sheet--a3 .press__size { font-size: 4.6cqi; }
.press__photo { margin-top: 12%; overflow: hidden; background: var(--toner); }
.press__sheet--a3 .press__photo { aspect-ratio: 4 / 3.4; margin-top: 10%; }
.press__sheet--a4 .press__photo { aspect-ratio: 1 / 1.05; }
.press__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.press__photo--bw img { filter: grayscale(1) contrast(1.08) brightness(1.08); object-position: 30% 50%; }
.press__caption { margin: auto 0 0; font-family: var(--f-display); font-stretch: 112%; font-weight: 700; font-size: 3.6cqi; line-height: 1.1; }
.press__sheet--a3 .press__caption { font-size: 4cqi; }
.press__sheet--a3 .press__caption, .press__sheet--a3 .press__spec { text-align: right; }
.press__spec { margin: .3em 0 0; font-family: var(--f-display); font-size: 2.3cqi; color: var(--steel); font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .hero__stack { max-width: 340px; } }

.crop { position: absolute; width: 14px; height: 14px; border-color: var(--toner); border-style: solid; border-width: 0; transform: translateZ(-16px); }
.crop--tl { top: -18px; left: -18px; border-right-width: 1px; border-bottom-width: 1px; }
.crop--tr { top: -18px; right: -18px; border-left-width: 1px; border-bottom-width: 1px; }
.crop--bl { bottom: -18px; left: -18px; border-right-width: 1px; border-top-width: 1px; }
.crop--br { bottom: -18px; right: -18px; border-left-width: 1px; border-top-width: 1px; }

@media (prefers-reduced-motion: no-preference) {
  /* A4 yaprak, yazıcıdan çıkar gibi arkadan öne kayar */
  .press__sheet--a4 { animation: feed 1.1s cubic-bezier(.2,.7,.2,1) .1s both; }
  .press__shadow { animation: feedshadow 1.1s cubic-bezier(.2,.7,.2,1) .1s both; }
  @keyframes feed {
    from { transform: translate3d(28%, -34%, 0); }
    to   { transform: translateZ(64px); }
  }
  @keyframes feedshadow { from { opacity: 0; } to { opacity: 1; } }
}

/* ---------- İçindekiler ---------- */
.contents { padding-block: var(--section); border-top: 1px solid var(--rule); background: var(--sheet); }
.contents__grid { display: grid; gap: 2rem; }
.contents__intro p { color: var(--steel); max-width: 34ch; }
.toc { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.toc li { border-bottom: 1px solid var(--rule); }
.toc li:first-child { border-top: 1px solid var(--rule); }
.toc { perspective: 900px; }
.toc__row {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "title leader page" "desc desc desc";
  column-gap: .75rem; padding: 1.15rem 0; text-decoration: none;
  transform-origin: 50% 100%;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}
/* Kâğıt yüzeyi: metni kaydırmadan kenarlara taşar */
.toc__row::before {
  content: ""; position: absolute; inset: 0 -14px; z-index: -1;
  background: var(--paper); opacity: 0;
  box-shadow: 0 14px 22px -16px rgba(35,36,40,.5);
  transition: opacity .2s;
}
/* Kıvrılan köşe */
.toc__row::after {
  content: ""; position: absolute; right: -14px; bottom: 0; width: 0; height: 0;
  background: linear-gradient(315deg, var(--sheet) 0 50%, #d9dad4 50% 60%, #f1f1ed 100%);
  box-shadow: -3px -3px 6px -3px rgba(35,36,40,.35);
  transition: width .25s cubic-bezier(.2,.7,.2,1), height .25s cubic-bezier(.2,.7,.2,1);
}
.toc__row:hover::before, .toc__row:focus-visible::before { opacity: 1; }
.toc__row:hover::after, .toc__row:focus-visible::after { width: 26px; height: 26px; }
@media (prefers-reduced-motion: no-preference) {
  .toc__row:hover, .toc__row:focus-visible { transform: rotateX(7deg) translateY(-2px); }
}
.toc__title { grid-area: title; font-family: var(--f-display); font-stretch: 108%; font-weight: 680; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.2; }
.toc__desc { grid-area: desc; color: var(--steel); font-size: .98rem; margin-top: .2rem; }
.toc__leader { grid-area: leader; align-self: end; margin-bottom: .45em; border-bottom: 2px dotted var(--steel); opacity: .55; min-width: 1.5rem; }
.toc__page { grid-area: page; align-self: end; font-family: var(--f-display); font-size: .92rem; font-weight: 560; color: var(--steel); }
.toc__row:hover .toc__title { color: var(--cloth); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.toc__row:hover .toc__leader { border-bottom-color: var(--cloth); opacity: 1; }
@media (min-width: 900px) {
  .contents__grid { grid-template-columns: 4fr 8fr; gap: 4rem; }
}
@media (max-width: 420px) {
  .toc__page { display: none; }
  .toc__row { grid-template-columns: auto 1fr; grid-template-areas: "title leader" "desc desc"; }
}

/* ---------- Adımlar ---------- */
.steps { padding-block: var(--section); }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; }
.step { position: relative; }
.step__num {
  display: block; font-family: var(--f-display); font-stretch: 125%; font-weight: 200;
  font-size: clamp(4rem, 8vw, 6rem); line-height: .9; color: var(--steel); margin-bottom: .75rem;
  font-variant-numeric: lining-nums;
}
.step__title { font-size: 1.35rem; font-stretch: 108%; font-weight: 700; margin-bottom: .5rem; }
.step p { max-width: 32ch; }
@media (min-width: 820px) {
  .steps__list { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .step { padding: 0 2rem; border-left: 1px solid var(--rule); }
  .step:first-child { padding-left: 0; border-left: 0; }
}

/* ---------- Baskı fişi ---------- */
.order {
  padding-block: var(--section);
  background-color: var(--mat);
  background-image:
    linear-gradient(rgba(35,36,40,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35,36,40,.06) 1px, transparent 1px);
  background-size: 40px 40px;
  border-block: 1px solid var(--rule);
}
.order__grid { display: grid; gap: 2rem; align-items: start; }
.order__intro p { max-width: 36ch; }
@media (min-width: 980px) {
  .order__grid { grid-template-columns: 4fr 7fr; gap: 4rem; }
  .order__intro { position: sticky; top: calc(var(--head-h) + 2.5rem); }
}

.slip {
  position: relative; background: var(--sheet); padding: 2rem clamp(1.1rem, 3vw, 2.25rem) 2rem;
  box-shadow: 0 1px 2px rgba(35,36,40,.1), 0 22px 40px -28px rgba(35,36,40,.5);
  display: grid; gap: 1.25rem;
}
.slip__perf {
  position: absolute; left: 0; right: 0; top: -6px; height: 12px;
  background: radial-gradient(circle at 8px 6px, var(--mat) 4.5px, transparent 5px) 0 0 / 16px 12px repeat-x;
}
.slip__field { border: 0; margin: 0; padding: 0 0 1.1rem; border-bottom: 1px dashed var(--rule); display: flex; flex-wrap: wrap; gap: .5rem; }
.slip__field legend { float: left; width: 100%; margin-bottom: .5rem; padding: 0; font-family: var(--f-display); font-weight: 650; font-size: .95rem; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1rem;
  border: 1.5px solid var(--rule); border-radius: 4px;
  font-family: var(--f-display); font-weight: 560; font-size: .98rem; line-height: 1.15;
  transition: background-color .12s, border-color .12s;
}
.chip input:hover + span { border-color: var(--toner); }
.chip input:checked + span {
  border-color: var(--toner);
  background: linear-gradient(176deg, transparent 12%, var(--marker) 12%, var(--marker) 86%, transparent 86%);
  font-weight: 700;
}
.chip input:focus-visible + span { outline: 3px solid var(--cloth); outline-offset: 2px; }

.slip__nums { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.slip__num, .slip__note { display: grid; gap: .4rem; }
.slip__num span, .slip__note span { font-family: var(--f-display); font-weight: 650; font-size: .95rem; }
.slip small { font-weight: 450; color: var(--steel); }
.slip input[type="number"], .slip textarea {
  width: 100%; min-height: 48px; padding: .6rem .8rem; background: var(--paper);
  border: 1.5px solid var(--rule); border-radius: 4px; font-family: var(--f-display); font-size: 1rem;
}
.slip textarea { resize: vertical; min-height: 72px; }
.slip input:focus-visible, .slip textarea:focus-visible { border-color: var(--toner); outline: 3px solid var(--cloth); outline-offset: 1px; }

.slip__out { border-top: 1px dashed var(--rule); padding-top: 1.1rem; }
.slip__outhead { font-family: var(--f-display); font-weight: 650; font-size: .95rem; margin-bottom: .6rem; }
.bubble {
  display: block; max-width: 34rem; padding: .85rem 1rem; border-radius: 14px 14px 4px 14px;
  background: var(--bubble); white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--f-display); font-size: .95rem; line-height: 1.45;
}
.slip__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.slip__status { margin: 0; font-family: var(--f-display); font-size: .92rem; color: var(--wa-deep); min-height: 1.2em; flex-basis: 100%; }
@media (max-width: 480px) { .slip__actions .btn { width: 100%; } }

/* ---------- Konum bandı ---------- */
.place { background: var(--toner); color: var(--on-dark); padding-block: var(--section); }
.place__grid { display: grid; gap: 2rem; align-items: end; }
.place__address { font-family: var(--f-display); font-stretch: 108%; font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.35; color: var(--on-dark); }
.place__actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.place__more { flex-basis: 100%; margin-top: .5rem; font-family: var(--f-display); font-weight: 600; color: var(--on-dark); text-underline-offset: .25em; }
.place__more:hover { text-decoration-color: var(--marker); }
@media (min-width: 900px) { .place__grid { grid-template-columns: 7fr 5fr; } .place__actions { justify-content: flex-end; } .place__more { text-align: right; } }

/* ---------- Sayfa başı ---------- */
.pagehead { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--rule); }
.pagehead__grid { display: grid; gap: 2.5rem; align-items: end; }
.pagehead__title { font-size: clamp(2.5rem, 7vw, 5.2rem); font-stretch: 118%; font-weight: 760; line-height: .96; letter-spacing: -0.022em; margin-bottom: 1.25rem; max-width: 14ch; }
.pagehead__lede { font-size: clamp(1.1rem, 1.5vw, 1.25rem); max-width: 44ch; }
.pagehead--cloth { box-shadow: inset 0 10px 0 var(--cloth); }
.pagehead__fig { margin: 0; }
.pagehead__fig img, .service__fig img { width: 100%; background: var(--toner); }
.pagehead__fig figcaption, .service__fig figcaption { margin-top: .45rem; font-family: var(--f-display); font-size: .8rem; color: var(--steel); }
@media (min-width: 900px) { .pagehead__grid { grid-template-columns: 7fr 5fr; } }

/* A3 / A4 şeması */
.sizes { margin: 0; max-width: min(380px, 80vw); }
.sizes__svg { width: 100%; height: auto; display: block; }
.sizes__a3 { fill: var(--sheet); stroke: var(--toner); stroke-width: 1.5; }
.sizes__fold { stroke: var(--steel); stroke-width: 1; stroke-dasharray: 4 4; }
.sizes__label { font-family: var(--f-display); font-stretch: 125%; font-weight: 300; font-size: 20px; fill: var(--toner); }
.sizes__dim { font-family: var(--f-display); font-size: 10px; fill: var(--steel); }
.sizes__cap { margin-top: .6rem; font-size: .95rem; color: var(--steel); max-width: 36ch; }

/* ---------- Hizmet satırları ---------- */
.service { padding-block: clamp(3rem, 7vw, 6rem); border-bottom: 1px solid var(--rule); scroll-margin-top: var(--head-h); }
.service__grid { display: grid; gap: 2rem; align-items: center; }
.service__text p { max-width: 52ch; }
.service__fig { margin: 0; }
.service--cloth { background: var(--sheet); box-shadow: inset 6px 0 0 var(--cloth); }
@media (min-width: 900px) {
  .service__grid { grid-template-columns: 6fr 6fr; gap: 4rem; }
  .service:nth-of-type(even) .service__fig { order: -1; }
  .service--plain .service__grid { grid-template-columns: 7fr 5fr; align-items: start; }
}

.opts { display: grid; grid-template-columns: 1fr 1fr; margin: 1.5rem 0 1.75rem; border-top: 1px solid var(--rule); max-width: 34rem; }
.opts > div { padding: .7rem .75rem .7rem 0; border-bottom: 1px solid var(--rule); }
.opts dt { font-family: var(--f-display); font-size: .82rem; color: var(--steel); }
.opts dd { margin: .1rem 0 0; font-family: var(--f-display); font-weight: 600; }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.checks li { position: relative; padding-left: 1.6rem; }
.checks li::before { content: ""; position: absolute; left: 0; top: .5em; width: .62rem; height: .62rem; background: var(--cloth); }

/* ---------- Tez sayfası ---------- */
.prep { padding-block: var(--section); }
.prep__grid { display: grid; gap: 2rem; }
.prep__list { margin: 0; padding: 0; list-style: none; counter-reset: prep; display: grid; gap: 1.5rem; }
.prep__list li { counter-increment: prep; position: relative; padding-left: 3.25rem; max-width: 60ch; }
.prep__list li::before {
  content: counter(prep); position: absolute; left: 0; top: -.15rem;
  font-family: var(--f-display); font-stretch: 125%; font-weight: 300; font-size: 2rem; line-height: 1; color: var(--cloth);
}
.prep__list strong { font-family: var(--f-display); font-weight: 700; }
@media (min-width: 900px) { .prep__grid { grid-template-columns: 4fr 8fr; gap: 4rem; } }

.bindings { padding-block: var(--section); background: var(--sheet); border-block: 1px solid var(--rule); }
.bindings__grid { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .bindings__grid { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.stage { position: relative; height: 270px; margin-bottom: 1.25rem; perspective: 1100px; display: grid; place-items: center; }
.stage__hint { margin: .75rem 0 0; font-family: var(--f-display); font-size: .85rem; color: var(--steel); }

/* Spiral defter: masada yatar, kapak üst kenardaki telden açılır */
.nb {
  --w: 210px; --h: 150px; --d: 7px;
  position: relative; width: var(--w); height: var(--h);
  transform-style: preserve-3d;
  transform: rotateX(50deg) rotateZ(-14deg) translateY(16px);
}
.nb__pages {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translateZ(var(--d));
  background:
    radial-gradient(circle at 50% 7px, #c9cac4 2.2px, transparent 2.6px) 6px 0 / 13px 14px repeat-x,
    linear-gradient(90deg, transparent 26px, rgba(122,34,52,.55) 26px 27.5px, transparent 27.5px),
    repeating-linear-gradient(to bottom, transparent 0 21px, #c7d6e6 21px 22px) 0 18px / 100% calc(100% - 18px) no-repeat,
    #fdfdfb;
  box-shadow: inset 0 0 0 1px #e4e4df;
}
.nb::before { /* masadaki gölge */
  content: ""; position: absolute; inset: 6% 2% -4% 4%; background: rgba(35,36,40,.35); filter: blur(14px); transform: translateZ(-1px);
}
.nb__cover {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform-origin: 50% 0;
  transform: translateZ(calc(var(--d) + 1.5px)) rotateX(var(--open, 20deg));
  background:
    radial-gradient(circle at 50% 7px, #111214 2.2px, transparent 2.6px) 6px 0 / 13px 14px repeat-x,
    linear-gradient(135deg, #34363c, var(--toner) 60%);
  border-radius: 0 0 3px 3px;
}
.nb__coverback { position: absolute; inset: 0; background: #2a2b30; transform: translateZ(-.5px) rotateY(180deg); border-radius: 0 0 3px 3px; }
.nb__label { position: absolute; left: 50%; top: 42%; width: 42%; height: 22%; transform: translateX(-50%); border: 1px solid rgba(255,255,255,.28); }
.nb__coil {
  position: absolute; left: 6px; right: 6px; top: -9px; height: 24px;
  display: flex; justify-content: space-between; transform-style: preserve-3d;
  transform: translateZ(calc(var(--d) / 2 + 1px));
}
.nb__coil i {
  display: block; width: 13px; height: 24px; border: 2.6px solid #2b2c31; border-radius: 50%;
  transform: rotateY(90deg); flex: none;
}
.binding--spiral:hover .nb { --open: 30deg; }
@media (prefers-reduced-motion: no-preference) {
  .nb__cover { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
  .nb.is-closed { --open: 0deg; }
}

/* Kapaklı tez: sırtı, sayfa kenarları ve arka kapağıyla döndürülebilir kitap */
.book {
  --rx: -8deg; --ry: 32deg;
  --w: 150px; --h: 212px; --d: 34px;
  position: relative; width: var(--w); height: var(--h);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  touch-action: pan-y; cursor: grab;
}
.book.is-dragging { cursor: grabbing; }
.book__body {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translateZ(calc(var(--d) / 2));
  background:
    linear-gradient(90deg, rgba(0,0,0,.22) 0 9px, rgba(255,255,255,.08) 9px 10px, transparent 10px),
    linear-gradient(160deg, #8a2a3e, var(--cloth) 45%, #6a1d2d);
  border-radius: 1px 3px 3px 1px;
  box-shadow: inset 0 0 0 5px rgba(0,0,0,.06), inset 0 0 0 6px rgba(217,196,138,.35);
}
.book .edge--t, .book .edge--b { left: 2px; right: 3px; }
.book .edge--r { top: 3px; bottom: 3px; right: 3px; }
.book__pages.edge--t, .book__pages.edge--b { background: repeating-linear-gradient(to bottom, #f7f5ee 0 1px, #dcd8cc 1px 2px); }
.book__pages.edge--r { background: repeating-linear-gradient(to right, #f7f5ee 0 1px, #dcd8cc 1px 2px); }
.book__spine { background: linear-gradient(90deg, #5c1626, #7a2234 45%, #5c1626); }
.book__spine span {
  position: absolute; left: 50%; top: 14%; bottom: 14%; width: 22%; transform: translateX(-50%);
  border-block: 2px solid #d9c48a; background: linear-gradient(#d9c48a, #d9c48a) 50% 50% / 2px 46% no-repeat;
}
.book__back { background: linear-gradient(200deg, #6a1d2d, var(--cloth)); }
.book__title, .book__sub, .book__year { position: absolute; left: 22%; right: 12%; background: #d9c48a; }
.book__title { top: 30%; height: 7px; }
.book__sub { top: 37%; height: 4px; right: 26%; opacity: .7; }
.book__year { top: 84%; height: 4px; left: 46%; right: 26%; opacity: .7; }
.stage--book::after { /* masadaki gölge */
  content: ""; position: absolute; left: 50%; bottom: 14px; width: 150px; height: 18px; transform: translateX(-50%);
  background: rgba(35,36,40,.3); filter: blur(10px); border-radius: 50%; z-index: -1;
}
.book .edge--l { /* sırt kapakla aynı genişlikte */ top: 0; bottom: 0; }

.binding__title { font-size: 1.45rem; font-stretch: 110%; font-weight: 720; margin-bottom: .5rem; }
.binding p { max-width: 44ch; }

.faq { padding-block: var(--section); }
.faq__grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .faq__grid { grid-template-columns: 4fr 8fr; gap: 4rem; } }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__item:first-child { border-top: 1px solid var(--rule); }
.faq__item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: center;
  padding: 1.1rem 0; font-family: var(--f-display); font-weight: 650; font-size: 1.12rem; min-height: 48px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font-weight: 300; font-size: 1.6rem; line-height: 1; flex: none; }
.faq__item[open] summary::after { content: "−"; }
.faq__item p { padding-bottom: 1.25rem; max-width: 60ch; }

/* ---------- İletişim ---------- */
.contact { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.contact__grid { display: grid; gap: 0; }
.contact__card { padding: 1.75rem 0; border-bottom: 1px solid var(--rule); }
.contact__card:first-child { padding-top: 0; }
.contact__head { font-size: 1rem; font-weight: 650; color: var(--steel); margin-bottom: .75rem; }
.contact__address { font-family: var(--f-display); font-stretch: 105%; font-size: 1.2rem; line-height: 1.45; margin-bottom: 1.25rem; }
.contact__big { font-family: var(--f-display); font-stretch: 118%; font-weight: 720; font-size: clamp(1.7rem, 3.5vw, 2.4rem); font-variant-numeric: tabular-nums; margin-bottom: 1rem; }
.contact__big a { text-decoration: none; }
.contact__big a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.contact__row { display: flex; flex-wrap: wrap; gap: .75rem; }
.contact__note { color: var(--steel); font-size: .95rem; margin-top: .75rem; }
.hours { margin: 0; display: grid; gap: .5rem; }
.hours > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; }
.hours dt { font-family: var(--f-display); font-weight: 650; }
.hours dd { margin: 0; font-family: var(--f-display); font-variant-numeric: tabular-nums; }
@media (min-width: 820px) {
  .contact__grid { grid-template-columns: 1fr 1fr; column-gap: 4rem; }
  .contact__card:nth-child(2) { padding-top: 0; }
}

.mapblock { padding-block: 0 var(--section); scroll-margin-top: var(--head-h); }
.mapblock__frame { position: relative; aspect-ratio: 4 / 5; background: var(--mat); border: 1px solid var(--rule); }
.mapblock__frame::before {
  content: "Harita yükleniyor"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--f-display); color: var(--steel);
}
.mapblock__frame iframe { position: relative; width: 100%; height: 100%; border: 0; display: block; }
.mapblock__alt { margin-top: .75rem; color: var(--steel); }
@media (min-width: 700px) { .mapblock__frame { aspect-ratio: 16 / 9; } }

/* ---------- 404 ---------- */
.lost { padding-block: var(--section); }
.lost__grid { display: grid; gap: 3rem; align-items: center; }
.lost__sheet {
  width: min(260px, 60vw); aspect-ratio: 210 / 297; background: var(--sheet); border: 1px dashed var(--steel);
  display: grid; place-items: center; transform: rotate(-3deg);
}
.lost__sheet span { font-family: var(--f-display); font-stretch: 125%; font-weight: 200; font-size: 3.5rem; color: var(--steel); }
.lost__links { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .6rem; }
@media (min-width: 820px) { .lost__grid { grid-template-columns: auto 1fr; gap: 5rem; } }

/* ---------- Alt bilgi ---------- */
.colophon { background: var(--toner); color: var(--on-dark-2); padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: var(--bar-h); margin-bottom: calc(-1 * var(--bar-h)); border-top: 1px solid var(--toner-2); }
.place + .colophon { border-top-color: #3b3d43; }
.colophon__grid { display: grid; gap: 2.25rem; }
.colophon__mark { width: 40px; filter: invert(1) grayscale(1) brightness(1.15); margin-bottom: 1rem; }
.colophon__name { font-family: var(--f-display); font-stretch: 112%; font-weight: 720; font-size: 1.2rem; color: var(--on-dark); margin-bottom: .5rem; }
.colophon__note { max-width: 30ch; font-size: .98rem; }
.colophon__head { font-size: .9rem; font-weight: 650; color: var(--on-dark); margin-bottom: .8rem; }
.colophon__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.colophon__list a { display: inline-block; padding: .3rem 0; color: var(--on-dark-2); text-decoration: none; font-family: var(--f-display); }
.colophon__list a:hover { color: var(--on-dark); text-decoration: underline; }
.colophon__address { font-size: .98rem; line-height: 1.55; }
.colophon__hours { margin-top: .75rem; font-family: var(--f-display); color: var(--on-dark); }
.colophon__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem;
  margin-top: 3rem; padding-block: 1.5rem; border-top: 1px solid #3b3d43; font-size: .88rem; font-family: var(--f-display);
}
.colophon__base p { margin: 0; }
.colophon__brand, .colophon__grid > div:last-child { grid-column: 1 / -1; }
.colophon__grid { grid-template-columns: 1fr 1fr; }
.colophon__address { text-wrap: pretty; }
@media (min-width: 900px) {
  .colophon__grid { grid-template-columns: 1.3fr .9fr 1fr 1.5fr; }
  .colophon__brand, .colophon__grid > div:last-child { grid-column: auto; }
}

/* ---------- Mobil hızlı iletişim çubuğu ---------- */
.actionbar { display: none; }
@media (max-width: 759px) {
  :root { --bar-h: calc(64px + env(safe-area-inset-bottom, 0px)); }
  .actionbar {
    display: grid; grid-template-columns: 1fr 1.35fr 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: var(--bar-h); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--toner); border-top: 1px solid #3b3d43;
  }
  .actionbar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
    color: var(--on-dark); text-decoration: none; font-family: var(--f-display); font-weight: 600; font-size: .82rem;
  }
  .actionbar__item .ico { width: 1.35rem; height: 1.35rem; }
  .actionbar__item--wa { background: var(--wa); color: #fff; }
  .masthead__actions { display: none; }
}

/* ---------- Baskı (yazıcıdan çıkarken) ---------- */
@media print {
  .masthead, .actionbar, .order, .mapblock, .skip { display: none !important; }
  body { background: #fff; padding: 0; }
  .place, .colophon { background: #fff; color: #000; }
  a { text-decoration: none; }
}