/* NEFES · 15 Ekim 2026 (Claude): yerinde duran sahneler, 05 Portföy, yeni Hizmet */

/* 1) Sahne geçişi: ekran kaymaz; yeni sahne yerinde belirir, içerik ekrana gelir */
.scene{transform:scale(1.03)!important}
.scene.active{transform:none!important}
.scene.leave-up,.scene.leave-down{transform:scale(.97)!important}
.scene>.sahne-zemin{animation:none!important}
.scene.active>*:not(.sahne-zemin){animation-name:n5-gel;animation-duration:.7s;animation-timing-function:cubic-bezier(.2,.8,.2,1);animation-fill-mode:backwards}
.scene.active>*:nth-child(3){animation-delay:.08s}.scene.active>*:nth-child(4){animation-delay:.16s}.scene.active>*:nth-child(5){animation-delay:.24s}
.scene.active>*:nth-child(6){animation-delay:.32s}.scene.active>*:nth-child(7){animation-delay:.4s}.scene.active>*:nth-child(n+8){animation-delay:.46s}
.scene-hero.active .hero-phone-wrap{animation:phone-float 6.5s ease-in-out infinite!important}
@keyframes n5-gel{from{opacity:0;translate:0 22px;scale:.98}to{opacity:1;translate:0 0;scale:1}}
@media (prefers-reduced-motion:reduce){.scene.active>*{animation:none!important}}

