/* ==========================================================
   Ali Sinan Kartal · portfolyo
   Mat, toprak tonlu, indie stüdyo havası.
   Dış font yok: sistem fontları + Windows'ta bulunan yedekler.
   ========================================================== */
:root {
  --ink: #2a1f17;          /* koyu kahve-siyah metin */
  --ink-2: #4a3828;
  --ink-soft: #6a5643;
  --bone: #efe6d2;         /* kemik kâğıt */
  --sand: #e4d6b8;
  --sand-2: #d6c39d;
  --terra: #b5583a;        /* pişmiş toprak */
  --terra-d: #93432b;
  --rust: #8c3b22;
  --ochre: #c8962e;
  --ochre-d: #a87a22;
  --mustard: #d4a73a;
  --olive: #6b6b3a;
  --moss: #5d6b3a;
  --moss-d: #4a5530;
  --umber: #3a2b20;
  --night: #262019;

  --sec-hero: #ebe1cb;
  --sec-about: #e3d5b6;
  --sec-proj: #ddd3b8;
  --sec-contact: #e8dcc2;
  --sec-foot: var(--umber);

  --line: 2px solid var(--ink);
  --r: 6px;
  --r-lg: 10px;
  --press: 0 3px 0 var(--ink);
  --lift: 0 10px 24px -14px rgba(42, 31, 23, .55);
  --card: 0 4px 0 var(--ink), var(--lift);

  --font-display: Rockwell, "Rockwell Nova", "Roboto Slab", "Zilla Slab", Cambria, Georgia, "Times New Roman", serif;
  --font-serif: Cambria, Georgia, "Times New Roman", serif;
  --font-body: "Segoe UI", "Gill Sans", "Gill Sans MT", "Trebuchet MS", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: Consolas, "Cascadia Mono", "Cascadia Code", ui-monospace, "SFMono-Regular", Menlo, "Courier New", monospace;

  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16  0 0 0 0 0.12  0 0 0 0 0.09  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M4 3 L4 22 L9 17.5 L12.3 24.5 L15.6 23 L12.4 16 L19 15.6 Z' fill='%23efe6d2' stroke='%232a1f17' stroke-width='1.8' stroke-linejoin='round'/></svg>") 4 3, auto;
  --cursor-hand: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><path d='M4 3 L4 22 L9 17.5 L12.3 24.5 L15.6 23 L12.4 16 L19 15.6 Z' fill='%23c8962e' stroke='%232a1f17' stroke-width='1.8' stroke-linejoin='round'/></svg>") 4 3, pointer;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4.2rem; }
main, .footer { overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0; font-family: var(--font-body); font-size: 1.06rem; line-height: 1.65;
  color: var(--ink); background: var(--sec-hero); cursor: var(--cursor); overflow-x: hidden;
}
/* kâğıt greni */
body { position: relative; }
body::after {
  content: ""; position: absolute; inset: 0; z-index: 400; pointer-events: none;
  background-image: var(--grain); opacity: .16; mix-blend-mode: multiply;
}
a, button, [tabindex], label { cursor: var(--cursor-hand); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; margin: 0 0 .5rem; letter-spacing: .005em; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
mark { background: transparent; color: inherit; box-shadow: inset 0 -.42em 0 rgba(200, 150, 46, .45); padding: 0 .1em; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.2em; }

/* ---------- erişilebilirlik ---------- */
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 1000; background: var(--bone); color: var(--ink); border: var(--line); padding: .5rem 1rem; border-radius: var(--r); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px dashed var(--terra); outline-offset: 3px; }
h1:focus { outline: none; }

/* ---------- sekme çubuğu: oyun menüsü ---------- */
.tabbar {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: flex-end; gap: 1.2rem;
  padding: .5rem clamp(.6rem, 3vw, 2rem) 0; background: var(--umber); color: var(--sand);
  border-bottom: 3px solid var(--ink);
}
.brand { font-family: var(--font-display); font-weight: 700; letter-spacing: .2em; font-size: .95rem; color: var(--mustard); padding-bottom: .7rem; flex: none; }
.tabbar nav { min-width: 0; flex: 1; }
.tabs { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  font-family: var(--font-mono); font-size: .9rem; text-decoration: none; color: #cdbd9c;
  padding: .5rem .95rem .45rem; border: 1.5px solid #5a4636; border-bottom: none; border-radius: var(--r) var(--r) 0 0;
  background: #47362a; transition: background .2s, color .2s, transform .2s;
}
.tab:hover { background: #55412f; color: var(--bone); transform: translateY(-2px); }
.tab:focus-visible { outline-offset: -4px; outline-color: var(--mustard); }
.tab-no { font-family: var(--font-display); font-size: .78rem; color: var(--ochre); min-width: 1.2em; }
.tab[aria-current="true"] { background: var(--sec-hero); color: var(--ink); border-color: var(--ink); padding-bottom: .6rem; }
.tab[aria-current="true"] .tab-no { color: var(--terra); }

/* ---------- butonlar: mat, basılınca çöken ---------- */
.btn {
  --b: var(--bone); --c: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem; letter-spacing: .01em; color: var(--c); text-decoration: none;
  padding: .7rem 1.2rem; background: var(--b); border: var(--line); border-radius: var(--r);
  box-shadow: var(--press); transition: transform .15s ease, box-shadow .15s ease, background .2s;
}
.btn:hover, .btn:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); transition-duration: .05s; }
.btn-terra { --b: var(--terra-d); --c: var(--bone); } /* küçük metin: #93432b, 5.5:1 */
.btn-ochre { --b: var(--ochre); }
.btn-paper { --b: var(--bone); }
.btn-moss { --b: var(--moss); --c: var(--bone); }

