/* =========================================================
   PRICE LIST — comprehensive redesign
   Loaded after style.css + static.css; scoped to price-list.
   Palette locked: gold #d6a12e / black / white / WhatsApp green.
   Concept: a price list presented as a personal clinical
   "estimate" + a menu of treatments. Numbered markers appear
   only where order is real (the 3-step process).
   ========================================================= */

.pl-au { color: var(--gold); }

/* --- Shared eyebrow (Roboto utility face) --- */
.pl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.pl-eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--gold);
}

/* =========================================================
   1. INTRO — editorial thesis statement
   A single quiet gold outline of the practice's own tooth
   mark, blown up as a watermark, is the page's one signature
   risk. Everything else (rule, type, copy) stays disciplined
   around it. Asymmetric split, not a centred hero: the gold
   rule is a real divider between the claim (headline) and the
   reasoning (copy) — not decoration.
   ========================================================= */
.pl-hero { position: relative; overflow: hidden; background: var(--white); padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 76px); }

.pl-hero-tooth {
  position: absolute;
  top: 50%;
  right: clamp(-140px, -4vw, -40px);
  width: clamp(360px, 34vw, 560px);
  height: auto;
  transform: translateY(-46%);
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.1;
  opacity: .16;
  pointer-events: none;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: plToothDraw 1.9s cubic-bezier(.3, .7, .3, 1) .15s forwards;
}
@keyframes plToothDraw { to { stroke-dashoffset: 0; } }

.pl-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(240px, .58fr) 1px minmax(0, 1fr);
  column-gap: clamp(30px, 4.5vw, 68px);
  align-items: start;
}
.pl-hero-lead {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.pl-hero-h {
  margin: 0;
  font-size: clamp(42px, 5.4vw, 78px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -1.6px;
  color: var(--dark-2);
}
.pl-hero-h .pl-au { color: var(--gold); }
.pl-trust {
  margin: 0;
  max-width: 30ch;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, .1);
  color: var(--gray-light);
  font-size: 13px;
  line-height: 1.65;
}
.pl-hero-rule {
  grid-column: 2;
  align-self: stretch;
  width: 1px;
  margin-top: 6px;
  background: linear-gradient(180deg, rgba(214, 161, 46, .55), rgba(214, 161, 46, .08));
}
.pl-hero-body { grid-column: 3; padding-top: clamp(6px, 1vw, 14px); }
.pl-lead {
  margin: 0 0 22px;
  max-width: 52ch;
  color: var(--gray);
  font-size: 16.5px;
  line-height: 1.75;
}
.pl-lead:last-of-type { margin-bottom: 30px; }
.pl-intro-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pl-textlink {
  font-weight: 800;
  color: var(--dark-2);
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
  transition: color .2s ease;
}
.pl-textlink span { color: var(--gold); display: inline-block; transition: transform .2s ease; }
.pl-textlink:hover { color: var(--gold-dark); text-decoration: none; }
.pl-textlink:hover span { transform: translateX(4px); }

/* =========================================================
   2. FACTORS — sticky intro + clean accordion (no decorative numbers)
   ========================================================= */
.pl-factors { background: var(--off-white); padding: clamp(52px, 6vw, 80px) 0; }
.pl-factors-grid {
  display: grid;
  grid-template-columns: .9fr 1.35fr;
  gap: clamp(36px, 5vw, 84px);
  align-items: start;
}
.pl-factors-head { position: sticky; top: 110px; }
.pl-factors-head h2 { margin: 0 0 16px; font-size: clamp(26px, 3vw, 38px); font-weight: 900; line-height: 1.15; color: var(--dark-2); }
.pl-factors-head p { margin: 0 0 22px; color: var(--gray); font-size: 16.5px; line-height: 1.75; }
.pl-factors-head strong { color: var(--dark-2); }

.pl-acc details {
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 12px;
  margin-bottom: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pl-acc details[open] { border-color: rgba(214, 161, 46, .5); box-shadow: 0 16px 34px rgba(20, 20, 20, .08); }
.pl-acc summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 54px 20px 22px;
  cursor: pointer;
  list-style: none;
}
.pl-acc summary::-webkit-details-marker { display: none; }
.pl-acc summary h3 { margin: 0; font-size: clamp(16px, 1.5vw, 19px); font-weight: 800; color: var(--dark-2); transition: color .2s ease; }
.pl-acc summary:hover h3 { color: var(--gold-dark); }
.pl-acc summary::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  width: 13px;
  height: 13px;
  transform: translateY(-50%);
  background:
          linear-gradient(var(--gold), var(--gold)) center/13px 2px no-repeat,
          linear-gradient(var(--gold), var(--gold)) center/2px 13px no-repeat;
  transition: transform .25s ease;
}
.pl-acc details[open] summary::after { transform: translateY(-50%) rotate(135deg); }
.pl-acc .pl-a { padding: 0 22px 22px; }
.pl-acc .pl-a p { margin: 0 0 12px; color: rgba(0, 0, 0, .72); font-size: 15.5px; line-height: 1.8; }
.pl-acc .pl-a p:last-child { margin-bottom: 0; }
.pl-acc .pl-a strong { color: var(--dark-2); }

