/* ═══════════════════════════════════════════════════════════════════
   ABOUT — extends /assets/press/press.css. Riso inks: ink, vermilion, teal, mustard, blue — on cream paper.
   Every animation is CSS/SVG or a 4-second loop; reduced motion shows stills.
   ═══════════════════════════════════════════════════════════════════ */
:root{--spot:#2E5E5B;--spot-t:#2E5E5B;--teal2:#2A8C8A;--sun:#E0A526;--blue2:#2F4FA3;--rose:#F3D9CF;--mint:#CFE3DF;--butter:#F1E0AE;--sky:#CDD7E6;
  --torn-t:polygon(0 12px,3% 4px,7% 13px,12% 5px,18% 12px,24% 3px,31% 11px,37% 4px,44% 13px,51% 5px,58% 12px,64% 3px,71% 11px,78% 5px,85% 13px,92% 4px,100% 11px,100% calc(100% - 11px),95% calc(100% - 3px),89% calc(100% - 12px),82% calc(100% - 4px),74% calc(100% - 13px),67% calc(100% - 5px),60% calc(100% - 11px),52% calc(100% - 3px),45% calc(100% - 12px),37% calc(100% - 4px),29% calc(100% - 13px),21% calc(100% - 5px),13% calc(100% - 11px),6% calc(100% - 3px),0 calc(100% - 10px))}
main{overflow-x:clip}

/* ─── HERO ─────────────────────────────────────────────────────────── */
.ab-hero{position:relative;max-width:var(--max);margin:0 auto;padding:clamp(26px,4.5vw,62px) var(--gut) clamp(46px,6vw,84px);display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:clamp(30px,4.5vw,64px);align-items:center}
.ab-copy{min-width:0}
.ab-h1{font-family:var(--f-poster);font-weight:400;text-transform:uppercase;font-size:clamp(2.5rem,5.7vw,5.2rem);line-height:1.02;letter-spacing:.004em;margin:.42em 0 .46em;display:flex;flex-direction:column;align-items:flex-start;gap:.12em;text-wrap:balance}
html[lang="tr"] .ab-h1{font-family:var(--f-head);font-weight:900;line-height:1.1;font-size:clamp(2.3rem,4.5vw,4.5rem)}
.ab-bar{display:inline-block;white-space:nowrap;padding:.05em .2em .01em;color:var(--knock);clip-path:inset(0 100% 0 0);animation:ab-bar .75s var(--ease) both}
html[lang="tr"] .ab-bar{padding:.04em .2em .02em}
.ab-bar.b1{background:var(--ink);animation-delay:.12s}
.ab-bar.b2{background:var(--verm);animation-delay:.34s;margin-left:.45em}
.ab-bar.b3{background:var(--spot);animation-delay:.56s}
@keyframes ab-bar{to{clip-path:inset(0 0 0 0)}}
.ab-lead{font-size:clamp(1.02rem,1.25vw,1.16rem);max-width:56ch;color:var(--body);margin-bottom:26px}
.ab-lead strong{color:var(--ink);background:linear-gradient(transparent 62%,rgba(224,165,38,.55) 62%)}
.ab-cta{display:flex;flex-wrap:wrap;gap:14px}
.ab-stage{position:relative;min-width:0;padding:18px 18px 34px}
.ab-desk{position:relative;margin:0;transform:rotate(calc(1.4deg + var(--px,0)*2.4deg)) translate(calc(var(--px,0)*9px),calc(var(--py,0)*9px));transition:transform .45s var(--ease)}
.ab-frame{position:relative;border:3px solid var(--ink);background:var(--butter);box-shadow:11px 11px 0 var(--verm);overflow:hidden;aspect-ratio:4/3}
.ab-frame video,.ab-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ab-frame video.ab-v{opacity:0;transition:opacity .5s ease}.ab-frame video.ab-v.on{opacity:1}
.ab-desk figcaption{margin-top:20px;font-family:var(--f-label);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);display:flex;gap:10px;align-items:baseline}
.ab-desk figcaption b{font-family:var(--f-slab);font-weight:400;font-size:1.05rem;letter-spacing:0;color:var(--verm-t)}
.ab-tape{position:absolute;z-index:3;top:-17px;left:50%;width:128px;height:32px;margin-left:-64px;transform:rotate(-3.5deg);background:rgba(224,165,38,.82);box-shadow:0 1px 0 rgba(26,23,20,.25);clip-path:polygon(0 0,4% 18%,0 36%,4% 54%,0 72%,4% 100%,100% 100%,96% 72%,100% 54%,96% 36%,100% 18%,96% 0)}
.ab-sticker{position:absolute;z-index:4;display:grid;place-items:center;text-align:center;font-family:var(--f-slab);line-height:1;color:var(--verm-t);background:var(--knock);border:4px solid var(--verm-t);border-radius:50%;box-shadow:3px 3px 0 var(--ink)}
.ab-sticker.s1{right:-4px;bottom:6px;width:112px;height:112px;font-size:1.35rem;transform:rotate(-13deg);animation:ab-wob 5.5s ease-in-out infinite}
.ab-sticker.s1 small{display:block;font-family:var(--f-label);font-weight:700;font-size:.52rem;letter-spacing:.16em;margin-top:5px;color:var(--ink)}
.ab-sticker.s2{left:-6px;top:34%;width:78px;height:78px;font-size:1.05rem;color:var(--spot);border-color:var(--spot);transform:rotate(9deg);animation:ab-wob 6.5s ease-in-out -2s infinite}
@keyframes ab-wob{0%,100%{rotate:0deg;translate:0 0}50%{rotate:5deg;translate:0 -6px}}

