/* =========================================================
   Ana sayfa açılış sahnesi: kaydırdıkça bulutlardan Kâbe'ye iniş
   ========================================================= */
.ascent{position:relative;height:330vh;background:#f3eee3}
.ascent .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate}
.ascent .sky{position:absolute;inset:0;z-index:-3;background:linear-gradient(180deg,var(--s1,#dfeaf0) 0%,var(--s2,#f3efe4) 62%,var(--s3,#f1dfb8) 100%)}
.ascent .sun{position:absolute;z-index:-3;left:58%;top:18%;width:46vmax;height:46vmax;margin:-23vmax 0 0 -23vmax;border-radius:50%;background:radial-gradient(circle,rgba(255,240,205,.95) 0%,rgba(255,236,196,.45) 30%,rgba(255,236,196,0) 62%)}
.ascent svg.world{position:absolute;inset:0;width:100%;height:100%;z-index:-2;overflow:visible}
.ascent .clouds{position:absolute;inset:-10%;z-index:-1;pointer-events:none}
.ascent .clg{position:absolute;will-change:transform,opacity}
.ascent .cl{position:absolute;border-radius:50%;background:radial-gradient(closest-side at 50% 38%,#fff 0%,#fff 46%,rgba(238,234,226,.9) 72%,rgba(232,227,216,0) 100%);filter:blur(3px)}
.ascent .veil{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(251,248,241,.78) 0%,rgba(251,248,241,.25) 40%,rgba(251,248,241,0) 62%),linear-gradient(0deg,rgba(251,248,241,.92) 0%,rgba(251,248,241,0) 32%)}

.ascent .ui{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;color:#2a3a34}
.ascent .top{display:flex;justify-content:space-between;gap:40px;padding-top:118px}
.ascent .top p{margin:0;max-width:390px;font-size:clamp(16px,1.45vw,20px);line-height:1.45;color:#2a3a34}
.ascent .top .r{max-width:300px;text-align:right;font-size:14.5px;color:#5f6e68}
.ascent .top .r a{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:700;color:#0f4a3a;border-bottom:1px solid #c9a45c;padding-bottom:2px}
.ascent .title{margin-top:auto;font-family:var(--serif);font-weight:500;line-height:.86;letter-spacing:-.035em;color:#10201a;font-size:clamp(64px,13vw,210px);will-change:transform,opacity}
.ascent .title em{display:block;font-style:italic;color:#1a6b54;font-size:.52em;letter-spacing:-.02em;margin-left:.08em}
.ascent .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;border-top:1px solid rgba(16,32,26,.16);margin-top:26px;padding:16px 0 22px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:#5f6e68}
.ascent .bar span:last-child{text-align:right}
.ascent .hint{display:flex;align-items:center;gap:10px}
.ascent .hint i{width:1px;height:22px;background:#a8823a;position:relative;overflow:hidden}
.ascent .hint i::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:#10201a;animation:asc-drip 1.6s ease-in-out infinite}
@keyframes asc-drip{to{top:110%}}
.ascent .prog{position:absolute;right:22px;top:50%;width:2px;height:120px;margin-top:-60px;background:rgba(16,32,26,.14);border-radius:2px;z-index:1}
.ascent .prog b{position:absolute;left:0;top:0;width:2px;height:100%;background:#c9a45c;transform-origin:top;transform:scaleY(0)}

[dir=rtl] .ascent .top .r{text-align:left}
[dir=rtl] .ascent .bar span:last-child{text-align:left}
[dir=rtl] .ascent .veil{transform:scaleX(-1)}

@media (max-width:860px){
  .ascent{height:280vh}
  .ascent .top{flex-direction:column;gap:14px;padding-top:96px}
  .ascent .top .r{display:none}
  .ascent .bar{grid-template-columns:1fr;gap:6px;text-align:left}
  .ascent .bar span:first-child,.ascent .bar span:last-child{display:none}
  .ascent .prog{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ascent{height:auto}
  .ascent .stage{position:relative}
  .ascent .clouds{display:none}
  .ascent .hint i::after{animation:none}
}
[dir=rtl] .ascent .title,[dir=rtl] .ascent .title em{font-family:var(--serif)!important}

/* 3D sahne (ascent3d.js) açıkken eski çizim gizlenir */
.ascent canvas.gl{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block}
.ascent.webgl svg.world,.ascent.webgl .clouds,.ascent.webgl .sun{display:none}
.ascent.webgl .veil{background:linear-gradient(90deg,rgba(251,248,241,.72) 0%,rgba(251,248,241,.2) 38%,rgba(251,248,241,0) 60%),linear-gradient(0deg,rgba(251,248,241,.85) 0%,rgba(251,248,241,0) 28%)}
[dir=rtl] .ascent.webgl .veil{transform:scaleX(-1)}