/* =========================================================
   3. TREATMENT INDEX — the "menu" (dotted leaders, no sequence numbers)
   ========================================================= */
.pl-treat { background: var(--white); padding: clamp(52px, 6vw, 84px) 0; }
.pl-treat-head { text-align: center; max-width: 640px; margin: 0 auto clamp(30px, 4vw, 44px); }
.pl-treat-head .pl-eyebrow { justify-content: center; }
.pl-treat-head h2 { margin: 0 0 12px; font-size: clamp(28px, 3.4vw, 42px); font-weight: 900; color: var(--dark-2); }
.pl-treat-head p { margin: 0; color: var(--gray); font-size: 16px; line-height: 1.7; }

.pl-index {
  list-style: none;
  margin: 0 auto clamp(32px, 4vw, 40px);
  padding: 0;
  max-width: 900px;
  border-top: 1px solid rgba(0, 0, 0, .1);
}
.pl-index li { border-bottom: 1px solid rgba(0, 0, 0, .1); }
.pl-index a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 20px 8px;
  color: var(--dark-2);
  transition: padding .25s ease, color .2s ease;
}
.pl-index-name { flex: none; font-size: clamp(17px, 1.8vw, 21px); font-weight: 800; }
.pl-index-dots { flex: 1; align-self: center; height: 0; border-bottom: 1px dotted rgba(0, 0, 0, .28); margin: 0 6px; }
.pl-index-cta {
  flex: none;
  font-family: "Roboto", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-light);
  transition: color .2s ease;
}
.pl-index-cta span { color: var(--gold); display: inline-block; transition: transform .2s ease; }
.pl-index a:hover { color: var(--gold-dark); padding-left: 16px; text-decoration: none; }
.pl-index a:hover .pl-index-cta { color: var(--gold-dark); }
.pl-index a:hover .pl-index-cta span { transform: translateX(5px); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 900px) {
  .pl-factors-grid { grid-template-columns: 1fr; }
  .pl-factors-head { position: static; }
}
@media (max-width: 820px) {
  .pl-hero-tooth { width: clamp(260px, 46vw, 360px); opacity: .12; right: -60px; }
  .pl-hero-grid { grid-template-columns: 1fr; row-gap: 26px; }
  .pl-hero-rule { display: none; }
  .pl-hero-lead, .pl-hero-body { grid-column: 1; }
  .pl-hero-h { max-width: 12ch; }
  .pl-trust { max-width: none; }
  .pl-hero-body { padding-top: 0; }
}
@media (max-width: 680px) {
  .pl-index-dots { display: none; }
  .pl-index a { justify-content: space-between; padding-left: 0; padding-right: 0; }
  .pl-index a:hover { padding-left: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-index a, .pl-index-cta span, .pl-acc summary::after, .pl-textlink span { transition: none; }
  .pl-hero-tooth { animation: none; stroke-dashoffset: 0; }
}

/* =========================================================
   PRICE CALCULATOR — interactive dental chart
   Everything is scoped under .pcalc, and the teeth use .pt
   (NOT .tooth) because style.css already owns .tooth for the
   homepage arch and would otherwise override the marks here.
   Palette locked: gold / black / white / WhatsApp green.
   ========================================================= */

.pcalc{position:relative;background:#060606;padding:clamp(44px,5vw,72px) 0;overflow:hidden}
.pcalc::before{content:"";position:absolute;inset:0;pointer-events:none;background:
        radial-gradient(56% 46% at 78% 4%, rgba(214,161,46,.14), transparent 68%),
        radial-gradient(46% 42% at 4% 96%, rgba(214,161,46,.10), transparent 70%)}
.pcalc > .container{position:relative;z-index:1}

.pcalc-head{max-width:640px;margin:0 0 24px}
.pcalc-head h2{margin:0 0 10px;font-size:clamp(25px,2.9vw,36px);font-weight:800;color:#fff;line-height:1.14}
.pcalc-head h2 em{font-style:normal;color:var(--gold)}
.pcalc-head p{margin:0;font-size:15.5px;line-height:1.7;color:#9a9a9a;max-width:58ch}

/* chart left, its price directly underneath, palette down the right */
.pcalc-body{display:grid;gap:20px;align-items:stretch;
  grid-template-columns:minmax(0,1fr) 320px;
  /* the chart row absorbs whatever height the palette needs, so the
     left column (chart + price) always ends level with the palette */
  grid-template-rows:1fr max-content;
  grid-template-areas:"chart pal" "price pal"}
.pcalc-pal{grid-area:pal}
.pcalc-chart{grid-area:chart;min-width:0;display:flex}
.pcalc-panel{grid-area:price}

/* ---------- palette ---------- */
.pcalc-pal{background:linear-gradient(180deg,#121212,#0d0d0d);border:1px solid #232323;
  border-radius:var(--radius);padding:14px 14px 12px}
.pcalc-pal h3{margin:0 0 8px;font-family:"Roboto",sans-serif;font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:#7d7d7d;font-weight:700}
/* Başlık artık bir buton (mobilde kulakçık tetikleyicisi).
   Masaüstünde görünüm birebir eski h3 gibi kalsın diye sıfırlanıyor. */
.pcalc-pal h3 .pcalc-grp-t{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:none;border:0;padding:0;margin:0;text-align:left;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:default}
.pcalc-grp-caret{display:none}
.pcalc-note{font-size:11.5px;color:#6e6e6e;margin:-4px 0 10px;line-height:1.45}
.pcalc-tools{display:flex;flex-wrap:wrap;gap:5px}
.pcalc-sep{height:1px;background:#222;margin:12px 2px}
.pcalc-tool{display:flex;gap:9px;align-items:center;text-align:left;background:transparent;
  border:1px solid #242424;border-radius:6px;padding:7px 9px;color:#cfcfcf;cursor:pointer;
  font-family:var(--font);flex:1 1 168px;min-width:0;
  transition:background .15s,border-color .15s,color .15s}
.pcalc-tool:hover{background:rgba(214,161,46,.07);border-color:rgba(214,161,46,.24)}
.pcalc-tool:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
.pcalc-tool[aria-pressed="true"]{background:rgba(214,161,46,.14);border-color:var(--gold);color:#fff}
.pcalc-tool .gl{flex:0 0 22px;width:22px;height:40px}
.pcalc-tool .gl svg{width:100%;height:100%;display:block}
.pcalc-tool .tx{min-width:0;flex:1}
.pcalc-tool .nm{display:block;font-size:12.5px;font-weight:700;line-height:1.25}
.pcalc-tool .pr{display:block;font-family:"Roboto",sans-serif;font-size:10.5px;color:#8d8d8d;
  margin-top:2px;font-variant-numeric:tabular-nums}
.pcalc-tool[aria-pressed="true"] .pr{color:var(--gold-light)}
/* Palet birim fiyatları da WhatsApp'tan gönderilene kadar bulanık durur */
.pcalc-tool .pr-amt{display:inline-block;transition:filter .28s ease,opacity .28s ease}
.pcalc-pal.is-locked .pcalc-tool .pr-amt{
  filter:blur(4.5px);opacity:.85;-webkit-user-select:none;user-select:none;
}
@media (prefers-reduced-motion:reduce){ .pcalc-tool .pr-amt{transition:none} }

/* ---------- chart ---------- */
.pcalc-stage{position:relative;background:rgba(255,255,255,.025);
  border:1px solid rgba(214,161,46,.22);border-radius:var(--radius);padding:12px 14px 10px;
  flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}
.pcalc-stagetop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  font-family:"Roboto",sans-serif;font-size:11.5px;letter-spacing:1.6px;text-transform:uppercase;color:#7d7d7d}
.pcalc-stagetop b{color:var(--gold);font-weight:700}
.pcalc-taphint{margin:6px 0 0;font-family:var(--font);font-size:11.5px;line-height:1.5;
  color:#6e6e6e;letter-spacing:0;text-transform:none}
.pcalc-clear{background:transparent;border:1px solid #2e2e2e;color:#9a9a9a;
  font-family:"Roboto",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;padding:7px 11px;border-radius:6px;cursor:pointer}
.pcalc-clear:hover{border-color:var(--gold);color:var(--gold)}
.pcalc-arch{flex:1;min-height:0;width:100%;max-width:600px;height:100%;
  display:block;margin:0 auto;align-self:center;touch-action:manipulation}
.pcalc-archlabel{font-family:"Roboto",sans-serif;font-size:11px;font-weight:700;letter-spacing:2.6px;fill:#4a4a4a}

.pcalc .pt{cursor:crosshair}
.pcalc .pt .crown{fill:url(#pcEnamel);stroke:#8f8f8f;stroke-width:.8;transform-origin:0px 22px;
  transition:fill .18s ease,stroke .18s ease,filter .18s ease}
.pcalc .pt .groove{fill:none;stroke:#9c9c9c;stroke-width:.7;opacity:.5;pointer-events:none;transition:opacity .18s}
.pcalc .pt .hit{fill:transparent}
.pcalc .pt .mark{pointer-events:none}
.pcalc .pt .ring{fill:none;stroke:var(--gold-light);stroke-width:1;stroke-dasharray:3 3;opacity:0;pointer-events:none}
.pcalc .pt:hover .crown{stroke:var(--gold-light);filter:drop-shadow(0 0 7px rgba(214,161,46,.45))}
.pcalc .pt.on .crown{stroke:var(--gold-dark)}
.pcalc .pt.on .groove{opacity:.28}
.pcalc .pt.pop .crown{animation:pcPop .26s cubic-bezier(.3,1.5,.5,1)}
@keyframes pcPop{0%{transform:scale(1)}42%{transform:scale(1.16)}100%{transform:scale(1)}}
.pcalc .pt:focus{outline:none}
.pcalc .pt:focus-visible .crown{stroke:#fff;stroke-width:2;filter:drop-shadow(0 0 10px rgba(231,190,91,.95))}
.pcalc .pt:focus-visible .ring{opacity:1}

/* treatment marks — read by shape and fill, never by hue */
.pcalc .mk-fill{fill:url(#pcEnamelGold);stroke:var(--gold-dark);stroke-width:.7}
.pcalc .mk-solid{fill:var(--gold);stroke:none}
.pcalc .mk-ring{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linejoin:round}
.pcalc .mk-line{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round}
.pcalc .mk-thick{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round}
.pcalc .mark{animation:pcInk .2s ease-out}
@keyframes pcInk{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}

.pcalc-rail{fill:none;stroke:url(#pcBridge);stroke-width:13;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transition:opacity .3s ease;pointer-events:none}
.pcalc-rail.on{opacity:1;filter:drop-shadow(0 0 9px rgba(214,161,46,.55))}
.pcalc-fixture{fill:#0b0b0b;stroke:var(--gold-light);stroke-width:1.4;opacity:0;transition:opacity .3s}
.pcalc-fixture.on{opacity:1}

/* ---------- price, sitting under the chart ---------- */
.pcalc-panel{background:#0a0a0a;border:1px solid rgba(214,161,46,.34);border-radius:var(--radius);
  padding:16px 18px;box-shadow:0 22px 54px rgba(0,0,0,.42);
  display:grid;grid-template-columns:1fr auto 1fr;gap:18px 26px;align-items:center}
.pcalc-treat{margin:0 0 3px;font-size:17px;font-weight:800;color:#fff}
.pcalc-count{margin:0;font-size:13px;color:#8d8d8d}
.pcalc-count b{color:var(--gold);font-weight:700}
.pcalc-count[hidden]{display:none!important}
.pcalc-countrow{display:inline-flex;align-items:center;gap:10px;margin-top:6px}
.pcalc-countrow[hidden]{display:none!important}
.pcalc-step{width:30px;height:30px;padding:0;border-radius:8px;
  border:1px solid rgba(255,255,255,.14);background:#161616;color:var(--gold);
  font-family:inherit;font-size:16px;font-weight:800;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  transition:border-color .18s,background .18s}
.pcalc-step:hover:not(:disabled){border-color:rgba(214,161,46,.5);background:rgba(214,161,46,.1)}
.pcalc-step:disabled{opacity:.35;cursor:default}
.pcalc-step:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
.pcalc-countin{width:42px;height:30px;padding:0 4px;text-align:center;flex:0 0 auto;
  background:#161616;border:1px solid rgba(255,255,255,.14);border-radius:8px;
  color:var(--gold);font-family:inherit;font-size:14px;font-weight:700;
  font-variant-numeric:tabular-nums;transition:border-color .18s}
.pcalc-countin:hover{border-color:rgba(214,161,46,.5)}
.pcalc-countin:focus{outline:none;border-color:var(--gold)}
.pcalc-countword{font-size:13px;color:#8d8d8d;white-space:nowrap}
.pcalc-units{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  margin-top:10px;
}
.pcalc-units[hidden]{display:none!important}
.pcalc-units-label{
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#8a8a8a;margin-right:4px;
}
.pcalc-unit{
  min-width:40px;padding:7px 11px;border-radius:8px;
  border:1px solid rgba(255,255,255,.14);background:#161616;color:#cfcfcf;
  font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer;
  transition:border-color .18s,background .18s,color .18s;
}
.pcalc-unit:hover{border-color:rgba(214,161,46,.5);color:#fff}
.pcalc-unit.is-on,.pcalc-unit[aria-pressed="true"]{
  border-color:var(--gold);background:rgba(214,161,46,.14);color:var(--gold);
}
.pcalc-plabel{font-family:"Roboto",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:#6e6e6e;margin-bottom:3px;text-align:center}
.pcalc-amount{margin:0;font-size:clamp(32px,4vw,46px);font-weight:900;color:var(--gold);line-height:1.02;
  letter-spacing:-1.4px;font-variant-numeric:tabular-nums;text-shadow:0 0 32px rgba(214,161,46,.38);
  text-align:center}
.pcalc-per{margin:5px 0 0;font-size:12.5px;color:#7d7d7d;text-align:center}

/* Fiyat kilidi: WhatsApp'tan gönder'e basılana kadar tutar bulanık durur */
.pcalc-pricewrap{position:relative}
.pcalc-pricewrap .pcalc-amount,
.pcalc-pricewrap .pcalc-per{transition:filter .28s ease,opacity .28s ease}
.pcalc-pricewrap.is-locked .pcalc-amount{filter:blur(11px);opacity:.9}
.pcalc-pricewrap.is-locked .pcalc-per{filter:blur(5px);opacity:.55}
.pcalc-pricewrap.is-locked .pcalc-amount,
.pcalc-pricewrap.is-locked .pcalc-per{
  -webkit-user-select:none;user-select:none;pointer-events:none;
}
.pcalc-lockhint{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  gap:6px;padding:0 6px;text-align:center;pointer-events:none;
  font-family:"Roboto",sans-serif;font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.25;color:#e6e6e6;
  text-shadow:0 2px 12px rgba(0,0,0,.9),0 0 4px rgba(0,0,0,.9);
}
.pcalc-lockhint svg{flex:none;opacity:.85}
.pcalc-pricewrap.is-locked .pcalc-lockhint{display:flex}
@media (prefers-reduced-motion:reduce){
  .pcalc-pricewrap .pcalc-amount,
  .pcalc-pricewrap .pcalc-per{transition:none}
}
.pcalc-wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  background:var(--green);color:#fff;font-size:14px;font-weight:800;border:0;
  border-radius:var(--btn-radius);padding:14px 16px;cursor:pointer;text-decoration:none;
  transition:background .18s}
.pcalc-wa:hover{background:var(--green-dark);color:#fff}
.pcalc-pnote{grid-column:1/-1;margin:0;padding-top:11px;border-top:1px solid #1e1e1e;
  font-size:12px;line-height:1.6;color:#6e6e6e}
.pcalc-plink{grid-column:1/-1;margin:0;font-size:12.5px;color:#8d8d8d;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(214,161,46,.5)}
.pcalc-plink:hover{color:var(--gold)}

@media (max-width:1080px){
  .pcalc-body{grid-template-columns:minmax(0,1fr) 290px}
  .pcalc-panel{grid-template-columns:1fr auto}
  .pcalc-amount,.pcalc-per,.pcalc-plabel{text-align:left}
}
@media (max-width:860px){
  /* phone order follows the user flow: pick a treatment, mark teeth, see the price
     (client request, July 2026) */
  /* stacked: no stretching, the chart goes back to its natural size */
  /* Not: panel artık kapsayıcının son çocuğu olduğundan sticky fiilen etkisiz;
     kural, panel ileride tekrar yukarı taşınırsa davranış korunsun diye duruyor.
     Grid yerine flex — sticky bir grid öğesinin kapsayıcı bloğu kendi grid alanı
     olduğu için yapışmaz; flex'te kapsayıcı blok tüm .pcalc-body olur. */
  .pcalc-body{display:flex;flex-direction:column;gap:20px}
  .pcalc-pal{order:1}
  .pcalc-chart{order:2}
  .pcalc-panel{order:3;position:sticky;top:63px;z-index:5}  /* 63px = mobil sticky header yüksekliği */

  /* Yapışkan kutu ekranın yarısını yemesin — mobilde sıkıştırılmış düzen:
     tedavi adı ve tutar yan yana, buton tam genişlik.
     minmax(0,1fr): sol sütun içeriğinin (18/20/24 paket satırı) genişliği
     kutuyu viewport'tan taşırıp "kaymaya" yol açıyordu → 0'a kadar küçülebilsin. */
  .pcalc-panel{grid-template-columns:minmax(0,1fr) auto;gap:12px 16px;padding:14px}
  .pcalc-plabel,.pcalc-amount,.pcalc-per{text-align:right}
  /* Veneer paketi (18/20/24) satırı sol hücrede düzgün sarsın, taşmasın */
  .pcalc-units{margin-top:8px}
  .pcalc-units-label{flex-basis:100%;margin:0 0 2px}
  .pcalc-amount{font-size:32px;letter-spacing:-1px}
  .pcalc-per{font-size:11.5px}
  .pcalc-lockhint{font-size:9.5px;gap:4px;letter-spacing:.04em}
  .pcalc-pricewrap.is-locked .pcalc-amount{filter:blur(8px)}
  .pcalc-wa{grid-column:1/-1;padding:12px 14px}
  .pcalc-pnote{font-size:11px;line-height:1.5;padding-top:9px}
  .pcalc-chart{display:block}
  .pcalc-stage{display:block;flex:none}
  .pcalc-arch{flex:none;width:100%;max-width:520px;height:auto;margin:0 auto}
  /* Palet kulakçığa dönüyor: üç grup alt alta, tıklanınca açılıyor */
  .pcalc-pal{display:block;padding:10px}
  .pcalc-sep{display:none}
  .pcalc-grp{border:1px solid #232323;border-radius:8px;background:#101010;overflow:hidden}
  .pcalc-grp + .pcalc-grp{margin-top:8px}
  .pcalc-pal h3{margin:0}
  .pcalc-pal h3 .pcalc-grp-t{padding:14px;cursor:pointer;min-height:48px}
  .pcalc-grp-caret{display:block;flex:none;width:9px;height:9px;
    border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
    transform:translateY(-2px) rotate(45deg);transition:transform .25s ease}
  .pcalc-grp.open .pcalc-grp-caret{transform:translateY(2px) rotate(-135deg)}
  .pcalc-grp-b{max-height:0;overflow:hidden;padding:0 14px;
    transition:max-height .3s ease,padding .3s ease}
  .pcalc-grp.open .pcalc-grp-b{max-height:760px;padding:0 14px 14px}
  .pcalc-tool{flex:1 1 100%}
}
@media (max-width:420px){ .pcalc-tool{flex:1 1 100%} }
@media (prefers-reduced-motion:reduce){
  .pcalc .pt.pop .crown,.pcalc .mark{animation:none}
  .pcalc .pt .crown,.pcalc .pt .groove,.pcalc-rail,.pcalc-fixture{transition:none}
}

/* Kapalı tedavi listesi: kapalıyken tek satır, ama linkler her hâlükârda
   DOM'da olduğu için taranır. Paletteki tedaviler buton olduğundan sayfanın
   tedavi sayfalarına giden içerik içi iç linklerini bu blok taşıyor. */
.pcalc-more{margin:22px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.pcalc-more summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:9px;
  font-family:"Roboto",sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;
  text-transform:uppercase;color:#6e6e6e;transition:color .16s}
.pcalc-more summary::-webkit-details-marker{display:none}
.pcalc-more summary::after{content:"+";font-size:14px;line-height:1;color:var(--gold-dark)}
.pcalc-more[open] summary::after{content:"\2013"}
.pcalc-more summary:hover{color:#b4b4b4}
.pcalc-more summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.pcalc-more ul{list-style:none;margin:16px 0 2px;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:9px 26px}
.pcalc-more a{color:#9a9a9a;text-decoration:none;font-size:13.5px;transition:color .16s}
.pcalc-more a:hover,.pcalc-more a:focus-visible{color:var(--gold)}