/* pdf-layout.css — PDF sayfa düzeni (2 / 4 sayfa, kitapçık, boyut). KİNETİK: ink lines, paper sheets, 0–2 px corners,
   one signal colour for the page that starts the reading order. The option groups follow the checked mode
   (pdf-layout.js sets [data-lay-mode] = nup | booklet | resize on [data-opts]); without JS every group shows. */

/* four modes in one row; icons like PDF Döndür */
.seg--4 .seg__row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lay-modes .seg__o { min-height: 64px; }
.lay-modes .seg__ic { width: 22px; height: 22px; margin-bottom: 2px; }
.lay-sizes .seg__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lay-order--rl .seg__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lay-order:not(.lay-order--rl) .seg__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inst__opts > * + * { margin-top: 14px; }

[data-lay-mode="nup"] [data-lay-for]:not([data-lay-for~="nup"]),
[data-lay-mode="booklet"] [data-lay-for]:not([data-lay-for~="booklet"]),
[data-lay-mode="resize"] [data-lay-for]:not([data-lay-for~="resize"]) { display: none; }
/* the booklet has no top-to-bottom order: only left / right binding (ar, ja) */
[data-lay-mode="booklet"] [data-lay-o="tb"] { display: none; }
[data-lay-mode="booklet"] .lay-order--rl .seg__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-lay-mode="booklet"] .lay-order--rl .seg__o[data-lay-o="rl"] { border-inline-start: 1px solid var(--ink); }
.lay-print { margin-bottom: 0; }
/* the reading-order examples ("2 1 · 4 3"): Arabic's sans stand-in for the mono face has a narrow space */
[dir="rtl"] .lay-order .seg__dpi { word-spacing: .35em; }

/* presets: A3 → A4, A4 → A5 */
.lay-presets .seg__lg { font: 500 var(--t-label)/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.lay-presets__row { display: flex; flex-wrap: wrap; gap: 8px; }
.lay-chip { min-height: 44px; padding: 0 14px; border: 1px solid var(--ink); border-radius: var(--r-1); background: var(--paper);
  color: var(--ink); font: 650 15px/1 var(--f-sans); cursor: pointer; transition: background-color .25s var(--e-out), box-shadow .25s var(--e-out), transform .25s var(--e-out); }
.lay-chip:hover { background: var(--paper-2); box-shadow: var(--shadow-sm); transform: translate(-1px, -1px); }
.lay-chip:active { box-shadow: none; transform: none; }
.lay-chip:focus-visible { outline: 2px solid var(--signal-strong); outline-offset: 2px; }

/* ---------------------------------------------------------------- the live diagram */
.lay-pv { border: 1px solid var(--rule); background: var(--paper-2); padding: 14px 12px 10px; }
.lay-pv__art { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 132px; }
.lay-pv__sum { margin-top: 8px; font-size: var(--t-meta); color: var(--ink-2); text-align: center; min-height: 1.45em; }
.lay-sheet { position: relative; display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); grid-template-rows: repeat(var(--rows, 1), 1fr);
  gap: 5px; padding: 5px; width: 86px; aspect-ratio: 210 / 297; background: var(--paper); border: 1.5px solid var(--ink); border-radius: var(--r-1);
  box-shadow: var(--shadow-sm); transition: width .35s var(--e-out), aspect-ratio .35s var(--e-out); }
.lay-sheet.is-land { width: 122px; aspect-ratio: 297 / 210; }
.lay-sheet.m-none { gap: 1px; padding: 1px; }
.lay-sheet.m-large { gap: 9px; padding: 9px; }
.lay-cell { display: grid; place-items: center; min-width: 0; background: var(--paper-2); border: 1px solid var(--rule); }
.lay-cell b { font: 700 14px/1 var(--f-mono); color: var(--ink); }
.lay-sheet .lay-cell:not(.is-blank) { box-shadow: inset 0 0 0 1px var(--rule); }
.lay-sheet.has-frame .lay-cell:not(.is-blank) { border-color: var(--ink-3); }
.lay-cell.is-blank { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--rule-2) 5px 6px); }
.lay-cell.is-blank b { font-size: 11px; font-weight: 500; color: var(--ink-3); }
/* page 1 carries the signal: where reading starts */
.lay-cell[data-first] { background: var(--ink); border-color: var(--ink); }
.lay-cell[data-first] b { color: var(--signal-lt); }
.lay-sheet--book { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; width: 118px; }
.lay-fold { position: absolute; top: -6px; bottom: -6px; left: 50%; border-left: 1.5px dashed var(--signal); transform: translateX(-.75px); }
.lay-side { display: grid; justify-items: center; gap: 6px; }
.lay-cap { font: 500 var(--t-label)/1.2 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.lay-flip { max-width: 76px; font: 500 11px/1.25 var(--f-mono); letter-spacing: .03em; text-transform: uppercase; color: var(--signal-ink);
  text-align: center; }
.lay-flip::before { content: "↻"; display: block; font-size: 20px; line-height: 1; margin-bottom: 4px; }
.lay-arrow { font: 700 20px/1 var(--f-mono); color: var(--ink-2); }
.lay-box { position: relative; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: var(--r-1); background: var(--paper);
  transition: width .35s var(--e-out), height .35s var(--e-out); }
.lay-box.is-src { border-style: dashed; background: var(--paper-2); }
.lay-box.is-dst { box-shadow: var(--shadow-sm); }
.lay-box.is-dst::after { content: ""; position: absolute; inset-inline: 0; top: -1.5px; height: 3px; background: var(--signal); }
.lay-box__s { font: 500 10.5px/1.2 var(--f-mono); color: var(--ink-3); text-align: center; padding: 2px; }
.lay-sheet:hover, .lay-box.is-dst:hover { box-shadow: var(--shadow); }
@media (prefers-reduced-motion: reduce) { .lay-sheet, .lay-box, .lay-chip { transition: none; } }
@media (max-width: 420px) {
  .lay-pv__art { gap: 10px; }
  .lay-sheet.is-land { width: 108px; }
  .lay-sheet--book { width: 104px; }
  .seg--4 .seg__n { font-size: 14px; }
}