/* STAİ — "Gerekçeli kararı saniyeler içinde okur" bölümü (ana sayfa + Projeler). */
.staiu-nasil{position:relative;overflow:hidden;background:linear-gradient(180deg,#001226 0%,#001f3f 55%,#00152c 100%);color:#e2e8f0;padding:110px 0 120px;font-family:Outfit,Inter,system-ui,sans-serif}
.staiu-nasil:before,.staiu-nasil:after{content:"";position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none}
.staiu-nasil:before{width:620px;height:620px;top:-220px;left:-180px;background:radial-gradient(circle,rgba(56,189,248,.25),transparent 70%)}
.staiu-nasil:after{width:560px;height:560px;bottom:-220px;right:-160px;background:radial-gradient(circle,rgba(129,140,248,.25),transparent 70%)}
.staiu-nasil-ic{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 20px}
.staiu-nasil svg{display:inline-block;flex:0 0 auto}

/* Başlık */
.staiu-nasil-bas{text-align:center;max-width:860px;margin:0 auto}
.staiu-etiket{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.3);color:#7dd3fc;font-weight:700;font-size:.85rem;letter-spacing:.03em;margin-bottom:22px}
.staiu-etiket svg{width:16px;height:16px}
.staiu-nasil-bas h2{text-wrap:balance;font-size:clamp(2rem,4.2vw,3.3rem);font-weight:800;line-height:1.15;color:#fff;margin:0 0 20px}
.staiu-vurgu-yazi{background:linear-gradient(90deg,#38bdf8,#818cf8,#39cccc,#38bdf8);background-size:250% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:staiuParla 5s linear infinite}
.staiu-nasil-bas p{font-size:1.12rem;line-height:1.75;color:#cbd5e1;font-weight:300;margin:0}

/* Canlı demo */
.staiu-demo{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:26px;margin:64px 0 70px}
.staiu-belge{text-align:left;position:relative;overflow:hidden;background:#f8fafc;color:#0f172a;border-radius:18px;padding:26px 26px 30px;box-shadow:0 30px 60px rgba(0,0,0,.45);transform:rotate(-1.5deg)}
.staiu-belge-ust{text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:18px;font-size:.78rem;color:#334155;letter-spacing:.04em}
.staiu-belge-ust b{font-size:.86rem;color:#0f172a}
.staiu-belge-ust i{position:absolute;top:12px;right:12px;font-style:normal;font-size:.68rem;font-weight:700;color:#b45309;background:#fef3c7;border-radius:999px;padding:3px 9px}
.staiu-satir{height:9px;border-radius:5px;background:#e2e8f0;margin:9px 0;width:100%}
.staiu-satir:has(.staiu-alan){height:auto;background:none;margin:12px 0}
.staiu-satir.w60{width:60%}.staiu-satir.w65{width:65%}.staiu-satir.w70{width:70%}.staiu-satir.w75{width:75%}.staiu-satir.w80{width:80%}.staiu-satir.w85{width:85%}.staiu-satir.w90{width:90%}.staiu-satir.w95{width:95%}
.staiu-alan{display:inline-block;font-size:.86rem;font-weight:600;color:#0f172a;padding:3px 8px;border-radius:7px;animation:staiuVurgu 10s var(--g,0s) infinite both}
.staiu-tarama{position:absolute;left:0;right:0;top:-70px;height:70px;background:linear-gradient(180deg,transparent,rgba(56,189,248,.28));border-bottom:2px solid #38bdf8;box-shadow:0 6px 18px rgba(56,189,248,.6);animation:staiuTara 10s linear infinite;pointer-events:none}

.staiu-kopru{display:flex;flex-direction:column;align-items:center;gap:10px}
.staiu-kopru-cizgi{width:2px;height:60px;border-radius:2px;background:linear-gradient(180deg,transparent,#38bdf8,transparent);background-size:100% 200%;animation:staiuAkis 1.6s linear infinite}
.staiu-yz-rozet{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;padding:10px 16px;border-radius:999px;background:linear-gradient(90deg,#38bdf8,#818cf8);color:#0b1220;font-weight:800;font-size:.85rem;box-shadow:0 0 0 0 rgba(56,189,248,.6);animation:staiuRozetNabiz 2s ease-out infinite}
.staiu-yz-rozet svg{width:18px;height:18px;animation:staiuDonIkon 3s linear infinite}

.staiu-form-kart{text-align:left;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:22px;backdrop-filter:blur(14px);box-shadow:0 30px 60px rgba(0,0,0,.4)}
.staiu-form-bas{display:flex;align-items:center;gap:8px;font-weight:700;color:#fff;margin-bottom:14px;flex-wrap:wrap}
.staiu-form-bas svg{width:20px;height:20px;color:#38bdf8}
.staiu-form-bas em{font-style:normal;font-size:.72rem;font-weight:700;color:#34d399;background:rgba(52,211,153,.12);border:1px solid rgba(52,211,153,.3);border-radius:999px;padding:2px 9px}
.staiu-form-alan{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;margin-bottom:9px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);animation:staiuAlanParla 10s var(--g,0s) infinite both}
.staiu-form-alan label{margin:0;font-size:.8rem;color:#94a3b8}
.staiu-form-alan b{font-size:.9rem;color:#fff;animation:staiuDoldur 10s var(--g,0s) infinite both}
.staiu-sonuclar{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.staiu-sonuclar span{font-size:.78rem;font-weight:700;color:#0b1220;padding:7px 12px;border-radius:999px;background:linear-gradient(90deg,#38bdf8,#818cf8);box-shadow:0 8px 20px rgba(56,189,248,.35);animation:staiuSonuc 10s var(--g,0s) infinite both}

/* Adımlar */
.staiu-adimlar{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.staiu-adim{text-align:left;position:relative;padding:28px 24px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);transition:translate .4s ease,border-color .4s ease,box-shadow .4s ease,background .4s ease}
.staiu-adim:hover{translate:0 -8px;border-color:rgba(56,189,248,.45);background:rgba(255,255,255,.06);box-shadow:0 22px 44px rgba(0,0,0,.35),0 0 30px rgba(56,189,248,.18)}
.staiu-adim-ikon{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(56,189,248,.25),rgba(129,140,248,.25));border:1px solid rgba(56,189,248,.35);color:#7dd3fc;margin-bottom:18px;transition:transform .4s ease}
.staiu-adim:hover .staiu-adim-ikon{transform:rotate(-8deg) scale(1.08)}
.staiu-adim-ikon svg{width:28px;height:28px}
.staiu-adim-no{position:absolute;top:18px;right:22px;font-size:2.4rem;font-weight:800;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(125,211,252,.35)}
.staiu-adim h3{font-size:1.15rem;font-weight:700;color:#fff;margin:0 0 10px}
.staiu-adim p{font-size:.93rem;line-height:1.65;color:#94a3b8;margin:0}

/* Faydalar */
.staiu-faydalar{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
.staiu-fayda{text-align:left;display:flex;gap:16px;align-items:flex-start;padding:24px;border-radius:20px;background:linear-gradient(135deg,rgba(56,189,248,.08),rgba(129,140,248,.06));border:1px solid rgba(56,189,248,.18)}
.staiu-fayda>svg{width:36px;height:36px;color:#38bdf8}
.staiu-fayda b{display:block;color:#fff;font-size:1.08rem;margin-bottom:6px}
.staiu-fayda span{display:block;color:#a8b8cc;font-size:.92rem;line-height:1.6}

.staiu-nasil-cta{text-align:center;margin-top:48px}
.staiu-cta-buton{display:inline-flex;align-items:center;gap:10px;padding:15px 34px;border-radius:999px;background:linear-gradient(90deg,#38bdf8,#818cf8);color:#0b1220!important;font-weight:800;font-size:1.05rem;text-decoration:none!important;box-shadow:0 14px 34px rgba(56,189,248,.4);transition:transform .25s ease,box-shadow .25s ease}
.staiu-cta-buton span{transition:transform .25s ease}
.staiu-cta-buton:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(56,189,248,.55)}
.staiu-cta-buton:hover span{transform:translateX(5px)}

/* Kaydırınca belirme (yalnızca efekt dosyası yüklendiyse gizlenir) */
.staiu-js .staiu-reveal{opacity:0;translate:0 34px;transition:opacity .9s var(--r,0s) ease,translate .9s var(--r,0s) cubic-bezier(.2,.8,.2,1)}
.staiu-js .staiu-reveal.staiu-gorundu{opacity:1;translate:0 0}

@media (max-width:991px){
  .staiu-demo{grid-template-columns:1fr;gap:18px}
  .staiu-kopru{flex-direction:row}
  .staiu-kopru-cizgi{width:50px;height:2px;background:linear-gradient(90deg,transparent,#38bdf8,transparent);background-size:200% 100%}
  .staiu-belge{transform:none}
  .staiu-adimlar{grid-template-columns:repeat(2,1fr)}
  .staiu-faydalar{grid-template-columns:1fr}
}
@media (max-width:575px){
  .staiu-nasil{padding:80px 0 90px}
  .staiu-adimlar{grid-template-columns:1fr}
  .staiu-kopru-cizgi{width:24px}
}

@keyframes staiuParla{to{background-position:250% center}}
@keyframes staiuTara{0%{top:-70px;opacity:0}3%{opacity:1}30%{top:100%;opacity:1}33%,100%{top:100%;opacity:0}}
@keyframes staiuVurgu{0%{background:transparent;box-shadow:none}4%,80%{background:rgba(56,189,248,.25);box-shadow:0 0 0 2px rgba(56,189,248,.6)}88%,100%{background:transparent;box-shadow:none}}
@keyframes staiuAkis{from{background-position:0 100%}to{background-position:0 -100%}}
@keyframes staiuRozetNabiz{0%{box-shadow:0 0 0 0 rgba(56,189,248,.55)}70%{box-shadow:0 0 0 14px rgba(56,189,248,0)}100%{box-shadow:0 0 0 0 rgba(56,189,248,0)}}
@keyframes staiuDonIkon{to{transform:rotate(360deg)}}
@keyframes staiuAlanParla{0%{border-color:rgba(255,255,255,.08);box-shadow:none}3%{border-color:#38bdf8;box-shadow:0 0 18px rgba(56,189,248,.35)}14%,100%{border-color:rgba(255,255,255,.08);box-shadow:none}}
@keyframes staiuDoldur{0%{opacity:0;transform:translateX(-10px)}4%,82%{opacity:1;transform:none}90%,100%{opacity:0;transform:none}}
@keyframes staiuSonuc{0%{opacity:0;transform:scale(.6)}4%{opacity:1;transform:scale(1.08)}7%,80%{opacity:1;transform:scale(1)}88%,100%{opacity:0;transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  .staiu-nasil *{animation:none!important}
  .staiu-alan{background:rgba(56,189,248,.2)}
  .staiu-js .staiu-reveal{opacity:1;translate:0 0;transition:none}
}

/* ---------- İlk ekrandan bölüme davetler ---------- */
.staiu-nasil{scroll-margin-top:20px}
.staiu-kaydir{position:fixed;left:50%;bottom:22px;translate:-50% 0;z-index:1040;transition:opacity .45s ease,translate .45s ease;display:flex;flex-direction:column;align-items:center;gap:6px;background:none;border:0;padding:0;color:#e2e8f0;cursor:pointer;animation:staiuDavetGir 1s .9s both}
.staiu-kaydir-ic,.staiu-kaydir-mini{display:inline-flex;align-items:center;gap:10px;padding:11px 22px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(56,189,248,.4);backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 0 rgba(56,189,248,.45);font-weight:600;font-size:.95rem;color:#e2e8f0;transition:border-color .3s ease,background .3s ease,box-shadow .3s ease;animation:staiuDavetNabiz 2.6s ease-out infinite}
.staiu-kaydir-ic b,.staiu-kaydir-mini b{color:#38bdf8;font-weight:800}
.staiu-kaydir:hover .staiu-kaydir-ic,.staiu-kaydir-mini:hover{border-color:#38bdf8;background:rgba(56,189,248,.14)}
.staiu-simsek{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#38bdf8,#818cf8);color:#0b1220;font-size:.85rem;flex:0 0 auto}
.staiu-ok-asagi{width:26px;height:26px;color:#38bdf8;animation:staiuZipla 1.6s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(56,189,248,.7))}
.staiu-kaydir-mini{position:relative;z-index:2;margin-top:28px;cursor:pointer;animation:staiuDavetGirMini .9s .4s both,staiuDavetNabiz 2.6s 1.3s ease-out infinite}
.staiu-nasil-buton{display:inline-flex!important;align-items:center;gap:10px;background:rgba(255,255,255,.06)!important;border:1px solid rgba(56,189,248,.5)!important;color:#e2e8f0!important;backdrop-filter:blur(10px);transition:background .3s ease,box-shadow .3s ease,transform .25s ease!important}
.staiu-nasil-buton:hover{background:rgba(56,189,248,.16)!important;box-shadow:0 0 26px rgba(56,189,248,.35);transform:translateY(-2px)}
.staiu-oynat{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#38bdf8,#818cf8);color:#0b1220;font-size:.62rem;padding-left:2px}
@keyframes staiuDavetGir{from{opacity:0;translate:-50% 16px}to{opacity:1;translate:-50% 0}}
@keyframes staiuDavetGirMini{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes staiuZipla{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes staiuDavetNabiz{0%{box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 0 rgba(56,189,248,.45)}70%{box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 12px rgba(56,189,248,0)}100%{box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 0 0 rgba(56,189,248,0)}}
@media (max-width:575px){.staiu-kaydir-ic,.staiu-kaydir-mini{font-size:.82rem;padding:9px 14px}.staiu-kaydir{width:92%}}
@media (prefers-reduced-motion:reduce){.staiu-kaydir,.staiu-kaydir-ic,.staiu-kaydir-mini,.staiu-ok-asagi{animation:none!important}}

.staiu-nasil-gecildi .staiu-kaydir{opacity:0;translate:-50% 24px;pointer-events:none}
/* Yüzen davet: her içeriğin üzerinde net okunsun */
.staiu-kaydir .staiu-kaydir-ic{background:rgba(6,18,38,.94);border-color:rgba(56,189,248,.65);box-shadow:0 16px 40px rgba(0,0,0,.55),0 0 0 0 rgba(56,189,248,.45)}
.staiu-kaydir:hover .staiu-kaydir-ic{background:rgba(10,32,64,.97)}
.staiu-kaydir .staiu-ok-asagi{background:rgba(6,18,38,.9);border-radius:50%;padding:3px;box-shadow:0 6px 16px rgba(0,0,0,.5)}