/* STAİ — Projeler sayfası efektleri (React koduna dokunmadan, ek stil). */
@property --staiu-aci{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- LİSTE GÖRÜNÜMÜ ---------- */
.projects-page{position:relative;overflow:hidden}
.projects-page:before,.projects-page:after{content:"";position:absolute;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0}
.projects-page:before{width:520px;height:520px;top:-140px;left:-120px;background:radial-gradient(circle,rgba(56,189,248,.35),transparent 70%);animation:staiuKure1 18s ease-in-out infinite}
.projects-page:after{width:600px;height:600px;bottom:-200px;right:-160px;background:radial-gradient(circle,rgba(129,140,248,.3),transparent 70%);animation:staiuKure2 22s ease-in-out infinite}
.projects-hero,.projects-grid-section{position:relative;z-index:2}
.projects-grid-section{z-index:3}

.projects-title{background:linear-gradient(90deg,#fff 0%,#7dd3fc 25%,#fff 50%,#a5b4fc 75%,#fff 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:staiuYukari .9s cubic-bezier(.2,.8,.2,1) both,staiuParla 6s linear infinite}
.projects-subtitle{animation:staiuYukari .9s .15s cubic-bezier(.2,.8,.2,1) both}

.projects-grid-section .row>*{animation:staiuKartGiris .9s cubic-bezier(.2,.8,.2,1) both}
.projects-grid-section .row>:nth-child(2){animation-delay:.12s}
.projects-grid-section .row>:nth-child(3){animation-delay:.24s}
.projects-grid-section .row>:nth-child(4){animation-delay:.36s}

.modern-project-card{position:relative;--rx:0deg;--ry:0deg;--ty:0px;--mx:50%;--my:50%;transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty));transition:transform .3s ease-out,box-shadow .5s ease;will-change:transform}
.modern-project-card:hover{--ty:-12px;transform:perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty));box-shadow:0 30px 60px rgba(0,0,0,.35),0 0 40px rgba(56,189,248,.28)}
/* dönen renkli çerçeve */
.modern-project-card:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--staiu-aci),#38bdf8,#818cf8,#39cccc,#38bdf8);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s ease;animation:staiuAci 4s linear infinite;pointer-events:none;z-index:4}
.modern-project-card:hover:before{opacity:1}
/* fareyi takip eden ışık */
.modern-project-card:after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.35),transparent 42%);opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:3;mix-blend-mode:soft-light}
.modern-project-card:hover:after{opacity:1}
.project-meta-badge{z-index:2;animation:staiuRozet 3.5s ease-in-out infinite}
.view-project-btn{position:relative;overflow:hidden}
.view-project-btn:after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg)}
.modern-project-card:hover .view-project-btn:after{animation:staiuButonParilti .9s ease}

/* ---------- DETAY GÖRÜNÜMÜ ---------- */
.project-detail-wrapper{position:relative;overflow:hidden;background:linear-gradient(135deg,#000b18 0%,#001f3f 50%,#003366 100%)!important}
.project-detail-wrapper:before,.project-detail-wrapper:after{content:"";position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
.project-detail-wrapper:before{width:560px;height:560px;top:-160px;right:-140px;background:radial-gradient(circle,rgba(56,189,248,.3),transparent 70%);animation:staiuKure2 20s ease-in-out infinite}
.project-detail-wrapper:after{width:520px;height:520px;bottom:-200px;left:-150px;background:radial-gradient(circle,rgba(129,140,248,.28),transparent 70%);animation:staiuKure1 24s ease-in-out infinite}
.project-detail-wrapper>.container,.project-detail-wrapper>.container-lg{position:relative;z-index:2}

.back-btn{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.14)!important;color:#e2e8f0!important;backdrop-filter:blur(12px)}
.back-btn:hover{background:rgba(255,255,255,.12)!important;box-shadow:0 0 24px rgba(56,189,248,.3)}

.detail-main-card{background:rgba(255,255,255,.04)!important;border:1px solid rgba(255,255,255,.09)!important;backdrop-filter:blur(18px);box-shadow:0 30px 70px rgba(0,0,0,.45)!important;animation:staiuKartAc .8s cubic-bezier(.2,.8,.2,1) both}

.phone-mockup-container{position:relative;background:transparent!important;border-color:rgba(255,255,255,.07)!important;overflow:hidden;--rx:0deg;--ry:0deg;--mx:50%;--my:30%}
.phone-mockup-container:before{content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.45),rgba(129,140,248,.18) 45%,transparent 70%);filter:blur(30px);animation:staiuNabiz2 5s ease-in-out infinite;pointer-events:none}
.phone-mockup-container:after{content:"";position:absolute;width:92%;aspect-ratio:1;border-radius:50%;border:1px dashed rgba(56,189,248,.28);animation:staiuDon2 60s linear infinite;pointer-events:none}
.phone-mockup{position:relative;z-index:1;overflow:hidden;transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .35s ease-out,box-shadow .5s ease;animation:staiuSuzul2 6s ease-in-out infinite;box-shadow:0 35px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.05)!important}
.phone-mockup-container:hover .phone-mockup{box-shadow:0 40px 80px rgba(0,0,0,.6),0 0 50px rgba(56,189,248,.4)!important}
.phone-mockup:after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.3) 48%,rgba(255,255,255,.06) 54%,transparent 64%);transform:translateX(-130%);animation:staiuParilti2 7s ease-in-out infinite}
.phone-mockup:before{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.18),transparent 45%);opacity:0;transition:opacity .4s ease}
.phone-mockup-container:hover .phone-mockup:before{opacity:1}
.phone-mockup .carousel-control-prev,.phone-mockup .carousel-control-next{width:44px;height:44px;top:50%;transform:translateY(-50%);margin:0 6px;border-radius:50%;background:rgba(15,23,42,.55);backdrop-filter:blur(8px);opacity:0;transition:opacity .3s ease,background .3s ease}
.phone-mockup:hover .carousel-control-prev,.phone-mockup:hover .carousel-control-next{opacity:1}
.phone-mockup .carousel-control-prev:hover,.phone-mockup .carousel-control-next:hover{background:rgba(56,189,248,.75)}

