/* =========================================================
   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;
}
/* Başlığın üstündeki kompakt fiyat talebi formu (partials/quote-form).
   Zemin, ana sayfadaki teklif formuyla aynı (altın). */
.pl-hero-lead .ti-nav-form {
  max-width: 360px;
  padding: 18px;
  border-color: var(--gold);
  background: var(--gold);
  box-shadow: 0 10px 28px rgba(214, 161, 46, .22);
}
.pl-hero-lead .tnf-title { color: var(--dark-2); }
.pl-hero-lead .tnf-lead,
.pl-hero-lead .tnf-consent { color: var(--dark-2); }
.pl-hero-lead .ti-nav-form input[type="text"],
.pl-hero-lead .ti-nav-form input[type="tel"],
.pl-hero-lead .ti-nav-form input[type="email"] { border-color: var(--white); }
.pl-hero-lead .ti-nav-form input:focus { border-color: var(--dark-2); }
.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; }
  /* Mobilde fiyat talebi formu bölümün EN ÜSTÜNE çıkar (eyebrow'un da üstüne):
     grid ve lead sarmalayıcıları "contents" olur, container dikey flex'e döner,
     form order ile başa alınır; diğer öğeler DOM sırasını korur. */
  .pl-hero .container { display: flex; flex-direction: column; gap: 26px; }
  .pl-hero .pl-eyebrow { margin-bottom: 0; }
  .pl-hero-grid, .pl-hero-lead { display: contents; }
  .pl-hero-lead .ti-nav-form { order: -1; max-width: none; }
  .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, the selection summary 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 + summary) always ends level with the palette */
  grid-template-rows:1fr max-content;
  grid-template-areas:"chart pal" "panel pal"}
.pcalc-pal{grid-area:pal}
.pcalc-chart{grid-area:chart;min-width:0;display:flex}
.pcalc-panel{grid-area:panel}

/* ---------- 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}
.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}
/* Tedavi = sarmalayıcı (.pcalc-tool) + düğme (.pcalc-tool-b). Adet seçici (.pcalc-ct)
   aktif tedavinin sarmalayıcısına, başlığın hemen altına yerleşir. */
.pcalc-tool{display:flex;flex-direction:column;background:transparent;
  border:1px solid #242424;border-radius:6px;flex:1 1 168px;min-width:0;
  transition:background .15s,border-color .15s}
.pcalc-tool:hover{background:rgba(214,161,46,.07);border-color:rgba(214,161,46,.24)}
.pcalc-tool.is-on{background:rgba(214,161,46,.14);border-color:var(--gold);flex-basis:100%}
.pcalc-tool-b{display:flex;gap:9px;align-items:center;text-align:start;width:100%;background:transparent;
  border:0;border-radius:6px;padding:7px 9px;color:#cfcfcf;cursor:pointer;font-family:var(--font);
  transition:color .15s}
.pcalc-tool-b:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
.pcalc-tool.is-on .pcalc-tool-b{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}

/* ---------- adet seçici: −/+ ve iPhone tarih seçici gibi dönen tambur ----------
   40px sol boşluk = düğme padding'i (9) + glif (22) + aralık (9): başlıkla hizalanır.
   --ih tambur satır yüksekliği; calculator.js'teki IH ile aynı tutulmalı. */
