/* maXPey Bitki Arşivi — Herbaryum tasarım sistemi
   Fikir: her bitki bir herbaryum föyü. Fotoğraf kartona bantla tutturulur, künye daktilo etiketidir,
   her bakım bir mühürdür. Renk sadece mühürlerde ve işlemlerde anlam taşır. */

:root {
  --board: #e5e4d8;      /* herbaryum kartonu */
  --sheet: #f4f3ec;      /* etiket kâğıdı */
  --ink: #26231f;        /* demir-mazı mürekkebi */
  --graphite: #67625a;
  --rule: #c8c5b6;
  --rule-soft: #d9d7ca;
  --sap: #2e4a3b;        /* birincil eylem */
  --sap-ink: #f4f3ec;
  --tape: rgba(236, 228, 201, .82);
  --gold: #e8b935;       /* maXPey logosunun altını */

  --c-water: #2c5c7e;
  --c-fertilize: #93661f;
  --c-prune: #a24a35;
  --c-care: #3d6a45;
  --c-note: #26231f;
  --c-photo: #55507a;

  --serif: "Libre Caslon Text", "Iowan Old Style", Georgia, serif;
  --display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --type: "Courier Prime", "Courier New", monospace;
  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--board);
  color: var(--ink);
  font: 17px/1.6 var(--serif);
  /* kartonun lifli dokusu: çok hafif, desen değil malzeme */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .14 0 0 0 0 .1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
a { color: var(--sap); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--sap); outline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============ MİSAFİR: föy sayfası ============ */
.folio { max-width: 680px; margin: 0 auto; padding: var(--s4) var(--s4) var(--s8); }

.folio-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0 var(--s5); }
.folio-head .host { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.folio-head .host img { max-height: 44px; max-width: 150px; width: auto; object-fit: contain; }
.folio-head .host span { font: 15px/1.3 var(--serif); color: var(--graphite); }
.lang { display: flex; font: 14px/1 var(--type); border: 1px solid var(--rule); }
.lang a { padding: 7px 10px; text-decoration: none; color: var(--graphite); }
.lang a[aria-current] { background: var(--ink); color: var(--sheet); }

/* Föy: fotoğraf kartona bantlı, künye sağ altta */
.specimen { position: relative; margin: 0 0 var(--s7); padding: var(--s5); background: var(--sheet); box-shadow: 0 1px 0 var(--rule), 0 18px 30px -24px rgba(38, 35, 31, .35); }
.specimen .mount { position: relative; }
.specimen .mount img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: var(--rule-soft); }
.specimen .tape { position: absolute; width: 84px; height: 26px; background: var(--tape); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.specimen .tape.a { top: -11px; left: 18%; transform: rotate(-4deg); }
.specimen .tape.b { top: -9px; right: 14%; transform: rotate(5deg); }
.specimen .blank { aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--board); color: var(--graphite); font: italic 22px/1.3 var(--serif); text-align: center; padding: var(--s6); }

.label {
  position: relative; margin: calc(-1 * var(--s7)) 0 0 auto; width: min(88%, 420px);
  background: #fbfaf5; border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 3px;
  padding: var(--s4) var(--s4) var(--s3); font: 15px/1.45 var(--type);
}
.label .no { display: flex; justify-content: space-between; color: var(--graphite); font-size: 13px; }
.label h1 { margin: var(--s2) 0 0; font: 400 clamp(30px, 8vw, 42px)/1.05 var(--display); letter-spacing: -.01em; }
.label .latin { margin: var(--s1) 0 var(--s3); font: italic 19px/1.3 var(--serif); }
.label dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s3); border-top: 1px dashed var(--rule); padding-top: var(--s2); }
.label dt { color: var(--graphite); }
.label dd { margin: 0; }

.section { margin: 0 0 var(--s7); }
.section > h2 { margin: 0 0 var(--s3); font: italic 400 24px/1.2 var(--serif); }
.story p { margin: 0 0 var(--s3); max-width: 62ch; line-height: 1.7; }

