/* VABS v22-o106 "Etüt" · tasarruf-anim · kaynak v24-parcalar/tasarruf-anim/parca.css (Başyapıt ile aynı); pk-* belirteçleri Etüt değerleriyle */
.pk{--pk-sans:var(--yazi);--pk-mono:var(--mono);--pk-mavi:#00A9E0;--pk-mavi-koyu:#00739A;--pk-siyah:#1D1D1B;--pk-gumus:#8C8F91;--pk-acik:#F4F4F4;--pk-acik-mavi:#E3F4FB}
@media (min-width:761px) and (max-width:860px){.pk.pk-tasarruf-anim .viz-tag{font-size:13px}}
/* v24 parça · tasarruf-anim · kaynak: v11-o35-deneme/index.html (kahraman: "Üretim süresinde … tasarruf." + iki şeritli süre yarışı, Canvas 2D).
   Kaynak paleti pk-* belirteçlerine bağlandı (ink2/ink3/line/g2 grileri aynen); geometri, zamanlama ve çizim aynen. */
.pk-tasarruf-anim{
  --mavi:var(--pk-mavi); --mavi-h:#2BB8E6; --m05:rgba(0,169,224,.05); --m08:rgba(0,169,224,.08); --m14:rgba(0,169,224,.14); --m24:rgba(0,169,224,.24); --m40:rgba(0,169,224,.4);
  --ink:var(--pk-siyah); --ink2:#4A4D4F; --ink3:#6A6D6F; --gumus:var(--pk-gumus);
  --g1:var(--pk-acik); --g2:#EDEDED; --line:#D9DADB; --line2:#E8E9EA;
  --font:var(--pk-sans); --mono:var(--pk-mono);
  --pad:48px; --maxw:1344px; --ease:cubic-bezier(.2,.7,.1,1);
  position:relative; display:block; background:#fff; color:var(--ink); font:400 16px/1.55 var(--font); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:clip; text-rendering:optimizeLegibility;
}
@media (max-width:1100px){ .pk-tasarruf-anim{--pad:32px} }
@media (max-width:640px){ .pk-tasarruf-anim{--pad:16px} }
.pk-tasarruf-anim *,.pk-tasarruf-anim *::before,.pk-tasarruf-anim *::after{box-sizing:border-box}
.pk-tasarruf-anim img,.pk-tasarruf-anim svg,.pk-tasarruf-anim canvas{display:block; max-width:100%}
.pk-tasarruf-anim a{color:inherit}
.pk-tasarruf-anim button,.pk-tasarruf-anim input{font:inherit; color:inherit}
.pk-tasarruf-anim button{cursor:pointer}
.pk-tasarruf-anim h2,.pk-tasarruf-anim p{margin:0}
.pk-tasarruf-anim [hidden]{display:none!important}
.pk-tasarruf-anim :focus-visible{outline:2.5px solid var(--mavi); outline-offset:3px}
.pk-tasarruf-anim .ph{font-family:var(--mono); font-size:.84em; font-weight:500; background:#fff; border:1px dashed #A9ACAE; border-radius:5px; padding:1px 6px; white-space:nowrap; color:var(--ink2); letter-spacing:0}

/* ── temel ── */
.pk-tasarruf-anim .wrap{width:100%;max-width:calc(var(--maxw) + var(--pad)*2);margin:0 auto;padding:0 var(--pad)}
.pk-tasarruf-anim .ic{width:20px;height:20px;flex:none}
.pk-tasarruf-anim .kicker{display:flex;align-items:center;gap:10px;font:500 12px/1.25 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.pk-tasarruf-anim .kd{width:8px;height:8px;border-radius:50%;background:var(--mavi);flex:none}
.pk-tasarruf-anim .btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 20px;border-radius:10px;border:1.5px solid transparent;background:none;font:600 15px/1 var(--font);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;transition:background-color .2s,border-color .2s,box-shadow .25s,transform .15s,color .2s;color:var(--ink)}
.pk-tasarruf-anim .btn .ic{width:18px;height:18px;transition:transform .25s var(--ease)}
.pk-tasarruf-anim .btn:hover .ic.arr{transform:translateX(3px)}
.pk-tasarruf-anim .btn-pri{background:var(--mavi);color:var(--ink)}
.pk-tasarruf-anim .btn-pri:hover{background:var(--mavi-h);box-shadow:0 12px 28px -14px rgba(0,169,224,.95)}
.pk-tasarruf-anim .btn:active{transform:translateY(1px)}
.pk-tasarruf-anim .btn-sec{background:#fff;border-color:var(--ink)}
.pk-tasarruf-anim .btn-sec:hover{background:var(--g1)}
.pk-tasarruf-anim .btn-lg{--h:58px;padding:0 24px;font-size:16.5px;border-radius:12px}
/* ── kahraman ── */
.pk-tasarruf-anim .hero{padding:26px 0 72px;position:relative}
.pk-tasarruf-anim .hero::before{content:"";position:absolute;inset:0 0 auto 0;height:560px;background:linear-gradient(90deg,rgba(29,29,27,.035) 1px,transparent 1px) 0 0/calc((100% - 2*var(--pad))/12) 100%;mask-image:linear-gradient(180deg,#000,transparent);-webkit-mask-image:linear-gradient(180deg,#000,transparent);pointer-events:none;opacity:.6}
.pk-tasarruf-anim .hero-top{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 368px;gap:36px 56px;align-items:end}
.pk-tasarruf-anim .h1{margin-top:22px;font-weight:800;font-size:clamp(44px,6.7vw,98px);line-height:.9;letter-spacing:-.048em}
.pk-tasarruf-anim .h1 .l{display:block;animation:tarise .7s var(--ease) both}
.pk-tasarruf-anim .h1 .l:nth-child(2){animation-delay:.06s}
.pk-tasarruf-anim .h1 .l:nth-child(3){animation-delay:.12s}
.pk-tasarruf-anim .h1 .mbr{display:none}
@keyframes tarise{from{opacity:0;transform:translateY(22px)}}
.pk-tasarruf-anim .pct{position:relative;display:inline-block;color:transparent;background:repeating-linear-gradient(-45deg,rgba(0,169,224,.62) 0 2.2px,rgba(0,169,224,.16) 2.2px 8px);-webkit-background-clip:text;background-clip:text;font-variant-numeric:tabular-nums}
.pk-tasarruf-anim .pct::after{content:attr(data-t);content:attr(data-t) / "";position:absolute;left:0;top:0;color:var(--mavi);background:none;clip-path:inset(-12% calc(100% - var(--f,0%)) -12% 0)}
.pk-tasarruf-anim .pct-u{font-weight:800}
.pk-tasarruf-anim .hero-side{display:grid;gap:22px;padding-bottom:8px;animation:tarise .7s .18s var(--ease) both}
.pk-tasarruf-anim .lead{font-size:18px;line-height:1.55;color:var(--ink2)}
.pk-tasarruf-anim .lead b{color:var(--ink);font-weight:600}
.pk-tasarruf-anim .cta-col{display:grid;gap:10px}
.pk-tasarruf-anim .cta-col .btn{width:100%;justify-content:space-between}
/* ── yarış ── */
.pk-tasarruf-anim .race{position:relative;margin-top:30px;background:var(--g1);border-radius:24px;padding:18px 22px 16px;animation:tarise .8s .22s var(--ease) both}
.pk-tasarruf-anim .race-head{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-bottom:6px}
.pk-tasarruf-anim .race-title{font:700 15px/1.3 var(--font);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pk-tasarruf-anim .race-title span{font:500 11.5px/1.3 var(--mono);color:var(--ink2);letter-spacing:.03em}
.pk-tasarruf-anim .claim{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 6px;font:500 12px/1.3 var(--mono);color:var(--ink)}
.pk-tasarruf-anim .claim i{width:22px;height:22px;border-radius:50%;background:var(--mavi);display:grid;place-items:center;font:800 12px/1 var(--font);font-style:normal;color:var(--ink);flex:none}
.pk-tasarruf-anim .rgrid{--viz:min(31%,410px);--gapc:22px;--trp:20px;position:relative;display:grid;gap:8px}
.pk-tasarruf-anim .rrow{display:grid;grid-template-columns:var(--viz) minmax(0,1fr);column-gap:var(--gapc)}
.pk-tasarruf-anim .ruler{grid-column:2;position:relative;height:28px;margin-right:var(--trp)}
.pk-tasarruf-anim .ruler .tk{position:absolute;left:0;right:0;bottom:0;height:7px;background:repeating-linear-gradient(90deg,#AEB0B2 0 1px,transparent 1px 5%)}
.pk-tasarruf-anim .ruler .tk2{position:absolute;left:0;right:0;bottom:0;height:12px;background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 25%)}
.pk-tasarruf-anim .ruler .tk2::after{content:"";position:absolute;right:0;bottom:0;width:1px;height:12px;background:var(--ink)}
.pk-tasarruf-anim .rl{position:absolute;top:2px;transform:translateX(-50%);font:500 11px/1 var(--mono);color:var(--ink2);white-space:nowrap}
.pk-tasarruf-anim .rl.first{transform:none}
.pk-tasarruf-anim .rl.last{transform:translateX(-100%)}
.pk-tasarruf-anim .rl.b{color:var(--ink);font-weight:700}
.pk-tasarruf-anim .rl.b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--mavi);margin-right:5px;vertical-align:1px}
.pk-tasarruf-anim .ruler input{position:absolute;inset:-6px 0 -2px;width:100%;margin:0;opacity:0;cursor:ew-resize}
.pk-tasarruf-anim .ruler:focus-within{outline:2.5px solid var(--mavi);outline-offset:4px;border-radius:4px}
.pk-tasarruf-anim .rail{position:relative;background:#fff;border-radius:16px;height:124px;overflow:hidden;box-shadow:0 0 0 1px transparent;transition:box-shadow .45s var(--ease)}
.pk-tasarruf-anim .rail.done{box-shadow:0 0 0 1.5px var(--mavi),0 0 0 6px var(--m14)}
.pk-tasarruf-anim .rail-cut.done{box-shadow:0 0 0 1px #C9CBCD}
.pk-tasarruf-anim .viz{position:relative;border-right:1px solid var(--line2);background:linear-gradient(180deg,#fff 0%,#FBFBFB 100%);min-width:0}
.pk-tasarruf-anim .viz canvas{position:absolute;inset:0;width:100%;height:100%}
.pk-tasarruf-anim .viz-tag{position:absolute;left:12px;top:10px;font:600 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);pointer-events:none;white-space:nowrap}
.pk-tasarruf-anim .trk-col{display:flex;flex-direction:column;justify-content:center;gap:10px;padding-right:var(--trp);min-width:0}
.pk-tasarruf-anim .ln-top{display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.pk-tasarruf-anim .ln-name{font:700 16px/1.15 var(--font);letter-spacing:-.01em;min-width:0}
.pk-tasarruf-anim .ln-name small{display:block;font:500 11.5px/1.35 var(--mono);color:var(--ink2);letter-spacing:.01em;margin-top:4px;font-weight:500}
.pk-tasarruf-anim .ln-st{font:600 12px/1 var(--mono);color:var(--ink2);white-space:nowrap;display:flex;align-items:center;gap:7px}
.pk-tasarruf-anim .ln-st .sd{width:8px;height:8px;border-radius:50%;background:var(--gumus);animation:tablink 1s steps(2) infinite}
.pk-tasarruf-anim .ln-st.ok{color:var(--ink)}
.pk-tasarruf-anim .ln-st.ok .sd{background:var(--mavi);animation:none}
@keyframes tablink{50%{opacity:.25}}
.pk-tasarruf-anim .trk{position:relative;height:40px;border-radius:9px;background:var(--g1);overflow:hidden}
.pk-tasarruf-anim .trk::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(29,29,27,.07) 0 1px,transparent 1px 10%)}
.pk-tasarruf-anim .fill{position:absolute;top:0;bottom:0;left:0;clip-path:inset(0 100% 0 0)}
.pk-tasarruf-anim .fill-cut{right:0;background:linear-gradient(180deg,#C7C9CB 0%,#A3A6A8 100%)}
.pk-tasarruf-anim .fill-roll{width:10%;background:var(--mavi)}
.pk-tasarruf-anim .fill i{position:absolute;left:12px;top:50%;transform:translateY(-50%);font:600 11.5px/1 var(--mono);font-style:normal;color:var(--ink);white-space:nowrap;letter-spacing:.02em}
/* v24.15: "vida diş ovalama" dolgu etiketi dolgu genişliğinde sarılır; sığmazsa gizlenir (yarım sözcük gösterilmez, betik: sigdir) */
.pk-tasarruf-anim .fill-roll i{right:2px;white-space:normal;overflow-wrap:normal;word-break:normal;line-height:1.1}
.pk-tasarruf-anim .fill-roll i.sigmaz{visibility:hidden}
.pk-tasarruf-anim .saved{position:absolute;top:0;bottom:0;left:10%;right:0;clip-path:inset(0 100% 0 0);background:repeating-linear-gradient(-45deg,rgba(0,169,224,.36) 0 1.6px,rgba(0,169,224,.08) 1.6px 7px);background-size:9.9px 9.9px;border-left:2px solid var(--ink)}
.pk-tasarruf-anim .race.playing .saved{animation:tadrift 1.6s linear infinite}
@keyframes tadrift{to{background-position:9.9px 0}}
.pk-tasarruf-anim .sv-lbl{position:absolute;left:calc(10% + 16px);top:50%;transform:translate(-6px,-50%);opacity:0;transition:opacity .35s,transform .45s var(--ease);display:flex;align-items:baseline;gap:9px;font:600 11.5px/1 var(--mono);color:var(--ink);white-space:nowrap;letter-spacing:.02em;pointer-events:none}
.pk-tasarruf-anim .sv-lbl.on{opacity:1;transform:translate(0,-50%)}
.pk-tasarruf-anim .sv-lbl b{font:800 25px/1 var(--font);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.pk-tasarruf-anim .trk-axis{display:none;justify-content:space-between;font:500 10.5px/1 var(--mono);color:var(--ink3)}
.pk-tasarruf-anim .rph{position:absolute;bottom:0;left:0;width:0;height:19px;border-left:1.5px solid var(--ink);z-index:3;pointer-events:none}
.pk-tasarruf-anim .rph::before{content:"";position:absolute;top:-7px;left:-6.25px;border:5.5px solid transparent;border-top:7px solid var(--ink)}
.pk-tasarruf-anim .tph{position:absolute;top:0;bottom:0;left:0;width:0;border-left:1.5px solid var(--ink);z-index:3;pointer-events:none}
.pk-tasarruf-anim .tmk{position:absolute;top:0;bottom:0;left:10%;border-left:1.5px dashed var(--mavi);z-index:2;pointer-events:none}
.pk-tasarruf-anim .rctl{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.pk-tasarruf-anim .rbtn{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;display:grid;place-items:center;color:var(--ink);transition:background-color .2s}
.pk-tasarruf-anim .rbtn:hover{background:var(--g2)}
.pk-tasarruf-anim .rbtn .ic{width:18px;height:18px}
.pk-tasarruf-anim .t-read{font:600 13px/1 var(--mono);min-width:96px;font-variant-numeric:tabular-nums}
.pk-tasarruf-anim .rnote{margin-left:auto;font:500 11.5px/1.45 var(--mono);color:var(--ink2);text-align:right}
.pk-tasarruf-anim .mscrub{display:none;width:100%;accent-color:var(--mavi)}
/* ── duyarlı ── */
@media (max-width:1240px){
  .pk-tasarruf-anim .hero-top{grid-template-columns:minmax(0,1fr) 330px}
}
@media (max-width:1100px){
  .pk-tasarruf-anim .hero-top{grid-template-columns:1fr;align-items:start}
  .pk-tasarruf-anim .hero-side{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start;gap:18px 32px}
}
@media (max-width:760px){
  .pk-tasarruf-anim .rgrid{--viz:100%}
  .pk-tasarruf-anim .rrow.rr{display:none}
  .pk-tasarruf-anim .rail{height:auto;grid-template-columns:1fr}
  .pk-tasarruf-anim .viz{height:118px;border-right:0;border-bottom:1px solid var(--line2)}
  .pk-tasarruf-anim .trk-col{padding:13px 14px 14px}
  .pk-tasarruf-anim .trk-axis{display:flex}
  .pk-tasarruf-anim .fill-roll i{display:none}
  .pk-tasarruf-anim .sv-lbl{left:calc(10% + 10px)}
  .pk-tasarruf-anim .mscrub{display:block;order:9}
  .pk-tasarruf-anim .rnote{margin-left:0;text-align:left;order:10}
  .pk-tasarruf-anim .ln-top{flex-direction:column;align-items:flex-start;gap:8px}
  .pk-tasarruf-anim .hero-side{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pk-tasarruf-anim .hero{padding:22px 0 56px}
  .pk-tasarruf-anim .h1{font-size:clamp(40px,14.6vw,64px);line-height:.92;margin-top:16px}
  .pk-tasarruf-anim .h1 .mbr{display:block}
  .pk-tasarruf-anim .pct{-webkit-text-stroke-width:1.5px}
  .pk-tasarruf-anim .lead{font-size:17px}
  .pk-tasarruf-anim .race{padding:14px 12px 14px;border-radius:20px;margin-top:30px}
  .pk-tasarruf-anim .race-head{margin-bottom:10px}
  .pk-tasarruf-anim .claim{font-size:11px;border-radius:14px;padding:6px 10px 6px 6px}
}
/* ── hareket azaltma ── */
@media (prefers-reduced-motion:reduce){
  .pk-tasarruf-anim *,.pk-tasarruf-anim *::before,.pk-tasarruf-anim *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* Etüt v22.11 · v22.12: diş ailesi ve çap × hatve seçici — Diş Asistanı'ndaki bütün dişler (yalnız opts.secici ile, eksenel kategori sayfalarında) */
.pk-tasarruf-anim .ta-sec{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin:6px 0 14px}
.pk-tasarruf-anim .ta-sec label{display:grid;gap:5px;min-width:0;flex:0 1 auto;max-width:100%}
.pk-tasarruf-anim .ta-sec select{max-width:min(440px,100%)}
.pk-tasarruf-anim .ta-sec select:disabled{opacity:.6;cursor:progress}
.pk-tasarruf-anim .ta-sec label span{font:500 11px/1.2 "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.pk-tasarruf-anim .ta-sec select{font:500 15px/1.2 "Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink);background:#fff;border:1.5px solid var(--ink);border-radius:10px;min-height:44px;padding:8px 36px 8px 12px;max-width:100%;-webkit-appearance:none;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
.pk-tasarruf-anim .ta-sec select:focus-visible{outline:2.5px solid var(--mavi);outline-offset:2px}
.pk-tasarruf-anim .ta-sec-n{flex:1 1 260px;margin:0;font:500 12px/1.45 "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;color:var(--ink2);padding-bottom:4px}
@media (max-width:640px){.pk-tasarruf-anim .ta-sec label{flex:1 1 100%}.pk-tasarruf-anim .ta-sec select{width:100%}}