/* ─── TICKER ───────────────────────────────────────────────────────── */
.ab-ticker{overflow:hidden;border-block:3px solid var(--ink);background:var(--sun);transform:rotate(-1deg);margin:0 -3vw;position:relative;z-index:2;box-shadow:0 6px 0 rgba(26,23,20,.14)}
.ab-roll{display:flex;width:max-content}
.ab-roll.go{animation:ab-roll 52s linear infinite}
.ab-ticker:hover .ab-roll{animation-play-state:paused}
.ab-roll>span{display:flex;align-items:center;gap:1.1em;padding:.32em 1.1em;white-space:nowrap;font-family:var(--f-poster);text-transform:uppercase;font-size:clamp(1.25rem,2.5vw,1.9rem);letter-spacing:.01em;color:var(--ink)}
html[lang="tr"] .ab-roll>span{font-family:var(--f-head);font-weight:900}
.ab-roll>span::after{content:"✦";color:var(--verm);font-size:.62em}
.ab-roll>span:nth-child(4n+2){color:var(--verm-t)}.ab-roll>span:nth-child(4n+3){color:var(--spot)}.ab-roll>span:nth-child(4n){color:var(--blue2)}
@keyframes ab-roll{to{transform:translateX(-50%)}}

/* ─── STATS ────────────────────────────────────────────────────────── */
.ab-stats{position:relative;margin-top:-6px;background:var(--spot);color:var(--knock);clip-path:var(--torn-t);padding:clamp(60px,8vw,104px) 0}
.ab-stats::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(239,231,214,.1) 30%,transparent 32%) 0 0/14px 14px}
.ab-in{position:relative;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.ab-stats .eyebrow{color:#E8B4A8}.ab-stats .eyebrow::before{background:var(--sun)}
.ab-h2{font-family:var(--f-head);font-weight:800;font-size:clamp(2.2rem,4.8vw,4rem);line-height:.96;text-transform:uppercase;letter-spacing:.004em;text-wrap:balance;margin:.4em 0 .5em}
html[lang="tr"] .ab-h2{font-weight:900;line-height:1.06}
.ab-h2 em{font-style:normal;color:var(--verm);text-shadow:1.5px 0 0 var(--ink),-1.5px 0 0 var(--spot)}
.ab-stats .ab-h2{color:var(--knock);text-shadow:2px 0 0 var(--verm),-2px 0 0 #1b3f3d}
.ab-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:34px}
.ab-stat{position:relative;border:3px solid var(--ink);padding:20px 18px 18px;color:var(--ink);background:var(--knock);box-shadow:7px 7px 0 var(--ink);transform:rotate(var(--r,0deg));transition:transform .3s var(--spring)}
.ab-stat:nth-child(1){--r:-1.2deg}.ab-stat:nth-child(2){--r:1deg;background:var(--sun)}.ab-stat:nth-child(3){--r:-.7deg;background:var(--verm);color:var(--knock)}.ab-stat:nth-child(4){--r:1.4deg;background:var(--ink);color:var(--knock)}
.ab-stat:hover{transform:rotate(0deg) translateY(-4px)}
.ab-num{display:block;font-family:var(--f-slab);font-weight:400;font-size:clamp(3.6rem,7.4vw,6rem);line-height:1;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.ab-stat b{display:block;margin-top:12px;font-family:var(--f-head);font-weight:800;font-size:1.28rem;line-height:1.1;text-transform:uppercase}
html[lang="tr"] .ab-stat b{font-weight:900;line-height:1.16}
.ab-stat small{display:block;margin-top:6px;font-family:var(--f-label);font-size:.74rem;letter-spacing:.04em;line-height:1.4;opacity:.82}

/* ─── STORY ────────────────────────────────────────────────────────── */
.ab-story{max-width:var(--max);margin:0 auto;padding:clamp(60px,8vw,112px) var(--gut) clamp(40px,5vw,70px);display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.95fr);gap:clamp(30px,5vw,72px);align-items:start}
.ab-prose p{font-size:clamp(1.02rem,1.22vw,1.12rem);line-height:1.78;color:var(--body);margin:0 0 1.15em;max-width:64ch}
.ab-prose p strong{color:var(--ink)}
.ab-prose p:first-of-type::first-letter{float:left;font-family:var(--f-slab);font-size:4.3em;line-height:.82;padding:.06em .1em 0 0;color:var(--verm);text-shadow:3px 3px 0 var(--ink)}
.ab-prose mark{background:linear-gradient(transparent 58%,rgba(42,140,138,.35) 58%);color:inherit;padding:0 .08em}
.ab-prose .slogan{display:block;margin-top:.4em;font-family:var(--f-head);font-weight:800;text-transform:uppercase;font-size:1.5rem;line-height:1.1;color:var(--ink)}
.ab-prose .slogan i{font-style:normal;color:var(--verm)}
.ab-sheet{position:sticky;top:96px;background:var(--knock);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--spot);transform:rotate(.8deg);padding:26px 22px 20px}
.ab-sheet::before{content:"";position:absolute;left:0;right:0;top:9px;height:6px;background:radial-gradient(circle at 6px 3px,var(--paper) 3px,transparent 3.5px) 0 0/16px 6px repeat-x}
.ab-sheet h3{font-family:var(--f-head);font-weight:900;text-transform:uppercase;font-size:1.3rem;margin:6px 0 12px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.ab-sheet h3 span{font-family:var(--f-label);font-weight:500;font-size:.62rem;letter-spacing:.16em;color:var(--soft)}
.ab-sheet dl{display:grid;gap:0;margin:0}
.ab-sheet dl>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;padding:9px 0;border-top:2px dashed rgba(26,23,20,.28)}
.ab-sheet dt{font-family:var(--f-label);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);padding-top:.3em}
.ab-sheet dd{margin:0;font-weight:600;font-size:.95rem;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.ab-sheet dd a{color:var(--verm-t);text-decoration-thickness:2px;text-underline-offset:3px}
.ab-sheet .ab-free{display:inline-block;background:var(--verm);color:var(--knock);padding:.05em .45em;font-family:var(--f-label);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;transform:rotate(-2deg)}

/* ─── HOUSE RULES ──────────────────────────────────────────────────── */
.ab-rules{padding:clamp(40px,6vw,84px) 0 clamp(60px,8vw,112px)}
.ab-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:34px}
.ab-card{position:relative;border:3px solid var(--ink);padding:22px 20px 24px;display:flex;flex-direction:column;gap:10px;box-shadow:8px 8px 0 var(--ink);transform:rotate(var(--r,0deg));transition:transform .35s var(--spring),box-shadow .2s}
.ab-card:hover{transform:rotate(0deg) translateY(-6px);box-shadow:12px 12px 0 var(--ink)}
.ab-card:nth-child(1){--r:-1.1deg;background:var(--verm);color:var(--knock)}
.ab-card:nth-child(2){--r:.9deg;background:var(--sun);color:var(--ink)}
.ab-card:nth-child(3){--r:-.6deg;background:var(--teal2);color:var(--knock)}
.ab-card:nth-child(4){--r:1.2deg;background:var(--ink);color:var(--knock);box-shadow:8px 8px 0 var(--blue2)}
.ab-card:nth-child(4):hover{box-shadow:12px 12px 0 var(--blue2)}
.ab-card .no{font-family:var(--f-label);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;opacity:.8}
.ab-card h3{font-family:var(--f-head);font-weight:900;text-transform:uppercase;font-size:1.65rem;line-height:1;margin:0}
html[lang="tr"] .ab-card h3{line-height:1.1}
.ab-card p{font-size:.96rem;line-height:1.6;margin:0}
.ab-ill{height:172px;margin:2px 0 8px;padding:12px;display:grid;place-items:center;background:var(--knock);border:3px solid var(--ink);box-shadow:4px 4px 0 rgba(26,23,20,.45);overflow:hidden}
.ab-ill .stg{position:relative;height:142px;max-width:100%;container-type:size}
.ab-ill .stg img{position:absolute;display:block;height:auto}
/* 1: the small dots gather on the target, then fly out again */
.ab-ill .rg{transform-origin:50% 50%;animation:ab-ring 4.6s ease-in-out infinite}
.ab-ill .dt{animation:ab-gather 4.6s ease-in-out infinite;animation-delay:calc(var(--i)*-.18s)}
@keyframes ab-gather{0%,8%{translate:0 0;opacity:1}42%,62%{translate:calc(var(--dx)*.78*1cqw) calc(var(--dy)*.78*1cqh);opacity:.95}100%{translate:0 0;opacity:1}}
@keyframes ab-ring{0%,8%,100%{scale:1}50%{scale:1.05}}
/* 2: the price tag swings on its string */
.ab-ill .tg{height:142px;width:auto;max-width:100%;transform-origin:50% 0;animation:ab-swing 4.8s ease-in-out infinite}
@keyframes ab-swing{0%,100%{rotate:-5deg}50%{rotate:5deg}}
/* 3: the chip works, the signal pulses, the cloud is crossed out */
.ab-ill .chp{animation:ab-chip 2.8s ease-in-out infinite;transform-origin:50% 50%}
.ab-ill .arc{transform-origin:50% 50%;animation:ab-arc 2.8s ease-out infinite}
.ab-ill .cld{animation:ab-wob2 5s ease-in-out infinite;transform-origin:50% 50%}
@keyframes ab-chip{0%,100%{scale:1}50%{scale:1.04}}
@keyframes ab-arc{0%{scale:.9;opacity:.2}35%{opacity:1}100%{scale:1.12;opacity:.1}}
@keyframes ab-wob2{0%,100%{rotate:-4deg;translate:0 0}50%{rotate:4deg;translate:2% -3%}}
/* 4: the menu-bar tool drops in, waits, tucks away */
.ab-ill .bar{transform-origin:50% 0;animation:ab-bar2 5.4s ease-in-out infinite}
@keyframes ab-bar2{0%,8%{translate:0 -14%;opacity:0}22%,70%{translate:0 0;opacity:1}86%,100%{translate:0 -14%;opacity:0}}