/* ---------- giriş ---------- */
.hero-sec { background: var(--sec-hero); padding-bottom: 1.8rem; }
.hero {
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 2.5rem;
  max-width: 1150px; margin: 0 auto; padding: clamp(2.2rem, 5vw, 4.5rem) clamp(1rem, 4vw, 3rem) 2rem;
}
.kicker { margin: 0 0 1.2rem; font-family: var(--font-mono); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--terra-d); }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); margin: 0; }
.h1-small { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: .45em; color: var(--ink-soft); margin-bottom: .1em; }
.name-btn {
  font: inherit; color: var(--ink); background: none; border: 0; padding: 0; text-align: left;
  transition: color .2s;
}
.name-btn:hover, .name-btn:focus-visible { color: var(--terra-d); }
.name-btn:active { transform: translateY(1px); }
.scribble { display: block; width: min(320px, 80%); height: 16px; margin: .2rem 0 0; }
.scribble path { fill: none; stroke: var(--terra); stroke-width: 3; stroke-linecap: round; }
.hint { margin: .6rem 0 1rem; font-size: .92rem; font-style: italic; font-family: var(--font-serif); color: var(--ink-soft); }
.lead { font-size: clamp(1.08rem, 2vw, 1.22rem); max-width: 34rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.6rem; }

