@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400&family=Inter:wght@400;500;600&family=Manrope:wght@400;500;600&display=swap');

:root{--ink:#f4f1e9;--black:#080808;--red:#e7472e;--line:rgba(255,255,255,.28);--safe-top:max(18px,env(safe-area-inset-top));--safe-bottom:max(16px,env(safe-area-inset-bottom))}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--black);color:var(--ink);font-family:Inter,Arial,sans-serif}
button,a{color:inherit;font:inherit}
button{border:0}
button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:4px}
.skip-link{position:fixed;z-index:100;left:12px;top:-80px;padding:12px 16px;background:#fff;color:#000}.skip-link:focus{top:12px}
.masthead{position:fixed;z-index:20;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto;align-items:start;padding:var(--safe-top) 18px 0;pointer-events:none}
.wordmark,.info-open{pointer-events:auto}
.wordmark{display:flex;flex-direction:column;width:max-content;color:#fff;text-decoration:none;font:600 18px/14px Manrope,sans-serif;letter-spacing:-.04em}
.role{display:none}
.info-open{justify-self:end;display:flex;align-items:center;gap:11px;min-width:74px;min-height:42px;padding:0 14px;border:1px solid rgba(255,255,255,.46);border-radius:999px;background:rgba(5,5,5,.4);backdrop-filter:blur(12px);cursor:pointer;text-transform:uppercase;font:400 10px DM Mono,monospace;letter-spacing:.13em}
.info-open i,.info-close i,.dialog-close i{position:relative;width:12px;height:12px}.info-open i:before,.info-open i:after{content:"";position:absolute;left:5px;top:0;width:1px;height:12px;background:currentColor}.info-open i:after{transform:rotate(90deg)}
.monitor{position:relative;width:100%;height:100%;height:100dvh;isolation:isolate;touch-action:pan-y}
.frames,.frame,.frame img,.frame .grade{position:absolute;inset:0;width:100%;height:100%}
.frame{z-index:0;visibility:hidden;opacity:0;overflow:hidden;transition:opacity .72s cubic-bezier(.22,.61,.36,1),visibility 0s .72s}
.frame:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28) 0,transparent 25%,transparent 48%,rgba(0,0,0,.85) 100%)}
.frame img{object-fit:cover;transform:scale(1.035);filter:saturate(.88) contrast(1.03);transition:transform 1.25s cubic-bezier(.2,.75,.2,1)}
.frame .grade{mix-blend-mode:soft-light;opacity:.28}.grade-red{background:linear-gradient(125deg,#310903,transparent 50%,#cf8d63)}.grade-blue{background:linear-gradient(135deg,#001d31,transparent 62%,#b77037)}.grade-pale{background:linear-gradient(135deg,#64756f,transparent 55%,#d2aa77)}
.frame.is-active{z-index:1;visibility:visible;opacity:1;transition-delay:0s}.frame.is-active img{transform:scale(1)}
.frame.is-leaving{z-index:2;visibility:visible;opacity:0;clip-path:inset(0 0 0 100%);transition:clip-path .8s cubic-bezier(.76,0,.24,1),opacity .18s .62s}
.monitor-meta{position:absolute;z-index:5;top:80px;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,.72);text-transform:uppercase;font:300 8px DM Mono,monospace;letter-spacing:.1em;pointer-events:none}
.monitor-meta .rec{display:flex;align-items:center;gap:6px}.rec i{width:6px;height:6px;border-radius:50%;background:#ff391f;box-shadow:0 0 10px rgba(255,57,31,.7);animation:pulse 1.6s steps(1) infinite}
@keyframes pulse{50%{opacity:.25}}
.viewfinder{position:absolute;z-index:4;inset:93px 18px 225px;pointer-events:none}.viewfinder i{position:absolute;width:18px;height:18px;border-color:rgba(255,255,255,.48);border-style:solid}.viewfinder i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}.viewfinder i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}.viewfinder i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}.viewfinder i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
.project-caption{position:absolute;z-index:6;left:18px;right:18px;bottom:205px;display:grid;grid-template-columns:1fr auto;align-items:end;pointer-events:none}
.project-type{grid-column:1/-1;margin:0 0 7px;text-transform:uppercase;font:300 9px DM Mono,monospace;letter-spacing:.12em}
.project-caption h1{margin:0;max-width:74vw;color:#fff;font:500 clamp(43px,14vw,76px)/.84 Manrope,sans-serif;letter-spacing:-.07em;text-wrap:balance}
.project-open{pointer-events:auto;align-self:end;display:grid;place-items:center;width:58px;height:58px;margin-bottom:2px;border-radius:50%;background:#f2efe8;color:#111;cursor:pointer;transition:transform .25s,background .25s}
.project-open span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.project-open svg{width:19px;height:19px;fill:currentColor}.project-open:active{transform:scale(.93)}
.project-open.is-launching{background:var(--red);color:#fff;animation:play-launch .48s cubic-bezier(.2,.8,.2,1) both}
@keyframes play-launch{0%{transform:scale(1)}42%{transform:scale(.78)}100%{transform:scale(1.08)}}
.info-open.is-launching{animation:control-launch .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes control-launch{0%{transform:translateY(0) scale(1)}45%{transform:translateY(1px) scale(.88)}100%{transform:translateY(-2px) scale(1.04)}}
.take-nav{position:absolute;z-index:7;left:0;right:0;bottom:0;display:flex;gap:8px;padding:0 18px var(--safe-bottom);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.take-nav::-webkit-scrollbar{display:none}
.take{position:relative;flex:0 0 min(58vw,225px);min-height:118px;padding:15px 14px;text-align:left;border:1px solid rgba(255,255,255,.22);background:rgba(5,5,5,.44);backdrop-filter:blur(14px);color:rgba(255,255,255,.62);cursor:pointer;scroll-snap-align:start;transition:background .35s,color .35s,border-color .35s}
.take:after{content:"";position:absolute;left:13px;right:13px;bottom:9px;height:2px;background:rgba(255,255,255,.18);transform-origin:left}.take.is-active:after{background:#fff;animation:take-progress 6s linear both}
@keyframes take-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.take span,.take small{display:block;text-transform:uppercase;font:300 8px DM Mono,monospace;letter-spacing:.11em}.take b{display:block;margin:21px 0 4px;color:inherit;font:500 16px/1 Manrope,sans-serif;letter-spacing:-.04em}.take.is-active{border-color:rgba(255,255,255,.6);background:rgba(239,236,228,.94);color:#0a0a0a}
.swipe-hint{display:none}
dialog{margin:0;padding:0;border:0;max-width:none;max-height:none;color:inherit}dialog::backdrop{background:rgba(0,0,0,.72);backdrop-filter:blur(8px)}
.project-dialog{position:fixed;inset:0;width:100%;height:100%;height:100dvh;background:#0a0a0a;overflow:hidden}
.project-dialog.is-opening{animation:project-reveal .88s cubic-bezier(.76,0,.24,1) both}
.project-dialog.is-opening::backdrop{animation:project-backdrop-in .55s ease both}
.project-dialog.is-opening .dialog-visual img{animation:project-image-in 1.15s cubic-bezier(.2,.75,.2,1) both}
.project-dialog.is-opening .dialog-sheet{animation:project-sheet-in .72s .24s cubic-bezier(.22,.61,.36,1) both}
.project-dialog.is-opening .dialog-close{animation:project-control-in .5s .42s ease both}
.project-dialog.is-closing{animation:project-hide .62s cubic-bezier(.76,0,.24,1) both}
.project-dialog.is-closing::backdrop{animation:project-backdrop-out .5s ease both}
.project-dialog.is-closing .dialog-sheet{animation:project-sheet-out .42s ease both}
.project-dialog.is-switching .dialog-visual,.project-dialog.is-switching .dialog-sheet{animation:film-switch .68s cubic-bezier(.76,0,.24,1) both}
.project-dialog.is-switching-back .dialog-visual,.project-dialog.is-switching-back .dialog-sheet{animation-direction:reverse}
.project-dialog.is-switching .dialog-sheet{animation-delay:.02s}
@keyframes project-reveal{from{clip-path:circle(0 at var(--reveal-x,50%) var(--reveal-y,50%))}to{clip-path:circle(var(--reveal-radius,150vmax) at var(--reveal-x,50%) var(--reveal-y,50%))}}
@keyframes project-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes project-image-in{from{transform:scale(1.12);filter:saturate(.65) brightness(.72)}to{transform:scale(1);filter:none}}
@keyframes project-sheet-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes project-control-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes project-hide{from{clip-path:circle(var(--reveal-radius,150vmax) at var(--reveal-x,50%) var(--reveal-y,50%));opacity:1}to{clip-path:circle(0 at var(--reveal-x,50%) var(--reveal-y,50%));opacity:.72}}
@keyframes project-backdrop-out{from{opacity:1}to{opacity:0}}
@keyframes project-sheet-out{to{opacity:0;transform:translateY(22px)}}
@keyframes film-switch{0%{opacity:1;transform:translateX(0)}44%{opacity:0;transform:translateX(-28px)}56%{opacity:0;transform:translateX(28px)}100%{opacity:1;transform:translateX(0)}}
.dialog-visual{position:absolute;inset:0 0 48%;overflow:hidden}.dialog-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,#0a0a0a)}.dialog-visual img{width:100%;height:100%;object-fit:cover}
.dialog-close,.info-close{position:absolute;z-index:5;top:var(--safe-top);right:18px;display:flex;align-items:center;gap:10px;min-height:42px;padding:0 14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(0,0,0,.38);backdrop-filter:blur(10px);color:#fff;cursor:pointer;text-transform:uppercase;font:300 9px DM Mono,monospace;letter-spacing:.1em}
.dialog-close i:before,.dialog-close i:after,.info-close i:before,.info-close i:after{content:"";position:absolute;left:5px;top:0;width:1px;height:12px;background:currentColor;transform:rotate(45deg)}.dialog-close i:after,.info-close i:after{transform:rotate(-45deg)}
.dialog-close,.info-close{transition:transform .25s,background .25s,color .25s}
.dialog-close.is-pressing,.info-close.is-pressing{animation:close-press .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes close-press{0%{transform:scale(1)}45%{transform:scale(.86) rotate(-2deg)}100%{transform:scale(1.03)}}
.dialog-sheet{position:absolute;z-index:2;left:0;right:0;bottom:0;min-height:56%;padding:24px 18px calc(var(--safe-bottom) + 8px);background:#0a0a0a;border-radius:22px 22px 0 0}
.dialog-index,.dialog-type{margin:0;text-transform:uppercase;font:300 8px DM Mono,monospace;letter-spacing:.13em}.dialog-type{margin-top:22px;color:#9c9c97}.dialog-sheet h2{margin:8px 0 13px;font:500 clamp(42px,13vw,76px)/.9 Manrope,sans-serif;letter-spacing:-.07em}.dialog-logline{max-width:540px;margin:0;color:#c0bdb5;font:400 15px/1.55 Inter,sans-serif}
.dialog-sheet dl{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0 0;padding-top:17px;border-top:1px solid #292929}.dialog-sheet dl div{display:grid;gap:4px}.dialog-sheet dt{text-transform:uppercase;color:#747470;font:300 8px DM Mono,monospace;letter-spacing:.12em}.dialog-sheet dd{margin:0;font-size:12px}
.dialog-actions{display:flex;justify-content:space-between;align-items:center;margin-top:24px}.dialog-actions button{min-height:44px;background:transparent;cursor:pointer;text-transform:uppercase;font:300 9px DM Mono,monospace;letter-spacing:.1em}.dialog-next{display:flex;align-items:center;gap:9px;padding:0 15px!important;background:#f3f0e9!important;color:#090909!important}.dialog-next svg{width:16px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .3s}
.dialog-next{transition:transform .25s,background .25s!important}
.dialog-next.is-advancing{animation:next-press .62s cubic-bezier(.2,.8,.2,1) both}
.dialog-next.is-advancing svg{transform:translateX(6px)}
@keyframes next-press{0%{transform:translateX(0) scale(1)}32%{transform:translateX(4px) scale(.94)}100%{transform:translateX(0) scale(1)}}
.info-dialog{position:fixed;inset:0;width:100%;height:100%;height:100dvh;padding:calc(var(--safe-top) + 72px) 18px calc(var(--safe-bottom) + 18px);background:#e8e4db;color:#151515;overflow:auto}
.info-dialog.is-opening{animation:info-reveal .78s cubic-bezier(.76,0,.24,1) both}
.info-dialog.is-opening::backdrop{animation:project-backdrop-in .45s ease both}
.info-dialog.is-opening .info-main,.info-dialog.is-opening .info-columns,.info-dialog.is-opening .availability,.info-dialog.is-opening .demo-note{animation:info-content-in .62s .2s cubic-bezier(.22,.61,.36,1) both}
.info-dialog.is-opening .info-close{animation:project-control-in .45s .32s ease both}
.info-dialog.is-closing{animation:info-hide .58s cubic-bezier(.76,0,.24,1) both}
.info-dialog.is-closing::backdrop{animation:project-backdrop-out .45s ease both}
@keyframes info-reveal{from{clip-path:circle(0 at var(--reveal-x,90%) var(--reveal-y,5%))}to{clip-path:circle(var(--reveal-radius,150vmax) at var(--reveal-x,90%) var(--reveal-y,5%))}}
@keyframes info-hide{from{clip-path:circle(var(--reveal-radius,150vmax) at var(--reveal-x,90%) var(--reveal-y,5%));opacity:1}to{clip-path:circle(0 at var(--reveal-x,90%) var(--reveal-y,5%));opacity:.76}}
@keyframes info-content-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.info-close{color:#111;border-color:rgba(0,0,0,.32);background:rgba(232,228,219,.78)}.info-number{position:absolute;right:18px;top:100px;text-align:right;color:rgba(0,0,0,.16);font:500 42px/.85 Manrope,sans-serif;letter-spacing:-.07em}
.info-main{margin-top:17vh}.info-kicker,.info-columns span{margin:0 0 12px;text-transform:uppercase;font:300 8px DM Mono,monospace;letter-spacing:.14em}.info-main h2{margin:0;font:500 clamp(35px,10vw,70px)/.94 Manrope,sans-serif;letter-spacing:-.065em}.info-main h2 em{font-weight:400;color:#cc3d28}.info-main>p:last-child{max-width:680px;margin:25px 0 0;font-size:14px;line-height:1.7}
.info-columns{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:42px;padding-top:18px;border-top:1px solid rgba(0,0,0,.2)}.info-columns p{margin:0;font-size:12px;line-height:1.65}.info-columns a{display:block;margin-bottom:7px;color:inherit;font-size:11px;word-break:break-word}
.availability{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:13px;margin-top:34px;padding:18px 0;border-top:1px solid #111;border-bottom:1px solid #111;color:inherit;text-decoration:none;text-transform:uppercase;font:400 10px/1.5 DM Mono,monospace;letter-spacing:.07em}.availability i{width:8px;height:8px;border-radius:50%;background:#cf3d28;box-shadow:0 0 0 5px rgba(207,61,40,.12)}.availability svg{width:22px;fill:none;stroke:currentColor;stroke-width:1.2}.demo-note{display:block;margin-top:18px;color:#77736c;font:300 8px/1.5 DM Mono,monospace}
body.has-dialog .masthead,body.has-dialog .monitor{filter:blur(0)}
@media(min-width:760px){
  .masthead{grid-template-columns:1fr 1fr 1fr;padding:28px 34px}.wordmark{font-size:25px;line-height:19px}.role{display:block;justify-self:center;margin:0;text-align:center;text-transform:uppercase;font:300 9px/1.5 DM Mono,monospace;letter-spacing:.12em}.info-open{padding:0 18px}
  .monitor-meta{top:118px;left:34px;right:34px;font-size:9px}.viewfinder{inset:132px 34px 200px}.project-caption{left:34px;right:auto;bottom:61px;display:block}.project-caption h1{max-width:470px;font-size:clamp(64px,8vw,124px)}.project-open{position:absolute;left:calc(100% + 28px);bottom:3px;width:70px;height:70px}
  .take-nav{left:auto;right:34px;bottom:33px;width:min(48vw,660px);padding:0;gap:0;border:1px solid var(--line)}.take{flex:1;min-width:0;min-height:125px;border:0;border-right:1px solid var(--line);background:rgba(5,5,5,.42)}.take:last-child{border-right:0}.take.is-active{background:#f2efe8}.take b{font-size:14px}
  .swipe-hint{position:absolute;z-index:6;display:block;left:34px;bottom:24px;margin:0;text-transform:uppercase;font:300 8px DM Mono,monospace;letter-spacing:.14em;writing-mode:vertical-rl}
  .dialog-visual{inset:0 45% 0 0}.dialog-visual:after{background:linear-gradient(90deg,transparent 55%,#0a0a0a)}.dialog-sheet{left:51%;right:5%;top:14%;bottom:auto;min-height:0;padding:0;background:transparent;border-radius:0}.dialog-sheet dl{grid-template-columns:repeat(4,1fr)}.dialog-sheet h2{font-size:clamp(58px,7vw,105px)}.dialog-actions{margin-top:42px}
  .info-dialog{padding:80px 7vw 40px}.info-number{right:7vw;top:100px;font-size:70px}.info-main{margin-top:13vh}.info-main>p:last-child{font-size:17px}.info-columns{grid-template-columns:1fr 1fr;max-width:680px;margin-left:auto}.availability{max-width:680px;margin-left:auto}.demo-note{max-width:680px;margin-left:auto}
}
@media(min-width:960px){
  .masthead{grid-template-columns:minmax(250px,1fr) auto minmax(320px,31vw);padding:27px 30px 0}
  .wordmark{font-size:24px;line-height:18px}
  .role{align-self:start;padding-top:1px;color:rgba(255,255,255,.58)}
  .info-open{margin-right:0;background:#eeeae2;color:#0b0b0b;border-color:#eeeae2;backdrop-filter:none;transition:background .25s,color .25s,transform .25s}
  .info-open:hover{background:var(--red);color:#fff;transform:translateY(-2px)}

  .monitor:before{content:"";position:absolute;z-index:3;top:96px;right:calc(clamp(300px,29vw,430px) + 44px);bottom:28px;width:1px;background:rgba(255,255,255,.13);pointer-events:none}
  .frame{inset:96px calc(clamp(300px,29vw,430px) + 66px) 28px 30px;width:auto;height:auto;border:1px solid rgba(255,255,255,.18);background:#101010}
  .frame:after{background:linear-gradient(180deg,rgba(0,0,0,.24) 0,transparent 30%,transparent 48%,rgba(0,0,0,.88) 100%)}
  .frame img{object-position:center center}

  .monitor-meta{top:113px;left:48px;right:calc(clamp(300px,29vw,430px) + 84px);font-size:8px;letter-spacing:.13em}
  .viewfinder{inset:132px calc(clamp(300px,29vw,430px) + 84px) 54px 48px}

  .project-caption{left:58px;right:calc(clamp(300px,29vw,430px) + 92px);bottom:58px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:end}
  .project-type{grid-column:1/-1;margin-bottom:12px;color:rgba(255,255,255,.72)}
  .project-caption h1{max-width:none;font-size:clamp(58px,6.3vw,102px);line-height:.82}
  .project-open{position:static;display:flex;align-items:center;gap:12px;width:auto;height:50px;margin:0 0 3px;padding:0 20px;border-radius:999px;white-space:nowrap}
  .project-open span{position:static;width:auto;height:auto;overflow:visible;clip-path:none;text-transform:uppercase;font:400 9px DM Mono,monospace;letter-spacing:.12em}
  .project-open svg{width:15px;height:15px}
  .project-open:hover{background:var(--red);color:#fff;transform:translateY(-2px)}

  .take-nav{top:96px;right:30px;bottom:28px;left:auto;width:clamp(300px,29vw,430px);display:grid;grid-template-rows:auto repeat(3,minmax(0,1fr));gap:10px;padding:0;border:0;overflow:visible}
  .take-nav:before{content:"SEÇİLİ FİLMLER  /  01—03";align-self:end;padding-bottom:8px;color:rgba(255,255,255,.47);font:300 8px DM Mono,monospace;letter-spacing:.14em}
  .take{min-width:0;min-height:0;padding:18px 18px 16px;border:1px solid rgba(255,255,255,.18);background:#101010;backdrop-filter:none;overflow:hidden;transition:background .35s,color .35s,border-color .35s,transform .3s}
  .take:last-child{border-right:1px solid rgba(255,255,255,.18)}
  .take:hover{border-color:rgba(255,255,255,.48);transform:translateX(-4px)}
  .take.is-active{border-color:#eeeae2;background:#eeeae2;transform:translateX(-8px)}
  .take span,.take small{font-size:8px}
  .take b{margin:clamp(15px,2.4vh,28px) 0 7px;font-size:clamp(18px,1.65vw,25px)}
  .take:after{left:18px;right:18px;bottom:13px}
  .swipe-hint{display:none}
}
@media(min-width:960px) and (max-height:720px){
  .frame{top:82px}.monitor:before,.take-nav{top:82px}.monitor-meta{top:98px}.viewfinder{top:117px}
  .take{padding-top:13px}.take b{margin-top:10px}
  .project-caption h1{font-size:clamp(52px,5.7vw,82px)}
}
@media(max-height:690px) and (max-width:759px){.project-caption{bottom:177px}.project-caption h1{font-size:39px}.take{min-height:101px}.take b{margin-top:12px}.viewfinder{bottom:190px}.dialog-sheet h2{font-size:38px}.dialog-logline{font-size:13px}.dialog-sheet dl{margin-top:14px}.dialog-actions{margin-top:14px}.info-main{margin-top:9vh}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}