/* Uçuş (worldflight) — yalnızca anasayfada yüklenir.
   Motor dosyaları (scrollcraft.js/.css) proje başına DÜZENLENMEZ.
   Tema, site.css'teki token'lardan gelir. */
:root{
  --sc-canvas:var(--canvas); --sc-surface:var(--surface);
  --sc-ink:var(--ink); --sc-ink-soft:var(--ink-soft);
  --sc-accent:var(--accent); --sc-accent-ink:var(--accent-ink);
  --sc-font-display:var(--disp); --sc-font-text:var(--text); --sc-font-mono:var(--mono);
  --royal:#3B81FF;
}
.sc-grain{display:none}
.flight{position:relative}
/* uçuş sırasında üst çubuk saydam kalır, altındaki içerik bölümünde zemin kazanır */
.bar--float{background:rgba(250,251,255,.5);backdrop-filter:blur(10px);border-block-end:1px solid var(--hair-soft)}

  /* ---- rota rayı (map-nav) ---- */
  .rail{
    position:fixed; inset-inline-start:clamp(10px,2vw,26px); top:50%; transform:translateY(-50%);
    z-index:70; display:flex; flex-direction:column; font-family:var(--mono);
  }
  .rail__line{position:absolute; inset-inline-start:3.5px; top:8px; bottom:8px; width:1px; background:var(--hair)}
  .rail__leg{
    position:relative; display:flex; align-items:center; gap:10px;
    background:none; border:none; cursor:pointer; padding:7px 0; color:var(--ink-soft);
  }
  .rail__dot{
    width:8px; height:8px; border-radius:50%; flex:none;
    background:#fff; border:1px solid var(--hair); transition:.2s;
  }
  .rail__leg span{
    font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
    opacity:0; transform:translateX(-4px); transition:opacity .2s, transform .2s;
  }
  .rail__leg:hover span, .rail__leg:focus-visible span{opacity:.75; transform:none}
  .rail__leg[aria-current="true"] .rail__dot{
    background:var(--accent); border-color:var(--accent);
    box-shadow:0 0 0 4px rgba(59,129,255,.18);
  }
  .rail__leg[aria-current="true"] span{opacity:1; transform:none; color:var(--accent)}
  .rail__leg:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .rail__alt{
    margin-top:10px; font-size:9.5px; letter-spacing:.14em; color:var(--ink);
    font-variant-numeric:tabular-nums; white-space:nowrap;
  }
  /* ray, her sahnenin üstünde okunur kalmalı: koyu metnin arkasına açık hâle */
  .rail__leg span,.rail__alt{
    text-shadow:0 1px 3px rgba(250,251,255,.92), 0 0 12px rgba(250,251,255,.75);
  }
  @media (max-width:860px){ .rail{display:none} }

  /* ---- copy ---- */
  /* başlıklar için geniş; paragraf ölçüsü kendi kuralında (38ch) sabit kalır */
  .wf-copy{max-width:min(58ch,86vw)}
  .wf-copy .k{
    display:block; font-family:var(--mono); font-size:11px;
    letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:14px;
  }
  .wf-copy h1,.wf-copy h2{
    font-family:var(--disp); font-weight:700; text-transform:uppercase;
    line-height:.94; letter-spacing:.005em; text-wrap:balance; margin:0 0 14px; color:var(--ink);
  }
  .wf-copy h1{font-size:clamp(3rem,7.2vw,6.4rem)}
  .wf-copy h1 i{font-style:normal; color:var(--accent)}
  .wf-copy h2{font-size:clamp(2.1rem,4.2vw,3.6rem)}
  .wf-copy p{
    font-size:clamp(.95rem,1.15vw,1.08rem); line-height:1.62;
    color:var(--ink); max-width:38ch; text-wrap:pretty; margin:0;
  }
  .wf-copy p b{font-weight:600; color:var(--accent)}
  .wf-copy .soft{color:var(--ink-soft)}
  @media (max-width:700px){
    .wf-copy h1{font-size:clamp(2.4rem,11vw,3.2rem)}
    .wf-copy h2{font-size:clamp(1.7rem,7.5vw,2.3rem)}
  }
  .wf-copy.sc-copy--trail{bottom:clamp(20rem,36vh,26rem)}
  /* mobilde konşimento alt şeride yayılır: metin onun üstünde kalmalı */
  @media (max-width:860px){ .wf-copy{bottom:clamp(11rem,23vh,15rem)} }

  /* CTA + iletişim */
  .wf-cta{
    display:inline-flex; align-items:center; gap:10px; margin-top:22px;
    font-family:var(--disp); font-weight:600; text-transform:uppercase;
    letter-spacing:.06em; font-size:17px;
    background:var(--accent); color:var(--accent-ink);
    padding:12px 26px; border-radius:2px;
    transition:transform .14s ease, background .14s ease;
  }
  .wf-cta:hover{background:#0018C4}
  .wf-cta:active{transform:translateY(1px)}
  .wf-cta:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
  .wf-contact{
    margin-top:16px; font-family:var(--mono); font-size:12px;
    letter-spacing:.06em; line-height:2; color:var(--ink-soft);
  }
  .wf-contact a{color:var(--ink-soft); text-underline-offset:3px}
  .wf-contact a:hover{color:var(--accent)}

  /* ---- scrim: metin sütununu beyaza boyayan dikey peçe ---- */
  .cscrim{position:absolute; inset:0; pointer-events:none}
  .cscrim--lead{background:
    linear-gradient(90deg, rgba(250,251,255,.99) 0%, rgba(250,251,255,.985) 34%, rgba(250,251,255,.92) 44%, rgba(250,251,255,.42) 54%, rgba(250,251,255,0) 64%)}
  .cscrim--trail{background:
    linear-gradient(270deg, rgba(250,251,255,.99) 0%, rgba(250,251,255,.985) 34%, rgba(250,251,255,.92) 44%, rgba(250,251,255,.42) 54%, rgba(250,251,255,0) 64%)}
  .cscrim--base{background:linear-gradient(180deg, rgba(250,251,255,.5) 0%, rgba(250,251,255,0) 20%, rgba(250,251,255,0) 76%, rgba(250,251,255,.38) 100%)}
  @media (max-width:860px){
    .cscrim--lead,.cscrim--trail{background:linear-gradient(180deg, rgba(250,251,255,0) 0%, rgba(250,251,255,.72) 30%, rgba(250,251,255,.99) 62%)}
  }

  /* ---- imza hareket: dolan konşimento ---- */
  .doc{
    position:fixed; inset-inline-end:clamp(14px,2.4vw,34px); bottom:clamp(14px,3vh,34px);
    z-index:75; width:286px;
    background:linear-gradient(180deg,#fff 0%,#F4F7FF 100%);
    border:1px solid rgba(10,16,51,.22); border-radius:2px;
    font-family:var(--mono); color:var(--ink);
    box-shadow:0 26px 60px rgba(10,16,51,.20), 0 3px 10px rgba(10,16,51,.10);
    transition:transform .5s var(--ease), box-shadow .5s var(--ease);
    transform-origin:bottom right;
  }
  /* perfore üst kenar: gerçek matbu evrak hissi */
  .doc::before{
    content:""; position:absolute; inset-inline:0; top:-1px; height:3px;
    background:repeating-linear-gradient(90deg, var(--accent) 0 7px, transparent 7px 14px);
  }
  .doc__head{
    display:flex; justify-content:space-between; align-items:baseline;
    padding:9px 13px 8px; border-bottom:1px solid rgba(10,16,51,.16);
  }
  .doc__head b{font-size:9.5px; letter-spacing:.16em; color:var(--accent)}
  .doc__prog{
    font-style:normal; font-size:9px; letter-spacing:.12em; color:var(--ink-soft);
    font-variant-numeric:tabular-nums;
  }
  .doc__prog b{color:var(--accent); font-size:9px; letter-spacing:.12em}
  .doc__body{padding:5px 13px 10px; display:flex; flex-direction:column}
  .doc__row{
    display:flex; justify-content:space-between; align-items:baseline; gap:12px;
    font-size:9.5px; letter-spacing:.05em; line-height:1.4; padding:3.5px 5px;
    margin:0 -5px; border-bottom:1px dashed rgba(10,16,51,.12); border-radius:2px;
  }
  .doc__row .lab{color:var(--ink-soft); flex:none}
  .doc__row .val{
    text-align:right; font-variant-numeric:tabular-nums; flex:1; font-weight:500;
    opacity:0; transform:scale(1.9) translateY(-2px); transform-origin:right center;
    transition:opacity .16s ease-out, transform .34s cubic-bezier(.2,1.5,.35,1);
  }
  .doc__row.on .val{opacity:1; transform:none}
  /* damga anı: satır kısa süre vurgu rengiyle yanar */
  .doc__row.hit{animation:stamphit .75s ease-out}
  @keyframes stamphit{
    0%{background:rgba(59,129,255,.30)}
    100%{background:rgba(59,129,255,0)}
  }
  /* henüz damgalanmamış satır: doldurulacak boş alan çizgisi */
  .doc__row:not(.on) .val{
    opacity:1; transform:none; color:transparent;
    background:linear-gradient(90deg, rgba(10,16,51,.16) 0 100%);
    background-size:100% 1px; background-position:0 84%; background-repeat:no-repeat;
  }
  .doc__row .val i{font-style:normal; color:var(--royal)}
  .doc__stamp{
    align-self:center; margin:9px 0 2px; padding:5px 14px;
    border:2px solid var(--accent); border-radius:3px; color:var(--accent);
    font-size:10.5px; font-weight:500; letter-spacing:.24em; text-transform:uppercase;
    transform:rotate(-8deg) scale(2.2); opacity:0;
    transition:opacity .18s ease-out, transform .42s cubic-bezier(.2,1.6,.35,1);
  }
  .doc__stamp.on{opacity:.92; transform:rotate(-8deg) scale(1)}
  /* finalde belge öne çıkar: imza hareket kapanışı taşır */
  /* final: belge tamamlanınca yukarı süzülür — sahnedeki aracı ve logosunu açar */
  .doc.done{
    transform:translateY(-26vh);
    box-shadow:0 34px 74px rgba(10,16,51,.24), 0 4px 12px rgba(10,16,51,.11);
    border-color:rgba(0,13,149,.42);
  }
  @media (max-width:860px){
    .doc{left:12px; right:12px; bottom:10px; width:auto; transform-origin:bottom center}
    .doc.done{transform:none}
    .doc__body{flex-direction:row; flex-wrap:wrap; gap:0 16px; padding:6px 14px 10px}
    .doc__row{border-bottom:none; padding:3px 0; margin:0}
    .doc__row .lab{display:none}
    .doc__stamp{margin:6px 0 2px}
  }
  @media (prefers-reduced-motion:reduce){
    .doc,.doc__row .val,.doc__stamp{transition:none}
    .doc__row.hit{animation:none}
  }


/* --- Arapça: uçuş da sağdan sola --- */
/* Arapça: Kufi yüzü Barlow Condensed'ten çok daha geniştir; başlık ölçeği düşer */
html[dir="rtl"] .wf-copy{max-width:min(30em,48vw)}
html[dir="rtl"] .wf-copy h1{font-size:clamp(2rem,4vw,3.4rem)}
html[dir="rtl"] .wf-copy h2{font-size:clamp(1.5rem,2.8vw,2.3rem)}
@media (max-width:860px){
  html[dir="rtl"] .wf-copy h1{font-size:clamp(2rem,8.4vw,2.7rem)}
  html[dir="rtl"] .wf-copy h2{font-size:clamp(1.5rem,6vw,2rem)}
}
html[dir="rtl"] .rail__leg span{transform:translateX(4px)}
html[dir="rtl"] .rail__leg:hover span,html[dir="rtl"] .rail__leg:focus-visible span,
html[dir="rtl"] .rail__leg[aria-current="true"] span{transform:none}
html[dir="rtl"] .rail__leg span,html[dir="rtl"] .rail__alt{letter-spacing:.1em}
html[dir="rtl"] .doc{transform-origin:bottom left}
html[dir="rtl"] .doc.done{transform:translateY(-26vh)}
html[dir="rtl"] .doc__row .val{transform-origin:left center}
html[dir="rtl"] .doc__stamp{transform:rotate(8deg) scale(2.2)}
html[dir="rtl"] .doc__stamp.on{transform:rotate(8deg) scale(1)}
html[dir="rtl"] .wf-copy h1,html[dir="rtl"] .wf-copy h2{text-transform:none;line-height:1.2}
html[dir="rtl"] .wf-copy .k{letter-spacing:0;text-transform:none;font-size:13px}

/* Ray masaüstünde sol kenarda duruyor; metin bloğu onun altına girmemeli.
   Etiket açıldığında ray ~130px yer kaplıyor. */
@media (min-width:861px){
  .wf-copy{padding-inline-start:96px}
}
@media (min-width:1200px){
  .wf-copy{padding-inline-start:118px}
}