/* ördek sahnesi */
.hero-art { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.duck-stage {
  position: relative; width: min(440px, 100%); aspect-ratio: 1.12; touch-action: pan-y;
  border: 1.5px dashed rgba(42, 31, 23, .3); border-radius: 50% 50% 46% 54% / 52% 48% 52% 48%;
}
.duck-btn { position: absolute; left: 50%; top: 52%; width: 74%; transform: translate(-50%, -50%); background: none; border: 0; padding: 0; border-radius: 30%; }
.duck { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 92%; animation: bob 5s ease-in-out infinite; }
.duck-btn:hover .duck, .duck-btn:focus-visible .duck { animation: rock 1.6s ease-in-out infinite; }
.duck .wing { transform-box: fill-box; transform-origin: 20% 40%; }
.duck-btn.quack .wing-l { animation: flap .5s ease-in-out 2; }
.eyes-blink { transform-box: fill-box; transform-origin: center; transition: transform .08s ease-in; }
.duck.blink .eyes-blink { transform: scaleY(.1); }
.eyes-look { transition: transform .5s ease-out, opacity .15s; }
.eye-happy { opacity: 0; transition: opacity .15s; }
.duck.happy .eye-happy { opacity: 1; }
.duck.happy .eyes-look { opacity: 0; }
.beak-low { transform-box: fill-box; transform-origin: 0 0; transition: transform .2s ease; }
.duck-btn.quack .beak-low, .duck.happy .beak-low { transform: rotate(14deg); }
.duck.thinking { animation: tilt 1.8s ease-in-out infinite; }
.duck-bubble {
  position: absolute; top: -10%; left: 56%; z-index: 3; white-space: nowrap;
  font-family: var(--font-display); font-size: 1.05rem; color: var(--ink);
  background: var(--bone); border: var(--line); border-radius: 3px; padding: .25rem .75rem;
  opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .25s ease; pointer-events: none;
}
.duck-bubble::after { content: ""; position: absolute; left: 14px; bottom: -8px; width: 12px; height: 12px; background: var(--bone); border-right: var(--line); border-bottom: var(--line); transform: rotate(45deg); }
.duck-btn.quack .duck-bubble, .duck-btn.talk .duck-bubble { opacity: 1; transform: translateY(0); }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes rock { 0%,100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes tilt { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(-3deg); } }
@keyframes flap { 50% { transform: rotate(-10deg); } }

/* rozetler (sürüklenebilir) */
.stk {
  position: absolute; z-index: 4; display: grid; place-items: center;
  width: 3.3rem; height: 3.3rem; padding: 0; border-radius: 50%;
  background: var(--bone); color: var(--ink); border: var(--line);
  box-shadow: inset 0 0 0 4px var(--bone), inset 0 0 0 5.5px rgba(42,31,23,.55), 0 3px 0 var(--ink);
  touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform .2s ease, box-shadow .2s;
  animation: drift 7s ease-in-out infinite;
}
.stk:nth-of-type(2) { animation-delay: -1.5s; } .stk:nth-of-type(3) { animation-delay: -3s; }
.stk:nth-of-type(4) { animation-delay: -4.5s; } .stk:nth-of-type(5) { animation-delay: -6s; }
.stk-ic { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.stk-text span { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; line-height: 1; }
.stk-olive { background: #d7d3a8; box-shadow: inset 0 0 0 4px #d7d3a8, inset 0 0 0 5.5px rgba(42,31,23,.55), 0 3px 0 var(--ink); }
.stk-mustard { background: var(--mustard); box-shadow: inset 0 0 0 4px var(--mustard), inset 0 0 0 5.5px rgba(42,31,23,.55), 0 3px 0 var(--ink); }
.stk-bug { background: var(--terra); color: var(--bone); box-shadow: inset 0 0 0 4px var(--terra), inset 0 0 0 5.5px rgba(239,230,210,.6), 0 3px 0 var(--ink); }
.stk:hover { transform: rotate(-8deg); }
.stk.dragging { animation: none; transform: scale(1.08) rotate(6deg); box-shadow: inset 0 0 0 4px var(--bone), 0 12px 18px -8px rgba(42,31,23,.6); z-index: 6; cursor: grabbing; }
.stk-bug.dragging { box-shadow: inset 0 0 0 4px var(--terra), 0 12px 18px -8px rgba(42,31,23,.6); }
.stk.poof { animation: poof .45s ease-in forwards; }
.stk.reborn { animation: reborn .45s ease-out; }
.duck-stage.target { border-color: var(--terra); border-style: solid; }
@keyframes drift { 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes poof { to { transform: scale(.2) rotate(90deg); opacity: 0; } }
@keyframes reborn { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.sticker-hint { margin: 0; font-size: .88rem; font-style: italic; font-family: var(--font-serif); color: var(--ink-soft); text-align: center; }

/* bug kutusu */
.bugbox { width: min(440px, 100%); background: var(--bone); border: var(--line); border-radius: var(--r-lg); padding: .95rem 1rem; box-shadow: var(--card); }
.bugbox label { display: block; font-family: var(--font-display); font-size: 1.1rem; margin-bottom: .5rem; }
.bug-row { display: flex; gap: .5rem; }
.bug-row input {
  flex: 1; min-width: 0; font: inherit; font-size: 1rem; color: var(--ink); background: var(--sand);
  border: 1.5px solid var(--ink-soft); border-radius: var(--r); padding: .6rem .8rem;
}
.bug-row input::placeholder { color: var(--ink-soft); }
.bug-row input:focus { outline: 2px dashed var(--terra); outline-offset: 2px; border-color: var(--ink); }
.bug-row .btn { padding: .55rem 1rem; }
.bug-answer { margin: .75rem 0 0; min-height: 1.6em; }
.bug-answer:empty { display: none; }
.bug-answer.thinking::after { content: "…"; display: inline-block; animation: dots 1.2s steps(4) infinite; overflow: hidden; vertical-align: bottom; width: 1.2em; }
.bug-answer .from { font-family: var(--font-display); color: var(--terra-d); }
@keyframes dots { from { width: 0; } to { width: 1.2em; } }

.ticker {
  overflow: hidden; color: var(--ink-2); border-block: 1.5px solid var(--ink); margin: 1rem 0 0;
  font-family: var(--font-display); font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.ticker-track { display: inline-flex; padding: .55rem 0; animation: ticker 40s linear infinite; }
.ticker-track span { padding-right: 1rem; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---------- ayırıcılar: tırtıklı kâğıt kenarı ---------- */
.divider { line-height: 0; margin: 0; }
.divider svg { display: block; width: 100%; height: clamp(22px, 3vw, 40px); }

/* ---------- bölümler ---------- */
.sec { padding: 2.4rem 0 3.4rem; }
.sec-about { background: var(--sec-about); }
.sec-proj { background: var(--sec-proj); }
.sec-contact { background: var(--sec-contact); }
.wrap { max-width: 1150px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); }
.file-label { font-family: var(--font-mono); font-size: .9rem; margin: 0 0 .2rem; color: var(--ink-soft); }
.section-title { font-size: clamp(2rem, 5vw, 2.9rem); margin-bottom: 1rem; display: inline-block; border-bottom: 3px solid var(--terra); padding-bottom: .1rem; }
.sec-intro { font-family: var(--font-serif); font-style: italic; font-size: 1.12rem; margin: 0 0 1.8rem; color: var(--ink-soft); }
.small-print { margin-top: 2rem; color: var(--ink-soft); font-size: .95rem; }

/* ---------- karakter kâğıdı ---------- */
.sheet {
  background: var(--bone); border: var(--line); border-radius: var(--r-lg); padding: clamp(1.1rem, 3vw, 2rem);
  box-shadow: var(--card);
  margin: 8px;
}
.sheet-top { margin: 0 0 1.4rem; font-family: var(--font-mono); font-size: .9rem; letter-spacing: .16em; text-transform: uppercase; color: var(--terra-d); border-bottom: 1.5px dashed rgba(42,31,23,.4); padding-bottom: .6rem; }
.caret { display: inline-block; animation: nudge-r 1.6s ease-in-out infinite; }
@keyframes nudge-r { 50% { transform: translateX(3px); } }
.sheet-body { display: grid; grid-template-columns: minmax(140px, 210px) 1fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: start; }
.medal { position: relative; text-align: center; }
.medal svg { display: block; width: 100%; height: auto; }
.p1 { display: inline-block; margin-top: .6rem; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; border: 1.5px solid var(--ink); border-radius: 3px; padding: .1rem .5rem; }
.sheet-name { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: .9rem; }
.stat-list { margin: 0 0 1.3rem; display: grid; gap: 0; }
.stat-list > div { display: grid; grid-template-columns: 7rem 1fr; gap: .8rem; padding: .45rem 0; border-bottom: 1px dotted rgba(42,31,23,.45); }
.stat-list dt { font-family: var(--font-mono); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--olive); padding-top: .12rem; }
.stat-list dd { margin: 0; font-weight: 600; }
.stat-list small { color: var(--ink-soft); font-weight: 400; font-style: italic; }
.stat-list a { color: var(--terra-d); }
.perk-title { font-family: var(--font-mono); font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--olive); font-weight: 400; }
.perks { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .55rem; }
.perks li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 38%); gap: 1rem; align-items: center; }
.bar { height: .85rem; border: 1.5px solid var(--ink); border-radius: 3px; padding: 1.5px; }
.bar i { display: block; height: 100%; width: 100%; background: repeating-linear-gradient(-45deg, var(--terra) 0 5px, var(--terra-d) 5px 7px); transform-origin: left; animation: fill 1.6s ease-out both; }
.perks li:nth-child(2) .bar i { animation-delay: .2s; background: repeating-linear-gradient(-45deg, var(--ochre) 0 5px, var(--ochre-d) 5px 7px); }
.perks li:nth-child(3) .bar i { animation-delay: .4s; background: repeating-linear-gradient(-45deg, var(--moss) 0 5px, var(--moss-d) 5px 7px); }
@keyframes fill { from { transform: scaleX(0); } }
.sheet-note { font-size: .88rem; font-style: italic; font-family: var(--font-serif); color: var(--ink-soft); margin: 0 0 1.2rem; }
#sec-btn[aria-pressed="true"] { --b: var(--moss); --c: var(--bone); }

/* ---------- kartuş kartları (çevrilebilir) ---------- */
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 2.6rem); align-items: stretch; }
.pcard { perspective: 1600px; }
.pcard-inner { display: grid; height: 100%; transition: transform .7s cubic-bezier(.45, .05, .25, 1); transform-style: preserve-3d; }
.pcard.flipped .pcard-inner { transform: rotateY(180deg); }
.face {
  grid-area: 1 / 1; position: relative; min-width: 0; display: flex; flex-direction: column;
  background: var(--bone); border: var(--line); border-radius: var(--r-lg); padding: 1.2rem 1.3rem 1.3rem;
  box-shadow: var(--card); backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.face::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; border-radius: 8px 8px 0 0; background: var(--band, var(--terra)); border-bottom: 1.5px solid var(--ink); }
