/* Ürüne özel imza sahneleri, açılış motifleri ve büyük bento kutusu (story-sig-*.htm).
   Yalnız transform, opacity ve stroke-dashoffset canlandırılır; düzen ölçüsü değişmez. Döngüler sahne görünmezken durur (.is-on).
   SVG içi yazı ve çizgi kalınlığı --k ile ekrandan bağımsız sabit piksel kalır (story-sig.js, viewBox / gerçek genişlik). */

/* açılış motifi */
.st-hero[data-sg-hero]{isolation:isolate}
.sg-motif{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 35%,transparent 85%);mask-image:radial-gradient(ellipse 75% 70% at 50% 45%,#000 35%,transparent 85%)}
.mt-ln{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1.2;vector-effect:non-scaling-stroke}
.sg-motif--day .mt-sun .mt-ln{stroke:rgba(225,36,58,.45)}
.mt-sun{transform-box:fill-box;transform-origin:center}
.mt-star{fill:#fff;opacity:.4}
.mt-px{fill:rgba(225,36,58,.12);opacity:.2}
.mt-wave{opacity:.5}
.st-hero.is-on .mt-sun{animation:mtSpin 60s linear infinite}
.st-hero.is-on .mt-star{animation:mtTw 4s ease-in-out infinite;animation-delay:var(--d)}
.st-hero.is-on .mt-px{animation:mtPx 4.2s ease-in-out infinite;animation-delay:var(--d)}
.st-hero.is-on .mt-wave{animation:mtWave 3.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes mtSpin{to{transform:rotate(360deg)}}
@keyframes mtTw{50%{opacity:.06}}
@keyframes mtPx{50%{opacity:1}}
@keyframes mtWave{0%,100%{opacity:.25}30%{opacity:1}}

/* büyük bento kutusu (ürünün imza özelliği) ve küçük kutular */
.st-bento--hero{display:block;margin-bottom:20px}
.st-bento--hero>.st-tile{min-height:440px}
.st-tile.is-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 90% at 50% 115%,rgba(225,36,58,.18),transparent 70%)}
.st-tile.is-hero .st-big{font-size:clamp(84px,10vw,160px)}
.st-tile.is-hero .st-tile__lead{font-size:clamp(20px,1.8vw,26px)}
.st-tile.is-hero .st-tile__foot{font-size:15px}
.st-tile.is-hero .st-ir{max-width:none;gap:18px}
.st-tile.is-hero .st-ir i{width:24px;height:24px}
.st-tile.is-hero .st-waves{width:180px;height:96px}
.st-tile.is-hero .st-battery{width:220px;height:70px;border-radius:16px;padding:7px}
.st-tile.is-hero .st-battery::after{top:22px;height:22px;right:-10px;width:6px}
.st-tile.is-hero .st-battery i{border-radius:10px}
.st-tile--cam.is-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-areas:"lead lens" "foot lens";column-gap:48px;padding:48px 48px 48px 64px;text-align:left;align-items:center}
.st-tile--cam.is-hero::after{display:none}
.st-tile--cam.is-hero .st-tile__lead{grid-area:lead;align-self:end;font-size:clamp(26px,2.6vw,40px);line-height:1.2}
.st-tile--cam.is-hero .st-tile__foot{grid-area:foot;align-self:start;position:static;margin-top:18px}
.st-tile--cam.is-hero .st-lens{grid-area:lens;margin:0;height:100%;min-height:340px}
.st-bento--rest .st-tile{min-height:320px}
.st-bento--rest .st-big{font-size:clamp(48px,4.6vw,72px)}

