:root {
  --pink:#f5007f;
  --hero-bg:#161616;
  --paper:#fffdf5;
  --panel-h:58px;
  --header-h:58px;
  --max-site:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#090909}
body{margin:0;min-width:320px;background:#090909;color:#fff;font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
a,button{-webkit-tap-highlight-color:transparent}

/* fixed navigation */
.topbar{position:fixed;z-index:10000;top:0;left:0;right:0;height:var(--panel-h);padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(8,8,8,.86);border-bottom:1px solid rgba(255,255,255,.10);backdrop-filter:blur(15px) saturate(125%);-webkit-backdrop-filter:blur(15px) saturate(125%);transform:translateY(-100%);opacity:0;transition:transform .72s cubic-bezier(.22,.8,.2,1),opacity .48s ease}
body.ready .topbar{transform:translateY(0);opacity:1}
.main-nav{display:flex;align-items:center;gap:17px;min-width:0;white-space:nowrap}
.nav-link{appearance:none;border:0;background:none;padding:7px 0;color:rgba(255,255,255,.58);font:700 10px/1 Arial,Helvetica,sans-serif;letter-spacing:.07em;text-transform:uppercase;transition:color .2s ease;position:relative;cursor:pointer}
.nav-link::after{content:"";position:absolute;left:0;right:100%;bottom:1px;height:1px;background:var(--pink);transition:right .23s ease}
.nav-link:hover,.nav-link.active{color:#fff}.nav-link:hover::after,.nav-link.active::after{right:0}
.nav-future{color:rgba(255,255,255,.34)}
.social-links{display:flex;align-items:center;gap:3px;flex:none}
.icon-link{position:relative;width:31px;height:31px;display:grid;place-items:center;border-radius:50%;color:rgba(255,255,255,.66);transition:color .2s ease,background .2s ease}
.icon-link:hover{color:#fff;background:rgba(245,0,127,.12)}
.icon-link svg{width:15px;height:15px;fill:currentColor}
.icon-link::after{content:attr(data-tip);position:absolute;top:calc(100% + 9px);right:0;padding:6px 8px;border-radius:4px;background:#111;border:1px solid rgba(255,255,255,.12);color:#fff;font-size:10px;line-height:1;letter-spacing:.04em;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.icon-link:hover::after{opacity:1;transform:translateY(0)}

/* exact pages */
.site-pages{width:min(100%,var(--max-site));margin:0 auto;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.025)}
.pdf-section{position:relative;width:100%;margin:0;line-height:0;overflow:hidden;background:#000;isolation:isolate}
.page1{aspect-ratio:1440/900;background:var(--hero-bg)}
.page2{aspect-ratio:1440/1869.33;background:var(--paper)}
.page3{aspect-ratio:1440/3263.66}.page4{aspect-ratio:1440/1623.45}
.pdf-frame,.page-art{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:transparent;z-index:1}.pdf-frame{pointer-events:none}
.page-art{object-fit:fill}
.scroll-marker{position:absolute;left:0;width:1px;height:1px;pointer-events:none;scroll-margin-top:calc(var(--header-h, var(--panel-h)) + 8px);z-index:60}
.marker-about{top:0}.marker-logos{top:39.5%}.marker-aka{top:0}.marker-poly{top:50.85%}
.anim-zone{position:absolute;left:0;width:100%;pointer-events:none;z-index:2;visibility:hidden}.anim-trigger{position:absolute;left:0;width:1px;height:1px;pointer-events:none;visibility:hidden}.about-trigger{top:7.5%}.logos-trigger{top:52.4%}.aka-trigger{top:7%}.poly-trigger{top:58%}.pera-trigger{top:14%}
.about-zone{top:2%;height:29%}.logos-zone{top:38%;height:58%}.aka-zone{top:0;height:50.85%}.poly-zone{top:50.85%;height:49.15%}.pera-zone{top:0;height:100%}

/* Hero: true vector line-frame construction from the supplied Illustrator artwork. */
.hero-vector{position:absolute;inset:0;z-index:3;pointer-events:none;line-height:0}
.hero-svg{display:block;width:100%;height:100%}
.hero-vector-base{opacity:0;z-index:4;will-change:opacity}
.hero-vector-line{z-index:5;opacity:0;will-change:opacity}
.hero-line-path{fill:none;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;will-change:stroke-dashoffset,opacity}
.page1.hero-live .hero-vector-line{opacity:1;animation:heroLineLayerFade .65s ease 2.35s forwards}
.page1.hero-live .hero-line-path{animation:heroPathDraw 1.05s cubic-bezier(.42,0,.18,1) var(--draw-delay) forwards}
.page1.hero-live .hero-line-path.pink{animation-duration:1.28s}
.page1.hero-live .hero-vector-base{animation:heroBaseFill .95s cubic-bezier(.22,.7,.18,1) 1.55s forwards}
@keyframes heroPathDraw{0%{stroke-dashoffset:1;opacity:0}8%{opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@keyframes heroBaseFill{0%{opacity:0}100%{opacity:1}}
@keyframes heroLineLayerFade{0%{opacity:1}100%{opacity:0}}
.hero-spotlight{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;background:radial-gradient(circle 240px at var(--spot-x,50%) var(--spot-y,50%),rgba(245,0,127,.045),rgba(255,255,255,.008) 36%,transparent 72%);transition:opacity .65s ease}
.page1.hero-live .hero-spotlight{opacity:1}

/* HAKKIMDA: each original PDF line is uncovered left-to-right, one after another. */
.page2-motion{position:absolute;inset:0;z-index:25;pointer-events:none}
.about-line{position:absolute;left:4.7%;right:4.5%;display:block;background:var(--paper);transform:scaleX(1);transform-origin:right center;transition:transform 1.22s cubic-bezier(.68,0,.18,1);will-change:transform}
.heading-line{top:6.95%;height:1.75%}
.l1{top:10.25%;height:1.18%}.l2{top:12.90%;height:1.18%}.l3{top:14.23%;height:1.18%}.l4{top:15.57%;height:1.18%}
.l5{top:18.22%;height:1.18%}.l6{top:19.55%;height:1.18%}.l7{top:22.22%;height:1.18%}.l8{top:23.55%;height:1.18%}
.l9{top:26.23%;height:1.18%}.l10{top:27.55%;height:1.18%}.l11{top:28.82%;height:.3%;display:none}
.about-line:nth-child(1){transition-delay:.04s}.about-line:nth-child(2){transition-delay:.20s}.about-line:nth-child(3){transition-delay:.36s}.about-line:nth-child(4){transition-delay:.52s}.about-line:nth-child(5){transition-delay:.68s}.about-line:nth-child(6){transition-delay:.84s}.about-line:nth-child(7){transition-delay:1.00s}.about-line:nth-child(8){transition-delay:1.16s}.about-line:nth-child(9){transition-delay:1.32s}.about-line:nth-child(10){transition-delay:1.48s}.about-line:nth-child(11){transition-delay:1.64s}.about-line:nth-child(12){transition-delay:1.80s}
.page2.about-live .about-line{transform:scaleX(0)}

/* Selected Work title then tiles appear in a deliberately mixed opacity sequence. */
.selected-heading-cover{position:absolute;left:54%;top:40.3%;width:40.5%;height:10.8%;background:var(--paper);transform:scaleX(1);transform-origin:right center;transition:transform 1.38s cubic-bezier(.68,0,.18,1)}
.page2.logos-live .selected-heading-cover{transform:scaleX(0)}
.logo-covers{position:absolute;inset:0}
.tile-cover{position:absolute;display:block;background:var(--paper);opacity:1;transition:opacity 1.92s cubic-bezier(.16,.55,.2,1);will-change:opacity;box-shadow:0 0 0 clamp(2px,.20vw,4px) var(--paper)}
/* exact grid bounds measured from the 1440×1870 source render */
.c1{left:9.236111%;width:15.902778%}.c2{left:25.833333%;width:15.763889%}.c3{left:42.291667%;width:15.833333%}.c4{left:58.819444%;width:15.833333%}.c5{left:75.347222%;width:15.833333%}
.r1{top:54.278075%;height:12.192513%}.r2{top:67.005348%;height:12.192513%}.r3{top:79.732620%;height:12.192513%}
.page2.logos-live .tile-cover{opacity:0}

/* Hotspots use the very same measured bounds, so the pink hover sits exactly on the tile. */
.hotspots{position:absolute;inset:0;z-index:50;pointer-events:none;opacity:0;transition:opacity .18s ease}
.page2.logos-ready .hotspots{opacity:1}
.logo-hotspot{position:absolute;display:block;pointer-events:auto;border-radius:0;background:transparent;transition:background .28s ease;outline:none}
.logo-hotspot:hover{background:rgba(245,0,127,.13)}
.logo-hotspot:focus-visible{background:rgba(245,0,127,.13);outline:1px solid rgba(245,0,127,.72);outline-offset:-1px}
.logo-hotspot:active{background:rgba(245,0,127,.18)}

/* Page 3 is rebuilt from the exact Illustrator layers supplied by the user. */
.page3-stage{position:absolute;inset:0;z-index:1;overflow:hidden;background:linear-gradient(to bottom,#000 0 50.856793%,rgb(249,250,245) 50.856793% 100%);line-height:0}
.p3-layer{position:absolute;display:block;height:auto;max-width:none;pointer-events:none;will-change:opacity,transform,clip-path;backface-visibility:hidden}
.p3-title{left:9.166667%;top:4.115667%;width:29.513889%;height:1.101591%}
.p3-aka-header{left:9.027778%;top:7.420441%;width:82.326389%;height:10.373317%}
.p3-palette-1{left:9.131944%;top:18.344553%;width:20.069444%;height:10.587515%}
.p3-palette-2{left:29.166667%;top:18.344553%;width:20.729167%;height:10.587515%}
.p3-palette-3{left:49.895833%;top:18.344553%;width:20.729167%;height:10.587515%}
.p3-palette-4{left:70.590278%;top:18.344553%;width:20.763889%;height:10.587515%}
.p3-aka-instagram{left:9.027778%;top:29.651163%;width:82.326389%;height:17.365361%}
.p3-circle-1{left:59.201389%;top:45.012240%;width:21.076389%;height:9.302326%}
.p3-circle-2{left:75.451389%;top:43.375153%;width:21.111111%;height:9.302326%}
.p3-poly-hero{left:9.097222%;top:54.085067%;width:40.798611%;height:23.852509%}
.p3-poly-menu{left:51.458333%;top:55.982252%;width:39.826389%;height:17.870257%}
.p3-poly-cards{left:39.722222%;top:68.849449%;width:24.409722%;height:11.505508%}
.p3-poly-social{left:9.027778%;top:81.701346%;width:82.361111%;height:16.064871%}

/* AKA sequence: title → header → four palette cards → Instagram panel → two circles. */
.p3-title{opacity:0;transform:translateY(12px);transition:opacity .72s ease,transform .72s cubic-bezier(.2,.7,.2,1)}
.p3-aka-header{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(10px);transition:clip-path 1.22s cubic-bezier(.65,0,.18,1),opacity .72s ease,transform 1.08s cubic-bezier(.2,.7,.2,1)}
.p3-palette{opacity:0;transform:translateY(20px) scale(.985);transition:opacity .86s ease,transform .96s cubic-bezier(.2,.7,.2,1)}
.p3-aka-instagram{opacity:0;transform:translateY(28px);transition:opacity 1.02s ease,transform 1.14s cubic-bezier(.2,.7,.2,1)}
.p3-circle{opacity:0;transform:scale(.08);transform-origin:center center;transition:opacity .76s ease,transform 1.02s cubic-bezier(.18,.8,.18,1)}
.page3.aka-live .p3-title{opacity:1;transform:none;transition-delay:.03s}
.page3.aka-live .p3-aka-header{opacity:1;clip-path:inset(0 0 0 0);transform:none;transition-delay:.14s}
.page3.aka-live .p3-palette-1{opacity:1;transform:none;transition-delay:.34s}
.page3.aka-live .p3-palette-2{opacity:1;transform:none;transition-delay:.48s}
.page3.aka-live .p3-palette-3{opacity:1;transform:none;transition-delay:.62s}
.page3.aka-live .p3-palette-4{opacity:1;transform:none;transition-delay:.76s}
.page3.aka-live .p3-aka-instagram{opacity:1;transform:none;transition-delay:1.02s}
.page3.aka-live .p3-circle-1{opacity:1;transform:scale(1);transition-delay:1.56s}
.page3.aka-live .p3-circle-2{opacity:1;transform:scale(1);transition-delay:1.78s}

/* Poly sequence: hero visual → menu → central cards → social panel. */
.p3-poly-hero{opacity:0;transform:translateY(30px);transition:opacity 1.06s ease,transform 1.18s cubic-bezier(.2,.7,.2,1)}
.p3-poly-menu{opacity:0;transform:translateX(30px);transition:opacity 1.04s ease,transform 1.16s cubic-bezier(.2,.7,.2,1)}
.p3-poly-cards{opacity:0;transform:translateY(22px) scale(.94);transform-origin:center center;transition:opacity .92s ease,transform 1.08s cubic-bezier(.2,.7,.2,1)}
.p3-poly-social{opacity:0;transform:translateY(32px);transition:opacity 1.12s ease,transform 1.22s cubic-bezier(.2,.7,.2,1)}
.page3.poly-live .p3-poly-hero{opacity:1;transform:none;transition-delay:.06s}
.page3.poly-live .p3-poly-menu{opacity:1;transform:none;transition-delay:.30s}
.page3.poly-live .p3-poly-cards{opacity:1;transform:none;transition-delay:.54s}
.page3.poly-live .p3-poly-social{opacity:1;transform:none;transition-delay:.86s}


.p3-clickmap{position:absolute;z-index:30;opacity:0;pointer-events:none;will-change:opacity,transform}
.p3-clickmap-aka{left:9.027778%;top:29.651163%;width:82.326389%;height:17.365361%;transform:translateY(28px);transition:opacity .42s ease,transform 1.14s cubic-bezier(.2,.7,.2,1)}
.p3-clickmap-poly{left:9.027778%;top:81.701346%;width:82.361111%;height:16.064871%;transform:translateY(32px);transition:opacity .42s ease,transform 1.22s cubic-bezier(.2,.7,.2,1)}
.page3.aka-live .p3-clickmap-aka{opacity:1;pointer-events:auto;transform:none;transition-delay:1.02s}
.page3.poly-live .p3-clickmap-poly{opacity:1;pointer-events:auto;transform:none;transition-delay:.86s}
.p3-hotspot{position:absolute;display:block;background:transparent;border:0;outline:none;padding:0;border-radius:0;transition:background .18s ease,box-shadow .18s ease;pointer-events:auto}
.p3-hotspot:hover,.p3-hotspot:focus-visible{background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.p3-hotspot:active{background:rgba(255,255,255,.07)}
/* Measured directly from the rendered AKA Instagram composite (2371×1135). */
.hs-aka-profile{left:3.838043%;top:6.696035%;width:19.105863%;height:85.903084%}
.hs-aka-story-1{left:27.035006%;top:9.867841%;width:22.058203%;height:81.850220%}
.hs-aka-story-2{left:50.147617%;top:9.867841%;width:22.058203%;height:81.850220%}
.hs-aka-story-3{left:74.019401%;top:9.867841%;width:22.058203%;height:81.850220%}
/* Poly story bounds are measured from the composite; profile is limited to the visible Instagram panel. */
.hs-poly-profile{left:4.70%;top:2.25%;width:26.15%;height:93.10%}
.hs-poly-story-1{left:35.328836%;top:6.095238%;width:19.645868%;height:78.571429%}
.hs-poly-story-2{left:55.564924%;top:6.095238%;width:19.688027%;height:78.476190%}
.hs-poly-story-3{left:75.801012%;top:6.095238%;width:19.688027%;height:78.476190%}

.image-lightbox{position:fixed;inset:0;z-index:11000;display:grid;place-items:center;background:rgba(10,10,12,.68);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .28s ease}
.image-lightbox.is-open{opacity:1;pointer-events:auto}
.lightbox-backdrop{position:absolute;inset:0}
.lightbox-dialog{position:relative;z-index:1;max-width:min(92vw,1240px);max-height:88vh;display:grid;place-items:center;transform:scale(.965) translateY(10px);opacity:0;transition:transform .34s cubic-bezier(.18,.8,.18,1),opacity .28s ease}
.image-lightbox.is-open .lightbox-dialog{transform:none;opacity:1}
.lightbox-image{display:block;max-width:min(92vw,1240px);max-height:88vh;width:auto;height:auto;border-radius:12px;box-shadow:0 20px 70px rgba(0,0,0,.35)}
.lightbox-close{position:fixed;top:18px;right:22px;z-index:2;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#fff;font-size:28px;line-height:1;display:grid;place-items:center;transition:background .24s ease,border-color .24s ease,transform .24s ease}
.lightbox-close:hover,.lightbox-close:focus-visible{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.28);transform:scale(1.04)}
body.lightbox-open{overflow:hidden}

/* Pera Palace page keeps the existing replay curtain for now. */
.page4-slices{position:absolute;inset:0;z-index:25;display:grid;grid-template-rows:repeat(5,1fr);pointer-events:none}
.page4-slices i{display:block;transform:scaleX(1);transition:transform 1.62s cubic-bezier(.68,0,.18,1);will-change:transform;background:#000}
.page4-slices i:nth-child(odd){transform-origin:left center}.page4-slices i:nth-child(even){transform-origin:right center}
.page4-slices i:nth-child(1){transition-delay:.08s}.page4-slices i:nth-child(2){transition-delay:.34s}.page4-slices i:nth-child(3){transition-delay:.60s}.page4-slices i:nth-child(4){transition-delay:.86s}.page4-slices i:nth-child(5){transition-delay:1.12s}
.page4.pera-live .page4-slices i{transform:scaleX(0)}

/* Large trailing circle; never shows text. */
.cursor-badge{position:fixed;z-index:10001;left:0;top:0;width:173px;height:173px;border-radius:50%;border:0;background:radial-gradient(circle,transparent 0 56%,rgba(92,0,44,.50) 58%,rgba(196,24,108,.34) 64%,rgba(232,67,144,.20) 72%,rgba(245,0,127,.09) 81%,rgba(245,0,127,.035) 89%,transparent 100%);filter:drop-shadow(0 0 10px rgba(245,0,127,.07));pointer-events:none;transform:translate3d(-200px,-200px,0) translate(-50%,-50%);mix-blend-mode:normal;opacity:0;will-change:transform;transition:width .24s ease,height .24s ease,opacity .14s ease,filter .24s ease}.cursor-badge.is-visible{opacity:1}
.cursor-dot{position:fixed;z-index:10002;left:0;top:0;width:5px;height:5px;border-radius:50%;background:#fff;pointer-events:none;transform:translate3d(-200px,-200px,0) translate(-50%,-50%);mix-blend-mode:difference;opacity:0;will-change:transform;transition:opacity .12s ease}.cursor-dot.is-visible{opacity:1}
.future-toast{position:fixed;z-index:10003;left:50%;bottom:24px;transform:translate(-50%,18px);padding:10px 14px;background:rgba(12,12,12,.94);border:1px solid rgba(245,0,127,.6);border-radius:5px;color:#fff;font-size:12px;letter-spacing:.02em;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.future-toast.show{opacity:1;transform:translate(-50%,0)}

@media (hover:hover) and (pointer:fine){body,a,button{cursor:none!important}}
@media (max-width:1040px){.topbar{padding-inline:12px}.main-nav{gap:12px;overflow-x:auto;scrollbar-width:none}.main-nav::-webkit-scrollbar{display:none}.nav-link{font-size:9px}.icon-link{width:29px;height:29px}}
@media (max-width:760px){:root{--panel-h:54px}.topbar{gap:8px}.main-nav{padding-right:4px}.nav-link{font-size:8.5px;letter-spacing:.05em}.social-links{gap:1px}.icon-link{width:27px;height:27px}.icon-link svg{width:14px;height:14px}.social-links .icon-link:nth-child(1),.social-links .icon-link:nth-child(2){display:none}.cursor-badge,.cursor-dot{display:none!important}}
@media (max-width:520px){.social-links .icon-link:nth-child(5){display:none}}
@media (hover:none),(pointer:coarse){.cursor-badge,.cursor-dot{display:none!important}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.topbar{transform:none;opacity:1}.hero-vector-line,.page2-motion,.page4-slices,.hero-spotlight{display:none!important}.hero-vector-base{opacity:1!important}.hotspots{opacity:1!important}*{transition-duration:.01ms!important;animation:none!important}}

@media (prefers-reduced-motion:reduce){.p3-layer{opacity:1!important;transform:none!important;clip-path:none!important}}


/* V14 — MOTION / VIDEO
   Integrated into the original V13 system: same max-width, Arial typography,
   hard-edged geometry, cream / black / #f5007f palette and replayable reveals. */
.motion-section{
  position:relative;z-index:2;width:100%;overflow:hidden;
  background:var(--hero-bg);color:rgb(234,231,216);line-height:1.15;
  padding:clamp(88px,8vw,128px) 9.027778% clamp(72px,7vw,110px);
  scroll-margin-top:calc(var(--header-h, var(--panel-h)) + 8px);
}
.motion-intro{margin-bottom:clamp(76px,8vw,128px)}
.motion-intro-line{height:1px;background:rgba(234,231,216,.32);transform:scaleX(0);transform-origin:left center;transition:transform 1.15s cubic-bezier(.65,0,.18,1)}
.motion-intro-grid{display:grid;grid-template-columns:.55fr 1.65fr .8fr;gap:clamp(24px,3vw,56px);align-items:end;padding-top:24px}
.motion-index,.motion-kicker,.motion-brand-no,.motion-brand-tag,.motion-card-meta,.motion-end{
  font-family:Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.08em
}
.motion-index{font-size:10px;font-weight:700;color:var(--pink);opacity:0;transform:translateY(12px);transition:opacity .6s ease .1s,transform .7s cubic-bezier(.2,.7,.2,1) .1s}
.motion-kicker{margin:0 0 17px;font-size:10px;line-height:1.35;font-weight:700;color:rgba(234,231,216,.58);opacity:0;transform:translateY(12px);transition:opacity .6s ease .18s,transform .7s cubic-bezier(.2,.7,.2,1) .18s}
.motion-intro h2{margin:0;font:800 clamp(50px,7.2vw,104px)/.83 Arial,Helvetica,sans-serif;letter-spacing:-.065em;text-transform:uppercase;opacity:0;transform:translateY(25px);transition:opacity .8s ease .26s,transform .95s cubic-bezier(.2,.7,.2,1) .26s}
.motion-intro h2 span{color:var(--pink);font-weight:400}
.motion-lead{margin:0;max-width:330px;font:400 13px/1.55 Arial,Helvetica,sans-serif;color:rgba(234,231,216,.60);opacity:0;transform:translateY(15px);transition:opacity .7s ease .42s,transform .8s cubic-bezier(.2,.7,.2,1) .42s}
.motion-intro.is-live .motion-intro-line{transform:scaleX(1)}
.motion-intro.is-live .motion-index,.motion-intro.is-live .motion-kicker,.motion-intro.is-live h2,.motion-intro.is-live .motion-lead{opacity:1;transform:none}

.motion-brand{margin-bottom:clamp(88px,10vw,152px)}
.motion-brand-head{display:grid;grid-template-columns:70px 1fr auto;align-items:end;gap:18px;border-bottom:1px solid rgba(234,231,216,.20);padding-bottom:14px;margin-bottom:22px;opacity:0;transform:translateY(18px);transition:opacity .72s ease,transform .82s cubic-bezier(.2,.7,.2,1)}
.motion-brand-no{font-size:10px;font-weight:700;color:var(--pink);padding-bottom:5px}
.motion-brand h3{margin:0;color:rgb(234,231,216);font:700 clamp(25px,3.2vw,46px)/.93 Arial,Helvetica,sans-serif;letter-spacing:-.045em;text-transform:uppercase}
.motion-brand-tag{font-size:9px;line-height:1.2;color:rgba(234,231,216,.50);padding-bottom:5px;text-align:right}
.motion-brand.is-live .motion-brand-head{opacity:1;transform:none}

.motion-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.3vw,19px)}
.motion-grid-five{grid-template-columns:repeat(5,minmax(0,1fr))}
.motion-card{position:relative;aspect-ratio:9/16;overflow:hidden;background:#0d0d0d;border:1px solid rgba(234,231,216,.10);opacity:0;transform:translateY(28px);transition:opacity .82s ease,transform .96s cubic-bezier(.2,.7,.2,1),border-color .24s ease;transition-delay:calc(.11s + var(--card-order) * .11s)}
.motion-brand.is-live .motion-card{opacity:1;transform:none}
.motion-card:hover{border-color:rgba(245,0,127,.66)}
.motion-card-fallback{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(145deg,#141414,#090909);color:rgba(234,231,216,.045);font:800 clamp(52px,8vw,118px)/1 Arial,Helvetica,sans-serif;letter-spacing:-.08em}
.motion-embed{position:absolute;z-index:1;left:-1px;top:-1px;width:calc(100% + 2px);height:calc(100% + 2px);border:0;background:#111;pointer-events:none}
.motion-card-shade{position:absolute;z-index:2;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0,rgba(0,0,0,.12) 28%,transparent 48%);pointer-events:none;transition:background .28s ease}
.motion-card:hover .motion-card-shade{background:linear-gradient(to top,rgba(0,0,0,.78) 0,rgba(245,0,127,.11) 58%,rgba(245,0,127,.16) 100%)}
.motion-card-meta{position:absolute;z-index:3;left:12px;right:12px;bottom:12px;display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:9px;font-weight:700;line-height:1;pointer-events:none}
.motion-card-meta span:last-child{font-size:17px;line-height:1;transform:translate(0,0);transition:transform .25s ease,color .25s ease}
.motion-card:hover .motion-card-meta span:last-child{transform:translate(3px,-3px);color:var(--pink)}
.motion-card-link{position:absolute;z-index:4;inset:0;display:block;outline:none}
.motion-card-link:focus-visible{box-shadow:inset 0 0 0 2px var(--pink)}
.motion-end{display:flex;justify-content:space-between;gap:20px;border-top:1px solid rgba(234,231,216,.24);padding-top:16px;color:rgba(234,231,216,.45);font-size:9px;font-weight:700}
.motion-end span:first-child{color:var(--pink)}

@media (max-width:980px){
  .motion-intro-grid{grid-template-columns:.45fr 1.55fr}.motion-lead{grid-column:2;margin-top:8px}
  .motion-grid-five{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .motion-section{padding-left:6.5%;padding-right:6.5%}
  .motion-intro-grid{grid-template-columns:1fr}.motion-lead{grid-column:1}.motion-index{margin-bottom:8px}
  .motion-brand-head{grid-template-columns:42px 1fr}.motion-brand-tag{display:none}
  .motion-grid,.motion-grid-five{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .motion-card-meta{left:9px;right:9px;bottom:9px}
}
@media (max-width:430px){
  .motion-section{padding-left:4.8%;padding-right:4.8%}
  .motion-brand h3{font-size:23px}.motion-brand-head{grid-template-columns:34px 1fr;gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .motion-intro-line{transform:none!important}.motion-intro .motion-index,.motion-intro .motion-kicker,.motion-intro h2,.motion-intro .motion-lead,.motion-brand-head,.motion-card{opacity:1!important;transform:none!important}
}


/* V15 — SOCIAL MEDIA
   PAGE6-1 → PAGE6-5 are rendered directly from the supplied PDFs and kept in
   the original order. No margins between pages, so source background tones join
   without artificial seams. Hotspots follow the image regions and use the same lightbox. */
.social-media-section{position:relative;width:100%;margin:0;padding:0;background:#161616;line-height:0;overflow:hidden;isolation:isolate}
.social-page{position:relative;width:100%;margin:0;padding:0;background:var(--social-bg,#161616);overflow:hidden;line-height:0}
.social-page-art{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill;opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(10px);transition:clip-path 1.05s cubic-bezier(.65,0,.18,1),opacity .56s ease,transform .82s cubic-bezier(.2,.7,.2,1);will-change:clip-path,opacity,transform}
.social-page.is-live .social-page-art{opacity:1;clip-path:inset(0 0 0 0);transform:none}
.social-hotspots{position:absolute;inset:0;z-index:3;opacity:0;pointer-events:none;transform:translateY(10px);transition:opacity .24s ease,transform .82s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
.social-page.is-live .social-hotspots{opacity:1;pointer-events:auto;transform:none}
.social-hotspot{position:absolute;display:block;padding:0;border:0;border-radius:0;background:transparent;outline:none;pointer-events:auto;transition:background .18s ease,box-shadow .18s ease}
.social-hotspot:hover,.social-hotspot:focus-visible{background:rgba(245,0,127,.035);box-shadow:inset 0 0 0 1px rgba(245,0,127,.26)}
.social-hotspot:active{background:rgba(245,0,127,.075)}
@media (prefers-reduced-motion:reduce){.social-page-art{opacity:1!important;clip-path:none!important;transform:none!important}.social-hotspots{opacity:1!important;pointer-events:auto!important}}

/* V18 — TR / EN desktop language system */
.topbar-actions{display:flex;align-items:center;gap:11px;flex:none}
.lang-switch{display:flex;align-items:center;gap:5px;flex:none;font:700 9px/1 Arial,Helvetica,sans-serif;letter-spacing:.08em;color:rgba(255,255,255,.34)}
.lang-btn{appearance:none;border:0;background:transparent;color:rgba(255,255,255,.42);font:inherit;letter-spacing:inherit;padding:7px 1px;cursor:pointer;position:relative;transition:color .18s ease}
.lang-btn::after{content:"";position:absolute;left:1px;right:100%;bottom:1px;height:1px;background:var(--pink);transition:right .2s ease}
.lang-btn:hover,.lang-btn.active{color:#fff}
.lang-btn.active::after{right:1px}
.lang-btn:focus-visible{outline:1px solid rgba(245,0,127,.75);outline-offset:3px}
.lang-sep{color:rgba(255,255,255,.20);transform:translateY(-.5px)}

/* V19 — About typography fix. */
/* The original PDF remains the exact artwork underneath. This cream panel only
   replaces the biography block so the same layout can switch languages live. */
.about-copy-panel{position:absolute;z-index:27;left:0;top:0;width:100%;height:33.15%;background:var(--paper);color:#151515;overflow:hidden}
.about-copy-inner{position:absolute;left:7.65%;right:7.45%;top:20.95%}
.about-copy-heading{margin:0 0 27px;font:800 31px/1 Arial,Helvetica,sans-serif;letter-spacing:-.022em;color:#101010}
.about-copy-block{margin:0 0 23px;max-width:100%;font:400 17px/1.43 Arial,Helvetica,sans-serif;letter-spacing:-.006em;color:#323232}
.about-copy-block strong{font-weight:700;color:#171717}
.about-copy-heading,.about-copy-block{opacity:0;clip-path:inset(0 100% 0 0);transform:translateY(7px);transition:clip-path .88s cubic-bezier(.65,0,.18,1),opacity .42s ease,transform .64s cubic-bezier(.2,.7,.2,1)}
.about-copy-heading{transition-delay:.04s}.about-copy-block:nth-of-type(1){transition-delay:.20s}.about-copy-block:nth-of-type(2){transition-delay:.38s}.about-copy-block:nth-of-type(3){transition-delay:.56s}.about-copy-block:nth-of-type(4){transition-delay:.74s}.about-copy-block:nth-of-type(5){transition-delay:.92s}
.page2.about-live .about-copy-heading,.page2.about-live .about-copy-block{opacity:1;clip-path:inset(0 0 0 0);transform:none}

/* Preserve the supplied Page 2 artwork exactly in Turkish.
   Only English needs a live text layer, so TR keeps the original PDF typography,
   dimensions, line breaks and reveal masks untouched. */
html[data-lang="tr"] .about-copy-panel{display:none}
html[data-lang="tr"] .about-line-covers{display:block!important}
html[data-lang="en"] .about-copy-panel{display:block}
html[data-lang="en"] .about-line-covers{display:none!important}

/* Scale the English replacement copy with the same 1440px artwork canvas. */
@media (max-width:1440px){
  .about-copy-heading{font-size:2.15278vw;margin-bottom:1.875vw}
  .about-copy-block{font-size:1.18056vw;margin-bottom:1.59722vw}
}

@media (max-width:1040px){.topbar-actions{gap:6px}.lang-switch{font-size:8.5px}}
@media (prefers-reduced-motion:reduce){.about-copy-heading,.about-copy-block{opacity:1!important;clip-path:none!important;transform:none!important}}



/* V21 — MOBILE FIXES
   1) readable About without clipping, 2) Pera Palace as an image instead of an
   iOS PDF iframe, 3) mobile navigation/tap refinements. */
@media (max-width:760px){
  :root{--panel-h:auto;--mobile-about-h:clamp(500px,135vw,610px)}
  .topbar{
    height:auto;min-height:0;padding:calc(env(safe-area-inset-top,0px) + 8px) 12px 8px;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px
  }
  .topbar-actions{order:1;width:100%;justify-content:space-between;gap:10px}
  .main-nav{order:2;width:100%;gap:14px;padding:0 0 2px;margin:0 -2px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .main-nav::-webkit-scrollbar{display:none}
  .nav-link{flex:none;padding:8px 2px 7px;font-size:9px;letter-spacing:.05em}
  .social-links{gap:3px}
  .social-links .icon-link:nth-child(1){display:grid}
  .social-links .icon-link:nth-child(2){display:none}
  .icon-link{width:34px;height:34px}
  .icon-link svg{width:15px;height:15px}
  .icon-link::after{display:none}
  .site-pages{width:100%;box-shadow:none}
  .page1{aspect-ratio:auto;min-height:76svh}

  /* Page 2 becomes a mobile composition: live biography above the cropped
     original Selected Work artwork. The logo grid remains the original artwork. */
  .page2{aspect-ratio:auto;height:calc(var(--mobile-about-h) + 78.55vw);background:var(--paper);overflow:hidden}
  .page2>.page-art{top:calc(var(--mobile-about-h) - 51.27vw);bottom:auto;height:129.814vw;width:100%;clip-path:inset(39.5% 0 0 0);object-fit:fill}
  html[data-lang="tr"] .about-copy-panel,html[data-lang="en"] .about-copy-panel{display:block}
  html[data-lang="tr"] .about-line-covers,html[data-lang="en"] .about-line-covers{display:none!important}
  .about-copy-panel{top:0;height:var(--mobile-about-h);background:var(--paper);overflow:hidden;z-index:31}
  .about-copy-panel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:#000}
  .about-copy-inner{left:6.5%;right:6.5%;top:42px;transform:none}
  .about-copy-heading{font-size:18px;line-height:1;margin:0 0 16px}
  .about-copy-block{font-size:12.5px;line-height:1.42;margin:0 0 12px;letter-spacing:-.004em}
  .about-copy-block:last-child{margin-bottom:0}
  .page2-motion,.page2 .hotspots{inset:auto;left:0;top:calc(var(--mobile-about-h) - 51.27vw);width:100%;height:129.814vw}
  .page2-motion{clip-path:inset(39.5% 0 0 0)}
  .about-zone{top:0;height:var(--mobile-about-h)}
  .logos-zone{top:var(--mobile-about-h);height:78.55vw}
  .about-trigger{top:42px}.logos-trigger{top:calc(var(--mobile-about-h) + 8vw)}
  .marker-about{top:0}.marker-logos{top:var(--mobile-about-h)}

  /* Pera Palace: no embedded PDF on iOS/Safari. */
  .page4-art{object-fit:fill;background:#000}

  .social-hotspot:active,.logo-hotspot:active{background:rgba(245,0,127,.10)}
  .lightbox-image{max-width:94vw;max-height:80svh}
  .lightbox-close{top:calc(env(safe-area-inset-top,0px) + 10px);right:12px;width:42px;height:42px}

  .motion-section{padding-top:72px;padding-bottom:64px;padding-left:5.6%;padding-right:5.6%}
  .motion-intro{margin-bottom:58px}.motion-intro-grid{gap:16px}.motion-intro h2{font-size:42px}
  .motion-lead{max-width:none;font-size:13px}.motion-brand{margin-bottom:72px}
  .motion-grid,.motion-grid-five{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .motion-card{aspect-ratio:9/15.2}.motion-card-meta{font-size:10px}
  .motion-end{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (max-width:520px){
  :root{--mobile-about-h:clamp(500px,142vw,600px)}
  .topbar{padding-inline:10px;padding-bottom:7px;gap:7px}.topbar-actions{gap:8px}.lang-switch{font-size:10px}
  .main-nav{gap:12px}.nav-link{font-size:8.8px}
  .social-links .icon-link:nth-child(1){display:grid}
  .social-links .icon-link:nth-child(2){display:none}
  .icon-link{width:33px;height:33px}.page1{min-height:69svh}
  .about-copy-inner{left:6.5%;right:6.2%;top:36px}
  .about-copy-heading{font-size:17px;margin-bottom:13px}
  .about-copy-block{font-size:12px;line-height:1.39;margin-bottom:10px}
  .motion-section{padding-left:4.6%;padding-right:4.6%}.motion-intro h2{font-size:36px}
  .motion-grid,.motion-grid-five{grid-template-columns:1fr}.motion-card{aspect-ratio:9/14.7}
}
@media (max-width:380px){
  :root{--mobile-about-h:525px}
  .nav-link{font-size:8.4px}.about-copy-heading{font-size:16px}.about-copy-block{font-size:11.4px;line-height:1.36}
}


/* V22 — MOTION / VIDEO compact accordion */
.motion-section-v22 .motion-intro{margin-bottom:clamp(34px,4.5vw,58px)}
.motion-directory{display:flex;flex-direction:column;border-top:1px solid rgba(234,231,216,.14)}
.motion-brand{margin:0;border-bottom:1px solid rgba(234,231,216,.14)}
.motion-brand-trigger{
  width:100%;appearance:none;border:0;background:transparent;color:inherit;padding:18px 0;
  display:grid;grid-template-columns:52px 1fr auto 24px;gap:14px;align-items:center;text-align:left;cursor:pointer
}
.motion-brand-trigger:focus-visible{outline:1px solid rgba(245,0,127,.7);outline-offset:6px}
.motion-brand-no,.motion-brand-count,.motion-brand-arrow{font:700 10px/1 Arial,Helvetica,sans-serif;letter-spacing:.1em;color:rgba(234,231,216,.58)}
.motion-brand-main{display:flex;flex-direction:column;gap:5px;min-width:0}
.motion-brand-name{display:block;color:rgb(234,231,216);font:700 clamp(22px,2.8vw,40px)/.94 Arial,Helvetica,sans-serif;letter-spacing:-.045em;text-transform:uppercase}
.motion-brand-tag{display:block;font:700 9px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.09em;color:rgba(234,231,216,.46);text-transform:uppercase}
.motion-brand-count{font-size:11px;color:var(--pink)}
.motion-brand-arrow{font-size:20px;line-height:1;color:var(--pink);transition:transform .28s ease}
.motion-brand.is-open .motion-brand-arrow{transform:rotate(45deg)}
.motion-brand-trigger,.motion-end{opacity:0;transform:translateY(18px);transition:opacity .72s ease,transform .82s cubic-bezier(.2,.7,.2,1)}
.motion-brand.is-live .motion-brand-trigger,.motion-section-v22 .motion-end{opacity:1;transform:none}
.motion-brand-panel{overflow:hidden;max-height:0;transition:max-height .52s cubic-bezier(.2,.7,.2,1)}
.motion-brand-panel-inner{padding:0 0 22px}
.motion-brand.is-open .motion-brand-panel-inner{padding-top:4px}
.motion-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.motion-grid-five{grid-template-columns:repeat(4,minmax(0,1fr))}
.motion-card{position:relative;aspect-ratio:4/5;overflow:hidden;background:#0f0f0f;border:1px solid rgba(234,231,216,.10);opacity:0;transform:translateY(20px);transition:opacity .62s ease,transform .72s cubic-bezier(.2,.7,.2,1),border-color .24s ease,box-shadow .24s ease;transition-delay:calc(.04s + var(--card-order) * .05s)}
.motion-brand.is-open .motion-card{opacity:1;transform:none}
.motion-card:hover{border-color:rgba(245,0,127,.5);box-shadow:0 0 0 1px rgba(245,0,127,.14) inset}
.motion-card-art{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:14px;background:linear-gradient(160deg,var(--card-a,#171717),var(--card-b,#0d0d0d));z-index:1}
.motion-card--world{--card-a:#151210;--card-b:#0c0a09}
.motion-card--poly{--card-a:#111515;--card-b:#0a0d0d}
.motion-card--papagalos{--card-a:#181212;--card-b:#0f0b0b}
.motion-card--fanzone{--card-a:#111318;--card-b:#090b0f}
.motion-card--eva{--card-a:#101518;--card-b:#090c0d}
.motion-card-kicker{display:block;color:rgba(234,231,216,.52);font:700 8px/1.15 Arial,Helvetica,sans-serif;letter-spacing:.12em;text-transform:uppercase;max-width:80%}
.motion-card-title{display:block;color:rgb(234,231,216);font:700 clamp(18px,1.8vw,26px)/.95 Arial,Helvetica,sans-serif;letter-spacing:-.05em;text-transform:uppercase;max-width:88%}
.motion-card-reel{display:block;color:var(--pink);font:700 10px/1 Arial,Helvetica,sans-serif;letter-spacing:.11em;text-transform:uppercase}
.motion-card-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(0,0,0,.76),rgba(0,0,0,.10) 40%,transparent 70%);pointer-events:none;transition:background .24s ease}
.motion-card:hover .motion-card-shade{background:linear-gradient(to top,rgba(0,0,0,.82),rgba(245,0,127,.08) 50%,rgba(245,0,127,.12) 100%)}
.motion-card-meta{position:absolute;z-index:3;left:14px;right:14px;bottom:13px;display:flex;justify-content:space-between;align-items:center;color:#fff;font:700 9px/1 Arial,Helvetica,sans-serif;letter-spacing:.08em;pointer-events:none}
.motion-card-meta span:last-child{font-size:16px;transition:transform .25s ease,color .25s ease}
.motion-card:hover .motion-card-meta span:last-child{transform:translate(3px,-3px);color:var(--pink)}
.motion-card-link{position:absolute;z-index:4;inset:0;display:block;outline:none}
.motion-card-link:focus-visible{box-shadow:inset 0 0 0 2px var(--pink)}
.motion-end{display:flex;justify-content:space-between;gap:20px;padding-top:22px;margin-top:22px;border-top:1px solid rgba(234,231,216,.14)}
@media (max-width:980px){
  .motion-brand-trigger{grid-template-columns:44px 1fr auto 22px;gap:10px}
  .motion-grid,.motion-grid-five{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .motion-section-v22{padding-top:72px;padding-bottom:62px;padding-left:5.2%;padding-right:5.2%}
  .motion-brand-trigger{grid-template-columns:32px 1fr auto 18px;padding:16px 0 15px}
  .motion-brand-name{font-size:22px}
  .motion-brand-tag{font-size:8px}
  .motion-brand-count{font-size:10px}
  .motion-grid,.motion-grid-five{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .motion-card{aspect-ratio:3/4}
  .motion-card-art{padding:12px}
  .motion-card-title{font-size:18px}
  .motion-card-meta{left:11px;right:11px;bottom:10px;font-size:8px}
}
@media (max-width:520px){
  .motion-grid,.motion-grid-five{grid-template-columns:repeat(2,minmax(0,1fr))}
  .motion-card{aspect-ratio:10/13}
  .motion-card-title{font-size:16px}
  .motion-card-kicker{font-size:7.5px}
  .motion-card-reel{font-size:9px}
}
@media (prefers-reduced-motion:reduce){
  .motion-brand-trigger,.motion-card{opacity:1!important;transform:none!important}
}


/* V23 — semantic SEO/accessibility helpers */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}


/* V24 — CV + SEO profile links */
.cv-chip{height:31px;min-width:31px;padding:0 8px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:rgba(255,255,255,.72);text-decoration:none;font:700 8px/1 Arial,Helvetica,sans-serif;letter-spacing:.08em;transition:color .2s ease,border-color .2s ease,background .2s ease}
.cv-chip:hover{color:#fff;border-color:rgba(245,0,127,.75);background:rgba(245,0,127,.12)}
.portfolio-seo-footer{background:#161616;color:#ebe7d8;border-top:1px solid rgba(235,231,216,.14);padding:30px 5.6% 42px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.portfolio-seo-label{font:700 9px/1 Arial,Helvetica,sans-serif;letter-spacing:.12em;color:rgba(235,231,216,.42)}
.portfolio-seo-links{display:flex;gap:18px;flex-wrap:wrap}.portfolio-seo-links a{color:#ebe7d8;text-decoration:none;font:700 10px/1 Arial,Helvetica,sans-serif;letter-spacing:.08em}.portfolio-seo-links a:hover{color:var(--pink)}
@media(max-width:760px){.cv-chip{height:34px;min-width:34px;font-size:8px}.portfolio-seo-footer{padding:24px 5.2% 34px;align-items:flex-start;flex-direction:column}.portfolio-seo-links{gap:14px}}
@media(max-width:520px){.cv-chip{height:33px;min-width:33px;padding:0 7px}.portfolio-seo-links{flex-direction:column;gap:11px}}