/* Alpi Diş · treatment page template (tedavi sayfaları, 2026-10-15). Builds on site.css; the hero follows the implant
   page: navy film, breadcrumb and proof on one line, the Sora headline, the panoramic film with the treatment's teeth
   lit, and the intake sheet. Generated pages come from tools/tedavi-sayfalari.py. */
.ihero{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(70% 62% at 50% 52%, #0B1068 0%, var(--navy) 34%, var(--navy-deep) 72%, var(--film) 100%)}
.ihero .hero-vignette{z-index:0}
.ihero-grid{position:relative;z-index:auto;display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stage" "dock";max-width:var(--container);margin-inline:auto;padding:clamp(18px, 3vh, 32px) var(--gutter) clamp(44px, 6.5vh, 80px)}
.ihead{grid-area:head}
.ihead-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 24px}
.ihead-top .hero-proof{margin-top:0;font-size:.9rem}
.crumbs ol{display:flex;flex-wrap:wrap;gap:2px 0;font-size:.9rem;color:var(--on-film-2)}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"/";margin:0 10px;color:rgba(196,212,247,.45)}
.crumbs a{color:var(--on-film-2);text-decoration:none;padding:6px 0}
.crumbs a:hover{color:var(--white);text-decoration:underline}
.crumbs [aria-current]{color:var(--white);font-weight:550}
.ihead h1{margin-top:14px;font-size:clamp(2.3rem, 1rem + 2.9vw, 3.6rem);font-weight:300;letter-spacing:-.03em;line-height:1.03;color:var(--white)}
.ihead h1 b{font-weight:640}
.ihead .hero-sub{margin-top:12px;max-width:50rem}

/* the film: the page's tooth sprites, the treatment's teeth lit, the rest dimmed */
.stage{grid-area:stage;position:relative;margin:clamp(14px, 2.6vh, 28px) 0 clamp(14px, 2.4vh, 26px);aspect-ratio:1600 / 600}
.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}
.iarc{position:absolute;left:7.125%;top:10.667%;width:85.75%;height:78.667%;transform-origin:50% 50%;transform:var(--cam, none);transition:transform .9s var(--ease-out)}
.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}
.it::after{content:"";position:absolute;inset:6% 5%;border:2px solid transparent;border-radius:7px}
.it.is-frame::after{border-color:var(--white)}
.iarc.has-lit .it:not(.is-lit){opacity:.24}
.iarc.has-lit .it.is-lit img{filter:brightness(1.1)}
.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)}
.inum.is-lit{color:var(--white);font-weight:700}
.ihero .hero-dock{margin-top:clamp(18px, 3vh, 30px)}
.free-list{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:8px 16px;padding-top:9px}
.free-list li{display:flex;align-items:center;gap:8px;font-size:.93rem;font-weight:550;color:var(--navy)}
.free-list .icon{width:18px;height:18px;flex:none;color:var(--peri-ink);stroke-width:2.2}
.dk3-now{margin-top:0}
.chip.is-fixed{cursor:default;background:var(--navy);border-color:var(--navy);color:var(--white)}
.chip.is-fixed .icon{display:block}

/* about the treatment: what is already true, and clearly marked slots for what the clinic will write */
.tplan{margin-top:clamp(26px, 3.4vw, 40px);display:grid;grid-template-columns:minmax(0,8.2fr) minmax(0,3.8fr);border-radius:8px;background:#fff;box-shadow:0 18px 40px -26px rgba(9,13,95,.45), inset 0 0 0 1px rgba(9,13,95,.06)}
.tplan-t{padding:clamp(22px, 2.6vw, 36px)}
.tplan dl{margin:0;display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);border-top:1px solid var(--line-glass)}
.tplan dt,.tplan dd{margin:0;padding:14px 0;border-bottom:1px solid var(--line-glass);font-size:.98rem;line-height:1.45}
.tplan dt{padding-right:18px;font-family:var(--display);font-weight:600;color:var(--navy)}
.tplan dd{color:var(--on-glass-2)}
.tplan dd b{color:var(--navy);font-weight:650}
/* a slot the clinic fills: said plainly, never dressed as content */
.slot{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:4px;border:1.5px dashed rgba(9,13,95,.28);color:var(--on-glass-2);font-size:.88rem;line-height:1.35}
.slot .icon{width:16px;height:16px;flex:none;color:var(--peri-ink)}
.tplan-ph{padding:clamp(22px, 2.6vw, 36px);border-left:1px solid var(--line-glass);display:flex;flex-direction:column;gap:12px}
.ph-frame{display:grid;place-items:center;aspect-ratio:4 / 3;border-radius:6px;border:1.5px dashed rgba(9,13,95,.28);background:repeating-linear-gradient(135deg, rgba(9,13,95,.035) 0 8px, transparent 8px 16px), var(--lav);padding:22px;text-align:center}
.ph-frame p{max-width:30ch;font-size:.92rem;line-height:1.45;color:var(--on-glass-2)}
.ph-frame b{display:block;margin-bottom:6px;font-family:var(--display);font-weight:600;color:var(--navy)}
.tplan-note{font-size:.84rem;line-height:1.45;color:var(--on-glass-2)}