/* Zaman kaydırıcısı */
.timeline .frame { position: relative; aspect-ratio: 4 / 3; background: var(--sheet); padding: var(--s3); box-shadow: 0 1px 0 var(--rule); }
.timeline .frame img { position: absolute; inset: var(--s3); width: calc(100% - 2 * var(--s3)); height: calc(100% - 2 * var(--s3)); object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.timeline .frame img.on { opacity: 1; }
.timeline .when { display: flex; justify-content: space-between; align-items: baseline; margin-top: var(--s3); font: 15px/1.3 var(--type); }
.timeline .when strong { font-weight: 700; }
.timeline input[type=range] { width: 100%; margin: var(--s3) 0 var(--s1); accent-color: var(--ink); height: 32px; }
.timeline .hint { color: var(--graphite); font-size: 14px; margin: 0; }

/* Bakım defteri */
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger .month { font: italic 18px/1.3 var(--serif); color: var(--graphite); padding: var(--s4) 0 var(--s2); border-bottom: 1px solid var(--ink); }
.ledger .entry { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.ledger .day { font: 700 22px/1 var(--type); text-align: right; }
.ledger .what { min-width: 0; }
.ledger .what p { margin: 2px 0 0; color: var(--graphite); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.ledger .entry img { width: 64px; height: 64px; object-fit: cover; }
.ledger .empty { padding: var(--s5) 0; color: var(--graphite); font-style: italic; }
.more { display: inline-block; margin-top: var(--s4); font: 15px var(--type); }

/* Mühür: her işlem kendi mürekkebiyle */
.stamp {
  --c: var(--ink);
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 2px;
  border: 2px solid var(--c); box-shadow: inset 0 0 0 1px var(--sheet), inset 0 0 0 2px var(--c);
  color: var(--c); font: 700 14px/1.4 var(--type); border-radius: 3px;
  transform: rotate(var(--r, -2deg)); mix-blend-mode: multiply;
}
.stamp svg { width: 15px; height: 15px; flex: none; }
[data-t=water] { --c: var(--c-water); }
[data-t=fertilize] { --c: var(--c-fertilize); }
[data-t=prune] { --c: var(--c-prune); }
[data-t=care] { --c: var(--c-care); }
[data-t=note] { --c: var(--c-note); }
[data-t=photo] { --c: var(--c-photo); }

.colophon { margin-top: var(--s8); padding-top: var(--s4); border-top: 1px solid var(--ink); display: flex; justify-content: space-between; gap: var(--s4); font-size: 15px; color: var(--graphite); }

/* ============ BAHÇIVAN ============ */
.field { font-family: var(--sans); font-size: 18px; line-height: 1.45; }
.field .folio { padding-top: var(--s3); }
.workbar { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--ink); color: var(--sheet); font: 600 16px/1.3 var(--sans); }
.workbar a { color: var(--sheet); }

.panel { margin: 0 0 var(--s6); padding: var(--s4); background: var(--sheet); border: 2px solid var(--ink); }
.panel h2 { margin: 0 0 var(--s3); font: 700 21px/1.25 var(--sans); }
.panel .plant-id { margin: 0 0 var(--s4); color: var(--graphite); font: 16px/1.4 var(--sans); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.tile {
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--s3);
  min-height: 112px; padding: var(--s3) var(--s4) var(--s4); border: 0; border-radius: 6px; cursor: pointer;
  background: var(--c, var(--ink)); color: #fff; font: 700 20px/1.2 var(--sans); text-align: left;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .22); touch-action: manipulation;
}
.tile svg { width: 34px; height: 34px; }
.tile:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .22); }
.tile[disabled] { opacity: .55; }
.tile.wide { grid-column: 1 / -1; min-height: 84px; flex-direction: row; align-items: center; justify-content: flex-start; }

.pressed { position: relative; display: grid; place-items: center; min-height: 0; }
.pressed .stamp { font-size: 22px; padding: 8px 18px 6px; border-width: 3px; box-shadow: inset 0 0 0 2px var(--sheet), inset 0 0 0 4px var(--c); }
.pressed .stamp svg { width: 24px; height: 24px; }
.press-in { animation: press .32s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes press { from { transform: scale(1.6) rotate(-9deg); opacity: 0; } to { transform: scale(1) rotate(var(--r, -3deg)); opacity: 1; } }

.toast {
  position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: min(560px, calc(100% - 24px)); display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--s3) var(--s3) var(--s4); background: var(--ink); color: var(--sheet); font: 600 17px/1.3 var(--sans);
  border-radius: 6px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); z-index: 50;
}
.toast button { flex: none; padding: 12px 16px; border: 1px solid rgba(244, 243, 236, .5); background: transparent; color: var(--sheet); border-radius: 4px; font-weight: 700; cursor: pointer; }
.toast.err { background: var(--c-prune); }