/* sahne çerçevesi */
.st-sig{--k:1;position:relative;background:var(--st-tile);border-radius:32px;margin:20px 0 20px;padding:72px 64px 40px;overflow:hidden;isolation:isolate}
.sg-txt{text-align:center;max-width:820px;margin:0 auto}
.sg-txt .st-p{margin-left:auto;margin-right:auto}
.sg-tag{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase!important;color:var(--st-mute);margin:0 0 18px}
.sg-tag i{width:7px;height:7px;border-radius:50%;background:var(--st-red)}
.sg-stage{max-width:1000px;margin:48px auto 0}
.sg-svg{--k:1;display:block;width:100%;height:auto;overflow:visible}
.sg-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px}
.sg-grid--pair{margin-top:48px}
.sg-panel--box{background:#0b0c0e;border:1px solid var(--st-line);border-radius:20px;padding:6px}
.sg-cap{margin:24px 0 0;text-align:center;font-size:12px;color:#55585e}
.sg-chips{margin-top:28px}
.st-sig:not(.is-on) *{animation-play-state:paused!important}

/* çizgi ve yazı temelleri */
.sg-svg .ln{fill:none;stroke:rgba(255,255,255,.78);stroke-width:calc(1.5px * var(--k));stroke-linecap:round;stroke-linejoin:round}
.sg-svg .ln.dim{stroke:rgba(255,255,255,.3)}
.sg-svg .ln.faint{stroke:rgba(255,255,255,.09)}
.sg-svg .ln.sg-red{stroke:var(--st-red)}
.sg-t{fill:#f5f5f7;font-family:inherit;font-weight:600;font-size:calc(15px * var(--k));font-variant-numeric:tabular-nums}
.sg-t--s{font-size:calc(12px * var(--k));font-weight:500}
.sg-t--l{font-size:calc(22px * var(--k))}
.sg-t--xl{font-size:calc(58px * var(--k));letter-spacing:-.03em}
.sg-mute{fill:var(--st-mute)}
.sg-t--red,.sg-dot{fill:var(--st-red)}
.sg-rec{fill:var(--st-red)}
.st-sig.is-in .sg-rec{animation:sgBlink 1.2s steps(2,jump-none) infinite}
@keyframes sgBlink{50%{opacity:.15}}

/* PT15 · bir vardiya, tek şarj (konumlar story-sig.js ile kaydırmaya bağlı) */
.sg-pt-arc{stroke:var(--st-red)!important;stroke-width:calc(2.5px * var(--k))!important;stroke-dasharray:1 1;stroke-dashoffset:1}
.sg-sun{fill:#000;stroke:#fff!important;stroke-width:calc(2px * var(--k))!important}
.sg-sun-halo{fill:rgba(225,36,58,.2)}
.sg-pt-track{fill:#1b1d22}
.sg-pt-rec{fill:var(--st-red)}
.sg-pt-bat{fill:#f5f5f7}
.sg-pt-route{stroke:var(--st-red)!important;stroke-width:calc(2.5px * var(--k))!important}
.sg-stop{opacity:0;transition:opacity .45s}
.sg-stop.on{opacity:1}
.sg-stop__pin{fill:#000;stroke:#fff;stroke-width:calc(2px * var(--k))}
.sg-star{fill:#fff;opacity:0;transition:opacity .6s}
.sg-star.on{opacity:.75}
.sg-moon{opacity:0;transition:opacity .6s}
.sg-moon.on{opacity:1}
.sg-pt-head__ln{stroke:rgba(255,255,255,.45);stroke-width:calc(1px * var(--k));stroke-dasharray:4 6}

/* X3 · karanlıkta altı göz */
.sg-dark{position:absolute;inset:0;z-index:-1;background:#000;opacity:0;transition:opacity 1.4s}
.st-sig--x3.is-in .sg-dark{opacity:.72}
.sg-led{fill:var(--st-red);opacity:0;transition:opacity .35s var(--d,0s)}
.sg-led-halo{fill:rgba(225,36,58,.28);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .5s var(--d,0s),transform .6s var(--d,0s)}
.st-sig.is-in .sg-led,.st-sig.is-in .sg-led-halo{opacity:1;transform:none}
.sg-led--dim{fill:#5b1a22;opacity:.9}
.sg-led--on{fill:var(--st-red);opacity:1}
.sg-ir-cone{opacity:0;transition:opacity 1.4s 1.7s}
.sg-ir-a .sg-ir-cone{transition-delay:.3s}
.st-sig.is-in .sg-ir-cone{opacity:1}
.sg-ray{stroke:rgba(225,36,58,.65)!important;stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--st-ease) var(--d,0s)}
.st-sig.is-in .sg-ray{stroke-dashoffset:0}
.sg-tick{opacity:0;transition:opacity .4s var(--d,0s)}
.st-sig.is-in .sg-tick{opacity:1}
.sg-ir-target{opacity:0;transition:opacity .7s 2.9s}
.st-sig.is-in .sg-ir-target{opacity:1}
.sg-ir-brk{fill:none;stroke:var(--st-red);stroke-width:calc(2.5px * var(--k));stroke-linecap:round}
.sg-ir-scan{fill:rgba(225,36,58,.55);opacity:0}
.st-sig.is-in .sg-ir-scan{animation:sgScan 3.8s 3.4s linear infinite}
@keyframes sgScan{0%{transform:translateX(0);opacity:0}12%,85%{opacity:1}100%{transform:translateX(720px);opacity:0}}

/* X5 · sarsıntıyı sil */
.sg-shake,.sg-steady{transform-origin:230px 130px}
.st-sig.is-in .sg-shake{animation:sgShake 1.15s linear infinite}
.st-sig.is-in .sg-steady{animation:sgSteady 5s ease-in-out infinite}
@keyframes sgShake{0%{transform:translate(0,0) rotate(0)}12%{transform:translate(-9px,6px) rotate(-1.4deg)}25%{transform:translate(7px,-5px) rotate(1deg)}38%{transform:translate(-5px,-8px) rotate(-.6deg)}50%{transform:translate(10px,7px) rotate(1.5deg)}63%{transform:translate(-8px,3px) rotate(-1.1deg)}76%{transform:translate(6px,-7px) rotate(.8deg)}88%{transform:translate(-4px,5px) rotate(-.5deg)}100%{transform:translate(0,0) rotate(0)}}
@keyframes sgSteady{50%{transform:translate(1px,-1px)}}
.sg-wf__a{stroke:var(--st-red)!important;stroke-width:calc(3px * var(--k))!important;opacity:.18}
.st-sig.is-in .sg-wf__a{animation:sgWf 1.8s var(--d,0s) infinite}
@keyframes sgWf{0%,100%{opacity:.18}35%{opacity:1}}
.sg-pkt{fill:var(--st-red);opacity:0}
.st-sig.is-in .sg-pkt{animation:sgPkt 2.1s var(--d,0s) linear infinite}
@keyframes sgPkt{0%{transform:translateX(0);opacity:0}12%,88%{opacity:1}100%{transform:translateX(190px);opacity:0}}

/* S21 · netlik ve konum */
.sg-sign{fill:#f5f5f7;font-family:inherit;font-weight:700;font-size:14px;letter-spacing:.12em}
.sg-sign--xs{font-size:10px;letter-spacing:.04em}
.sg-px__h{fill:none;stroke:rgba(255,255,255,.26);stroke-width:calc(1px * var(--k));transform-box:fill-box;transform-origin:0 50%;transform:scaleX(0);transition:transform .8s var(--st-ease) var(--d,0s)}
.sg-px__v{fill:none;stroke:rgba(255,255,255,.12);stroke-width:calc(1px * var(--k));opacity:0;transition:opacity 1s 1s}
.st-sig.is-in .sg-px__h{transform:none}
.st-sig.is-in .sg-px__v{opacity:1}
.sg-osd .sg-t{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;fill:#fff}
.sg-osd__bg{fill:rgba(0,0,0,.6);opacity:0;transition:opacity .5s 1.6s}
.sg-osd__pin{fill:var(--st-red)}
.sg-osd__l{opacity:0;transform:translateY(6px);transition:opacity .5s calc(1.8s + var(--d,0s)),transform .5s calc(1.8s + var(--d,0s))}
.st-sig.is-in .sg-osd__bg{opacity:1}
.st-sig.is-in .sg-osd__l{opacity:1;transform:none}

@media (max-width:991.98px){
  .st-sig{padding:56px 32px 32px}
  .st-tile--cam.is-hero{grid-template-columns:1fr;grid-template-areas:"lead" "foot" "lens";padding:40px 32px 0;text-align:center;row-gap:0}
  .st-tile--cam.is-hero .st-lens{min-height:260px;margin-top:24px}
}
@media (max-width:767.98px){
  .sg-grid{grid-template-columns:1fr}
}
@media (max-width:575.98px){
  .st-sig{padding:44px 16px 24px;border-radius:24px}
  .sg-stage{margin-top:32px}
  .sg-t--xl{font-size:calc(30px * var(--k))}
  /* geniş tek sahnelerde (PT15, X3) yazılar telefonda biraz küçülür, çizim kalabalıklaşmasın */
  .sg-stage .sg-t{font-size:calc(12px * var(--k))}
  .sg-stage .sg-t--s{font-size:calc(10px * var(--k))}
  .sg-stage .sg-t--xl{font-size:calc(30px * var(--k))}
  .sg-stage{margin-left:-6px;margin-right:-6px}
  .st-bento--hero>.st-tile{min-height:360px}
  .st-tile.is-hero .st-big{font-size:clamp(72px,22vw,110px)}
  .st-tile.is-hero .st-battery{width:170px;height:56px}
  .st-tile.is-hero .st-battery::after{top:16px}
  .sg-m-hide{display:none}
}
@media (prefers-reduced-motion:reduce){
  .sg-motif *,.st-sig *{animation:none!important;transition:none!important}
}

/* hareket azaltmada "EIS kapalı" karesi durağan ama eğik kalır: fark yine görünsün */
@media (prefers-reduced-motion:reduce){.sg-shake{transform:translate(-7px,5px) rotate(-1.6deg)}}