/* Verterra · v10 · KAPANIŞ — Arakot Render Lab sitesinin bitişi (render-lab-v20/masaustu.css "4 · kapanış" ölçüleri)
   Açık sıcak zemin #F6F5F2, mürekkep #141414; ortada tek cümle, siyah düğme, altı çizili bağlantılar, dock, yasal satır.
   En altta küçük gri Arakot üçgeni ve zemine gömülü, yarısı silik dev "Arakot Design Studio".
   PERDE (Render Lab .son.is-reveal): kapanış ekrana sığıyorsa ekranın dibinde sabit bekler, İletişim üstünden yukarı kayıp onu açar;
   açılırken harfler teker teker alttan çıkar, logo en son belirir (kapanis.js; iki yönde aynı). */

.alt-son.son{--son-bg:#F6F5F2;--son-ink:#141414;--son-soft:#4A4A48;--son-word:#DCDAD4;
  position:relative;z-index:1;display:flex;flex-direction:column;min-height:100vh;padding:0;overflow:visible;overflow-x:clip;gap:0;
  background:var(--son-bg);color:var(--son-ink);font-family:var(--f-govde)}
/* İletişim'in açık zemininden (#FAFAFA örtü) kapanışın zeminine geçiş: İletişim'in dibinde en çok 12vh. Kapanışta değil İletişim'de:
   perde kenarıyla birlikte kayar, kapanışın kesmesine girmez; panele değmez (İletişim'in alt boşluğu ≥ 16vh, en az 120 px). */
