/* VABS v22-o106 "Etüt" · yontem-anim · kaynak Başyapıt v24 parca-yontem-anim.css (aynen); pk-* belirteçleri Etüt değerleriyle.
   v22.7: kategori.html?id=radyal ve ?id=tegetsel sayfalarında yalnız o yöntemin animasyonu (data-tek), kategori-yontem.js ile eklenir. */
/* yazı tipleri doğrudan verilir: modül içinde --mono / --font yeniden tanımlandığından var(--mono) zinciri döngüye girerdi */
.pk.pk-yontem-anim{--pk-sans:"Archivo","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;--pk-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;--pk-mavi:#00A9E0;--pk-mavi-koyu:#00739A;--pk-siyah:#1D1D1B;--pk-gumus:#8C8F91;--pk-acik:#F4F4F4;--pk-acik-mavi:#E3F4FB}
/* temsili rozeti (Başyapıt site.css'ten aynen; Etüt site.css'te yok) */
.pk-yontem-anim .temsili{display:inline-flex;align-items:center;gap:7px;font:400 .66rem/1 var(--pk-mono);letter-spacing:.06em;color:#5A5D60;background:rgba(255,255,255,.94);border:1px solid var(--pk-gumus);border-radius:3px;padding:6px 9px;white-space:nowrap;pointer-events:none}
.pk-yontem-anim .temsili b{font-weight:500;letter-spacing:.1em;color:var(--pk-siyah)}
.pk-yontem-anim .temsili::before{content:"";width:7px;height:7px;border:1px solid var(--pk-gumus);border-radius:50%;flex:0 0 auto}
.pk-yontem-anim>.temsili{position:absolute;top:12px;right:12px;z-index:7}
@media (max-width:599px){.pk-yontem-anim>.temsili{position:static;display:inline-flex;margin:10px 16px 0;padding:5px 7px}}

/* VABS v24 · parça modülleri CSS · yontem-anim · yapım betiğiyle birleştirildi; kurallar .pk-<id> ile kapsamlı */

/* ===== yontem-anim ===== */
.pk-yontem-anim{
  --mavi:var(--pk-mavi); --mavi-06:rgba(0,169,224,.07); --mavi-12:rgba(0,169,224,.13); --mavi-45:rgba(0,169,224,.45);
  --ink:var(--pk-siyah); --mut:#6B6E70; --gum:var(--pk-gumus); --line:#D5D6D7; --line-2:#E6E7E8; --g1:var(--pk-acik); --g2:#EDEDED; --w:#FFFFFF;
  --font:var(--pk-sans); --mono:var(--pk-mono);
  --gut:40px; --hdr:72px;
  position:relative; display:block; background:var(--w); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.55; overflow-x:clip; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.pk-yontem-anim *,.pk-yontem-anim *::before,.pk-yontem-anim *::after{box-sizing:border-box}
.pk-yontem-anim img{max-width:100%; display:block}
.pk-yontem-anim a{color:inherit}
.pk-yontem-anim button{font:inherit; color:inherit}
.pk-yontem-anim h2:not(:where(.pk-h1)),.pk-yontem-anim h3,.pk-yontem-anim p{margin:0}
.pk-yontem-anim ul,.pk-yontem-anim ol{margin:0; padding:0}
.pk-yontem-anim [hidden]{display:none!important}
.pk-yontem-anim .sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.pk-yontem-anim :focus-visible{outline:2px solid var(--ink); outline-offset:3px; box-shadow:0 0 0 6px rgba(0,169,224,.35)}
.pk-yontem-anim .wrap{max-width:1360px; margin:0 auto; padding:0 var(--gut)}
.pk-yontem-anim .ph{display:inline-block; font:500 12px/1.3 var(--mono); padding:3px 7px; border:1px dashed var(--gum); background:var(--g1); color:var(--mut); font-style:normal; white-space:nowrap}


.pk-yontem-anim .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:0 20px; font:600 15px/1.2 var(--font); border-radius:2px; text-decoration:none; cursor:pointer; border:1px solid transparent; transition:box-shadow .2s, background-color .2s, transform .2s; white-space:nowrap}
.pk-yontem-anim .btn svg{flex:none}
.pk-yontem-anim .btn-p{background:var(--mavi); color:var(--ink)}
.pk-yontem-anim .btn-p:hover{box-shadow:inset 0 -3px 0 rgba(29,29,27,.28)}
.pk-yontem-anim .btn-w{background:var(--w); color:var(--ink)}
.pk-yontem-anim .btn-w:hover{box-shadow:inset 0 -3px 0 var(--ink)}
.pk-yontem-anim .btn-l{background:transparent; color:var(--ink); border-color:var(--ink)}
.pk-yontem-anim .btn-l:hover{background:rgba(255,255,255,.35)}
.pk-yontem-anim .lnk{display:inline-flex; align-items:center; gap:6px; font:600 14.5px var(--font); color:var(--ink); text-decoration:none; background:none; border:0; padding:6px 0; cursor:pointer; box-shadow:inset 0 -1.5px 0 var(--mavi)}
.pk-yontem-anim .lnk:hover{box-shadow:inset 0 -3px 0 var(--mavi)}

.pk-yontem-anim .hero{padding:22px 0 26px}
.pk-yontem-anim .hero-top{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:48px; align-items:end; margin-bottom:18px}
.pk-yontem-anim .kick,.pk-yontem-anim .sec-no{display:flex; align-items:center; gap:10px; font:600 11.5px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--ink); margin-bottom:16px}
.pk-yontem-anim .kick span,.pk-yontem-anim .sec-no span{color:var(--mut)}
.pk-yontem-anim .kick::before,.pk-yontem-anim .sec-no::before{content:""; width:22px; height:2px; background:var(--mavi)}
.pk-yontem-anim .h1{font-size:clamp(36px,4.3vw,62px); line-height:1; letter-spacing:-.035em; font-weight:750; max-width:16.5ch}
.pk-yontem-anim .h1 .ul{text-decoration:underline; text-decoration-color:var(--mavi); text-decoration-thickness:.075em; text-underline-offset:.11em}
.pk-yontem-anim .hero-side p{font-size:16px; line-height:1.55; color:var(--ink)}
.pk-yontem-anim .hero-side strong{font-weight:650}
.pk-yontem-anim .keys{list-style:none; display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:12px; font:500 11.5px var(--mono); color:var(--mut)}
.pk-yontem-anim .keys li{display:flex; align-items:center; gap:8px}

.pk-yontem-anim .methods{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.pk-yontem-anim .mc{position:relative; background:var(--w); border:1px solid var(--line); display:flex; flex-direction:column; min-width:0; transition:border-color .25s, opacity .35s}
.pk-yontem-anim .mc{animation:yarise .8s cubic-bezier(.2,.7,.2,1) backwards}
.pk-yontem-anim .mc:nth-child(2){animation-delay:.09s}
.pk-yontem-anim .mc:nth-child(3){animation-delay:.18s}
.pk-yontem-anim .mc:nth-child(4){animation-delay:.27s}
.pk-yontem-anim .tl{animation:yarise .8s .26s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes yarise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.pk-yontem-anim .mc:hover{border-color:#B9BBBD}
.pk-yontem-anim .mc.is-sel:hover{border-color:var(--ink)}
.pk-yontem-anim .mc::before{content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:3px; background:var(--mavi); transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.2,.7,.2,1); z-index:2}
.pk-yontem-anim .mc.is-sel{border-color:var(--ink)}
.pk-yontem-anim .mc.is-sel::before{transform:scaleX(1)}
.pk-yontem-anim .methods.has-sel .mc:not(.is-sel){opacity:.52}
.pk-yontem-anim .methods.has-sel .mc:not(.is-sel):hover,.pk-yontem-anim .methods.has-sel .mc:not(.is-sel):focus-within{opacity:.9}
.pk-yontem-anim .mc-head{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:12px 14px 4px 16px}
.pk-yontem-anim .mc-glyph{width:34px; height:34px; color:var(--ink)}
.pk-yontem-anim .mc-no{display:inline-block; font:600 11px var(--mono); color:var(--mut); letter-spacing:.06em; margin-right:8px; vertical-align:5px}
.pk-yontem-anim .mc-name{display:inline; font-size:27px; font-weight:700; letter-spacing:-.025em; line-height:1}
.pk-yontem-anim .mc-sel{height:36px; padding:0 14px; border:1px solid var(--ink); background:var(--w); font:600 13.5px var(--font); cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:background-color .2s}
.pk-yontem-anim .mc-sel:hover{background:var(--g1)}
.pk-yontem-anim .mc-sel .t1{display:none; align-items:center; gap:6px}
.pk-yontem-anim .mc-sel[aria-pressed="true"]{background:var(--mavi); border-color:var(--mavi)}
.pk-yontem-anim .mc-sel[aria-pressed="true"] .t0{display:none}
.pk-yontem-anim .mc-sel[aria-pressed="true"] .t1{display:inline-flex}
.pk-yontem-anim .mc-desc{padding:0 16px 10px; font-size:13.5px; line-height:1.45; color:var(--mut); border-bottom:1px solid var(--line-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pk-yontem-anim .mc-stage{position:relative; aspect-ratio:416/346; background-image:radial-gradient(circle, #DADBDC 0.75px, transparent 1.1px); background-size:16px 16px; background-position:0 0}
.pk-yontem-anim .mc-stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.pk-yontem-anim .mc-lane{position:relative; height:40px; margin:0 16px; border-top:1px solid var(--line-2)}
.pk-yontem-anim .mc-lane .phs{position:absolute; top:5px; height:13px; font:500 9.5px/13px var(--mono); color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 3px 0 4px; border-left:1px solid var(--line)}
.pk-yontem-anim .mc-lane .phs.on{color:var(--ink); font-weight:600}
.pk-yontem-anim .mc-lane .phs.nolab{color:transparent}
.pk-yontem-anim .mc-lane svg{position:absolute; left:0; right:0; bottom:4px; width:100%; height:18px; overflow:visible}
.pk-yontem-anim .mc-lane .ph-band{fill:var(--g1)} .pk-yontem-anim .mc-lane .ph-band.alt{fill:var(--g2)} .pk-yontem-anim .mc-lane .ph-band.on{fill:var(--mavi-12)}
.pk-yontem-anim .mc-lane .cv-d{fill:none; stroke:var(--mavi); stroke-width:2; vector-effect:non-scaling-stroke; stroke-linejoin:round}
.pk-yontem-anim .mc-lane .cv-b{fill:none; stroke:var(--gum); stroke-width:1.5; vector-effect:non-scaling-stroke; stroke-linejoin:round}
.pk-yontem-anim .mc-lane .ph-head{position:absolute; top:3px; bottom:2px; width:2px; margin-left:-1px; background:var(--ink); pointer-events:none}
.pk-yontem-anim .mc-read{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); border-top:1px solid var(--line-2); margin:0}
.pk-yontem-anim .mc-read>div{padding:8px 14px 9px; border-left:1px solid var(--line-2); min-width:0}
.pk-yontem-anim .mc-read>div:first-child{border-left:0; padding-left:16px}
.pk-yontem-anim .mc-read dt{font:500 9.5px var(--mono); letter-spacing:.07em; text-transform:uppercase; color:var(--mut); margin-bottom:3px; white-space:nowrap}
.pk-yontem-anim .mc-read dd{margin:0; font-size:13.5px; font-weight:600; line-height:1.3; font-variant-numeric:tabular-nums}
.pk-yontem-anim .mc-read .r-ph{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em}
.pk-yontem-anim .mc-read b{font:600 14px var(--mono)}
.pk-yontem-anim .meter{display:block; height:4px; background:var(--g2); margin-top:7px; position:relative; overflow:hidden}
.pk-yontem-anim .meter i{position:absolute; inset:0; background:var(--mavi); transform-origin:left; transform:scaleX(0)}
.pk-yontem-anim .meter.g i{background:var(--gum)}

.pk-yontem-anim .tl{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px; margin-top:14px; padding:12px 16px; border:1px solid var(--line); background:var(--w)}
.pk-yontem-anim .tl-play{width:46px; height:46px; border-radius:50%; border:0; background:var(--mavi); color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:transform .2s}
.pk-yontem-anim .tl-play:hover{transform:scale(1.05)}
.pk-yontem-anim .tl-row{display:flex; align-items:baseline; gap:18px; margin-bottom:6px; min-width:0}
.pk-yontem-anim .tl-t{font:500 11.5px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--mut); white-space:nowrap}
.pk-yontem-anim .tl-t b{font:600 14px var(--mono); color:var(--ink); letter-spacing:0; margin-left:6px; display:inline-block; min-width:4ch}
.pk-yontem-anim .tl-legend{display:flex; align-items:center; gap:8px; font:500 11px var(--mono); color:var(--mut); white-space:nowrap}
.pk-yontem-anim .lk{display:inline-block; width:16px; height:2px; background:var(--mavi); margin-left:6px}
.pk-yontem-anim .lk.g{background:var(--gum); height:1.5px}
.pk-yontem-anim .tl-note{margin-left:auto; font:500 11px var(--mono); color:var(--mut); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pk-yontem-anim .tl-track{position:relative; height:30px; cursor:ew-resize; touch-action:none; outline-offset:4px}
.pk-yontem-anim .tl-rail{position:absolute; left:0; right:0; top:8px; height:4px; background:var(--g2)}
.pk-yontem-anim .tl-fill{position:absolute; left:0; top:0; bottom:0; width:100%; background:var(--mavi); transform-origin:left; transform:scaleX(0)}
.pk-yontem-anim .tl-ticks span{position:absolute; top:16px; transform:translateX(-50%); font:500 10px var(--mono); color:var(--mut)}
.pk-yontem-anim .tl-ticks span:first-child{transform:none} .pk-yontem-anim .tl-ticks span:last-child{transform:translateX(-100%)}
.pk-yontem-anim .tl-ticks span::before{content:""; position:absolute; left:50%; top:-6px; width:1px; height:5px; background:var(--gum)}
.pk-yontem-anim .tl-ticks span:first-child::before{left:0} .pk-yontem-anim .tl-ticks span:last-child::before{left:auto; right:0}
.pk-yontem-anim .tl-knob{position:absolute; top:1px; width:18px; height:18px; margin-left:-9px; border-radius:50%; background:var(--w); border:2px solid var(--ink); box-shadow:0 0 0 4px rgba(0,169,224,.22); pointer-events:none}
.pk-yontem-anim .tl-speed{display:flex; border:1px solid var(--line)}
.pk-yontem-anim .tl-speed button{height:34px; padding:0 10px; border:0; background:var(--w); font:500 12px var(--mono); cursor:pointer; color:var(--mut)}
.pk-yontem-anim .tl-speed button+button{border-left:1px solid var(--line)}
.pk-yontem-anim .tl-speed button[aria-pressed="true"]{background:var(--g2); color:var(--ink); box-shadow:inset 0 -2px 0 var(--mavi); font-weight:600}

.pk-yontem-anim .selbar{display:flex; align-items:center; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; margin-top:12px; padding:2px 2px}
.pk-yontem-anim .selbar-t{font-size:14.5px}
.pk-yontem-anim .selbar-k{font:600 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mut); margin-right:8px}
.pk-yontem-anim .selbar-v b{font-weight:650}
.pk-yontem-anim .selbar-a{display:flex; gap:20px; align-items:center; flex-wrap:wrap}


.pk-yontem-anim .mc-read dt{overflow:hidden; text-overflow:ellipsis}

.pk-yontem-anim .sec{padding:112px 0}
.pk-yontem-anim .sec-head{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:20px 64px; align-items:end; margin-bottom:44px}
.pk-yontem-anim .sec-head .sec-no{grid-column:1/-1; margin-bottom:0}
.pk-yontem-anim .sec-head h2:not(:where(.pk-h1)),.pk-yontem-anim .rap-txt h2:not(:where(.pk-h1)){font-size:clamp(30px,3.5vw,50px); line-height:1.04; letter-spacing:-.03em; font-weight:700}
.pk-yontem-anim .sec-lead{font-size:16.5px; color:var(--ink); max-width:46ch}


.pk-yontem-anim #karsilastirma{background:var(--w); border-top:1px solid var(--line)}
.pk-yontem-anim .mx{width:100%; border-collapse:collapse; table-layout:fixed}
.pk-yontem-anim .mx col.c0{width:22%}
.pk-yontem-anim .mx th,.pk-yontem-anim .mx td{padding:18px 22px 18px 0; vertical-align:top; text-align:left; border-top:1px solid var(--line); font-size:15.5px; line-height:1.5}
.pk-yontem-anim .mx td{padding-left:22px; transition:background-color .25s}
.pk-yontem-anim .mx thead th,.pk-yontem-anim .mx thead td{border-top:0; padding-top:0; padding-bottom:16px; vertical-align:bottom}
.pk-yontem-anim .mx tbody th{font:600 11px/1.5 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mut); padding-top:21px}
.pk-yontem-anim .mx td b{font-weight:650}
.pk-yontem-anim .mx td.is-sel,.pk-yontem-anim .mx thead th.is-sel{background:var(--mavi-06)}
.pk-yontem-anim .mx thead th.is-sel{box-shadow:inset 0 3px 0 var(--mavi)}
.pk-yontem-anim .mx-h{display:flex; align-items:center; gap:12px; width:100%; padding:16px 22px 0; background:none; border:0; cursor:pointer; text-align:left}
.pk-yontem-anim .mx-h svg{width:32px; height:32px; flex:none}
.pk-yontem-anim .mx-h span{font-size:24px; font-weight:700; letter-spacing:-.02em; line-height:1.1}
.pk-yontem-anim .mx-h small{display:block; font:600 11px var(--mono); color:var(--mut); letter-spacing:.06em}
.pk-yontem-anim .mx-h:hover span{text-decoration:underline; text-decoration-color:var(--mavi); text-decoration-thickness:2px; text-underline-offset:4px}
.pk-yontem-anim .mx thead th{padding:0; border-bottom:1px solid var(--ink)}
.pk-yontem-anim .mx thead td{border-bottom:1px solid var(--ink)}
.pk-yontem-anim .mx .note{display:block; margin-top:6px; font:500 12px var(--mono); color:var(--mut)}
.pk-yontem-anim .mx-prod a{font-weight:650; text-decoration:none; box-shadow:inset 0 -1.5px 0 var(--mavi)}
.pk-yontem-anim .mx-prod a:hover{box-shadow:inset 0 -3px 0 var(--mavi)}
.pk-yontem-anim .mx-common td{font:500 13px/1.6 var(--mono); color:var(--ink); background:var(--g1)}
.pk-yontem-anim .mx-common th{background:var(--g1); padding-left:16px}


.pk-yontem-anim .rap{background:var(--g1)}
.pk-yontem-anim .rap-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:72px; align-items:start}
.pk-yontem-anim .rap-vis{position:sticky; top:calc(var(--hdr) + 40px)}
.pk-yontem-anim .docs{position:relative; aspect-ratio:1/1.08; max-width:560px}
.pk-yontem-anim .doc{position:absolute; width:60%; aspect-ratio:1/1.414; background:var(--w); box-shadow:0 0 0 1px rgba(29,29,27,.06),0 28px 50px -26px rgba(29,29,27,.32); transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.pk-yontem-anim .doc.d1{left:0; top:6%; transform:rotate(-2deg); z-index:2}
.pk-yontem-anim .doc.d2{left:36%; top:0; transform:rotate(1.5deg); z-index:1}
.pk-yontem-anim .doc.d3{left:40%; top:10%; transform:rotate(4deg)}
.pk-yontem-anim .d2 .doc-in{padding-left:42%}
.pk-yontem-anim .docs:hover .doc.d1,.pk-yontem-anim .docs.open .doc.d1{transform:rotate(-3.5deg) translate(-2%,2%)}
.pk-yontem-anim .docs:hover .doc.d3,.pk-yontem-anim .docs.open .doc.d3{transform:rotate(6deg) translate(3%,1%)}
.pk-yontem-anim .doc-in{position:absolute; inset:0; padding:9% 9% 8%; display:flex; flex-direction:column}
.pk-yontem-anim .doc-top{display:flex; justify-content:space-between; align-items:center; font:600 8.5px var(--mono); letter-spacing:.1em; color:var(--mut)}
.pk-yontem-anim .doc-top img{width:70px; height:auto}
.pk-yontem-anim .doc-t{margin-top:20%; font-size:clamp(20px,2.4vw,34px); font-weight:750; letter-spacing:-.03em; line-height:1.02}
.pk-yontem-anim .doc-s{margin-top:8px; font:500 11px var(--mono); color:var(--mut)}
.pk-yontem-anim .doc-fig{margin-top:auto; width:100%; height:auto}
.pk-yontem-anim .doc-f{margin-top:10px; padding-top:8px; border-top:1px solid var(--line); font:500 9px var(--mono); color:var(--mut)}
.pk-yontem-anim .doc-k{font:600 9px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--mut); margin:26% 0 10px}
.pk-yontem-anim .doc-toc{padding-left:14px; font-size:11px; line-height:1.5}
.pk-yontem-anim .doc-toc li{padding:3px 0; border-bottom:1px solid var(--line-2)}
.pk-yontem-anim .doc-lines{position:absolute; inset:12% 10%; background:repeating-linear-gradient(var(--w) 0 13px, var(--g2) 13px 15px)}
.pk-yontem-anim .locked{filter:blur(4px); opacity:.85; transition:filter .6s, opacity .6s}
.pk-yontem-anim .docs.open .locked{filter:none; opacity:1}
.pk-yontem-anim .doc-lock{position:absolute; z-index:3; right:3%; top:46%; transform:translate(0,-50%); display:flex; align-items:center; gap:8px; padding:9px 12px; background:var(--w); border:1px solid var(--ink); font:600 11.5px var(--mono); white-space:nowrap; transition:opacity .4s}
.pk-yontem-anim .docs.open .doc-lock{opacity:0}
.pk-yontem-anim .rap-txt h2:not(:where(.pk-h1)){margin-bottom:16px}
.pk-yontem-anim .rap-meta{list-style:none; display:flex; flex-wrap:wrap; gap:8px 28px; margin:22px 0 30px; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:14px}
.pk-yontem-anim .rap-meta span{font:600 10.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--mut); margin-right:10px}
.pk-yontem-anim .frm{display:grid; grid-template-columns:1fr 1fr; gap:16px 16px}
.pk-yontem-anim .fld{display:flex; flex-direction:column; gap:7px; min-width:0}
.pk-yontem-anim .fld.full{grid-column:1/-1}
.pk-yontem-anim .fld>label,.pk-yontem-anim .mset legend{font:600 11px var(--mono); letter-spacing:.07em; text-transform:uppercase}
.pk-yontem-anim .fld>label i,.pk-yontem-anim .chk i{color:var(--mut); font-style:normal}
.pk-yontem-anim .fld>label.chk{font:400 14px/1.5 var(--font); text-transform:none; letter-spacing:0}
.pk-yontem-anim .opt{font-weight:500; text-transform:none; letter-spacing:0; color:var(--mut); margin-left:4px}
.pk-yontem-anim .fld input:not([type=checkbox]),.pk-yontem-anim .fld select,.pk-yontem-anim .sel-l select{height:50px; width:100%; border:1px solid #B9BBBD; background:var(--w); padding:0 14px; font:500 16px var(--font); border-radius:0; color:var(--ink); -webkit-appearance:none; appearance:none}
.pk-yontem-anim .fld select,.pk-yontem-anim .sel-l select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px; background-size:5px 5px; background-repeat:no-repeat; padding-right:40px}
.pk-yontem-anim .fld input:hover,.pk-yontem-anim .fld select:hover{border-color:var(--ink)}
.pk-yontem-anim .fld input:focus-visible,.pk-yontem-anim .fld select:focus-visible{outline:2px solid var(--ink); outline-offset:0; box-shadow:0 0 0 5px rgba(0,169,224,.3)}
.pk-yontem-anim .fld input[aria-invalid="true"]{border:2px solid var(--ink); background:repeating-linear-gradient(135deg,var(--w) 0 8px,var(--g1) 8px 10px)}
.pk-yontem-anim .err{display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600}
.pk-yontem-anim .err::before{content:"!"; flex:none; width:18px; height:18px; border-radius:50%; border:1.5px solid var(--ink); display:grid; place-items:center; font:700 11px/1 var(--font)}
.pk-yontem-anim .mset{border:0; padding:0; margin:0}
.pk-yontem-anim .mset legend{padding:0; margin-bottom:8px}
.pk-yontem-anim .mchips{display:flex; flex-wrap:wrap; gap:8px}
.pk-yontem-anim .mchip{position:relative; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px 0 10px; border:1px solid #B9BBBD; background:var(--w); font-weight:600; font-size:14.5px; cursor:pointer}
.pk-yontem-anim .mchip svg{width:24px; height:24px}
.pk-yontem-anim .mchip input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.pk-yontem-anim .mchip:has(input:checked){border-color:var(--ink); box-shadow:inset 0 -3px 0 var(--mavi)}
.pk-yontem-anim .mchip:has(input:focus-visible){outline:2px solid var(--ink); outline-offset:3px}
.pk-yontem-anim .chk{position:relative; display:flex; gap:12px; align-items:flex-start; font-size:14px; line-height:1.5; cursor:pointer; padding:4px 0}
.pk-yontem-anim .chk input{position:absolute; opacity:0; width:22px; height:22px; margin:0; cursor:pointer}
.pk-yontem-anim .chk .box{flex:none; width:22px; height:22px; border:1.5px solid var(--ink); background:var(--w); display:grid; place-items:center; color:transparent; margin-top:1px}
.pk-yontem-anim .chk input:checked+.box{background:var(--mavi); border-color:var(--mavi); color:var(--ink)}
.pk-yontem-anim .chk input:focus-visible+.box{outline:2px solid var(--ink); outline-offset:3px}
.pk-yontem-anim .chk input[aria-invalid="true"]+.box{border-width:2.5px}
.pk-yontem-anim .chk a{text-decoration:none; box-shadow:inset 0 -1.5px 0 var(--mavi)}
.pk-yontem-anim .frm-act{flex-direction:row; align-items:center; flex-wrap:wrap; gap:14px 20px; margin-top:4px}
.pk-yontem-anim .frm-note{font:500 12px var(--mono); color:var(--mut)}
.pk-yontem-anim .frm-ok{margin-top:6px; padding:24px; background:var(--w); border:1px solid var(--ink); box-shadow:inset 0 3px 0 var(--mavi)}
.pk-yontem-anim .frm-ok-k{display:flex; align-items:center; gap:10px; font-size:22px; font-weight:700; letter-spacing:-.015em; margin-bottom:8px}
.pk-yontem-anim .frm-ok-k svg{width:28px; height:28px; padding:4px; background:var(--mavi); border-radius:50%}
.pk-yontem-anim .frm-ok-t{font-size:15px; margin-bottom:12px}

@media (max-width:1240px){
  .pk-yontem-anim .hero-top{grid-template-columns:1fr; gap:16px}
}
@media (max-width:1100px){
  .pk-yontem-anim{--gut:24px; --hdr:64px}
  .pk-yontem-anim .hero-top{grid-template-columns:1fr; gap:16px}
  .pk-yontem-anim .h1{max-width:none}
  .pk-yontem-anim .methods{grid-template-columns:1fr; gap:12px}
  .pk-yontem-anim .mc-desc{min-height:0}
  .pk-yontem-anim .mc-stage{aspect-ratio:772/300}
  .pk-yontem-anim .tl{position:sticky; bottom:0; z-index:30; box-shadow:0 -12px 30px -20px rgba(29,29,27,.35); margin-left:calc(var(--gut) * -1); margin-right:calc(var(--gut) * -1); border-left:0; border-right:0; padding:10px var(--gut)}
  .pk-yontem-anim .tl-note{display:none}
  .pk-yontem-anim .sec{padding:84px 0}
  .pk-yontem-anim .sec-head{grid-template-columns:1fr; gap:14px}
  .pk-yontem-anim .rap-grid{grid-template-columns:1fr; gap:40px}
  .pk-yontem-anim .rap-vis{position:relative; top:0; max-width:520px}
}
@media (max-width:640px){
  .pk-yontem-anim{--gut:16px; --hdr:60px; font-size:16px}
  .pk-yontem-anim .hero{padding:18px 0 22px}
  .pk-yontem-anim .h1{font-size:clamp(34px,10vw,44px)}
  .pk-yontem-anim .keys{gap:6px 14px}
  .pk-yontem-anim .mc-head{padding:12px 12px 4px; gap:10px}
  .pk-yontem-anim .mc-glyph{width:30px; height:30px}
  .pk-yontem-anim .mc-name{font-size:24px}
  .pk-yontem-anim .mc-desc{padding:0 12px 10px; font-size:13px}
  .pk-yontem-anim .mc-stage{aspect-ratio:358/350}
  .pk-yontem-anim .mc-lane{margin:0 12px}
  .pk-yontem-anim .mc-read>div{padding:8px 10px 10px}
  .pk-yontem-anim .mc-read>div:first-child{padding-left:12px}
  .pk-yontem-anim .mc-read dd{font-size:12.5px}
  .pk-yontem-anim .tl{grid-template-columns:auto minmax(0,1fr); gap:6px 12px}
  .pk-yontem-anim .tl-speed{grid-column:1/-1; justify-self:start; display:none}
  .pk-yontem-anim .tl-legend{display:none}
  .pk-yontem-anim .tl-play{width:42px; height:42px}
  .pk-yontem-anim .selbar{flex-direction:column; align-items:flex-start}
  .pk-yontem-anim .sec{padding:68px 0}
  .pk-yontem-anim .mx col.c0{width:auto}
  .pk-yontem-anim .mx,.pk-yontem-anim .mx tbody,.pk-yontem-anim .mx tr,.pk-yontem-anim .mx td,.pk-yontem-anim .mx tbody th{display:block; width:100%}
  .pk-yontem-anim .mx thead{display:block}
  .pk-yontem-anim .mx thead tr{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px}
  .pk-yontem-anim .mx thead td{display:none}
  .pk-yontem-anim .mx thead th{display:block; border-bottom:0}
  .pk-yontem-anim .mx-h{flex-direction:column; align-items:flex-start; gap:6px; padding:10px 10px 12px; border:1px solid var(--line); height:100%}
  .pk-yontem-anim .mx-h span{font-size:17px}
  .pk-yontem-anim .mx thead th.is-sel .mx-h{border-color:var(--ink)}
  .pk-yontem-anim .mx tbody tr{border-top:1px solid var(--ink); padding:14px 0 6px}
  .pk-yontem-anim .mx tbody th{padding:0 0 8px; border:0}
  .pk-yontem-anim .mx td{padding:9px 10px 10px; border-top:1px solid var(--line-2); font-size:15px}
  .pk-yontem-anim .mx td::before{content:attr(data-l); display:block; margin-bottom:2px; font:600 10.5px/1.6 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--mut)}
  .pk-yontem-anim .mx-common td::before{display:none}
  .pk-yontem-anim .mx-common th{padding-left:10px; padding-top:10px}
  .pk-yontem-anim .frm{grid-template-columns:1fr}
  .pk-yontem-anim .docs{max-width:360px}
}
@media (min-width:1101px){
  .pk-yontem-anim .methods{transition:grid-template-columns .65s cubic-bezier(.2,.7,.2,1)}
  .pk-yontem-anim .methods[data-sel="eksenel"]{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr) minmax(0,1fr)}
  .pk-yontem-anim .methods[data-sel="tegetsel"]{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr) minmax(0,1fr)}
  .pk-yontem-anim .methods[data-sel="radyal"]{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.9fr)}
  .pk-yontem-anim .mc-stage{aspect-ratio:auto; height:min(346px,24vw)}
  
  .pk-yontem-anim .mc[data-m="tornalama"]{grid-column:1/-1}
  .pk-yontem-anim .mc[data-m="tornalama"] .mc-stage{height:min(240px,17.5vw)}
}
@media (prefers-reduced-motion:reduce){
  .pk-yontem-anim *,.pk-yontem-anim *::before,.pk-yontem-anim *::after{transition-duration:.01ms!important; animation-duration:.01ms!important}
}