/* 2) Nasıl çubuğu 5 adım; Dönüşüm = 05 Portföy */
.how-rail.n5-bes{grid-template-columns:repeat(5,1fr)!important}
.how-rail [data-n5git]{position:relative;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:5px;color:#7f9e9b;font-size:12px;font-weight:600}
.how-rail [data-n5git] b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 10px/1 var(--display);background:#0b1d20;border:1px solid rgba(150,230,224,.28);color:#9dbab6}
#donusum.n5-portfoy>.section-header,#donusum.n5-portfoy>.compare-stage,#donusum.n5-portfoy>.compare-dots,#donusum.n5-portfoy>.compare-note{display:none!important}
.n5-ray{position:absolute;z-index:5;left:24px;right:24px;top:calc(70px + env(safe-area-inset-top,0px));display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.n5-cizgi{position:absolute;left:14px;right:14px;top:13px;height:2px;background:linear-gradient(90deg,#1aa9a3,#7cf6ee);box-shadow:0 0 10px rgba(101,236,227,.55);border-radius:2px}
.n5-ray button{position:relative;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:5px;color:#9fbab7;font-size:12px;font-weight:600;font-family:inherit}
.n5-ray b{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 10px/1 var(--display);background:#0f3434;border:1px solid #3ccfc7;color:#c8fff9}
.n5-ray button.on{color:#effffd}
.n5-ray button.on b{background:linear-gradient(135deg,#82f4ed,#33c6c2);border-color:#b7fff8;color:#052024;box-shadow:0 0 0 5px rgba(101,236,227,.12),0 0 18px rgba(101,236,227,.45)}
#donusum .pf.gomulu{position:absolute;inset:calc(124px + env(safe-area-inset-top,0px)) 0 calc(4.2% + 64px) 0;z-index:3;opacity:1!important;transform:none!important;background:none;padding:0 0 4px;transition:none;display:flex}
#donusum .pf.gomulu[hidden]{display:flex}
#donusum .pf.gomulu .pf-x{display:none}
#donusum .pf.gomulu .pf-bar{padding:0 20px}
#donusum .pf.gomulu .pf-ust{font-size:11px}
#donusum .pf.gomulu h2{font-size:clamp(24px,6.6vw,32px)}
#donusum .pf.gomulu .pf-not{display:none}
@media (max-height:700px){#donusum .pf.gomulu .pf-deste{display:none}}

/* 3) Hizmet */
#hizmetler.n5-hizmet .platform-strip,#hizmetler.n5-hizmet .service-list,#hizmetler.n5-hizmet .panel-teaser{display:none!important}
.n5-hz{position:relative;z-index:3;flex:1 1 0;min-height:0;margin:10px 16px 12px;display:grid;grid-template-columns:44% 1fr;gap:12px}
#hizmetler.n5-hizmet .service-catalog-link{flex:none}
.n5-film{position:relative;border-radius:20px;overflow:hidden;background:#000;box-shadow:0 0 0 1px rgba(160,190,255,.28),0 24px 60px rgba(0,0,0,.6),0 -20px 80px rgba(90,130,255,.16)}
.n5-film>img,.n5-film>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 2.6s linear,opacity .5s}
.n5-film .n5-vid{opacity:0}
.n5-film[data-a="2"] .n5-vid,.n5-film[data-a="3"] .n5-vid,.n5-film[data-a="4"] .n5-vid{opacity:1}
.n5-film[data-a="2"]>img,.n5-film[data-a="2"]>video{transform:scale(1.14)}
.n5-ka{position:absolute;inset:0;opacity:0;transition:opacity .45s}
.n5-film[data-a="1"] .n5-ka{opacity:1}
.n5-ka img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.n5-sonra{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 calc((1 - min(1, var(--q,0) * 1.6)) * 100%) 0)}
.n5-tara{position:absolute;left:-10%;right:-10%;height:3px;top:calc(min(1, var(--q,0) * 1.6) * 100%);background:#ffe7b8;box-shadow:0 0 16px 6px rgba(255,214,140,.6);opacity:0}
.n5-film[data-a="1"] .n5-tara{opacity:1}
.n5-bant{position:absolute;left:0;right:0;height:0;background:#000;z-index:2;transition:height .5s}
.n5-bant.u{top:0}.n5-bant.a{bottom:0}
.n5-film[data-a="2"] .n5-bant{height:12%}
.n5-rec{position:absolute;left:10px;top:10px;z-index:3;display:flex;align-items:center;gap:5px;font:800 10.5px/1 var(--font);letter-spacing:.1em;color:#fff;opacity:0;transition:opacity .3s}
.n5-rec i{width:8px;height:8px;border-radius:50%;background:#ff4b4b;box-shadow:0 0 8px #ff4b4b;animation:n5rec 1s steps(2) infinite}
.n5-rec b{font-weight:600;color:#dfe6ff}
.n5-film[data-a="2"] .n5-rec{opacity:1}
@keyframes n5rec{50%{opacity:.2}}
.n5-kanal{position:absolute;left:8px;right:8px;bottom:10px;z-index:3;display:flex;justify-content:center;gap:6px}
.n5-kanal span{position:relative;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#0e1830;border:1px solid rgba(160,190,255,.45);color:#fff;opacity:0;transform:translateY(14px) scale(.6);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
.n5-kanal span .icon{width:16px;height:16px;fill:currentColor}
.n5-kanal span::after{content:"";position:absolute;right:-4px;top:-4px;width:12px;height:12px;border-radius:50%;background:#65ece3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23052022' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/70% no-repeat}
.n5-film[data-a="0"] .n5-kanal span{opacity:1;transform:none}
.n5-film[data-a="0"] .n5-kanal span:nth-child(2){transition-delay:.2s}.n5-film[data-a="0"] .n5-kanal span:nth-child(3){transition-delay:.4s}.n5-film[data-a="0"] .n5-kanal span:nth-child(4){transition-delay:.6s}.n5-film[data-a="0"] .n5-kanal span:nth-child(5){transition-delay:.8s}
.n5-senaryo{position:absolute;left:6px;right:6px;bottom:8px;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;opacity:0;transform:translateY(20px);transition:opacity .4s,transform .5s}
.n5-film[data-a="3"] .n5-senaryo{opacity:1;transform:none}
.n5-senaryo span{border-radius:8px;overflow:hidden;background:#0d1426;border:1px solid rgba(160,190,255,.35)}
.n5-senaryo span.on{border-color:#a9bcff;box-shadow:0 0 12px rgba(120,150,255,.55)}
.n5-senaryo img{display:block;width:100%;aspect-ratio:9/12;object-fit:cover}
.n5-senaryo b{display:block;padding:3px 4px;font:700 9.5px/1.1 var(--font);color:#e8eeff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n5-muzik{position:absolute;left:8px;right:8px;bottom:10px;z-index:3;display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:999px;background:rgba(8,12,26,.85);border:1px solid rgba(160,190,255,.35);opacity:0;transition:opacity .4s}
.n5-film[data-a="4"] .n5-muzik{opacity:1}
.n5-muzik .n5-i{width:16px;height:16px;color:#b8c8ff;flex:none}
.n5-dalga{flex:1;display:flex;align-items:center;gap:2px;height:20px}
.n5-dalga i{flex:1;border-radius:2px;background:linear-gradient(180deg,#c7d4ff,#7f97ff);height:20%}
.n5-marka{position:absolute;right:8px;top:8px;z-index:3;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.55);font:700 9.5px/1 var(--font);color:#e8eeff}
.n5-film[data-a="2"] .n5-marka{opacity:0}
.n5-i{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.n5-adim{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-height:0}
.n5-adim li{flex:1;min-height:0;display:flex}
.n5-adim button{flex:1;display:flex;align-items:center;gap:9px;text-align:left;padding:6px 9px;border-radius:14px;border:1px solid rgba(121,235,223,.14);background:rgba(15,40,41,.82);color:#cfe3e1;font:inherit;transition:background .35s,border-color .35s,box-shadow .35s,transform .35s}
.n5-adim .n5-i{width:22px;height:22px;flex:none;color:#7fb7b2}
.n5-adim b{display:block;font:800 clamp(12.5px,3.3vw,15px)/1.18 var(--display);color:#effefa;letter-spacing:-.01em}
.n5-adim small{display:block;margin-top:2px;font:500 clamp(10.5px,2.8vw,12.5px)/1.25 var(--font);color:#9ebcb8}
.n5-adim li.on button{background:linear-gradient(125deg,rgba(33,140,134,.42),rgba(10,40,44,.9));border-color:#65ece3;box-shadow:0 0 18px rgba(101,236,227,.28);transform:translateX(-3px)}
.n5-adim li.on .n5-i{color:#65ece3;filter:drop-shadow(0 0 6px rgba(101,236,227,.8))}
@media (max-height:700px){.n5-adim small{display:none}}

/* 16 Ekim (gezinme turu): geçişte önceki ekran yenisinin üstünde görünmesin — eski hızla söner, yeni kısa bir aradan sonra gelir */
.scene{transition:opacity .16s ease,transform .22s ease,visibility 0s linear .18s!important}
.scene.active{transition:opacity .42s cubic-bezier(.2,.8,.2,1) .14s,transform .5s cubic-bezier(.2,.8,.2,1) .14s,visibility 0s!important}
/* 16 Ekim (gezinme turu): Keşfet dışındaki ekranlarda üst başlık (sektör, İşletme Paneli, menü) görünmez ama tıklanıyordu;
   üstteki Keşfet/Nasıl/Hizmet/Dene/Başla sekmelerine basınca panel girişine ya da menüye atıyordu. Artık tamamen devre dışı. */
html:not([data-scene="0"]) .global-header,html:not([data-scene="0"]) .global-header *{pointer-events:none!important}
html:not([data-scene="0"]) .global-header{visibility:hidden;transition:opacity .3s,transform .35s,visibility 0s linear .35s!important}
html[data-scene="0"] .global-header{visibility:visible}