.v10-iletisim::after{content:'';position:absolute;left:0;right:0;bottom:0;height:min(12vh,120px);z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(250,250,250,0),#F6F5F2)}

/* Aralıklar (ve başlığın boyu): ekran kapanışa yetmezse perde için kısılır. calc(en küçük + (asıl − en küçük) × --son-k); --son-k yoksa
   1 = asıl ölçü. En küçükler kapanis.js ARALIK listesiyle aynı; üst boşluk sitenin üst çubuğunun altında kalır (80 px). */
.son-ic{display:grid;justify-items:center;text-align:center;max-width:1100px;margin:0 auto;
  padding:min(clamp(72px,12vh,150px),calc(80px + (clamp(72px,12vh,150px) - 80px) * var(--son-k,1))) clamp(16px,4vw,40px) 0}
.son-marka img{display:block;height:56px;width:auto}
.son-h{margin:calc(16px + 12px * var(--son-k,1)) 0 0;font-family:'Schibsted Grotesk',var(--f-govde);font-weight:500;line-height:1;letter-spacing:-.045em;color:var(--son-ink);text-wrap:balance;
  font-size:min(clamp(40px,5.2vw,84px),calc(48px + (clamp(40px,5.2vw,84px) - 48px) * var(--son-k,1)))}
.son-h em{font-style:normal;color:var(--son-soft)}
.son-cta{margin:calc(14px + (clamp(26px,3.6vh,40px) - 14px) * var(--son-k,1)) 0 0}
.son-dugme{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 30px;border-radius:20px;background:#000;color:#fff;
  font:600 16px/1 var(--f-govde);letter-spacing:-.006em;text-decoration:none;
  box-shadow:0 1px 1.5px rgba(0,0,0,.22),0 10px 30px -6px rgba(0,0,0,.3);
  transition:background-color .2s var(--yumusak),translate .22s var(--yumusak),scale .18s var(--yumusak),box-shadow .24s var(--yumusak)}
@media (hover:hover){ .son-dugme:hover{background:#212121;translate:0 -2px;box-shadow:0 2px 3px rgba(0,0,0,.2),0 16px 34px -8px rgba(0,0,0,.36)} }
.son-dugme:active{translate:none;scale:.97}
.alt-son.son .son-menu{display:flex;flex-wrap:wrap;justify-content:center;column-gap:clamp(26px,4.4vw,70px);row-gap:0;
  margin-top:calc(20px + (clamp(40px,7vh,96px) - 20px) * var(--son-k,1))}
.alt-son.son .son-menu a{height:auto;min-height:44px;padding:0;border-radius:0;background:none;display:inline-flex;align-items:center;
  font:400 17px/1 'Schibsted Grotesk',var(--f-govde);letter-spacing:0;text-transform:none;color:var(--son-ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
@media (hover:hover){ .alt-son.son .son-menu a:hover{background:none;text-decoration-thickness:2px} }
.alt-son.son :focus-visible{outline:2px solid var(--son-ink);outline-offset:3px;box-shadow:none}
.son-yasal{margin-top:calc(10px + 8px * var(--son-k,1))}
.alt-son.son .alt-imza{margin:0;font-size:14px;font-weight:400;letter-spacing:0;color:var(--son-soft)}

/* ── dock: beyaz hap içinde koyu yuvarlak simgeler; imleç yaklaştıkça yakındakiler büyür, komşular yana açılır, etiket üstte belirir
   (21st.dev Animated Dock). Yalnız transform (kapanis.js, yay): simgenin yeri sabit 42 px, daire alttan ölçeklenir, simge yana kayar.
   Hap: ölçeklenen gölge + üç beyaz parça (uçlar kayar, orta ölçeklenir → köşeler bozulmaz). ── */
.dock{position:relative;display:flex;align-items:flex-end;gap:10px;height:60px;margin-top:calc(18px + 12px * var(--son-k,1));padding:9px 12px;border-radius:22px}
.dock-zemin{position:absolute;inset:0;pointer-events:none}
.dock-zemin i{position:absolute;top:0;bottom:0;will-change:transform}
.dock-zemin .dz-golge{left:0;right:0;border-radius:22px;
  box-shadow:0 0 0 1px rgba(20,20,20,.06),0 1px 2px rgba(20,20,20,.06),0 14px 34px -14px rgba(20,20,20,.25)}
.dock-zemin .dz-sol,.dock-zemin .dz-orta,.dock-zemin .dz-sag{background:#fff}
.dock-zemin .dz-sol{left:0;width:40px;border-radius:22px 0 0 22px}
.dock-zemin .dz-orta{left:39px;right:39px}
.dock-zemin .dz-sag{right:0;width:40px;border-radius:0 22px 22px 0}
.dock-oge{position:relative;display:block;width:42px;height:42px;flex:0 0 auto;border-radius:50%;color:#fff;text-decoration:none;will-change:transform}
.dock-daire{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;background:#141414;transform-origin:50% 100%;will-change:transform}
.dock-daire svg{width:46%;height:46%;display:block}
.dock-oge:focus-visible{outline:2px solid var(--son-ink);outline-offset:3px}
.dock-etiket{position:absolute;left:50%;bottom:calc(100% + 10px);padding:6px 10px;border-radius:8px;background:#141414;color:#fff;white-space:nowrap;
  font:600 12.5px/1 var(--f-govde);pointer-events:none;opacity:0;transform:translate(-50%,6px);transition:opacity .2s var(--yumusak),transform .3s var(--yay)}
.dock-oge:hover .dock-etiket,.dock-oge:focus-visible .dock-etiket{opacity:1;transform:translate(-50%,0)}

/* ── zemine gömülü dev ad ── */
.son-ad{position:relative;margin-top:auto;padding-top:calc(12px + (clamp(26px,5vh,70px) - 12px) * var(--son-k,1))}
.son-logo{display:block;width:clamp(34px,3.4vw,58px);height:auto;margin:0 auto 6px;opacity:.82;will-change:transform,opacity}
.son-kelime{position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;column-gap:.22em;margin:0;padding:0 clamp(6px,1vw,16px);
  overflow:hidden;height:.8em;font-family:'Schibsted Grotesk',var(--f-govde);font-weight:700;font-size:clamp(56px,10.2vw,230px);line-height:1;letter-spacing:-.06em;
  color:var(--son-word);user-select:none;pointer-events:none;white-space:nowrap;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.55) 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 30%,rgba(0,0,0,.55) 62%,transparent 100%)}
.son-w{display:flex}
.son-w span{display:block;will-change:transform}
html.son-js .son-w span{transform:translateY(100%)}

/* ── perde: kapanışın kutusu doğal kayar (üst kenarı = perde kenarı; taşanı keser), içi kaydırmaya bağlı animasyonla tam ters kayar →
   içerik ekranda sabit durur, kenar yukarı çekildikçe açılır. Render Lab'de yapışkan (sticky) kapanış; burada İletişim saydam (arkası sabit
   örtü), yapışkan kapanış arkadan görünürdü. Animasyon bileşikte, kaydırmayla aynı karede çalışır (titremez). Perdede kapanışın boyu tam
   100vh (içerik sığmazsa aralıklar kısılır, yine sığmazsa perde yok). Tarayıcı bilmiyorsa (Firefox) ya da kapanış ekrana sığmıyorsa
   html.son-perde yok: düz kayar, harfler zamanla çıkar. ── */
@keyframes son-sabit{from{transform:translate3d(0,-100vh,0)}to{transform:none}}
@supports (animation-timeline:view()){
  html.son-perde .alt-son.son{overflow:clip;view-timeline:--son-giris block}
  html.son-perde .alt-son.son > .son-ic,html.son-perde .alt-son.son > .son-ad{will-change:transform;
    animation:son-sabit linear both;animation-timeline:--son-giris;animation-range:entry 0% entry 100%}
}

html.son-icinde .alt-perde{opacity:0!important}

@media (max-width:600px){
  .son-ic{padding-top:84px}
  .alt-son.son .son-menu{column-gap:20px;margin-top:40px}
  .alt-son.son .son-menu a{font-size:16px}
  .dock{gap:8px;padding:8px 10px;height:54px}
  /* iki satır: "Arakot" büyük, altında "Design Studio", ayağı zemine gömülü */
  .son-kelime{height:auto;font-size:15vw;line-height:.9;row-gap:.04em;column-gap:.24em;
    -webkit-mask-image:linear-gradient(180deg,#000 66%,rgba(0,0,0,.6) 88%,transparent 100%);mask-image:linear-gradient(180deg,#000 66%,rgba(0,0,0,.6) 88%,transparent 100%)}
  .son-w:first-child{flex-basis:100%;justify-content:center;font-size:1.9em}
}
@media (prefers-reduced-motion:reduce){
  html.son-js .son-w span{transform:none}
}