.sheet-back { position: fixed; inset: 0; background: rgba(38, 35, 31, .55); z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: min(640px, 100%); max-height: 92vh; overflow: auto; background: var(--sheet); padding: var(--s5) var(--s4) max(var(--s5), env(safe-area-inset-bottom)); border-radius: 10px 10px 0 0; }
.sheet h3 { margin: 0 0 var(--s2); font: 700 22px/1.25 var(--sans); }
.sheet p { margin: 0 0 var(--s4); color: var(--graphite); }
.sheet img { width: 100%; max-height: 40vh; object-fit: contain; background: var(--board); margin-bottom: var(--s4); }
.sheet textarea { width: 100%; min-height: 140px; padding: var(--s3); border: 2px solid var(--ink); border-radius: 4px; background: #fff; font: 18px/1.45 var(--sans); }
.sheet .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-top: var(--s4); }

.big-btn { display: flex; align-items: center; justify-content: center; gap: var(--s3); width: 100%; min-height: 60px; padding: var(--s3) var(--s4); border: 2px solid var(--ink); border-radius: 6px; background: var(--sheet); color: var(--ink); font: 700 19px/1.2 var(--sans); cursor: pointer; text-decoration: none; }
.big-btn.primary { background: var(--sap); border-color: var(--sap); color: var(--sap-ink); }
.big-btn svg { width: 26px; height: 26px; }

.home-g { max-width: 560px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s8); }
.home-g h1 { margin: 0 0 var(--s2); font: 700 30px/1.15 var(--sans); }
.home-g .lead { margin: 0 0 var(--s5); color: var(--graphite); }
.scan-card { background: var(--sheet); border: 2px solid var(--ink); padding: var(--s5) var(--s4); text-align: center; margin-bottom: var(--s6); }
.scan-card svg.qr-art { width: 96px; height: 96px; margin: 0 auto var(--s3); display: block; }
.scan-card p { margin: var(--s3) 0 0; color: var(--graphite); font-size: 16px; }
#scanner { margin-top: var(--s4); display: none; }
#scanner video { width: 100%; border-radius: 6px; background: #000; aspect-ratio: 1; object-fit: cover; }
.done-list { list-style: none; padding: 0; margin: 0; }
.done-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); font-size: 16px; }
.done-list small { color: var(--graphite); display: block; }
.home-g h2 { font: 700 20px/1.3 var(--sans); margin: 0 0 var(--s2); }

/* ============ GİRİŞ / KURULUM ============ */
/* Arka plan: herbaryum kartonuna dağılmış küçük bitki çizimleri. Çok yavaş kayar, dikkat dağıtmaz. */
.gate {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--s6) var(--s4); font-family: var(--sans);
  background: url("leaves.svg") 0 0 / 320px 320px repeat, var(--board);
  animation: drift 160s linear infinite;
}
@keyframes drift { to { background-position: 320px 320px, 0 0; } }
.gate-card {
  width: min(420px, 100%); background: var(--sheet);
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 6px var(--sheet), 0 0 0 7px var(--ink), 0 30px 60px -30px rgba(38, 35, 31, .55);
  animation: rise .6s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.gate-band { background: var(--ink); padding: var(--s5) var(--s5) var(--s4); text-align: center; border-bottom: 3px solid var(--gold); }
.gate-band img { width: min(240px, 80%); height: auto; margin: 0 auto; }
.gate form { padding: var(--s5) var(--s5) var(--s6); }
.gate-title { margin: 0; font: 400 32px/1.1 var(--display); }
.gate .sub { margin: var(--s1) 0 var(--s4); color: var(--graphite); font: italic 17px var(--serif); }
.gate label { display: block; font: 600 15px/1.3 var(--sans); margin: var(--s4) 0 var(--s1); }
.gate input { width: 100%; height: 54px; padding: 0 var(--s3); border: 2px solid var(--ink); border-radius: 4px; background: #fff; font-size: 18px; }
.gate input:focus { outline: 3px solid var(--gold); outline-offset: 1px; }
.gate .big-btn { margin-top: var(--s5); }
.gate .err { margin: 0 0 var(--s3); padding: var(--s3); border-left: 4px solid var(--c-prune); background: #fff; font-size: 15px; }
.gate .note { margin: var(--s4) 0 0; color: var(--graphite); font-size: 14px; display: flex; gap: var(--s2); align-items: flex-start; }
.gate .note svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--c-care); }
.gate-foot { margin-top: var(--s5); text-align: center; font-size: 14px; color: var(--graphite); background: rgba(229, 228, 216, .85); padding: 4px 10px; }
.gate-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; }

