/* Sample-work page (referanslar.php). Mock-ups are sized in cqw so they scale with their frame. */
.xh{position:fixed;inset:0 0 auto;z-index:60;padding:12px 0;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.xh .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px}
.xr{display:flex;align-items:center;gap:12px}
.xlang{display:flex;border:1.5px solid var(--hair);border-radius:99px;padding:3px}
.xlang a{font-size:13px;font-weight:600;padding:5px 11px;border-radius:99px;color:var(--mute)}
.xlang a[aria-current=true]{background:var(--fg);color:var(--bg)}
.xpill{display:inline-flex;align-items:center;padding:12px 22px;border-radius:99px;background:var(--fg);color:var(--bg);font-weight:600;font-size:15px;white-space:nowrap}
.ex-hero{padding:clamp(130px,20vh,190px) 0 clamp(40px,7vh,80px)}
.ex-note{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;border:1.5px solid var(--hair);border-radius:99px;padding:6px 14px;margin-bottom:26px}
.ex-note:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cobalt)}
.ex-hero h1{font-family:var(--disp);font-weight:800;font-size:clamp(52px,9.4vw,160px);line-height:.86;font-variation-settings:"wdth" 66;letter-spacing:-.01em}
.ex-hero p{max-width:62ch;color:var(--mute);font-size:clamp(17px,1.4vw,21px);margin-top:28px}
.cap{font-size:13px;font-weight:600;color:var(--mute);margin-top:12px}
.shot{border-radius:18px;overflow:hidden;background:#171A3C;box-shadow:0 34px 60px -34px rgba(12,14,38,.5)}
.shot .bar{display:flex;gap:6px;align-items:center;padding:10px 14px}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);flex:none}
.shot .bar span{margin:0 auto;font-size:12px;color:rgba(255,255,255,.62);background:rgba(255,255,255,.08);padding:4px 16px;border-radius:99px;transform:translateX(-20px)}

.ex-cta{padding:clamp(70px,12vh,140px) 0;border-top:1.5px solid var(--hair)}
.ex-cta h2{font-family:var(--disp);font-weight:800;font-size:clamp(40px,6.4vw,104px);line-height:.88;font-variation-settings:"wdth" 66;max-width:14ch}
.ex-cta .row{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}
.ex-cta .xpill{background:var(--cobalt);color:#fff;padding:15px 28px;font-size:16px}
.xfoot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;color:var(--mute);font-size:14px;padding:26px 0 30px;border-top:1.5px solid var(--hair)}
.xfoot .logo{color:var(--fg);font-size:20px}

@media (max-width:560px){
  .xh .logo{font-size:19px}
  .xpill{display:none}
  .ex-cta .xpill{display:inline-flex;flex:1 1 100%;justify-content:center}
  .ex-cta .wab{flex:1 1 100%}
}

/* header and closing section shared with the home page */
.nav-r .lk[aria-current=page]:after{transform:scaleX(1)}
.rf-end{--bg:#2B2CE8;--fg:#fff;--mute:rgba(255,255,255,.72);--hair:rgba(255,255,255,.22);background:var(--bg);color:var(--fg)}
.mnav .xlang{align-self:flex-start;margin-bottom:8px}
@media (max-width:560px){
  .nav .xlang{display:none}
}