:root{
  --paper:#FFF1D2; --paper-2:#FBE3AE; --paper-3:#FFF9EA;
  --ink:#1A1410; --ink-2:#4A3E33; --red:#D12A1C; --yellow:#FFC93C; --teal:#0F766E; --blue:#2563EB;
  --accent:var(--red);
  --line:3px solid var(--ink);
  --r:18px;
  --shadow:6px 6px 0 var(--ink);
  --ease:cubic-bezier(.16,1,.3,1);
  --display:"Bangers","Impact",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --top:64px;
  --gut:clamp(16px,4vw,48px);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--top) + 8px);-webkit-text-size-adjust:100%}
html.lock{overflow:hidden}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.5;min-height:100vh;overflow-x:hidden;
  background-image:radial-gradient(rgba(26,20,16,.09) 1.2px,transparent 1.6px);background-size:14px 14px}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
*{scrollbar-width:thin;scrollbar-color:var(--ink) var(--paper-2)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--ink);border-radius:8px;border:2px solid var(--paper-2)}::-webkit-scrollbar-track{background:var(--paper-2)}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.skip-link:focus{left:8px}
[hidden]{display:none!important}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 20px;border:var(--line);border-radius:999px;background:var(--paper-3);font-weight:800;font-size:15px;text-decoration:none;box-shadow:3px 3px 0 var(--ink);transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .2s;white-space:nowrap}
.btn:hover{transform:translate(-1px,-2px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn-go{background:var(--red);color:#fff;font-size:17px}
.btn-wa{background:var(--yellow)}
.btn-ghost{background:transparent;box-shadow:none;border-width:2px;font-weight:700}
.btn-ghost:hover{box-shadow:2px 2px 0 var(--ink);background:var(--paper-3)}
.icon-btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;border:var(--line);border-radius:999px;background:var(--paper-3);font-weight:800;font-size:22px;line-height:1;box-shadow:3px 3px 0 var(--ink);transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
.icon-btn span{font-size:15px}
.icon-btn:hover{transform:translate(-1px,-2px);box-shadow:5px 5px 0 var(--ink)}
.icon-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* top bar */
.top{position:fixed;inset:0 0 auto 0;height:var(--top);z-index:40;display:flex;align-items:center;gap:14px;padding:0 var(--gut);background:rgba(255,241,210,.94);backdrop-filter:blur(6px);border-bottom:var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand-star{width:34px;height:34px;background:var(--red);border:var(--line);border-radius:10px;position:relative;box-shadow:2px 2px 0 var(--ink)}
.brand-star::after{content:"";position:absolute;inset:4px;background:var(--yellow);clip-path:polygon(50% 0,63% 34%,100% 38%,71% 61%,80% 100%,50% 79%,20% 100%,29% 61%,0 38%,37% 34%)}
.brand-name{font-family:var(--display);font-size:25px;letter-spacing:.04em;line-height:.9;display:flex;flex-direction:column}
.brand-name small{font-family:var(--body);font-weight:800;font-size:9px;letter-spacing:.34em;color:var(--red)}
.top-nav{flex:1;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 2px;margin:0 4px;mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.top-nav::-webkit-scrollbar{display:none}
.top-nav a{flex:none;display:inline-flex;align-items:center;min-height:38px;padding:4px 14px;border:2px solid var(--ink);border-radius:999px;font-weight:700;font-size:14px;text-decoration:none;background:var(--paper-3);transition:background .15s,transform .15s var(--ease)}
.top-nav a:hover{background:var(--c,var(--yellow));color:#fff;transform:translateY(-2px)}
@media (max-width:760px){.btn-wa{display:none}.brand-name small{display:none}.top-nav{margin:0}}

/* intro: şehir sahnesi */
.intro{min-height:100svh;padding:calc(var(--top) + 12px) var(--gut) 20px;display:grid;grid-template-rows:auto auto auto;align-content:center;gap:16px;max-width:1360px;margin:0 auto;position:relative}
.intro-head h1{font-family:var(--display);font-weight:400;font-size:clamp(30px,5vw,60px);line-height:.95;letter-spacing:.02em;text-align:center;text-wrap:balance;text-shadow:3px 3px 0 var(--yellow)}
.city{position:relative;margin:0 auto;align-self:center;border:4px solid var(--ink);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;
  background:linear-gradient(180deg,#8ED0EC 0,#CBEAF4 42%,#FFF1D2 67.2%,#E8D9B8 67.2%,#E8D9B8 74.5%,var(--ink) 74.5%,var(--ink) 76.1%,#4A4742 76.1%)}
.world{position:absolute;top:0;left:0;width:1200px;height:640px;transform-origin:0 0}
.town{position:absolute;left:0;top:0;width:1200px;height:600px}
.world .sky,.world .far{position:absolute;inset:0;pointer-events:none}
.cloud{position:absolute;animation:cloud linear infinite}
@keyframes cloud{from{translate:-320px 0}to{translate:1500px 0}}
.far i{position:absolute;bottom:170px;background:#A7D4E3;border-radius:6px 6px 0 0}
.bld{position:absolute;bottom:170px;background:var(--c);border:4px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0;box-shadow:inset -10px 0 0 rgba(26,20,16,.1)}
.bld .roof{position:absolute;left:-8px;right:-8px;top:-14px;height:16px;background:var(--r);border:4px solid var(--ink);border-radius:5px}
.wins{position:absolute;left:14px;right:14px;top:22px;display:grid;gap:14px 12px;align-content:start}
.win{display:block;background:#CFEFF7;border:3px solid var(--ink);border-radius:4px;position:relative;overflow:hidden}
.win::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.7) 0 30%,transparent 30%)}
.win.lit{background:#FFE27A;animation:flick 6s steps(1) infinite}
@keyframes flick{0%,92%{background:#FFE27A}94%,97%{background:#F4C84A}}
.win.cur::before{content:"";position:absolute;left:0;right:0;top:0;height:46%;background:#E8392B;border-bottom:3px solid var(--ink);z-index:1}
.shop{position:absolute;left:0;right:0;bottom:0;height:240px;background:rgba(26,20,16,.08);border-top:4px solid var(--ink)}
.sign{position:absolute;left:12px;right:12px;top:8px;height:46px;background:#fff;border:4px solid var(--ink);border-radius:8px;display:grid;place-items:center;padding:0 6px;box-shadow:3px 3px 0 var(--ink)}
.sign span{font-family:var(--display);letter-spacing:.05em;line-height:1;white-space:nowrap;padding-top:2px}
.awn{position:absolute;left:4px;right:4px;top:62px;height:16px;border:3px solid var(--ink);border-radius:0 0 10px 10px;background:repeating-linear-gradient(90deg,var(--c) 0 18px,#fff 18px 36px)}
.door{position:absolute;bottom:0;width:64px;height:178px;background:#4B3A2C;border:4px solid var(--ink);border-bottom:0;border-radius:8px 8px 0 0}
.door::after{content:"";position:absolute;left:7px;right:7px;top:12px;height:70px;background:#CFEFF7;border:3px solid var(--ink);border-radius:4px}
.disp{position:absolute;right:12px;bottom:0;width:calc(100% - 100px);min-width:42px;max-width:96px;height:100px;background:#CFEFF7;border:4px solid var(--ink);border-bottom:0;border-radius:6px 6px 0 0;background-image:linear-gradient(115deg,rgba(255,255,255,.75) 0 24%,transparent 24%)}
.curb{position:absolute;left:0;right:0;top:484px;height:8px;background:var(--paper-3);border-block:4px solid var(--ink);box-sizing:content-box}
.lamp{position:absolute;top:262px}
.road{position:absolute;left:0;right:0;top:498px;bottom:0}
.dash{position:absolute;left:0;right:0;top:78px;height:6px;background:repeating-linear-gradient(90deg,#FFE27A 0 54px,transparent 54px 108px);animation:dash 2.2s linear infinite;opacity:.9}
@keyframes dash{to{background-position-x:-108px}}
/* araç ölçüsü: yetişkin boyu (168px) ile orantılı (taksi ≈ 4 m); en çok bir iki araç, uzun aralıklarla */
.car{position:absolute;left:0;will-change:transform;animation:drive linear infinite}
.cimg{position:relative}.cimg img{position:absolute;max-width:none;display:block;user-select:none;pointer-events:none}
.cimg .cb{left:0;top:0;width:100%;height:100%}
.cimg .cw{aspect-ratio:1;animation:spin 1s linear infinite}
.car.rtl{animation-name:driveL}.car.rtl .cimg{transform:scaleX(-1)}
@keyframes drive{0%{transform:translateX(-460px)}33%,100%{transform:translateX(1680px)}}
@keyframes driveL{0%{transform:translateX(1680px)}33%,100%{transform:translateX(-460px)}}
.wheel{animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.actor{position:absolute;bottom:128px;z-index:2;--flip:1}
.actor .fig{position:absolute;left:0;bottom:0;width:100%;overflow:visible;transform:scaleX(var(--flip));transform-origin:50% 100%}
.fig img{position:absolute;display:block;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.fig .up{position:absolute;left:0;top:0;width:100%;transform-origin:50% 100%}
.fig .up img{position:static;width:100%;height:100%}
/* yürüyüş iskeleti (yan profil): yalnızca yürürken görünür, ayakta durunca sunum pozu gelir */
.actor .fig.walk{display:none;left:27.6%;width:44.8%}
.actor.walking .fig.walk{display:block}
.actor.walking .fig:not(.walk){display:none}
.actor.agency.arrived .fig:not(.walk){animation:turnTo .26s var(--ease) both}
@keyframes turnTo{from{transform:scaleX(calc(var(--flip) * .45))}to{transform:scaleX(var(--flip))}}
.fig.walk .rig,.fig.walk .bone{position:absolute;inset:0}
.fig .hdw{position:absolute;left:22%;top:0;width:56%;height:19%;pointer-events:none}
.actor .shadow{position:absolute;left:6%;right:6%;bottom:-5px;height:11px;border-radius:50%;background:rgba(26,20,16,.28)}
.actor.away{opacity:0}
.actor.owner{cursor:pointer;z-index:2}.actor.mid-owner{z-index:3}.actor.agency{z-index:4;bottom:128px}
/* boşta: nefes alma; konuşurken hafif başını/gövdesini oynatma; dokununca selam */
.fig .up{animation:breath 3.6s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes breath{50%{transform:scaleY(1.008) translateY(-1px)}}
.actor.talking .up{animation:talk .5s ease-in-out infinite alternate}
@keyframes talk{from{transform:rotate(-.9deg)}to{transform:rotate(1.1deg) translateY(-1.5px)}}
/* yürürken CSS animasyonları durur; bacakları ve gövdeyi sahne betiği yürüyüş fazına göre sürer */
.actor.walking .up{animation:none}
.actor.wave .up{animation:hello .5s ease-in-out 3 alternate}
@keyframes hello{from{transform:rotate(-2deg)}to{transform:rotate(4deg) translateY(-3px)}}
.actor .hi{position:absolute;bottom:100%;left:50%;transform:translateX(-50%) scale(.6);background:#fff;border:3px solid var(--ink);border-radius:14px;padding:3px 10px;font:800 14px var(--body);white-space:nowrap;opacity:0;transition:opacity .2s,transform .3s var(--ease);pointer-events:none}
.actor .hi.on{opacity:1;transform:translateX(-50%) scale(1)}
.city .balloon{position:absolute;z-index:8;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;background:var(--bg,#fff);border:3px solid var(--ink);border-radius:20px;padding:10px 14px 10px 10px;box-shadow:4px 4px 0 var(--ink);opacity:0;transform:translateY(10px) scale(.86);transform-origin:var(--tail,50%) 100%;transition:opacity .22s,transform .38s var(--ease),bottom .45s var(--ease);pointer-events:none}
.city .balloon.on{opacity:1;transform:none;pointer-events:auto;cursor:pointer}
.balloon::after{content:"";position:absolute;bottom:-14px;left:calc(var(--tail,50%) - 11px);width:20px;height:20px;background:var(--bg,#fff);border:3px solid var(--ink);border-top:0;border-left:0;transform:rotate(45deg) skew(8deg,8deg);border-radius:0 0 6px 0}
.balloon .av{position:relative;width:96px;height:96px;border-radius:50%;border:3px solid var(--ink);overflow:hidden;background:#D7EFE9;flex:none}
.b-agency{--bg:#FFF0B0}.b-owner{--bg:#fff}
.b-agency .av{background:#FFD9CF}.b-owner .av{background:#D7EFE9}
.balloon .av .face{position:absolute;width:102%;left:-1%;top:-1%}.balloon .av .m-line{stroke-width:34}   /* baş çemberin içinde ortalı; saç ve çene kesilmez, tüm balonlarda aynı oran */
.face{position:relative}.face>img{display:block;width:100%;height:auto}.face>.mouth{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* geçmiş balonlar: küçülüp yukarı kayar, ekranda kalır */
.city .balloon.old{padding:5px 11px 5px 5px;gap:7px;border-radius:16px;box-shadow:3px 3px 0 var(--ink);pointer-events:none;cursor:default;opacity:.96}
.balloon.old::after{display:none}
.balloon.old .av{width:40px;height:40px;border-width:2.5px}
.balloon.old .bt-wrap{font-size:13px;line-height:1.28}
.balloon.fade{opacity:0!important}

.bt-wrap{position:relative;font-weight:700;font-size:17px;line-height:1.3;min-width:0}
.bt-wrap .ghost{visibility:hidden;display:block}
.bt-wrap .bt{position:absolute;inset:0;display:block}
.balloon.typing .bt::after{content:"▍";color:var(--red);animation:blink .6s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.intro-ctl{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.dots{display:flex;gap:8px}
.dots i{width:12px;height:12px;border:2px solid var(--ink);border-radius:50%;background:var(--paper-3);transition:background .2s,transform .2s var(--ease)}
.dots i.on{background:var(--red);transform:scale(1.3)}
.dots i.done{background:var(--ink)}
.btn-go{opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .4s,transform .4s var(--ease),box-shadow .18s}
.intro.ended .btn-go,.intro.skipped .btn-go{opacity:1;transform:none;pointer-events:auto}
.intro.ended .btn-go{animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(4px)}}
@media (max-width:899px){
  .intro{padding-bottom:14px;gap:14px;padding-inline:10px}
  .intro-head h1{font-size:clamp(28px,8.4vw,42px)}
  .city{border-width:3px}
  .balloon .av{width:62px;height:62px}
  .bt-wrap{font-size:14.5px}
  .balloon.old .av{width:34px;height:34px}.balloon.old .bt-wrap{font-size:12.5px}
  .city .balloon{padding:8px 10px 8px 8px;gap:8px}
  .dots{order:3;width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){.cloud,.car,.dash,.wheel,.fig .up,.win.lit{animation:none}.car{display:none}}

/* sections */
.sec-head{max-width:1280px;margin:0 auto 22px;padding:0 var(--gut)}
.sec-head h2{font-family:var(--display);font-weight:400;font-size:clamp(34px,5vw,60px);letter-spacing:.02em;line-height:1;text-wrap:balance}
.sec-head p{color:var(--ink-2);font-size:clamp(16px,1.6vw,19px);margin-top:6px;max-width:60ch}
.services{padding:clamp(40px,8vw,90px) 0 clamp(40px,6vw,70px);position:relative}
.strip{max-width:1280px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(190px,auto);gap:clamp(12px,1.8vw,22px);grid-auto-flow:dense}
.sv{position:relative;display:flex;flex-direction:column;justify-content:flex-end;text-align:left;border:4px solid var(--ink);border-radius:10px;background:var(--c);color:#fff;padding:18px 20px;overflow:hidden;box-shadow:var(--shadow);isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s var(--ease);
  --tilt:0deg}
.sv{grid-column:span var(--cs,4);grid-row:span var(--rs,1)}
.sv:nth-child(3n+1){--tilt:-.6deg}.sv:nth-child(3n+2){--tilt:.7deg}.sv:nth-child(3n){--tilt:-.45deg}
.sv{transform:rotate(var(--tilt))}
.sv::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(rgba(255,255,255,.28) 1.6px,transparent 2px) 0 0/13px 13px,linear-gradient(160deg,rgba(255,255,255,.14),rgba(0,0,0,.18))}
.sv:hover,.sv:focus-visible{transform:rotate(0) translateY(-6px);box-shadow:10px 12px 0 var(--ink)}
.sv h3{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.9vw,40px);line-height:.98;letter-spacing:.02em;text-shadow:2px 2px 0 var(--ink);max-width:16ch;text-wrap:balance;margin-top:34px}
.sv.big h3{font-size:clamp(34px,5vw,68px);max-width:11ch}
.sv .sh{font-weight:700;font-size:15px;margin-top:4px;color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.55);max-width:28ch}
.sv .cnt{position:absolute;top:14px;left:16px;background:var(--yellow);color:var(--ink);font-weight:800;font-size:13px;border:3px solid var(--ink);border-radius:999px;padding:2px 12px;transform:rotate(-3deg)}
.sv .go{position:absolute;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;background:var(--paper-3);color:var(--ink);border:3px solid var(--ink);display:grid;place-items:center;font-size:24px;font-weight:800;transition:transform .3s var(--ease)}
.sv:hover .go{transform:translateX(4px) scale(1.1)}
.sv .art{position:absolute;right:14px;top:14px;bottom:70px;width:52%;z-index:-1;pointer-events:none}
.sv .art img{position:absolute;border:3px solid var(--ink);border-radius:6px;background:#fff;box-shadow:3px 3px 0 var(--ink);object-fit:cover;transition:transform .45s var(--ease)}
.sv .art.stack img:nth-child(1){width:46%;aspect-ratio:4/5;right:34%;top:10%;transform:rotate(-8deg)}
.sv .art.stack img:nth-child(2){width:46%;aspect-ratio:4/5;right:2%;top:2%;transform:rotate(6deg)}
.sv .art.stack img:nth-child(3){width:46%;aspect-ratio:4/5;right:18%;top:30%;transform:rotate(-1deg)}
.sv .art.vid img{width:30%;aspect-ratio:9/16;object-fit:cover}
.sv .art.vid img:nth-child(1){right:58%;top:14%;transform:rotate(-7deg)}
.sv .art.vid img:nth-child(2){right:30%;top:3%;transform:rotate(3deg)}
.sv .art.vid img:nth-child(3){right:2%;top:16%;transform:rotate(9deg)}
.sv:hover .art img:nth-child(1){transform:rotate(-12deg) translate(-8px,-4px)}
.sv:hover .art img:nth-child(2){transform:rotate(10deg) translate(6px,-6px)}
.sv:hover .art img:nth-child(3){transform:rotate(3deg) translateY(4px)}
.sv .art.one img{inset:6px 0 0 auto;width:78%;height:78%;transform:rotate(4deg)}
.sv .art.glyph{display:grid;place-items:center}
.sv .art.glyph svg{width:min(100%,150px);height:auto;opacity:.95;filter:drop-shadow(4px 4px 0 var(--ink));transition:transform .45s var(--ease)}
.sv:hover .art.glyph svg{transform:rotate(-8deg) scale(1.08)}
.sv:not(.big) .art{width:46%}
.sv.reveal{opacity:0;transform:rotate(var(--tilt)) scale(.86) translateY(24px)}
.sv.reveal.in{opacity:1;transform:rotate(var(--tilt));transition:opacity .45s,transform .6s var(--ease);transition-delay:calc(var(--i)*70ms)}
.sv.reveal.in:hover{transform:rotate(0) translateY(-6px);transition-delay:0s}
@media (max-width:900px){
  .strip{grid-template-columns:repeat(2,1fr)}
  .sv{grid-column:span 2!important;grid-row:span 1!important;min-height:190px}
  .sv.big{min-height:230px}
  .sv h3,.sv.big h3{font-size:clamp(30px,8vw,44px);max-width:12ch}
  .sv .art,.sv:not(.big) .art{width:44%}
}

/* markalar: etiket duvarı */
.brands{padding:clamp(40px,7vw,80px) 0 clamp(50px,7vw,90px);background:var(--paper-2);border-block:var(--line);position:relative;
  background-image:radial-gradient(rgba(26,20,16,.1) 1.4px,transparent 1.8px);background-size:13px 13px}
.wall{position:relative;max-width:1180px;margin-inline:auto;width:calc(100% - 2 * var(--gut));border:4px solid var(--ink);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;padding:clamp(30px,4vw,52px) clamp(12px,3vw,36px) 18px;
  background:#22304A;background-image:radial-gradient(rgba(255,255,255,.1) 1.6px,transparent 2px),repeating-linear-gradient(0deg,transparent 0 46px,rgba(255,255,255,.05) 46px 48px),repeating-linear-gradient(90deg,transparent 0 94px,rgba(255,255,255,.05) 94px 96px);background-size:14px 14px,auto,auto}
.tape{position:absolute;width:120px;height:30px;background:rgba(255,201,60,.9);border:2px solid var(--ink);z-index:3}
.tape.t1{left:-26px;top:14px;transform:rotate(-38deg)}.tape.t2{right:-26px;top:14px;transform:rotate(38deg)}
.stickers{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(10px,1.6vw,20px);position:relative;min-height:200px}
.stk{--r:0deg;--sc:1;position:relative;flex:none;border:0;background:none;padding:0;cursor:pointer;transform:rotate(var(--r)) scale(var(--sc));transition:transform .45s var(--ease),filter .3s;filter:drop-shadow(3px 5px 0 rgba(0,0,0,.45))}
.stk .in{display:grid;place-items:center;height:clamp(104px,12.5vw,150px);min-width:clamp(120px,14vw,170px);padding:14px 18px;background:#fff;border:5px solid #fff;border-radius:22px;outline:3px solid var(--ink);box-shadow:inset 0 0 0 2px rgba(26,20,16,.15)}
.stk img{height:clamp(68px,9vw,106px);width:auto;max-width:clamp(140px,18vw,230px);object-fit:contain;display:block}
.stk.wide .in{width:clamp(190px,24vw,280px)}.stk.wide img{width:100%;height:auto;max-height:clamp(52px,6vw,70px)}
.stk::after{content:"";position:absolute;right:-2px;bottom:-2px;width:34px;height:34px;background:linear-gradient(135deg,transparent 50%,#E6DCC4 50%);border-radius:0 0 22px 0;pointer-events:none}
.stk:hover,.stk:focus-visible{transform:rotate(calc(var(--r) * -.5)) scale(calc(var(--sc) * 1.1)) translateY(-6px);z-index:4}
.stk.pop{transform:rotate(0) scale(calc(var(--sc) * 1.25)) translateY(-8px);z-index:6;filter:drop-shadow(0 12px 0 rgba(0,0,0,.5))}
.stk .nm{position:absolute;left:50%;top:calc(100% + 6px);transform:translateX(-50%) scale(.7);background:var(--yellow);border:3px solid var(--ink);border-radius:999px;padding:1px 14px;font:800 13px var(--body);white-space:nowrap;opacity:0;transition:opacity .2s,transform .35s var(--ease);pointer-events:none;color:var(--ink)}
.stk.pop .nm{opacity:1;transform:translateX(-50%)}
.stk.slap{opacity:0;transform:rotate(calc(var(--r) + 14deg)) scale(1.7) translateY(-30px)}
.stk.slap.in2{opacity:1;transform:rotate(var(--r)) scale(var(--sc));transition:opacity .2s,transform .55s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--i) * 70ms)}
.stk.slap.in2:hover{transition-delay:0s}
.wall-bar{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:26px;position:relative}
.btn-yellow{background:var(--yellow)}
.wall-hint{color:#fff;font-weight:700;font-size:14px;opacity:.85}
@media (max-width:760px){.stk .in{min-width:104px;height:84px;padding:8px 12px}.stk img{height:54px;max-width:128px}.stk.wide .in{width:164px}.stk.wide img{max-height:42px}.stickers{gap:8px}}
@media (prefers-reduced-motion:reduce){.stk.slap{opacity:1;transform:rotate(var(--r))}}

/* contact */
.contact{padding:clamp(40px,7vw,90px) var(--gut) clamp(50px,6vw,80px)}
.contact-card{max-width:980px;margin:0 auto;border:4px solid var(--ink);border-radius:12px;background:var(--red);color:#fff;padding:clamp(26px,5vw,56px);box-shadow:10px 10px 0 var(--ink);text-align:center;position:relative;
  background-image:radial-gradient(rgba(255,255,255,.2) 1.6px,transparent 2px);background-size:14px 14px;transform:rotate(-.5deg)}
.contact-card h2{font-family:var(--display);font-weight:400;font-size:clamp(36px,6vw,72px);line-height:1;letter-spacing:.02em;text-shadow:3px 3px 0 var(--ink);text-wrap:balance}
.contact-card p{margin:10px auto 22px;font-size:clamp(16px,1.8vw,20px);max-width:48ch;font-weight:500;text-shadow:1px 1px 0 rgba(0,0,0,.35)}
.contact-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.contact-btns .btn{color:var(--ink)}
.contact-btns .btn svg{flex:none}
.foot{text-align:center;padding:0 var(--gut) 40px;font-size:14px;color:var(--ink-2)}
.foot-admin{opacity:.6;text-decoration:underline;text-underline-offset:3px}

/* guide */
.guide{position:fixed;left:max(10px,env(safe-area-inset-left));bottom:max(10px,env(safe-area-inset-bottom));z-index:30;display:flex;align-items:flex-end;gap:8px;pointer-events:none}
.g-face{pointer-events:auto;width:78px;height:78px;border:3px solid var(--ink);border-radius:50%;background:#FFD9CF;overflow:hidden;padding:0;box-shadow:3px 3px 0 var(--ink);transition:transform .3s var(--ease);position:relative}
.g-face:hover{transform:scale(1.08) rotate(-4deg)}
.g-face .face{position:absolute;width:128%;left:-14%;top:2%}
.g-bubble{pointer-events:none;max-width:min(230px,56vw);background:#fff;border:3px solid var(--ink);border-radius:18px 18px 18px 4px;padding:8px 12px;font-weight:800;font-size:14px;line-height:1.25;opacity:0;transform:translateX(-8px) scale(.9);transform-origin:left bottom;transition:opacity .3s,transform .4s var(--ease);box-shadow:2px 2px 0 var(--ink);margin-bottom:34px;order:2}
.g-bubble.on{opacity:1;transform:none}
body.dim-guide .guide{display:none}
@media (max-width:760px){.g-face{width:58px;height:58px}.g-bubble{margin-bottom:20px;font-size:13px}}

/* hizmet pop-up */
html{scrollbar-gutter:stable}
.stage{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:clamp(10px,3vw,40px);background:rgba(26,20,16,.62);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s}
.stage.open{opacity:1}
.stage-win{width:min(1180px,100%);height:min(100%,900px);display:flex;flex-direction:column;background:var(--paper);border:4px solid var(--ink);border-radius:16px;box-shadow:10px 12px 0 var(--ink);overflow:hidden;transform:scale(.8) translateY(30px) rotate(-1deg);opacity:0;transition:transform .55s var(--ease),opacity .25s;
  background-image:radial-gradient(rgba(26,20,16,.09) 1.2px,transparent 1.6px);background-size:14px 14px}
.stage.open .stage-win{transform:none;opacity:1}
.stage.closing{opacity:0;transition:opacity .25s}
.stage.closing .stage-win{transform:scale(.9) translateY(16px);opacity:0;transition:transform .25s,opacity .2s}
.stage-bar{flex:none;display:flex;align-items:center;justify-content:space-between;padding:10px 14px;gap:10px;background:var(--paper);border-bottom:var(--line)}
.stage-pager{display:flex;gap:8px}
.stage-body{flex:1;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;outline:0}
@media (max-width:700px){.stage{padding:10px 0 0;place-items:end center}.stage-win{height:94svh;border-radius:18px 18px 0 0;border-bottom:0;box-shadow:none;transform:translateY(60px)}.stage.open .stage-win{transform:none}.st-hero-in{grid-template-columns:1fr}.st-char{display:none}}
.st-hero{background:var(--c);color:#fff;border-bottom:var(--line);padding:clamp(22px,4vw,44px) var(--gut);position:relative;overflow:hidden;
  background-image:radial-gradient(rgba(255,255,255,.26) 1.6px,transparent 2px);background-size:13px 13px}
.st-hero-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end}
.st-hero h2{font-family:var(--display);font-weight:400;font-size:clamp(38px,6.4vw,84px);line-height:.95;letter-spacing:.02em;text-shadow:3px 3px 0 var(--ink);text-wrap:balance}
.st-hero p{margin-top:12px;font-size:clamp(16px,1.8vw,21px);max-width:60ch;font-weight:500;text-shadow:1px 1px 0 rgba(0,0,0,.4)}
.st-hero .long{margin-top:8px;font-size:clamp(15px,1.5vw,18px);opacity:.96}
.st-char{width:clamp(70px,12vw,150px)}
.st-char img{filter:drop-shadow(3px 3px 0 var(--ink))}
.st-main{max-width:1180px;margin:0 auto;padding:clamp(20px,3vw,36px) var(--gut) 40px}
.seg{display:inline-flex;border:var(--line);border-radius:999px;background:var(--paper-3);padding:4px;gap:4px;box-shadow:3px 3px 0 var(--ink);margin-bottom:22px;position:sticky;top:8px;z-index:5}
.seg button{border:0;background:transparent;min-height:44px;padding:4px 20px;border-radius:999px;font-weight:800;font-size:16px}
.seg button[aria-selected=true]{background:var(--ink);color:#fff}
.seg button small{font-weight:700;opacity:.7;margin-left:4px}
.wk{display:grid;gap:clamp(12px,2vw,22px)}
.wk.posts{grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr))}
.wk.vids{grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr))}
.wk.sites,.wk.shoots{grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr))}
@media (max-width:600px){.wk.posts{grid-template-columns:repeat(2,1fr)}.wk.vids{grid-template-columns:repeat(2,1fr)}.wk{gap:12px}}
.item{position:relative;border:3px solid var(--ink);border-radius:10px;background:var(--paper-3);overflow:hidden;padding:0;text-align:left;box-shadow:4px 4px 0 var(--ink);transition:transform .3s var(--ease),box-shadow .3s var(--ease);display:block;text-decoration:none;width:100%}
.item:hover{transform:translate(-2px,-4px) rotate(-.6deg);box-shadow:7px 9px 0 var(--ink)}
.item .media{position:relative;overflow:hidden;background:var(--paper-2)}
.post .media{aspect-ratio:4/5}.vid .media{aspect-ratio:9/16;background:#111}
.site .media,.shoot .media{aspect-ratio:16/10}
.item .media img{width:100%;height:100%;object-fit:cover;object-position:var(--x,50%) var(--y,50%);transform:scale(var(--z,1));transform-origin:var(--x,50%) var(--y,50%);transition:transform .5s var(--ease)}
.item:hover .media img{transform:scale(calc(var(--z,1) * 1.05))}
@media (max-width:760px){.item .media img{object-position:var(--mx,50%) var(--my,50%);transform:scale(var(--mz,1));transform-origin:var(--mx,50%) var(--my,50%)}.item:hover .media img{transform:scale(var(--mz,1))}}
.play{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:var(--red);border:3px solid var(--ink);display:grid;place-items:center;box-shadow:3px 3px 0 var(--ink);transition:transform .3s var(--ease)}
.play::after{content:"";border-left:18px solid #fff;border-block:11px solid transparent;margin-left:5px}
.item:hover .play{transform:scale(1.14)}
.item .cap{padding:12px 14px 14px}
.item .cap b{display:block;font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:.02em;line-height:1.05}
.item .cap span{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.item .cta{margin-top:10px;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:4px 16px;border:3px solid var(--ink);border-radius:999px;background:var(--yellow);font-weight:800;font-size:14px}
.noimg{width:100%;height:100%;display:grid;place-items:center;background:repeating-linear-gradient(45deg,var(--paper-2) 0 12px,var(--paper-3) 12px 24px)}
.noimg svg{width:64px;height:64px;opacity:.7}
.st-sec{margin-top:clamp(26px,4vw,44px)}
.st-sec>h3{font-family:var(--display);font-weight:400;font-size:clamp(28px,4vw,44px);letter-spacing:.02em;margin-bottom:14px;line-height:1}
.scope{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:14px;counter-reset:s;list-style:none;padding:0}
.scope li{position:relative;background:var(--paper-3);border:3px solid var(--ink);border-radius:10px;padding:14px 16px 16px 62px;box-shadow:4px 4px 0 var(--ink);counter-increment:s;transition:transform .3s var(--ease)}
.scope li:hover{transform:translateY(-3px) rotate(-.4deg)}
.scope li::before{content:counter(s);position:absolute;left:14px;top:14px;width:36px;height:36px;border-radius:50%;background:var(--c);color:#fff;border:3px solid var(--ink);display:grid;place-items:center;font-family:var(--display);font-size:20px;letter-spacing:.02em}
.scope b{display:block;font-weight:800;font-size:17px;line-height:1.25}
.scope span{display:block;font-size:15px;color:var(--ink-2);margin-top:2px}
.empty{padding:34px 20px;text-align:center;border:3px dashed var(--ink);border-radius:12px;background:var(--paper-3);font-weight:700}
.st-cta{display:flex;justify-content:center;margin-top:34px}
.st-cta .btn{font-size:18px;min-height:52px;padding:8px 30px;background:var(--red);color:#fff}

/* viewer */
.viewer{position:fixed;inset:0;z-index:80;background:rgba(18,12,8,.93);display:grid;place-items:center;padding:60px 64px 54px;animation:fade .25s}
@keyframes fade{from{opacity:0}}
.v-wrap{width:100%;height:100%;display:flex;gap:24px;align-items:center;justify-content:center;min-height:0}
.v-main{height:100%;min-width:0;display:flex;align-items:center;justify-content:center;animation:vin .45s var(--ease)}
@keyframes vin{from{opacity:0;transform:translateX(var(--dx,30px)) scale(.97)}}
.v-main.post img{max-height:100%;max-width:100%;aspect-ratio:4/5;object-fit:contain;border:4px solid var(--ink);border-radius:8px;background:#fff;box-shadow:0 0 0 3px var(--paper)}
.v-main.vid{aspect-ratio:9/16;max-width:100%}
.v-main.vid>*{height:100%;width:100%;aspect-ratio:9/16;border:4px solid var(--ink);border-radius:10px;background:#000;box-shadow:0 0 0 3px var(--paper)}
.v-main.vid iframe{border:4px solid var(--ink)}
.v-main.wide img{max-width:100%;max-height:100%;border:4px solid var(--ink);border-radius:8px;object-fit:contain;background:var(--paper)}
.v-thumb{position:relative;display:block;padding:0;border:4px solid var(--ink);border-radius:10px;overflow:hidden;background:#000;cursor:pointer;aspect-ratio:9/16;height:100%}
.v-thumb img{width:100%;height:100%;object-fit:cover}
.v-side{flex:0 1 340px;max-height:100%;overflow:auto;background:var(--paper-3);border:4px solid var(--ink);border-radius:12px;padding:18px 20px;display:grid;gap:12px;align-content:start}
.v-side h4{font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:.02em;line-height:1}
.v-side dt{font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.v-side dd{margin:0;font-size:16px}
.v-side .btn{justify-self:start}
.v-nav{position:absolute;top:50%;margin-top:-26px;width:52px;height:52px;font-size:34px;padding:0 0 4px;z-index:2}
.v-prev{left:max(8px,env(safe-area-inset-left))}.v-next{right:max(8px,env(safe-area-inset-right))}
.v-close{position:absolute;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:3}
.v-count{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);color:#fff;font-weight:800;background:rgba(0,0,0,.4);padding:4px 14px;border-radius:999px;font-size:14px}
@media (max-width:760px){
  .viewer{padding:56px 10px 48px}
  .v-wrap{flex-direction:column;gap:10px;overflow:auto;justify-content:flex-start}
  .v-side{flex:none;max-height:none;width:100%}
  .v-main{height:auto;max-height:100%;width:100%}
  .v-main.vid{height:min(100%,calc(100vw * 16 / 9 - 40px));width:auto;margin:0 auto}
  .v-main.post img{width:100%;height:auto}
  .v-nav{top:auto;bottom:max(6px,env(safe-area-inset-bottom));margin:0;width:46px;height:46px}
  .v-prev{left:14px}.v-next{right:14px}
  .v-wrap:has(.v-side) .v-main.vid{height:min(62svh,500px)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
.guide.quiet{opacity:0;pointer-events:none;transform:translateY(12px)}
.guide{transition:opacity .3s,transform .4s var(--ease)}

.sfx{position:absolute;z-index:1;font-family:var(--display);font-size:clamp(26px,3.6vw,46px);letter-spacing:.04em;line-height:1;color:var(--ink);background:var(--yellow);padding:10px 18px 8px;border:3px solid var(--ink);clip-path:none;border-radius:50% 40% 55% 45%/45% 55% 40% 50%;transform:rotate(-8deg) scale(0);opacity:0;transition:transform .45s var(--ease),opacity .2s;pointer-events:none;box-shadow:3px 3px 0 var(--ink)}
.sfx.on{transform:rotate(var(--sr,-8deg)) scale(1);opacity:1}
.p-agency .sfx{left:8%;bottom:30%;--sr:-9deg}.p-owner .sfx{right:8%;bottom:30%;--sr:8deg;background:#fff}
@media (max-width:760px){.sfx{font-size:24px;padding:6px 12px 4px}.p-agency .sfx{left:5%;bottom:34%}.p-owner .sfx{right:5%;bottom:34%}}