/* ============ YÖNETİM ============ */
.desk { font: 15px/1.5 var(--sans); }
.masthead { background: var(--sheet); border-bottom: 1px solid var(--ink); }
.masthead .in { max-width: 1180px; margin: 0 auto; padding: var(--s4) var(--s5) 0; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s5); }
.masthead .brand { display: flex; align-items: baseline; gap: var(--s3); padding-bottom: var(--s3); text-decoration: none; color: var(--ink); }
.masthead .brand b { font: 400 28px/1 var(--display); }
.masthead .brand span { font: italic 16px var(--serif); color: var(--graphite); }
.drawers { display: flex; gap: 2px; overflow-x: auto; }
.drawers a { padding: 10px 16px 9px; text-decoration: none; color: var(--graphite); font-weight: 600; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0; white-space: nowrap; }
.drawers a[aria-current] { color: var(--ink); background: var(--board); border-color: var(--ink); margin-bottom: -1px; }
.drawers a:hover { color: var(--ink); }
.whoami { display: flex; gap: var(--s3); align-items: center; padding-bottom: var(--s3); color: var(--graphite); font-size: 14px; }
.whoami button { background: none; border: 0; color: var(--sap); text-decoration: underline; cursor: pointer; padding: 0; font-size: 14px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s8); }
.page-title { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s3); margin: 0 0 var(--s5); }
.page-title h1 { margin: 0; font: 400 34px/1.1 var(--display); }
.page-title p { margin: var(--s1) 0 0; color: var(--graphite); }
.page-title .logo { max-height: 56px; max-width: 160px; width: auto; }
.flash { margin: 0 0 var(--s5); padding: var(--s3) var(--s4); background: var(--sheet); border-left: 4px solid var(--sap); }

.cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s6); align-items: start; }
.cols.side { grid-template-columns: minmax(0, 1fr) 340px; }
.block > h2 { margin: 0 0 var(--s3); font: italic 400 22px/1.2 var(--serif); display: flex; align-items: baseline; gap: var(--s3); }
.block > h2 small { font: 14px var(--sans); color: var(--graphite); font-style: normal; }
.block + .block { margin-top: var(--s6); }

.summary { margin: 0 0 var(--s6); color: var(--graphite); font: italic 18px/1.5 var(--serif); }
.summary b { font: 700 18px var(--type); font-style: normal; color: var(--ink); }

.tbl-wrap { overflow-x: auto; background: var(--sheet); border-top: 2px solid var(--ink); }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { position: sticky; top: 0; background: var(--sheet); text-align: left; font-weight: 600; font-size: 13px; color: var(--graphite); padding: 10px 12px; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.tbl tr:hover td { background: #fbfaf5; }
.tbl .code { font: 700 15px var(--type); letter-spacing: .02em; }
.tbl .num { font-family: var(--type); text-align: right; white-space: nowrap; }
.tbl .muted, .muted { color: var(--graphite); }
.tbl .latin { font: italic 15px var(--serif); color: var(--graphite); }
.tbl tr.off td { opacity: .5; }
.tbl input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--ink); }
.late { font: 700 14px var(--type); color: var(--c-water); white-space: nowrap; }
.late::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }

.feed { list-style: none; margin: 0; padding: 0; background: var(--sheet); border-top: 2px solid var(--ink); }
.feed li { display: grid; grid-template-columns: 1fr auto; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--rule-soft); }
.feed .meta { color: var(--graphite); font-size: 14px; }
.feed img { width: 52px; height: 52px; object-fit: cover; }
.feed .line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }

