/* iki dil sayfasi da bu dosyayi kullanir, sayfaya ozel stil yok */
*{margin:0;padding:0;box-sizing:border-box}
a{color:inherit;text-decoration:none}
ul{list-style:none}
svg.i{width:1em;height:1em;fill:currentColor;flex:none}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* kâğıt dokusu, feTurbulence ile üretilen gürültü üstüne multiply ile basılıyor */
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--grain,.18);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* plak kapağı, solda monogram alanı sağda bilgiler */
.d1{--blue:#2B3D92;--blue2:#34489F;--paper:#E7E7E3;--ink:#1B1F2A;--mute:#666B75;--line:#C9CAC6;display:grid;min-height:100vh;min-height:100dvh;position:relative;overflow:hidden;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);background:var(--paper);color:var(--ink);font-family:"Schibsted Grotesk",sans-serif}
.d1 .field{background:var(--blue);--grain:.35;overflow:hidden}
.d1 .mono{position:absolute;left:-.06em;bottom:-.3em;font-family:"Rozha One",serif;font-size:min(78vh,62vw);line-height:1;letter-spacing:-.06em;color:var(--blue2);user-select:none}
.d1 .info{display:flex;flex-direction:column;justify-content:center;gap:clamp(40px,7vh,72px);padding:72px clamp(24px,5vw,72px)}
.d1 h1{font-weight:600;font-size:clamp(2.6rem,5.6vw,5.6rem);line-height:.92;letter-spacing:-.035em;white-space:nowrap}
.d1 .role{margin-top:20px;font-size:clamp(16px,1.35vw,19px);color:var(--mute);line-height:1.4}
.d1 ul{border-top:1.5px solid var(--ink)}
.d1 li a{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);font-size:17px;font-weight:500;transition:padding .25s,color .25s}
.d1 li a span{margin-left:auto;font-weight:400;font-size:14px;color:var(--mute)}
.d1 li a:hover{padding-left:10px;color:var(--blue)}
.d1 li svg{font-size:19px}
/* diger dilin baglantisi kosede durur, sag kenari listeyle ayni hizada */
.d1 .lang{position:absolute;right:clamp(24px,5vw,72px);bottom:28px;font-size:14px;color:var(--mute);transition:color .25s}
.d1 .lang:hover{color:var(--blue)}

/* parcalar sayfa acilirken sirayla asagidan yukselir, paktlabs.com'daki rise ile ayni
   egri ve sure. Elemanin kendi stili son halidir, animasyon yalnizca girisi oynatir,
   from karesi gecikme boyunca backwards ile tutulur. Monogram daha uzaktan ve daha
   yavas gelir ki zemin yazidan once otursun */
.rise{animation:rise .7s cubic-bezier(.2,.7,.2,1) var(--rise-delay,0s) backwards}
@keyframes rise{from{opacity:0;transform:translateY(var(--rise-offset,20px))}}
.d1 .mono{--rise-offset:60px;animation-duration:1.1s}
.d1 h1{--rise-delay:.1s}
.d1 .role{--rise-delay:.18s}
.d1 ul{--rise-delay:.26s;--rise-offset:0}
.d1 li:nth-child(1){--rise-delay:.32s}
.d1 li:nth-child(2){--rise-delay:.39s}
.d1 li:nth-child(3){--rise-delay:.46s}
.d1 li:nth-child(4){--rise-delay:.53s}
.d1 li:nth-child(5){--rise-delay:.6s}
.d1 .lang{--rise-delay:.67s}

@media (max-width:760px){
  .d1{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .d1 .field{min-height:38vh}
  .d1 .mono{font-size:60vw}
  .d1 .info{padding-bottom:80px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}