.back { transform: rotateY(180deg); }
.back h4 { font-size: 1.5rem; }
.back p { margin: 0 0 .8rem; }
.face .flip-btn { margin-top: auto; align-self: flex-start; }
.flip-btn {
  display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .95rem; margin-top: 1rem;
  background: transparent; border: 1.5px solid var(--ink); border-radius: var(--r); padding: .4rem .85rem;
  transition: background .2s, transform .15s;
}
.flip-btn:hover, .flip-btn:focus-visible { background: rgba(42,31,23,.07); }
.flip-btn:active { transform: translateY(1px); }
.card-no { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: .4rem 0 .8rem; }
.pc-title { font-size: 2rem; margin: 1rem 0 .1rem; letter-spacing: .02em; }
.pc-link { align-self: flex-start; justify-self: start; width: max-content; margin: .3rem 0 .7rem; }
.pc-sub { font-family: var(--font-serif); font-style: italic; margin: 0 0 .7rem; color: var(--ink-2); }
.pc-meta { list-style: none; margin: .1rem 0 .9rem; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .9rem; }
.pc-meta li { display: flex; align-items: center; gap: .45rem; font-size: .92rem; color: var(--ink-2); padding: .2rem 0; border-bottom: 1px dotted rgba(42,31,23,.35); }
.pc-meta .ic { color: var(--terra-d); }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 0; padding: 0; }
.tags li { font-family: var(--font-mono); font-size: .8rem; border: 1.5px solid var(--ink); border-radius: 3px; padding: .05rem .5rem; background: var(--sand); }
.feature-list { margin: 0 0 1rem; padding-left: 1.2rem; }
.feature-list li::marker { content: "— "; color: var(--terra); }
.roles { border-left: 3px solid var(--olive); padding: .2rem .9rem; }
.honest-note { display: flex; gap: .6rem; align-items: flex-start; background: var(--sand); border: 1.5px solid var(--ochre-d); border-radius: var(--r); padding: .7rem .9rem; }
.honest-note .ic { color: var(--rust); margin-top: .2rem; }