/* physicians: the home strip, booking straight from the card */
.docs .frame{position:relative}
.sleeve .bk-doc{margin-top:12px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0;border:0;background:none;color:var(--navy);font-size:.92rem;font-weight:650;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1.5px}
.sleeve .bk-doc:hover{color:var(--peri-ink)}
.sleeve .bk-doc .icon{width:17px;height:17px}
.ifin .b2-cash a{color:var(--white);font-weight:650}

@media (max-width:1100px){
  .stage .patient-label{display:none}
  .tplan{grid-template-columns:minmax(0,1fr)}
  .tplan-ph{border-left:0;border-top:1px solid var(--line-glass)}
}
@media (max-width:759px){
  .ihero-grid{padding-top:18px;padding-bottom:36px}
  .ihead h1{margin-top:10px}
  .ihead-top{gap:4px 16px}
  .ihead-top .hero-proof{display:flex;font-size:.82rem;flex-wrap:nowrap}
  .ihead-top .hero-proof li+li::before{margin:0 8px}
  .stage{aspect-ratio:1080 / 720;margin:18px calc(-1 * var(--gutter)) 12px;overflow:hidden}
  .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))}
  .iarc{left:2.222%;top:25.345%;width:95.556%;height:49.31%}
  .inum{font-size:calc(.56rem / var(--k, 1));opacity:0}
  .inum.is-lit{opacity:1}
  .free-list{grid-template-columns:minmax(0,1fr)}
  .tplan dl{grid-template-columns:minmax(0,1fr)}
  .tplan dt{padding-bottom:4px;border-bottom:0}
  .tplan dd{padding-top:0}
}
/* the "no listed physicians" line keeps its distance from the facts list's last rule */
.tplan-t > .tplan-note{margin-top:18px}

/* a treatment told in steps (kanal tedavisi, client 2026-10-16): the clinic's four-panel illustration fills the picture
   column as numbered steps; the column widens so each step reads at a useful size */
.tplan.has-steps{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.tsteps-h{font-size:1.12rem;font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--navy)}
.tsteps-l{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:20px 14px}
.tsteps-l figure{margin:0}
.tsteps-l img{display:block;width:100%;height:auto;aspect-ratio:724 / 522;border-radius:6px;outline:1px solid rgba(9,13,95,.08);outline-offset:-1px;background:var(--lav)}
.tsteps-l figcaption{display:flex;align-items:center;gap:9px;margin-top:10px;font-family:var(--display);font-size:1rem;font-weight:600;letter-spacing:-.01em;color:var(--navy)}
.tsteps-l .n{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:4px;background:var(--navy);color:var(--white);font-size:.78rem;font-weight:650;font-variant-numeric:tabular-nums}
@media (max-width:1100px){
  .tplan.has-steps{grid-template-columns:minmax(0,1fr)}
  .tsteps-l{grid-template-columns:repeat(4, minmax(0,1fr))}
}
@media (max-width:759px){
  /* phones: the steps stack, one under the other (client, 2026-10-16) */
  .tsteps-l{grid-template-columns:minmax(0,1fr);gap:22px}
}

/* a film that is one radiograph image instead of the tooth sprites (ortodonti, client 2026-10-16) */
.iarc.is-xray .ixray{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}

/* a film that develops (gülüş tasarımı, client 2026-10-16): the radiograph still, the transparent film over it, and the
   real-colour still of its last frame; the three share one box, so each hand-over is seamless */
.iarc.is-film .ifilm,.iarc.is-film .ilast{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.iarc.is-film .ifilm{opacity:0}
.iarc.is-film .ilast{opacity:0}
.iarc.is-film.is-playing .ifilm{opacity:1}
.iarc.is-film.is-playing .ifirst{opacity:0}
.iarc.is-film.is-done .ilast{opacity:1}
.iarc.is-film.is-done .ifirst,.iarc.is-film.is-done .ifilm{opacity:0}