/* v22.7 · tek yöntem (v22.8: eksenel, v22.9: tornalama): eksenel / radyal / teğetsel / tornalama kategori sayfalarında yalnız o yöntemin kartı, tam genişlikte */
.pk-yontem-anim[data-tek="radyal"] .mc:not([data-m="radyal"]),
.pk-yontem-anim[data-tek="tegetsel"] .mc:not([data-m="tegetsel"]),
.pk-yontem-anim[data-tek="eksenel"] .mc:not([data-m="eksenel"]),
.pk-yontem-anim[data-tek="tornalama"] .mc:not([data-m="tornalama"]){display:none}
.pk-yontem-anim[data-tek] .methods,
.pk-yontem-anim[data-tek] .methods[data-sel]{grid-template-columns:minmax(0,1fr)}
.pk-yontem-anim[data-tek] .methods.has-sel .mc{opacity:1}
.pk-yontem-anim[data-tek] .mc-sel,
.pk-yontem-anim[data-tek] .selbar{display:none}
@media (min-width:1101px){
  .pk-yontem-anim[data-tek] .mc-stage{height:min(520px,38vw)}
  .pk-yontem-anim[data-tek="tornalama"] .mc[data-m="tornalama"] .mc-stage{height:min(440px,32vw)}
}

/* v22.7 · zaman çizelgesi ölçek yazıları tek satırda (dar ekranda "100" alt alta düşmesin) */
.pk-yontem-anim .tl-ticks span{white-space:nowrap}