.slip { background: var(--sheet); border: 1px solid var(--rule); padding: var(--s5); }
.slip h2 { margin: 0 0 var(--s4); font: italic 400 21px/1.2 var(--serif); }
.slip + .slip { margin-top: var(--s5); }
.f { display: block; margin-bottom: var(--s4); }
.f > span { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.f > small { display: block; color: var(--graphite); font-size: 13px; margin-top: 4px; }
.f input[type=text], .f input[type=email], .f input[type=password], .f input[type=number], .f input[type=date], .f select, .f textarea {
  width: 100%; min-height: 42px; padding: 8px 10px; border: 1px solid var(--graphite); border-radius: 4px; background: #fff; font: 15px/1.4 var(--sans);
}
.f textarea { min-height: 110px; resize: vertical; }
.f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid var(--sap); outline-offset: 0; border-color: var(--sap); }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s4); }
.check { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s4); }
.check input { width: 18px; height: 18px; accent-color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 42px; padding: 8px 16px; border: 1px solid var(--ink); border-radius: 4px; background: var(--sheet); color: var(--ink); font: 600 15px/1.2 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn.primary { background: var(--sap); border-color: var(--sap); color: var(--sap-ink); }
.btn.small { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.btn.link { border-color: transparent; background: none; color: var(--sap); text-decoration: underline; padding-inline: 4px; }
.btn.danger { color: var(--c-prune); border-color: var(--c-prune); }
.actions-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.tools { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; margin-bottom: var(--s3); }
.tools input[type=search] { min-height: 40px; padding: 6px 12px; border: 1px solid var(--graphite); border-radius: 4px; background: #fff; width: min(320px, 100%); }
.qr-mini { width: 132px; height: 132px; background: #fff; padding: 8px; border: 1px solid var(--rule); }
.qr-mini svg { width: 100%; height: 100%; }
.empty-state { padding: var(--s6) var(--s5); background: var(--sheet); border: 1px dashed var(--graphite); }
.empty-state p { margin: 0 0 var(--s3); }
details.inline summary { cursor: pointer; color: var(--sap); text-decoration: underline; list-style: none; font-size: 13px; }
details.inline summary::-webkit-details-marker { display: none; }
details.inline[open] { margin-top: var(--s2); }
details.inline form { display: flex; gap: var(--s2); margin-top: var(--s2); }
details.inline input { min-height: 34px; padding: 4px 8px; border: 1px solid var(--graphite); border-radius: 4px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: var(--s2); }
.thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; }

@media (max-width: 880px) {
  .cols, .cols.side { grid-template-columns: 1fr; }
  .wrap { padding: var(--s5) var(--s4) var(--s8); }
  .masthead .in { padding: var(--s3) var(--s4) 0; }
  .page-title h1 { font-size: 28px; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .specimen { padding: var(--s3); }
  .label { width: 94%; }
  .f2 { grid-template-columns: 1fr; }
  .tile { min-height: 100px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============ ETİKET BASKI ============ */
.print-bar { padding: var(--s4); display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; font-family: var(--sans); background: var(--sheet); border-bottom: 1px solid var(--ink); }
.labels { display: grid; grid-template-columns: repeat(3, 63mm); gap: 4mm; padding: 10mm; justify-content: center; }
.tag { width: 63mm; height: 42mm; background: #fff; border: .3mm solid var(--ink); outline: .3mm solid var(--ink); outline-offset: -1.6mm; padding: 3.2mm 3.4mm; display: grid; grid-template-columns: 1fr 24mm; gap: 2mm; break-inside: avoid; color: #000; }
.tag .t-name { font: 400 13pt/1.05 var(--display); margin: 0; }
.tag .t-latin { font: italic 8.5pt/1.2 var(--serif); margin: .8mm 0 0; }
.tag .t-meta { font: 7pt/1.3 var(--type); margin: 1.5mm 0 0; color: #333; }
.tag .t-no { font: 700 9pt var(--type); margin-top: auto; }
.tag .t-left { display: flex; flex-direction: column; min-width: 0; }
.tag .t-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1mm; }
.tag .t-qr svg { width: 24mm; height: 24mm; }
.tag .t-qr small { font: 6pt var(--type); }
.tag .t-host { max-height: 5mm; max-width: 26mm; object-fit: contain; object-position: left; margin-bottom: 1.2mm; }
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .print-bar { display: none; }
}

/* ============ AYLIK RAPOR ============ */
.report { max-width: 820px; margin: 0 auto; padding: var(--s6) var(--s5) var(--s8); }
.report header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s5); border-bottom: 2px solid var(--ink); padding-bottom: var(--s4); margin-bottom: var(--s5); }
.report header h1 { margin: 0; font: 400 36px/1.1 var(--display); }
.report header p { margin: var(--s1) 0 0; color: var(--graphite); font-style: italic; }
.report header img { max-height: 60px; max-width: 170px; width: auto; }
.tally { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin: 0 0 var(--s6); padding: 0; list-style: none; }
.tally li { display: flex; align-items: center; gap: var(--s2); font: 16px var(--serif); }
.tally b { font: 700 22px var(--type); }
.report .prose { font-size: 18px; max-width: 64ch; margin: 0 0 var(--s6); }
.report .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); margin-bottom: var(--s6); }
.report .gallery figure { margin: 0; background: var(--sheet); padding: var(--s2); }
.report .gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.report .gallery figcaption { font: 12px/1.3 var(--type); margin-top: var(--s1); color: var(--graphite); }
@media print { .report .noprint { display: none; } }