/* Alpi Diş · tedavi planı görseli CSS (implant.html'den taşındı; plan-gorsel.js ile birlikte).
   site.css + tedavi.css'ten SONRA yüklenir; tek-img diş stilini implant'ın 3-img (x/xi/xe) + overlay
   versiyonuyla ezer. Yalnızca /tedavi/all-on-four, /all-on-six, /zigomatik-implant sayfalarında. */
.stage .patient-label{position:absolute;left:0;bottom:0;z-index:3;margin:0;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:baseline;gap:2px 0;max-width:64%;padding:6px 12px}
.stage .patient-label .k{margin-right:7px}
.stage .patient-label .v{max-width:none;margin-right:18px}
.stage .patient-label .v:last-of-type{margin-right:0}
.stage{position:relative;aspect-ratio:1600 / 600}
.iarc{position:absolute;left:7.125%;top:10.667%;width:85.75%;height:78.667%;opacity:0;transform-origin:50% 50%;transition:opacity .7s var(--ease-out), transform .9s var(--ease-out)}
.stage.is-live .iarc{opacity:1;transform:var(--cam, none)}
.it{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);rotate:var(--r);transition:opacity .5s var(--ease-out)}
.it img{position:absolute;inset:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none;transition:opacity .45s var(--ease-out)}
.it .xi,.it .xe{opacity:0}
.it[data-s="implant"] .x,.it[data-s="missing"] .x,.it[data-s="gone"] .x{opacity:0}
.it[data-s="implant"] .xi{opacity:1;filter:brightness(1.12) drop-shadow(0 0 5px rgba(220,229,251,.6))}
.it[data-s="missing"] .xe{opacity:.75}
.it[data-jaw="l"]{--dir:to bottom}
.it[data-jaw="u"]{--dir:to top}
.it[data-s="pro"] .x{-webkit-mask:linear-gradient(var(--dir), #000 calc(var(--cz) + 1%), transparent calc(var(--cz) + 6%));mask:linear-gradient(var(--dir), #000 calc(var(--cz) + 1%), transparent calc(var(--cz) + 6%));filter:brightness(1.12)}
.it::after{content:"";position:absolute;inset:6% 5%;border:2px solid transparent;border-radius:7px;transition:border-color .3s var(--ease-out)}
.it.is-frame::after{border-color:var(--white)}
.iarc.has-case .it:not(.is-lit){opacity:.24}
.inum{position:absolute;left:var(--nx);top:var(--ny);translate:-50% -50%;font-family:var(--mono);font-size:.68rem;line-height:1;color:rgba(196,212,247,.42);transition:color .3s var(--ease-out)}
.inum.is-lit{color:var(--white);font-weight:700}
.iov{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.iov>g{opacity:0;transition:opacity .55s var(--ease-out)}
.iov>g.is-on{opacity:1;transition-delay:.15s}
.iov .fx{filter:drop-shadow(0 0 1.6px rgba(196,212,247,.7))}
.iov use.fx{stroke:rgba(9,13,95,.55);stroke-width:.5}
.ilab{position:absolute;translate:-50% -50%;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-shadow:0 0 6px rgba(3,5,42,.95), 0 0 2px rgba(3,5,42,.95);text-transform:uppercase;white-space:nowrap;color:var(--on-film);opacity:0;transition:opacity .45s var(--ease-out);pointer-events:none}
.ilab.is-on{opacity:1;transition-delay:.25s}
@media (max-width:1100px){ .stage .patient-label{display:none} }
@media (max-width:759px){
  .stage{aspect-ratio:1080 / 720;margin:18px calc(-1 * var(--gutter)) 12px;overflow:hidden}
  .iarc{left:2.222%;top:25.345%;width:95.556%;height:49.31%}
  .stage::before,.stage::after{content:"";position:absolute;left:0;right:0;z-index:2;height:16%;pointer-events:none}
  .stage::before{top:0;background:linear-gradient(180deg, #0A0E62, rgba(10,14,98,0))}
  .stage::after{bottom:0;background:linear-gradient(0deg, #0A0E62, rgba(10,14,98,0))}
  .ilab{font-size:calc(.6rem / var(--k, 1))}
  .inum{font-size:calc(.56rem / var(--k, 1));opacity:0}
  .inum.is-lit{opacity:1}
}