.detail-text-container{--staiu-p:0}
.step-indicator{color:#38bdf8!important;position:relative;padding-bottom:16px}
.step-indicator:before,.step-indicator:after{content:"";position:absolute;bottom:0;height:4px;border-radius:4px;left:0}
.step-indicator:before{width:220px;background:rgba(255,255,255,.1)}
.step-indicator:after{width:calc(220px * var(--staiu-p));background:linear-gradient(90deg,#38bdf8,#818cf8);box-shadow:0 0 12px rgba(56,189,248,.6);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.slide-title{background:linear-gradient(90deg,#fff,#cbd5e1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.slide-desc{color:#cbd5e1!important}
.staiu-yenile{animation:staiuYukari .6s cubic-bezier(.2,.8,.2,1) both}
.slide-desc.staiu-yenile{animation-delay:.08s}
.nav-controls .btn-outline-dark{color:#e2e8f0;border-color:rgba(226,232,240,.35);background:rgba(255,255,255,.03)}
.nav-controls .btn-outline-dark:hover:not(:disabled){background:rgba(255,255,255,.12);color:#fff;border-color:rgba(226,232,240,.6)}
.nav-controls .btn-dark{background:linear-gradient(90deg,#38bdf8,#818cf8);border:none;color:#0b1220;font-weight:700;box-shadow:0 10px 26px rgba(56,189,248,.35);transition:transform .25s ease,box-shadow .25s ease}
.nav-controls .btn-dark:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 32px rgba(56,189,248,.5);color:#0b1220}
.nav-controls .btn:disabled{opacity:.35}

.step-indicator[data-staiu-hiza="center"]:before,.step-indicator[data-staiu-hiza="center"]:after{left:50%;margin-left:-110px}
.detail-text-container:has(.step-indicator[data-staiu-hiza="center"]) .nav-controls{justify-content:center}

/* ---------- ANİMASYONLAR ---------- */
@keyframes staiuYukari{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
@keyframes staiuKartGiris{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
@keyframes staiuKartAc{from{opacity:0;scale:.96;translate:0 24px}to{opacity:1;scale:1;translate:0 0}}
@keyframes staiuParla{to{background-position:200% center}}
@keyframes staiuAci{to{--staiu-aci:360deg}}
@keyframes staiuRozet{0%,100%{box-shadow:0 4px 10px rgba(0,0,0,.1)}50%{box-shadow:0 4px 18px rgba(56,189,248,.55)}}
@keyframes staiuButonParilti{to{left:130%}}
@keyframes staiuKure1{0%,100%{translate:0 0}50%{translate:80px 60px}}
@keyframes staiuKure2{0%,100%{translate:0 0}50%{translate:-70px -50px}}
@keyframes staiuNabiz2{0%,100%{scale:.92;opacity:.7}50%{scale:1.06;opacity:1}}
@keyframes staiuDon2{to{rotate:360deg}}
@keyframes staiuSuzul2{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes staiuParilti2{0%,62%{transform:translateX(-130%)}82%,100%{transform:translateX(130%)}}

@media (prefers-reduced-motion:reduce){
  .projects-page:before,.projects-page:after,.project-detail-wrapper:before,.project-detail-wrapper:after,
  .projects-title,.projects-subtitle,.projects-grid-section .row>*,.modern-project-card:before,.project-meta-badge,
  .detail-main-card,.phone-mockup,.phone-mockup:after,.phone-mockup-container:before,.phone-mockup-container:after,.staiu-yenile{animation:none!important}
  .modern-project-card,.phone-mockup{transform:none!important}
}