/* KIVILCIM: film şeridi + mürekkep */
.pc-kivilcim .face { --band: var(--terra); }
.filmstrip {
  position: relative; overflow: hidden; border-radius: 4px; padding: 15px 0; border: 1.5px solid var(--ink);
  background-color: var(--umber);
  background-image: radial-gradient(circle at 11px 7.5px, var(--sand) 3.2px, transparent 3.8px), radial-gradient(circle at 11px calc(100% - 7.5px), var(--sand) 3.2px, transparent 3.8px);
  background-size: 22px 100%; background-repeat: repeat-x;
}
.film-track { display: flex; gap: 10px; width: max-content; padding-left: 10px; animation: film 26s linear infinite; }
.pcard:hover .film-track, .pcard:focus-within .film-track { animation-duration: 12s; }
@keyframes film { to { transform: translateX(-30%); } }
.frame { margin: 0; width: 130px; background: var(--bone); border-radius: 2px; padding: 6px 6px 2px; text-align: center; }
.frame svg { width: 100%; height: auto; display: block; }
.frame figcaption { font-family: var(--font-serif); font-style: italic; font-size: .82rem; color: var(--ink-2); }
.ink { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 400; stroke-dashoffset: 0; }
.drawn .ink { animation: draw 2.6s ease-out both; }
@keyframes draw { from { stroke-dashoffset: 400; } }
.ruler { display: flex; align-items: center; gap: .5rem; margin-top: .7rem; font-family: var(--font-mono); font-size: .8rem; color: var(--ink-soft); }
.ruler .ticks { flex: 1; height: 10px; border-bottom: 1.5px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--ink) 0 1.5px, transparent 1.5px 10%); background-size: 100% 60%; background-repeat: no-repeat; background-position: bottom; }