/* ─── THE SHELF ────────────────────────────────────────────────────── */
.ab-shelf{max-width:var(--max);margin:0 auto;padding:clamp(24px,4vw,52px) var(--gut) clamp(60px,8vw,112px)}
.ab-shelf .lead{margin-bottom:6px}
.ab-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));gap:22px;margin-top:34px}
.ab-tile{--c:var(--verm);--t:var(--rose);position:relative;display:grid;grid-template-columns:88px minmax(0,1fr);gap:4px 14px;align-items:center;padding:16px 16px 18px 14px;text-decoration:none;color:var(--ink);overflow:hidden;
  background:var(--t);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--c);transform:rotate(var(--r,0deg));transition:transform .3s var(--spring),box-shadow .2s}
.ab-tile:nth-child(4n+1){--r:-.9deg}.ab-tile:nth-child(4n+2){--r:.7deg;--c:var(--teal2);--t:var(--mint)}.ab-tile:nth-child(4n+3){--r:-.5deg;--c:#C98F12;--t:var(--butter)}.ab-tile:nth-child(4n){--r:1deg;--c:var(--blue2);--t:var(--sky)}
.ab-tile:hover,.ab-tile:focus-visible{transform:rotate(0deg) translate(-3px,-5px);box-shadow:10px 10px 0 var(--c)}
.ab-tile .no{position:absolute;right:10px;bottom:-16px;font-family:var(--f-slab);font-size:4.6rem;line-height:1;color:var(--c);opacity:.18;pointer-events:none}
.ab-tile .em{grid-row:1/5;width:88px;height:88px;position:relative;align-self:start;margin-top:4px}
.ab-tile .em img,.ab-tile .em video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .35s var(--spring),opacity .12s linear}
.ab-tile:hover .em img{transform:rotate(-5deg) scale(1.08)}
.ab-tile h3{font-family:var(--f-head);font-weight:900;font-size:1.42rem;line-height:1.02;margin:0;align-self:end;position:relative;overflow-wrap:anywhere}
.ab-tile .lb{font-family:var(--f-label);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);position:relative}
.ab-tile p{font-size:.86rem;line-height:1.45;color:var(--body);margin:0;position:relative}
.ab-tile .wh{margin-top:4px;display:flex;flex-wrap:wrap;gap:5px;position:relative}
.ab-tile .wh i{font-style:normal;font-family:var(--f-label);font-weight:700;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;border:2px solid var(--ink);padding:.12rem .38rem;background:var(--knock)}
.ab-tile.house{grid-column:auto}
.ab-tile.house .no{font-size:2.6rem}