.pcalc-ct{padding:0 9px 10px 40px}
.pcalc-ct[hidden]{display:none!important}
[dir="rtl"] .pcalc-ct{padding:0 40px 10px 9px}
.pcalc-ctrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pcalc-drumw{--ih:26px;position:relative;flex:0 0 auto;width:46px;border-radius:10px;
  background:#111;border:1px solid rgba(255,255,255,.12)}
/* orta bant: seçili satırın altında duran iki ince altın çizgi */
.pcalc-drumw::before{content:"";position:absolute;left:4px;right:4px;top:calc(var(--ih)*2);height:var(--ih);
  border-top:1px solid rgba(214,161,46,.55);border-bottom:1px solid rgba(214,161,46,.55);
  background:rgba(214,161,46,.08);border-radius:4px;pointer-events:none}
.pcalc-drum{position:relative;height:calc(var(--ih)*5);overflow-y:auto;overscroll-behavior:contain;
  scroll-snap-type:y mandatory;scrollbar-width:none;border-radius:10px;cursor:ns-resize;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 32%,#000 68%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 32%,#000 68%,transparent)}
.pcalc-drum::-webkit-scrollbar{display:none}
.pcalc-drum:focus{outline:none}
.pcalc-drumw:has(.pcalc-drum:focus-visible){outline:2px solid var(--gold-light);outline-offset:2px}
.pcalc-drum-l{padding:calc(var(--ih)*2) 0}
.pcalc-drum-i{height:var(--ih);line-height:var(--ih);text-align:center;scroll-snap-align:center;
  font-size:14px;font-weight:800;color:#7a7a7a;font-variant-numeric:tabular-nums;
  transition:color .15s,transform .15s;user-select:none;-webkit-user-select:none}
.pcalc-drum-i.is-cur{color:var(--gold);transform:scale(1.18)}
.pcalc-ct-hint{margin:6px 0 0;font-size:11.5px;line-height:1.45;color:#8d8d8d}
.pcalc-ct-hint[hidden]{display:none!important}

/* ---------- 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}

/* ---------- selection summary, 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:minmax(0,1fr) auto;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}
/* −/+ adımlayıcı; adet seçiciyle birlikte palette, aktif tedavinin altında */
.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-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-wa{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-width:min(240px,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}
/* ---------- tedavi plani: birden fazla tedavi ayni teklifte ----------
   Panel bir grid (1fr auto); ozet ile WhatsApp dugmesi ust satirda kalsin
   diye plan listesi 1/-1 ile kendi satirini kaplar. */
.pcalc-plan{grid-column:1/-1;margin:0;padding-top:13px;border-top:1px solid #1e1e1e}
.pcalc-plan[hidden]{display:none!important}
.pcalc-plan-title{margin:0 0 8px;font-size:11px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#8a8a8a}
.pcalc-plan-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pcalc-plan-item{display:flex;align-items:center;gap:8px;
  background:#141414;border:1px solid rgba(255,255,255,.10);border-radius:9px;padding:2px 2px 2px 0}
.pcalc-plan-edit{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  padding:8px 10px;border:0;background:none;color:inherit;font-family:inherit;
  text-align:start;cursor:pointer;border-radius:8px}
.pcalc-plan-edit:hover .pcalc-plan-n{color:var(--gold)}
.pcalc-plan-edit:focus-visible{outline:2px solid var(--gold-light);outline-offset:-2px}
.pcalc-plan-n{font-size:13.5px;font-weight:800;color:#fff;transition:color .18s}
.pcalc-plan-c{font-size:12px;color:#8d8d8d;font-variant-numeric:tabular-nums}
.pcalc-plan-x{flex:0 0 auto;width:28px;height:28px;padding:0;border-radius:7px;
  border:1px solid rgba(255,255,255,.12);background:#161616;color:#9a9a9a;
  font-family:inherit;font-size:16px;line-height:1;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:border-color .18s,color .18s,background .18s}
.pcalc-plan-x:hover{border-color:rgba(214,161,46,.5);background:rgba(214,161,46,.1);color:var(--gold)}
.pcalc-plan-x:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}
.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:minmax(0,1fr) auto}
}
@media (max-width:860px){
  /* Telefon sırası: tedavi seç → seçim özeti + WhatsApp → dişleri işaretle
     (müşteri isteği, Eylül 2026: özet kutusu çizelgenin ÜSTÜNDE dursun).
     Stacked: esneme yok, çizelge doğal boyutuna döner. Yapışkanlık yok —
     özet kutusu çizelgenin üstündeyken sticky olsaydı ekranı yerdi. */
  .pcalc-body{display:flex;flex-direction:column;gap:20px}
  .pcalc-pal{order:1}
  .pcalc-panel{order:2}
  .pcalc-chart{order:3}

  /* 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}
  /* 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-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: üç grup da açık, alt alta kartlar hâlinde (kulakçık/akordeon yok) */
  .pcalc-pal{display:block;padding:10px}
  .pcalc-sep{display:none}
  .pcalc-grp{border:1px solid #232323;border-radius:8px;background:#101010;padding:12px 14px 14px}
  .pcalc-grp + .pcalc-grp{margin-top:8px}
  .pcalc-tool{flex:1 1 100%}
  /* telefonda tambur parmakla çevrilir: satırlar daha yüksek, gövde daha geniş */
  .pcalc-drumw{--ih:30px;width:54px}
  .pcalc-drum-i{font-size:16px}
  .pcalc-step{width:36px;height:36px}
}
@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)}