/* DeepGuard: mat koyu ekran + ses dalgası */
.pc-deepguard .face { --band: var(--moss); }
.scope { border: 1.5px solid var(--ink); border-radius: 4px; overflow: hidden; color: var(--sand-2); font-family: var(--font-mono); font-size: .78rem; background: #2f2b22; }
.scope-bar { display: flex; justify-content: space-between; padding: .35rem .7rem; background: #3a352a; border-bottom: 1px solid #1d1a14; }
.rec { color: var(--terra); animation: blink-k 2s steps(1) infinite; }
@keyframes blink-k { 50% { opacity: .3; } }
.scope-screen { position: relative; height: 146px; display: flex; align-items: center; gap: .6rem; padding: 0 .85rem; overflow: hidden;
  background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); }
.scan-face { width: 104px; height: 104px; flex: none; }
.wave { flex: 1; height: 86px; display: flex; align-items: center; gap: 4px; }
.wave i { flex: 1; height: 100%; background: var(--ochre); border-radius: 1px; transform: scaleY(.2); animation: eq 1.6s ease-in-out infinite; opacity: .9; }
.wave i:nth-child(3n) { animation-duration: 1.2s; background: var(--sand-2); } .wave i:nth-child(4n+1) { animation-duration: 2s; }
.wave i:nth-child(5n+2) { animation-duration: 1.4s; animation-delay: -.3s; } .wave i:nth-child(odd) { animation-delay: -.6s; }
@keyframes eq { 0%,100% { transform: scaleY(.18); } 50% { transform: scaleY(.85); } }
.scanline { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--terra); opacity: .8; animation: scan 4s ease-in-out infinite alternate; }
@keyframes scan { from { top: 4%; } to { top: 94%; } }
.scope-foot { margin: 0; padding: .35rem .7rem; background: #3a352a; border-top: 1px solid #1d1a14; }
.stamp {
  position: absolute; right: 1.3rem; bottom: 1.5rem; font-family: var(--font-display); font-size: .95rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--rust); border: 2px solid var(--rust); border-radius: 3px; padding: .1rem .55rem; transform: rotate(-7deg); opacity: .8;
}