/* ─── SHIPS WITH (ink band + press loop) ───────────────────────────── */
.ab-ships{position:relative;background:var(--ink);color:var(--paper);clip-path:var(--torn-t);padding:clamp(70px,9vw,120px) 0}
.ab-ships::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(239,231,214,.07) 30%,transparent 32%) 0 0/14px 14px}
.ab-ships-in{position:relative;max-width:var(--max);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(30px,5vw,70px);align-items:center}
.ab-ships .eyebrow{color:#E8B4A8}
.ab-ships .ab-h2{color:var(--knock);text-shadow:2px 0 0 var(--verm),-2px 0 0 var(--teal2)}
.ab-pressfig{position:relative;margin:0;transform:rotate(-1.6deg)}
.ab-pressfig .ab-frame{background:var(--teal2);box-shadow:-11px 11px 0 var(--sun);border-color:var(--knock)}
.ab-pressfig figcaption{margin-top:20px;font-family:var(--f-label);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#CFC4AE}
.ab-checks{list-style:none;display:grid;gap:14px;margin:26px 0 0;padding:0}
.ab-checks li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;align-items:start;padding:14px 16px;border:2px solid rgba(239,231,214,.55);background:rgba(239,231,214,.06)}
.ab-checks svg{width:42px;height:42px;overflow:visible}
.ab-checks .bx{fill:none;stroke:var(--sun);stroke-width:3.5}
.ab-checks .ck{fill:none;stroke:var(--sun);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:34;stroke-dashoffset:34;transition:stroke-dashoffset .6s var(--ease)}
.js .ab-checks.in .ck{stroke-dashoffset:0}
.ab-checks li:nth-child(1) .ck{transition-delay:.15s}.ab-checks li:nth-child(2) .ck{transition-delay:.45s}.ab-checks li:nth-child(3) .ck{transition-delay:.75s}.ab-checks li:nth-child(4) .ck{transition-delay:1.05s}.ab-checks li:nth-child(5) .ck{transition-delay:1.35s}
html:not(.js) .ab-checks .ck{stroke-dashoffset:0}
.ab-checks b{display:block;font-family:var(--f-head);font-weight:800;text-transform:uppercase;font-size:1.22rem;line-height:1.1;color:var(--knock)}
html[lang="tr"] .ab-checks b{font-weight:900;line-height:1.16}
.ab-checks span{display:block;margin-top:3px;font-size:.92rem;line-height:1.5;color:#CFC4AE}

/* ─── THE CAT ──────────────────────────────────────────────────────── */
.ab-cat{max-width:var(--max);margin:0 auto;padding:clamp(70px,9vw,120px) var(--gut) clamp(40px,6vw,76px)}
.ab-cat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:36px}
.ab-pola{position:relative;margin:0;background:var(--knock);border:3px solid var(--ink);padding:14px 14px 18px;box-shadow:7px 7px 0 var(--c,var(--verm));transform:rotate(var(--r,0deg));transition:transform .4s var(--spring)}
.ab-pola:nth-child(1){--r:-1.6deg;--c:var(--verm)}.ab-pola:nth-child(2){--r:1.1deg;--c:var(--teal2)}.ab-pola:nth-child(3){--r:-.8deg;--c:var(--sun)}
.ab-pola:hover{transform:rotate(0deg) translateY(-6px)}
.ab-pola .pic{aspect-ratio:1;display:grid;place-items:center;background:var(--t,var(--rose));overflow:hidden}
.ab-pola:nth-child(2) .pic{--t:var(--mint)}.ab-pola:nth-child(3) .pic{--t:var(--butter)}
.ab-pola .pic img,.ab-pola .pic video{width:92%;height:92%;object-fit:contain}
.ab-pola figcaption{margin-top:14px;font-family:var(--f-head);font-weight:800;text-transform:uppercase;font-size:1.2rem;line-height:1.1}
.ab-pola figcaption small{display:block;margin-top:5px;font-family:var(--f-body);font-weight:400;text-transform:none;font-size:.88rem;color:var(--soft);line-height:1.45}
.ab-cat .lead{margin-top:4px}

/* ─── ISTANBUL: the pieces of one riso print, cut out and moved separately ─ */
.ab-city{position:relative;margin-top:clamp(34px,5vw,70px);background:#F3E3B8;border-block:3px solid var(--ink);overflow:hidden}
.ab-cityst{--h:clamp(340px,45vw,640px);--wh:calc(var(--h)*.27);position:relative;height:var(--h);overflow:hidden;isolation:isolate}
.ab-cityst::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(rgba(201,143,18,.2) 28%,transparent 30%) 0 0/11px 11px;-webkit-mask-image:linear-gradient(#000,transparent 75%);mask-image:linear-gradient(#000,transparent 75%)}
.cL{position:absolute;pointer-events:none;transition:translate .5s var(--ease)}
.cL img{display:block;max-width:none}
.cL-sun{right:13%;top:7%;width:clamp(70px,11vw,150px);z-index:1;translate:calc(var(--mx,0)*-16px) calc(var(--my,0)*-9px)}
.c-sun{width:100%;height:auto;animation:ab-sunbob 9s ease-in-out infinite}
@keyframes ab-sunbob{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -3%;rotate:2deg}}
.cL-cl{inset:0;z-index:1;translate:calc(var(--mx,0)*-10px) calc(var(--my,0)*-5px)}
.c-cloud{position:absolute;height:auto;left:-20%;animation:ab-drift 80s linear infinite}
.c-cloud.k1{top:5%;width:clamp(90px,14vw,190px);animation-duration:84s;animation-delay:-18s}
.c-cloud.k2{top:21%;width:clamp(64px,9vw,126px);animation-duration:112s;animation-delay:-66s}
.c-cloud.k3{top:12%;width:clamp(52px,7vw,98px);animation-duration:140s;animation-delay:-104s}
@keyframes ab-drift{from{left:-22%}to{left:104%}}
.cL-sky{left:50%;bottom:calc(var(--wh) - 6px);width:max(100%,900px);z-index:2;translate:calc(-50% + var(--mx,0)*-5px) 0}
.c-sky{width:100%;height:auto}
.c-water{position:absolute;left:0;right:0;bottom:0;height:var(--wh);overflow:hidden;z-index:3;box-shadow:0 -3px 0 rgba(26,23,20,.4)}
.c-flow{display:flex;width:200%;height:100%;animation:ab-flow 70s linear infinite}
.c-flow img{flex:0 0 50%;width:50%;height:100%;object-fit:cover;display:block}
@keyframes ab-flow{to{transform:translateX(-50%)}}
.cL-fer{left:0;right:0;bottom:calc(var(--wh)*.5);z-index:4;translate:calc(var(--mx,0)*6px) 0}
.c-track{width:clamp(150px,22%,330px);animation:ab-glide 46s linear infinite}
@keyframes ab-glide{from{translate:-140% 0}to{translate:calc(100vw + 60%) 0}}
.c-bob{animation:ab-bob2 3.2s ease-in-out infinite;transform-origin:50% 92%}
@keyframes ab-bob2{0%,100%{translate:0 0;rotate:-.6deg}50%{translate:0 4px;rotate:.7deg}}
.c-ferry{width:100%;height:auto}
.c-gulls{position:absolute;inset:0;z-index:5;pointer-events:none}
.c-gull{position:absolute;display:block;width:clamp(34px,5vw,70px);aspect-ratio:300/303;background:url(/assets/about/city-gulls.webp) 0 0/400% 100% no-repeat;left:-8%;animation:ab-flap .86s steps(1) infinite,ab-fly 34s linear infinite}
.c-gull.g1{top:15%}.c-gull.g2{top:30%;width:clamp(26px,3.6vw,50px);animation-duration:.74s,44s;animation-delay:0s,-17s}.c-gull.g3{top:9%;width:clamp(24px,3.2vw,44px);animation-duration:.8s,52s;animation-delay:-.2s,-33s}
@keyframes ab-flap{0%{background-position:0 0}17%{background-position:33.333% 0}34%{background-position:66.666% 0}50%{background-position:100% 0}67%{background-position:66.666% 0}84%{background-position:33.333% 0}}
@keyframes ab-fly{0%{left:-8%;translate:0 0}50%{translate:0 -18px}100%{left:106%;translate:0 6px}}
.ab-cityst .cap{position:absolute;z-index:6;left:var(--gut);top:clamp(14px,2.2vw,30px);max-width:min(480px,70%)}
.ab-city .cap .eyebrow{color:var(--ox)}
.ab-city .cap h2{font-family:var(--f-head);font-weight:900;text-transform:uppercase;font-size:clamp(1.8rem,3.6vw,3rem);line-height:1;margin:.3em 0 .25em;color:var(--ink);text-shadow:2px 2px 0 var(--sun)}
html[lang="tr"] .ab-city .cap h2{line-height:1.1}
.ab-city .cap .clk{font-family:var(--f-label);font-size:.82rem;letter-spacing:.06em;color:var(--body)}
.ab-city .cap .clk b{font-family:var(--f-slab);font-weight:400;font-size:1.3rem;color:var(--verm-t);letter-spacing:0;font-variant-numeric:tabular-nums}

/* ─── QUICK ANSWERS ────────────────────────────────────────────────── */
.ab-faq{max-width:var(--max);margin:0 auto;padding:clamp(56px,7vw,100px) var(--gut) clamp(40px,5vw,70px)}

/* ─── SAY HELLO ────────────────────────────────────────────────────── */
.ab-hello{position:relative;background:var(--verm);color:var(--knock);clip-path:var(--torn-t);padding:clamp(70px,9vw,118px) 0;overflow:hidden}
.ab-hello::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(rgba(26,23,20,.14) 30%,transparent 32%) 0 0/14px 14px}
.ab-hello-in{position:relative;max-width:var(--max);margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(220px,.7fr);gap:30px;align-items:center}
.ab-hello h2{font-family:var(--f-poster);font-weight:400;text-transform:uppercase;font-size:clamp(3rem,8vw,7rem);line-height:.94;color:var(--knock);text-shadow:4px 4px 0 var(--ink);text-wrap:balance}
html[lang="tr"] .ab-hello h2{font-family:var(--f-head);font-weight:900;line-height:1.04}
.ab-hello p{max-width:48ch;font-size:1.1rem;margin:18px 0 26px;color:#FBE9DF}
.ab-hello .btn{--bg:var(--knock);--fg:var(--ink)}
.ab-hello .btn.alt{--bg:var(--ink);--fg:var(--knock);box-shadow:4px 4px 0 var(--knock)}
.ab-hello .row{display:flex;flex-wrap:wrap;gap:14px}
.ab-plane{position:relative;width:100%;max-width:340px;aspect-ratio:240/200;justify-self:center}
.ab-plane .trail{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ab-plane .trail path{fill:none;stroke:var(--knock);stroke-width:3;stroke-dasharray:4 12;stroke-linecap:round;opacity:.8}
.ab-plane .pl{position:absolute;width:44%;height:auto;left:48%;top:4%;animation:ab-fly2 6.4s ease-in-out infinite;transform-origin:50% 50%;filter:drop-shadow(5px 6px 0 rgba(26,23,20,.28))}
@keyframes ab-fly2{0%,100%{translate:-120% 120%;rotate:-8deg}50%{translate:6% -10%;rotate:6deg}}

/* ─── COLOPHON ─────────────────────────────────────────────────────── */
.ab-colo{max-width:var(--max);margin:0 auto;padding:30px var(--gut) 46px;font-family:var(--f-label);font-size:.72rem;letter-spacing:.06em;line-height:1.7;color:var(--soft)}
.ab-colo b{color:var(--ink);letter-spacing:.14em;text-transform:uppercase;margin-right:8px}


/* ─── THE PERSON (from the CV) ─────────────────────────────────────── */
.ab-person{max-width:var(--max);margin:0 auto;padding:clamp(60px,8vw,110px) var(--gut) clamp(30px,4vw,60px);display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(34px,5vw,80px);align-items:center}
.ab-portrait{position:relative;margin:0;padding:30px 38px 40px 16px}
.ab-pframe{position:relative;border:3px solid var(--ink);background:var(--teal2);box-shadow:-13px 13px 0 var(--sun);transform:rotate(calc(-1.8deg + var(--px,0)*1.6deg)) translate(calc(var(--px,0)*6px),calc(var(--py,0)*6px));transition:transform .45s var(--ease);overflow:hidden;aspect-ratio:768/1019}
.ab-pframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ab-portrait figcaption{margin-top:34px;font-family:var(--f-label);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);display:flex;gap:10px;align-items:baseline}
.ab-portrait figcaption b{font-family:var(--f-slab);font-weight:400;font-size:1.05rem;letter-spacing:0;color:var(--verm-t)}
.pp{position:absolute;display:block;height:auto;pointer-events:none;filter:drop-shadow(4px 5px 0 rgba(26,23,20,.28));margin-left:calc(var(--px,0)*-22px);margin-top:calc(var(--py,0)*-14px);transition:margin .5s var(--ease)}
.pp1{left:-3%;bottom:15%;width:22%;transform-origin:50% 70%;animation:ab-cam 7s ease-in-out infinite}
.pp2{right:-2%;top:7%;width:25%;transform-origin:8% 40%;animation:ab-clap 4.2s ease-in-out infinite}
.pp3{right:-1%;bottom:15%;width:19%;transform-origin:50% 100%;animation:ab-apple 5.4s ease-in-out infinite}
.pp4{left:-1%;top:-1%;width:15%;transform-origin:50% 100%;animation:ab-cup 6.6s ease-in-out infinite}
@keyframes ab-cam{0%,100%{rotate:-4deg}50%{rotate:4deg}}
@keyframes ab-clap{0%,60%,100%{rotate:-6deg;translate:0 0}68%{rotate:-12deg;translate:0 -2%}76%{rotate:-2deg;translate:0 1%}}
@keyframes ab-apple{0%,100%{translate:0 0;rotate:-3deg}50%{translate:0 -5%;rotate:3deg}}
@keyframes ab-cup{0%,100%{rotate:5deg;translate:0 0}50%{rotate:-4deg;translate:0 -4%}}
.ab-pcopy{min-width:0}
.ab-pcopy p{font-size:clamp(1.02rem,1.2vw,1.12rem);line-height:1.75;color:var(--body);margin:0 0 1.1em;max-width:62ch}
.ab-skills,.ab-edu{margin-top:26px}
.ab-skills .lb,.ab-edu .lb{display:block;font-family:var(--f-label);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);margin-bottom:10px}
.ab-skills ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.ab-skills li{font-family:var(--f-label);font-weight:700;font-size:.74rem;letter-spacing:.06em;border:2px solid var(--ink);padding:.3rem .65rem;background:var(--rose);box-shadow:3px 3px 0 var(--ink);transform:rotate(var(--r,0deg))}
.ab-skills li:nth-child(4n+2){background:var(--mint);--r:-1deg}.ab-skills li:nth-child(4n+3){background:var(--butter);--r:.8deg}.ab-skills li:nth-child(4n){background:var(--sky);--r:-.6deg}.ab-skills li:nth-child(4n+1){--r:.6deg}
.ab-edu{display:grid;grid-template-columns:minmax(0,420px);gap:12px 14px}
.ab-edu .lb{grid-column:1/-1;margin-bottom:0}
.ab-edu div:not(.lb){border:3px solid var(--ink);background:var(--knock);padding:12px 14px;box-shadow:5px 5px 0 var(--spot)}
.ab-edu b{display:block;font-family:var(--f-head);font-weight:900;text-transform:uppercase;font-size:1.08rem;line-height:1.1}
.ab-edu span:not(.lb){display:block;margin-top:4px;font-size:.88rem;color:var(--body);line-height:1.4}

/* ─── THE CAREER: a timeline that draws itself ─────────────────────── */
.ab-career{padding:clamp(40px,6vw,80px) 0 clamp(50px,7vw,100px)}
.ab-tl{list-style:none;position:relative;margin:44px 0 0;padding:0}
.ab-tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:5px;margin-left:-2.5px;background:var(--ink);transform-origin:top;border-radius:3px}
.js .ab-tl::before{transform:scaleY(0);transition:transform 2.2s var(--ease)}
.js .ab-tl.in::before{transform:scaleY(1)}
.ab-tli{--c:var(--verm);position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(34px,6vw,90px);align-items:center;padding:62px 0 34px}
.ab-tli:nth-child(6n+2){--c:var(--teal2)}.ab-tli:nth-child(6n+3){--c:#C98F12}.ab-tli:nth-child(6n+4){--c:var(--blue2)}.ab-tli:nth-child(6n+5){--c:var(--verm)}.ab-tli:nth-child(6n){--c:var(--teal2)}
.ab-tli .yr{position:absolute;left:50%;top:10px;transform:translate(-50%,0);z-index:2;background:var(--ink);color:var(--knock);font-family:var(--f-slab);font-size:1.02rem;padding:.38rem .85rem .3rem;border:3px solid var(--paper);box-shadow:4px 4px 0 var(--c);white-space:nowrap}
.ab-tli .pic{margin:0;border:3px solid var(--ink);background:var(--butter);box-shadow:9px 9px 0 var(--c);transform:rotate(var(--r,-1.4deg));transition:transform .4s var(--spring),box-shadow .2s;overflow:hidden}
.ab-tli:nth-child(even) .pic{--r:1.2deg;order:2;box-shadow:-9px 9px 0 var(--c)}
.ab-tli:nth-child(even) .tx{order:1;text-align:right}
.ab-tli .pic img{display:block;width:100%;height:auto}
.ab-tli:hover .pic{transform:rotate(0deg) translateY(-5px)}
.js .ab-tli.rv .pic{scale:.9;opacity:0;transition:scale .8s var(--spring),opacity .6s ease,transform .4s var(--spring)}
.js .ab-tli.rv.in .pic{scale:1;opacity:1}
.ab-tli .tx h3{font-family:var(--f-head);font-weight:900;text-transform:uppercase;font-size:clamp(1.6rem,2.6vw,2.3rem);line-height:1;margin:0 0 .45em;color:var(--ink)}
html[lang="tr"] .ab-tli .tx h3{line-height:1.1}
.ab-tli .tx p{font-size:1.02rem;line-height:1.7;color:var(--body);margin:0;max-width:46ch}
.ab-tli:nth-child(even) .tx p{margin-left:auto}
@media (max-width:940px){.ab-person{grid-template-columns:minmax(0,1fr)}.ab-portrait{max-width:420px;margin:0 auto;width:100%}}
@media (max-width:800px){
  .ab-tl::before{left:20px}
  .ab-tli{grid-template-columns:minmax(0,1fr);padding:56px 0 26px 52px;gap:18px 0}
  .ab-tli .yr{left:20px;top:10px;transform:translate(-50%,0);font-size:.86rem}
  .ab-tli:nth-child(even) .pic{order:0;box-shadow:9px 9px 0 var(--c)}.ab-tli:nth-child(even) .tx{order:0;text-align:left}.ab-tli:nth-child(even) .tx p{margin-left:0}
  .ab-tli .yr{left:20px}
}
@media (max-width:560px){.ab-edu{grid-template-columns:minmax(0,1fr)}.ab-portrait{padding:24px 26px 34px 10px}}
@media (prefers-reduced-motion:reduce){
  .pp{animation:none!important}.js .ab-tl::before{transform:none;transition:none}.js .ab-tli.rv .pic{scale:1;opacity:1;transition:none}
}

/* ─── RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width:1100px){.ab-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.ab-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:940px){
  .ab-hero{grid-template-columns:minmax(0,1fr)}.ab-stage{max-width:620px;margin:0 auto;width:100%}
  .ab-story{grid-template-columns:minmax(0,1fr)}.ab-sheet{position:relative;top:0;max-width:520px;transform:rotate(.5deg)}
  .ab-ships-in{grid-template-columns:minmax(0,1fr)}.ab-pressfig{max-width:560px}
  .ab-cat-grid{grid-template-columns:1fr 1fr}
  .ab-hello-in{grid-template-columns:minmax(0,1fr)}.ab-plane{max-width:240px;justify-self:start}
}
@media (max-width:640px){
  .ab-cards{grid-template-columns:minmax(0,1fr)}.ab-cat-grid{grid-template-columns:1fr;max-width:380px;margin-inline:auto}
  .ab-tiles{grid-template-columns:minmax(0,1fr)}
  .ab-sticker.s1{width:92px;height:92px;font-size:1.1rem;right:2px}.ab-sticker.s2{display:none}
  .ab-frame{box-shadow:7px 7px 0 var(--verm)}
  .ab-pressfig .ab-frame{box-shadow:-7px 7px 0 var(--sun)}
  .ab-sheet dl>div{grid-template-columns:84px minmax(0,1fr)}
}
@media (max-width:640px){.ab-cityst{--h:460px}.ab-cityst .cap{position:relative;left:auto;top:auto;padding:16px var(--gut) 0;max-width:none}.ab-city .cap h2{font-size:2rem}}
@media (max-width:420px){.ab-grid4{grid-template-columns:minmax(0,1fr)}.ab-stat{--r:0deg!important}}
@media (prefers-reduced-motion:reduce){
  .ab-bar{animation:none;clip-path:none}
  .ab-sticker,.ab-roll.go,.ab-ill *,.ab-city *,.ab-plane *{animation:none!important}
  .c-track{translate:210% 0}.c-gull.g1{left:34%}.c-gull.g2{left:58%}.c-gull.g3{left:76%}.c-cloud.k1{left:18%}.c-cloud.k2{left:56%}.c-cloud.k3{left:78%}
  .ab-plane .pl{translate:6% -10%}
  .ab-checks .ck{stroke-dashoffset:0;transition:none}
  .ab-ticker{transform:none}
}
@media print{.ab-ticker,.ab-city,.ab-plane{display:none}.ab-stats,.ab-ships,.ab-hello{clip-path:none}}

@media (max-width:360px){.ab-bar{white-space:normal}}