/* Sanat Etkinlikleri — A4 baskı, kes-yapıştır / yırt-yapıştır ince motor çalışmaları */

@page { size: A4 portrait; margin: 0; }

:root {
  --ink: #2f2a26;
  --ink-soft: #5c534c;
  --serif: "Baloo 2", "Literata", "Segoe UI", sans-serif;
  --sans: "Source Sans 3", "Segoe UI", sans-serif;
  --accent: #9333ea;
  --accent2: #ec4899;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: #ece7f5; color: var(--ink); font-family: var(--sans); }

.screen-nav { max-width: 900px; margin: 0 auto; padding: 1.5rem 1.25rem 0.5rem; }
.screen-nav h1 { font-family: var(--serif); font-weight: 700; font-size: 1.7rem; margin: 0 0 0.35rem; }
.screen-nav p { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.screen-nav a { color: var(--accent); font-weight: 600; }
.yazdir {
  margin-top: 0.7rem;
  border: 0;
  border-radius: 10px;
  padding: 7px 14px;
  background: #5b4a8a;
  color: #fff;
  font: 700 11pt "Segoe UI", sans-serif;
  cursor: pointer;
}

.deck { max-width: 900px; margin: 0 auto; padding: 0 0 40px; }

.page {
  width: 210mm; height: 297mm; margin: 12px auto;
  background: #fffdf9;
  box-shadow: 0 8px 28px rgba(47, 42, 38, 0.15);
  padding: 9mm 12mm 6mm;
  position: relative;
  overflow: hidden;
}

.page-head { border-bottom: 0.6mm solid rgba(47,42,26,0.15); padding-bottom: 2.5mm; }
.page-head h1 { font-family: var(--serif); font-weight: 800; font-size: 19pt; margin: 0; color: var(--ink); line-height: 1.2; }
.instr { font-size: 10.5pt; color: var(--ink-soft); margin: 2mm 0 0; }

/* ---------- illüstrasyon sahnesi ---------- */

.art-stage {
  position: relative;
  width: 100%;
  height: 156mm;
  margin: 3mm 0 3mm;
}

.tail-guide { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.tail-guide path {
  fill: none;
  stroke: rgba(47,42,26,0.5);
  stroke-width: 2;
  stroke-dasharray: 6 5.5;
  stroke-linecap: round;
}

.main-char-img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 92mm;
  height: auto;
  z-index: 2;
}

.preview-circle {
  position: absolute;
  top: 0; right: 2mm;
  width: 30mm; height: 30mm;
  border-radius: 50%;
  border: 1.3mm dashed var(--accent);
  background: #fffdf9;
  padding: 1mm;
  overflow: hidden;
  z-index: 3;
}
.preview-circle img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* Bitmiş 3B süsleme örneği — tamamı daire içinde görünsün */
.preview-circle--craft img { object-fit: contain; background: #f7f3ea; padding: 0.8mm; }
.preview-label {
  position: absolute; top: 31mm; right: 2mm; width: 30mm;
  text-align: center; font-family: var(--serif); font-weight: 700;
  font-size: 7.5pt; color: var(--accent);
}

/* ---------- konfeti / dekoratif şekiller ---------- */

.confetti { position: absolute; z-index: 1; }
.confetti.star {
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.confetti.bubble { border-radius: 50%; }
.confetti.heart svg { width: 100%; height: 100%; }

/* ---------- kesme çizgisi ---------- */

.cut-line {
  display: flex; align-items: center; gap: 2.5mm;
  margin: 3.5mm 0 3mm;
}
.cut-line .scissors { font-size: 14pt; color: var(--ink-soft); flex: none; transform: scaleX(-1); }
.cut-line .dash {
  flex: 1; height: 0; border-top: 0.6mm dashed rgba(47,42,26,0.4);
}

/* ---------- tüy şeridi (kesilecek parçalar) ---------- */

.feather-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 2mm; height: 66mm;
}
.feather-card {
  flex: 1; height: 100%;
  border: 0.6mm dashed rgba(47,42,26,0.4);
  border-radius: 4mm;
  display: flex; align-items: center; justify-content: center;
  padding: 2mm;
  background: rgba(250,248,244,0.4);
}
.feather-card img { max-width: 100%; max-height: 100%; object-fit: contain; }

.foot {
  font-size: 7.5pt;
  color: rgba(47,42,26,0.5);
  letter-spacing: 0.03em;
  text-align: center;
  margin-top: 2.5mm;
}
.foot.foot--branded {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4mm;
  text-align: left;
}
.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 1.8mm;
  flex-shrink: 0;
}
.foot-brand img {
  width: 16px !important;
  height: 16px !important;
  max-width: 20px !important;
  max-height: 16px !important;
  object-fit: contain !important;
  display: block;
  border-radius: 1.2mm;
}
.foot-brand-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 8pt;
  color: #5a6b5e;
  letter-spacing: 0.02em;
  line-height: 1;
}
.foot-meta {
  flex: 1;
  text-align: right;
  min-width: 0;
}

.marka {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.marka img,
.page:has(.yuz-kutu) .foot img {
  height: 16px !important;
  width: auto !important;
  max-height: 16px !important;
  max-width: 20px !important;
  object-fit: contain !important;
  display: inline-block;
  vertical-align: middle;
}
.marka em { font-style: italic; font-weight: 700; }

.page:has(.yuz-kutu) > .foot {
  position: absolute;
  left: 0;
  bottom: 4mm;
  margin-top: 0;
}

@media print {
  html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; height: auto !important; }
  .screen-nav, nav, .no-print, .yazdir { display: none !important; }
  .deck { max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .page {
    box-shadow: none !important;
    margin: 0 !important;
    width: 210mm !important;
    height: 297mm !important;
    max-height: 297mm !important;
    overflow: hidden !important;
    page-break-after: always !important;
    break-after: page !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .page:last-child { page-break-after: avoid !important; break-after: avoid !important; }
}

/* ==================================================================
   Boya-Kes-Katla Süsleme mekaniği (kağıt yelpaze süs — pencere sahnesi +
   akordeon katlamalı alt kısım + fiyonk)
   ================================================================== */

.orn-wrap { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: 1mm; }

.orn-bow-card {
  width: 46mm; margin-bottom: -9mm; z-index: 3; position: relative;
  padding: 1.5mm; border: 0.7mm solid rgba(47,42,26,0.55); border-radius: 3mm;
  background: #fffdf9;
}
.orn-bow-card img { width: 100%; display: block; }
.orn-bow-card .card-label { position: absolute; bottom: -4.5mm; left: 0; right: 0; text-align: center; font-size: 6.5pt; color: var(--ink-soft); }

.orn-circle {
  position: relative; width: 148mm; height: 148mm; border-radius: 50%;
  border: 0.9mm solid rgba(47,42,26,0.65); overflow: hidden; background: #fffdf9;
}
.orn-scene-half { position: absolute; top: 0; left: 0; width: 100%; height: 52%; overflow: hidden; }
.orn-scene-half img { width: 100%; height: auto; display: block; }

/* Sahne ile akordeon alanının kesiştiği yer — KESİLMEZ, sadece hafif bir sınır göstergesi */
.orn-equator { position: absolute; top: 52%; left: 4%; right: 4%; height: 0; border-top: 0.35mm solid rgba(47,42,26,0.2); z-index: 4; }

.orn-fan-half { position: absolute; bottom: 0; left: 0; width: 100%; height: 48%; }
.orn-fan-half svg { width: 100%; height: 100%; display: block; }
.orn-fan-half .fold-line { stroke: rgba(47,42,26,0.4); stroke-width: 1.2; stroke-dasharray: 4 4; fill: none; }
.orn-fan-half .cut-line-radial { stroke: #dc2626; stroke-width: 1.6; fill: none; }
.orn-fan-half .coloring-star { stroke: rgba(47,42,26,0.5); stroke-width: 1.3; fill: none; }
.orn-fan-half .scissors3 {
  font-size: 8pt; fill: #dc2626;
}

.orn-label { text-align: center; font-family: var(--serif); font-weight: 700; font-size: 8pt; color: var(--accent); margin-top: 3mm; }

/* ---------- U tipi gövde: alt kısım yuvarlak, yanlardan düz yukarı çıkar ---------- */
/* (daire tipinden farkı sadece dış hat: tam çember değil, "kapsül/U" silueti) */

.orn-u {
  position: relative; width: 120mm; height: 170mm;
  border-radius: 0 0 60mm 60mm;
  border: 0.9mm solid rgba(47,42,26,0.65);
  overflow: hidden; background: #fffdf9;
}
.orn-u .orn-scene-half { position: absolute; top: 0; left: 0; width: 100%; height: 110mm; overflow: hidden; }
.orn-u .orn-scene-half img { width: 100%; height: auto; display: block; }
.orn-u .orn-equator { position: absolute; top: 110mm; left: 4%; right: 4%; height: 0; border-top: 0.35mm solid rgba(47,42,26,0.2); z-index: 4; }
.orn-u .orn-fan-half { position: absolute; bottom: 0; left: 0; width: 100%; height: 60mm; }

/* U gövdesinin üstü DÜZ (daire gibi kubbe değil) — bu yüzden kart sahnenin içine
   binmez, sadece hafif boşlukla üstüne oturur (aksi hâlde sahnenin köşelerindeki
   kemer eğrisi kartın yanlarından "sarkmış" gibi görünüyordu). */
.orn-bow-card--u { margin-bottom: 2mm; }

/* Karakter şeridi olan sayfalarda süsleme gövdesini küçült — A4'e sığsın */
.page--with-chars { padding-top: 7mm; }
.page--with-chars .page-head { padding-bottom: 1.5mm; }
.page--with-chars .instr { margin-top: 1.2mm; font-size: 9.5pt; line-height: 1.35; }
.page--with-chars .art-stage { margin: 1mm 0 0.5mm; }
.page--with-chars .orn-wrap { margin-top: 0; }

.orn-wrap--compact .orn-circle {
  width: 112mm; height: 112mm;
}
.orn-wrap--compact .orn-bow-card { width: 36mm; }
.orn-wrap--compact .orn-u {
  width: 96mm; height: 132mm;
  border-radius: 0 0 48mm 48mm;
}
.orn-wrap--compact .orn-u .orn-scene-half { height: 84mm; }
.orn-wrap--compact .orn-u .orn-equator { top: 84mm; }
.orn-wrap--compact .orn-u .orn-fan-half { height: 48mm; }
.orn-wrap--compact .orn-label { font-size: 7.5pt; margin-top: 2mm; }

/* ---------- L-sekmeli ayakta duran karakterler ---------- */
/* Karakter + alt sekme tek parça kesilir; kesikli çizgiden 90° katlanıp
   sekme zemine yapıştırılınca karakter L şeklinde ayakta durur. */

.char-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8mm;
  margin: 1.5mm 0 1mm;
  min-height: 46mm;
}

.char-stand {
  width: 38mm;
  border: 0.7mm dashed rgba(47,42,26,0.55);
  border-radius: 3mm;
  background: #fffdf9;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5mm 1.5mm 0;
  position: relative;
}

.char-stand .char-body {
  width: 100%;
  height: 34mm;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.char-stand .char-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

.char-stand .char-fold {
  width: 100%;
  height: 0;
  border-top: 0.55mm dashed #dc2626;
  margin-top: 0.5mm;
  position: relative;
}
.char-stand .char-fold::after {
  content: "L katla";
  position: absolute;
  left: 50%;
  top: -3.2mm;
  transform: translateX(-50%);
  font-size: 5.5pt;
  font-family: var(--serif);
  font-weight: 700;
  color: #dc2626;
  background: #fffdf9;
  padding: 0 1.5mm;
  white-space: nowrap;
}

.char-stand .char-tab {
  width: 100%;
  height: 11mm;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6pt;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: repeating-linear-gradient(
    -45deg,
    rgba(220,38,38,0.04),
    rgba(220,38,38,0.04) 2mm,
    rgba(220,38,38,0.09) 2mm,
    rgba(220,38,38,0.09) 4mm
  );
  border-radius: 0 0 2mm 2mm;
}

.char-stand .char-scissors {
  position: absolute;
  top: -2mm;
  right: -1mm;
  font-size: 9pt;
  color: var(--ink-soft);
  transform: scaleX(-1);
  line-height: 1;
}

.char-hint {
  text-align: center;
  font-size: 7.5pt;
  color: var(--ink-soft);
  margin: 2mm 0 1mm;
  font-family: var(--serif);
  font-weight: 600;
}

/* ---------- İkiye Katlamalı Hayvan (koinobori tarzı) ---------- */
.page--ikiye-katla {
  padding: 7mm 10mm 5mm;
  display: flex;
  flex-direction: column;
}
.page--ikiye-katla .page-head {
  border-bottom: none;
  padding-bottom: 1mm;
  text-align: center;
}
.page--ikiye-katla .page-head h1 {
  font-size: 18pt;
}
.page--ikiye-katla .instr {
  font-size: 9.5pt;
  margin-top: 1mm;
}
.ikat-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4mm 8mm;
  justify-content: center;
  margin: 1.5mm 0 2mm;
  font-size: 9pt;
  color: var(--ink-soft);
  font-weight: 600;
}
.ikat-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 2mm;
}
.ikat-leg-cut,
.ikat-leg-fold {
  display: inline-block;
  width: 14mm;
  height: 0;
  border: none;
}
.ikat-leg-cut {
  border-top: 1.4mm solid var(--ink);
}
.ikat-leg-fold {
  border-top: 1.2mm dashed rgba(47, 42, 38, 0.55);
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 2mm,
    rgba(47, 42, 38, 0.55) 2mm,
    rgba(47, 42, 38, 0.55) 2.4mm
  );
  height: 1.2mm;
  border-top: none;
  background-image: repeating-linear-gradient(
    90deg,
    var(--ink) 0 2.2mm,
    transparent 2.2mm 3mm,
    var(--ink) 3mm 3.5mm,
    transparent 3.5mm 5.5mm
  );
}
.ikat-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1mm 0;
}
.ikat-template {
  width: 100%;
  max-width: 188mm;
}
.ikat-sheet {
  width: 100%;
  height: auto;
  max-height: 230mm;
  object-fit: contain;
  display: block;
}
.ikat-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}
.ikat-cut {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ikat-outline {
  stroke-width: 2.8;
}
.ikat-hole {
  fill: #fffdf9;
  stroke-width: 2.2;
}
.ikat-fold {
  fill: none;
  stroke: rgba(47, 42, 38, 0.7);
  stroke-width: 2;
  stroke-dasharray: 10 4 2 4;
  stroke-linecap: round;
}
.ikat-label {
  text-align: center;
  font-size: 9pt;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-weight: 600;
  margin: 1mm 0 1mm;
}
.page--ikiye-katla .preview-circle {
  width: 38mm;
  height: 38mm;
  top: 0;
  right: 0;
  z-index: 4;
}
.page--ikiye-katla .preview-label {
  top: 39mm;
  right: 0;
  width: 38mm;
  z-index: 4;
  background: #fffdf9;
  line-height: 1.1;
  padding: 0.5mm 0;
}
.page--ikiye-katla .foot { margin-top: auto; }

/* ---------- Saksılı Model (sukulent + ayrı taban) ---------- */
.page--saksi-model {
  padding: 6mm 9mm 5mm;
  display: flex;
  flex-direction: column;
}
.page--saksi-model .page-head {
  border-bottom: none;
  padding-bottom: 0.5mm;
  text-align: center;
}
.page--saksi-model .page-head h1 {
  font-size: 17pt;
}
.page--saksi-model .instr {
  font-size: 9pt;
  margin-top: 1mm;
}
.saksi-top {
  display: grid;
  grid-template-columns: 42mm 1fr;
  gap: 4mm 6mm;
  align-items: start;
  margin: 1mm 0 2mm;
}
.saksi-preview-frame {
  width: 42mm;
  height: 42mm;
  border: 0.45mm dashed rgba(47, 42, 38, 0.45);
  border-radius: 2mm;
  overflow: hidden;
  background: #f7f3ea;
  display: flex;
  align-items: center;
  justify-content: center;
}
.saksi-preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1mm;
}
.saksi-base {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.saksi-base img {
  width: min(100%, 78mm);
  height: auto;
  max-height: 72mm;
  object-fit: contain;
  display: block;
}
.saksi-cap {
  margin-top: 1mm;
  text-align: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 8pt;
  color: var(--accent);
}
.saksi-sheet {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.saksi-sheet img {
  width: 100%;
  max-width: 192mm;
  max-height: 118mm;
  height: auto;
  object-fit: contain;
  display: block;
}
.page--saksi-model .foot { margin-top: auto; }

/* ---------- Bir Hayvan Yap (parçalı kes-yapıştır) ---------- */
.page--hayvan-yap {
  padding: 7mm 10mm 5mm;
  display: flex;
  flex-direction: column;
}
.hayvan-yap-head {
  border-bottom: none;
  padding-bottom: 1.5mm;
  text-align: center;
}
.hayvan-yap-head h1 {
  font-size: 18pt;
  background: linear-gradient(90deg, #f59e0b, #ec4899, #8b5cf6, #22c55e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hayvan-yap-head .instr {
  font-size: 9.5pt;
  margin-top: 1mm;
}
.hayvan-yap-sheet {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin: 1mm 0;
}
.hayvan-yap-sheet img {
  max-width: 100%;
  max-height: 245mm;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.page--hayvan-yap .foot { margin-top: auto; }

/* ---------- Temalı kitapçık kapak ---------- */
.page--kitapcik-kapak {
  padding: 10mm 12mm 6mm;
  display: flex;
  flex-direction: column;
}
.kitapcik-kapak {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 0;
}
.kitapcik-eyebrow {
  margin: 2mm 0 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 11pt;
  color: var(--accent);
  letter-spacing: 0.04em;
}
.kitapcik-title {
  margin: 2mm 0 4mm;
  font-family: var(--serif);
  font-weight: 800;
  font-size: 28pt;
  line-height: 1.15;
  color: var(--ink);
}
.kitapcik-cover-art {
  flex: 1;
  width: 100%;
  max-width: 165mm;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140mm;
}
.kitapcik-cover-art img {
  max-width: 100%;
  max-height: 190mm;
  object-fit: contain;
  display: block;
}
.kitapcik-name {
  width: 100%;
  max-width: 140mm;
  display: flex;
  align-items: flex-end;
  gap: 3mm;
  margin: 6mm 0 2mm;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 12pt;
  color: var(--ink-soft);
}
.kitapcik-name-line {
  flex: 1;
  border-bottom: 0.7mm solid rgba(47,42,26,0.45);
  height: 0;
  margin-bottom: 1mm;
}
.page--kitapcik-kapak .foot { margin-top: auto; }