/* ---------- mühürlü zarf ---------- */
.mailbox { position: relative; width: min(460px, 100%); margin: 0 auto; padding-top: 1.5rem; transition: padding-top .6s ease; }
.envelope { position: relative; height: 230px; }
.env-back, .env-front, .env-flap { position: absolute; left: 0; right: 0; }
.env-back { inset: 0; background: var(--ochre-d); border: var(--line); border-radius: var(--r-lg); box-shadow: var(--card); }
.env-front { left: 2px; right: 2px; bottom: 2px; height: 70%; z-index: 3; border-radius: 0 0 4px 4px; background: var(--ochre); clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%); }
.env-front::before { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, transparent 49.6%, rgba(42,31,23,.45) 49.6% 50.4%, transparent 50.4%), linear-gradient(25deg, transparent 49.6%, rgba(42,31,23,.45) 49.6% 50.4%, transparent 50.4%); }
.env-to { position: absolute; left: 1.1rem; bottom: .8rem; font-family: var(--font-serif); font-style: italic; color: var(--ink-2); line-height: 1.3; }
.env-to small { font-size: .8rem; }
.env-postmark { position: absolute; right: 1rem; bottom: .9rem; font-family: var(--font-display); font-size: .75rem; letter-spacing: .2em; color: var(--umber); border: 1.5px solid var(--umber); border-radius: 50%; padding: .9rem .4rem; opacity: .75; transform: rotate(-12deg); }
.env-flap { top: 2px; left: 2px; right: 2px; height: 56%; z-index: 4; background: var(--mustard); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .5s ease, z-index 0s .25s; }
.env-btn { position: absolute; inset: 0; z-index: 5; background: transparent; border: 0; border-radius: var(--r); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 88px; gap: .35rem; }
.seal { width: 64px; height: 64px; transition: transform .25s ease; filter: drop-shadow(0 3px 0 rgba(42,31,23,.5)); }
.seal svg { width: 100%; height: 100%; display: block; }
.env-label { font-family: var(--font-display); font-size: .95rem; background: var(--bone); border: 1.5px solid var(--ink); border-radius: 3px; padding: .15rem .6rem; }
.env-btn:hover .seal, .env-btn:focus-visible .seal { transform: rotate(-10deg) scale(1.05); }
.env-btn:active .seal { transform: scale(.94); }
.mailbox.open .seal { display: none; }
.mailbox.open .env-btn { top: 50%; padding-top: 2.2rem; justify-content: center; }
.letter {
  position: absolute; left: 7%; right: 7%; bottom: 20px; z-index: 2; visibility: hidden;
  background: var(--bone); border: 1.5px solid var(--ink); border-radius: 3px; padding: 1.2rem 1.2rem 3.5rem;
  background-image: repeating-linear-gradient(0deg, transparent 0 29px, rgba(106,86,67,.18) 29px 30px);
  transition: transform .8s cubic-bezier(.3, .9, .3, 1) .15s;
}
.letter-hi { font-family: var(--font-serif); font-style: italic; font-size: 1.2rem; margin: 0 0 .4rem; }
.letter p { margin: 0 0 .6rem; }
.letter-mail { font-family: var(--font-mono); font-size: clamp(1rem, 4vw, 1.2rem); font-weight: 700; word-break: break-all; }
.letter-mail a { text-decoration-color: var(--terra); text-decoration-thickness: 2px; }
.letter-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: .8rem 0; }
.letter-actions .btn { font-size: .92rem; padding: .45rem .8rem; }
.letter-sign { font-family: var(--font-serif); font-style: italic; text-align: right; }
.mailbox.open .letter { visibility: visible; }
.mailbox.open .env-flap { transform: rotateX(180deg); z-index: 1; }
.mailbox:not(.open) .envelope { animation: settle 6s ease-in-out infinite; }
@keyframes settle { 0%, 90%, 100% { transform: rotate(0); } 94% { transform: rotate(-1deg); } 97% { transform: rotate(.8deg); } }

