@font-face{font-family:"Archivo";font-weight:400 700;font-display:swap;src:url("/assets/fonts/archivo-latin-400-700.woff2") format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:700 900;font-display:swap;src:url("/assets/fonts/big-shoulders-display-latin-700-900.woff2") format("woff2")}
@font-face{font-family:"Pirata One";font-weight:400;font-display:swap;src:url("/assets/fonts/pirata-one-latin-400.woff2") format("woff2")}
:root{
  --ink:#080606;--bone:#f6eee8;--ash:#b3a59c;
  --line-control:rgba(246,238,232,.4);
  --fire:#ff2a3a;--fire-deep:#8f0d1c;--ember:rgba(255,42,58,.28);--ember-soft:rgba(255,42,58,.12);
  --f-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --f-script:"Pirata One","Old English Text MT",Georgia,serif;
  --f-body:"Archivo","Segoe UI",system-ui,sans-serif;
  --ease-snap:cubic-bezier(.34,1.56,.64,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:radial-gradient(60rem 36rem at 50% 20%,var(--ember-soft),transparent 70%),var(--ink);color:var(--bone);font-family:var(--f-body);font-size:1rem;line-height:1.6;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.links a{-webkit-touch-callout:default}
:focus-visible{outline:2px solid var(--fire);outline-offset:3px}
#ink{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.skip{position:absolute;left:12px;top:-60px;background:var(--fire);color:var(--ink);padding:.5rem 1rem;font-weight:700;z-index:10}
.skip:focus{top:12px}
.top,main,.ticker,.foot{position:relative;z-index:1}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 16px 0;max-width:72rem;width:100%;margin-inline:auto}
.brand{margin:0;font-family:var(--f-display);font-weight:900;font-size:1.3rem;letter-spacing:.14em;text-transform:uppercase}
.pause{font-family:var(--f-display);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.95rem;background:transparent;color:var(--bone);border:1px solid var(--line-control);padding:.5rem .9rem;cursor:pointer}
.pause:hover{border-color:var(--fire);color:var(--fire)}
.pause[aria-pressed="true"]{background:var(--bone);color:var(--ink)}
/* Telefonda sağ altta makineli Draw düğmesi: basınca makine "elde", sayfa kaymaz (iPhone'un aşağı çekip yenilemesi de olmaz), parmak çizer */
.tools{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:5;display:flex;gap:8px;align-items:stretch}
.clear{display:none;font-family:var(--f-display);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.95rem;background:var(--ink);color:var(--bone);border:1px solid var(--line-control);padding:.55rem .9rem;cursor:pointer}
.clear:hover{border-color:var(--fire);color:var(--fire)}
.has-ink .clear{display:block}
.draw{display:none;align-items:center;gap:.6rem;font-family:var(--f-display);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:1rem;background:var(--ink);color:var(--bone);border:1px solid var(--fire);padding:.55rem 1rem .55rem .7rem;cursor:pointer;box-shadow:0 0 24px var(--ember)}
.draw-icon{width:72px;height:22px;display:block;transition:opacity .15s}
.draw[aria-pressed="true"]{background:var(--fire);color:var(--ink)}
.draw[aria-pressed="true"] .draw-icon{opacity:.2}
.touch-only{display:none}
@media (hover:none) and (pointer:coarse){.draw{display:flex}.touch-only{display:inline}}
.paused .tools{display:none}
html.drawing,html.drawing body{touch-action:none;overscroll-behavior:none}
/* Çizen dövme makinesi: kutu 190x160 oranında, iğne ucu (6,150) çizilen noktada durur; hareket ederken titrer. Telefonda büyük */
.machine{position:fixed;left:0;top:0;width:110px;height:auto;pointer-events:none;z-index:6;display:none;will-change:transform}
@media (pointer:coarse){.machine{width:150px}}
.machine.on{display:block}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.machine svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.machine.buzz svg{animation:buzz .07s steps(2) infinite}
@keyframes buzz{50%{transform:translate(.7px,-.7px)}}
@media (hover:hover) and (pointer:fine){body:not(.paused){cursor:none}a,button{cursor:pointer}}
main{flex:1;display:grid;align-items:center;padding:24px 16px 40px}
.stage{max-width:72rem;width:100%;margin-inline:auto;display:grid;justify-items:center;text-align:center;gap:1.1rem}
.seal{position:relative;width:min(240px,60vw);aspect-ratio:1}
.ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 36s linear infinite}
.ring text{font-family:var(--f-display);font-weight:800;font-size:15.5px;letter-spacing:.3em;fill:var(--bone)}
.ring circle{fill:none;stroke:var(--fire);stroke-width:2;stroke-dasharray:4 10}
.seal img{position:absolute;inset:24%;width:52%;height:52%;object-fit:contain;filter:drop-shadow(0 0 24px var(--ember))}
@keyframes spin{to{transform:rotate(360deg)}}
.eyebrow{margin:0;font-family:var(--f-display);font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);font-size:.95rem}
h1{margin:0;font-family:var(--f-display);font-weight:900;text-transform:uppercase;line-height:.88;font-size:clamp(3rem,14vw,9.5rem);overflow-wrap:break-word;max-width:100%}
h1 span{display:block}
.outline{color:transparent;-webkit-text-stroke:2px var(--fire)}
.solid em{font-family:var(--f-script);font-style:normal;font-weight:400;text-transform:none;color:var(--fire);font-size:1.12em}
.lead{margin:0;max-width:36rem;font-size:1.15rem}
.sticker{margin:.4rem 0 0;display:inline-block;background:var(--fire);color:var(--ink);font-family:var(--f-display);font-weight:900;font-size:1.15rem;letter-spacing:.1em;text-transform:uppercase;padding:.4rem .95rem;transform:rotate(-4deg);box-shadow:5px 5px 0 var(--bone);animation:wob 3.2s var(--ease-snap) infinite}
@keyframes wob{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(3deg) scale(1.05)}}
.reach{margin-top:1.2rem;display:grid;gap:.9rem;justify-items:center}
.reach h2{margin:0;font-family:var(--f-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.6rem,5vw,2.4rem);letter-spacing:.03em}
.links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.btn{display:inline-block;background:var(--fire);color:var(--ink);font-family:var(--f-display);font-weight:900;font-size:1.2rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:.75rem 1.4rem;border:2px solid var(--fire);transition:transform .2s var(--ease-snap),box-shadow .2s}
.btn.ghost{background:transparent;color:var(--bone);border-color:var(--line-control)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--bone)}
.btn.ghost:hover{border-color:var(--fire);box-shadow:5px 5px 0 var(--fire)}
.note{margin:0;color:var(--ash)}
.doodle{margin:1rem 0 0;max-width:30rem;color:var(--ash);font-size:.95rem}
.ticker{background:var(--fire);color:var(--ink);overflow:hidden;border-block:1px solid var(--fire-deep)}
.ticker-track{display:flex;width:max-content;animation:tick 32s linear infinite}
.ticker-track span{font-family:var(--f-display);font-weight:900;font-size:1.9rem;text-transform:uppercase;letter-spacing:.04em;padding:.65rem 1.4rem;white-space:nowrap}
.ticker-track span::after{content:"✦";margin-left:2.8rem;font-size:1.1rem;vertical-align:middle}
@keyframes tick{to{transform:translateX(-50%)}}
.foot{padding:14px 16px;text-align:center;color:var(--ash);font-size:.875rem}
.foot p{margin:0}
.paused .ring,.paused .sticker,.paused .ticker-track{animation:none}
@media (prefers-reduced-motion:reduce){.ring,.sticker,.ticker-track{animation:none}.btn{transition:none}}
@media (max-width:420px){.outline{-webkit-text-stroke-width:1.5px}.ticker-track span{font-size:1.5rem}}