/* ---------- footer: kamp ateşi 404 ---------- */
.footer { color: var(--sand); text-align: center; padding: 1.5rem clamp(1rem, 4vw, 3rem) 2.4rem; background: var(--sec-foot); }
.err404 { max-width: 42rem; margin: 0 auto 2rem; }
.scene { width: min(440px, 100%); margin: 0 auto; }
.camp { display: block; width: 100%; height: auto; }
.flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 2.4s ease-in-out infinite; }
.flame-in { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.7s ease-in-out infinite reverse; }
@keyframes flicker { 0%,100% { transform: scale(1, 1); } 30% { transform: scale(.97, 1.04); } 60% { transform: scale(1.02, .96); } }
.embers circle { animation: ember 3.5s ease-in infinite; }
.embers circle:nth-child(2) { animation-delay: 1.2s; } .embers circle:nth-child(3) { animation-delay: 2.3s; }
@keyframes ember { 0% { transform: translateY(20px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
.zzz { opacity: 0; }
.seen .zzz { animation: zzz 4.5s ease-in-out infinite; }
.seen .z2 { animation-delay: 1.5s; } .seen .z3 { animation-delay: 3s; }
@keyframes zzz { 0% { opacity: 0; transform: translateY(8px); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-10px); } }
.big404 { margin: .4rem 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(3.4rem, 12vw, 5.6rem); line-height: 1; letter-spacing: .12em; color: var(--ochre); }
.err-title { font-size: clamp(1.3rem, 3.6vw, 1.8rem); color: var(--bone); }
.err-text { color: #bfae8e; font-family: var(--font-serif); font-style: italic; }
.rocket {
  display: inline-flex; align-items: center; gap: .5rem; margin-top: .4rem; font-weight: 700; font-size: 1rem; color: var(--ink);
  background: var(--mustard); border: var(--line); border-radius: var(--r); padding: .6rem 1.2rem; box-shadow: var(--press);
  transition: transform .15s, box-shadow .15s;
}
.rocket:hover, .rocket:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
.rocket:focus-visible { outline-color: var(--mustard); }
.rocket:active { transform: translateY(3px); box-shadow: none; }
.rocket-ship { width: 1.5rem; height: 1.5rem; transition: transform .2s; }
.rocket-flame { opacity: 0; }
.rocket:hover .rocket-flame, .rocket.launch .rocket-flame { opacity: 1; }
.rocket.launch .rocket-ship { animation: liftoff .8s ease-in forwards; }
@keyframes liftoff { to { transform: translateY(-110vh); } }
.footer-fun { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.egg { width: 2.8rem; height: 3.3rem; padding: 0; background: none; border: 0; transition: transform .2s; }
.egg svg { width: 100%; height: 100%; display: block; }
.egg .egg-crack { opacity: 0; transition: opacity .2s; }
.egg.c1 .egg-crack, .egg.hatched .egg-crack { opacity: 1; }
.egg:hover { transform: rotate(-8deg); }
.egg.crack { animation: crack .35s; }
@keyframes crack { 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
.egg.hatched .egg-shell { fill: var(--ochre); }
.konami-hint { font-family: var(--font-mono); font-size: .9rem; color: #bfae8e; }
.secret { display: block; margin: 0 auto 1.2rem; max-width: 34rem; background: var(--bone); color: var(--ink); border: var(--line); border-radius: var(--r); padding: .8rem 1rem; font-family: var(--font-serif); font-style: italic; animation: rise .5s ease; }
.secret[hidden] { display: none; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }
.copy { margin: 0; color: #bfae8e; font-size: .92rem; }

/* ---------- toast, imleç arkadaşı, konfeti ---------- */
.toast {
  position: fixed; left: 50%; bottom: 1.4rem; z-index: 200; transform: translate(-50%, 180%);
  background: var(--umber); color: var(--bone); font-weight: 600; padding: .65rem 1.1rem; border: 1.5px solid var(--ink);
  border-radius: var(--r); box-shadow: 0 3px 0 var(--ink); max-width: calc(100vw - 2rem); text-align: center;
  visibility: hidden; transition: transform .35s ease, visibility 0s linear .35s;
}
.toast.show { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }
.cursor-buddy { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; line-height: 0; opacity: 0; transition: opacity .3s; will-change: transform; }
.cursor-buddy span { display: inline-block; transition: transform .25s; transform: scaleX(-1); }
.cursor-buddy.left span { transform: scaleX(1); }
.cursor-buddy.on { opacity: 1; }
#konfeti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 250; }
/* Konami: sepya film modu */
body.party main, body.party .footer { filter: sepia(.6) contrast(1.05) saturate(1.2); transition: filter .6s; }
body.party .duck { animation: rock .8s ease-in-out infinite; }

/* ---------- mobil ---------- */
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .duck-stage { width: min(360px, 100%); }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .sheet-body { grid-template-columns: 1fr; }
  .medal { width: 150px; }
}
@media (max-width: 520px) {
  .brand { display: none; }
  .tab { font-size: .82rem; padding: .45rem .7rem .4rem; }
  .tab-no { display: none; }
  .stk { width: 2.9rem; height: 2.9rem; }
  .stk-ic { width: 1.35rem; height: 1.35rem; }
  .stat-list > div { grid-template-columns: 1fr; gap: 0; }
  .perks li { grid-template-columns: 1fr; gap: .3rem; }
  .scan-face { width: 78px; height: 78px; }
  .pc-meta { grid-template-columns: 1fr; }
}
@media (hover: none) {
  body, a, button, [tabindex], label { cursor: auto; }
  .cursor-buddy { display: none; }
}

/* ---------- hareket azaltma: sakin mod ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .001ms !important; transition-delay: 0s !important;
  }
  .ticker-track, .film-track, .stk, .duck, .flame, .flame-in { animation: none !important; }
  .wave i { animation: none !important; transform: scaleY(.6); }
  .wave i:nth-child(3n) { transform: scaleY(.35); }
  .wave i:nth-child(4n+1) { transform: scaleY(.8); }
  .scanline { animation: none !important; top: 55%; }
  .embers circle { animation: none !important; }
  .zzz { animation: none !important; opacity: .85; }
  .cursor-buddy { display: none; }
  .rocket.launch .rocket-ship { animation: none; }
}