/* v2026.10-zzzp · PROFİL KARTLARI (js/profkart.js): kısa künye levhası · özet şeridi (soru-cevap kartları) · dikey soru-cevap kartları ·
   telefonda başparmak çubuğu. Emir (26.10): "Anasayfadaki gibi kart bazlı yapalım … ekran dokunmatiği ısı haritasına göre hareket edelim."
   Tek vurgu = varlık rengi (--ec); altın/gümüş/bronz yalnız derece; yeşil yalnız temiz/vize. Hareket yalnız transform/opacity;
   kart hareketleri ".play" ile başlar (şerit kartı ekrana girince), hareketi azaltınca hiç oynamaz (son hâl taban stil). */
.pc2{--ec:var(--e-binici)}          /* varlık rengi: şerit, dikey kartlar ve kart eylemleri */
.pc-strip{margin:0 0 4px}
@keyframes pcUp{from{opacity:0;transform:translateY(10px)}}
@keyframes pcFade{from{opacity:0}}
@keyframes pcGrowY{from{transform:scaleY(0)}}
@keyframes pcGrowX{from{transform:scaleX(0)}}
@keyframes pcNo{from{opacity:0;transform:translateY(16px) scale(.85)}}

/* ================================================================ ŞERİT (story.js) */
.pc-sty{gap:10px}
.pc-sty .sty-p{justify-content:stretch;gap:5px;padding:0 4px}
.pc-sty .sty-g{flex:1 1 0}
.pc-sty .sty-g i{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.pc-sty .sty-g i::after{background:var(--ec)}
.pc-sty .sty-v{margin:-10px -8px -22px;padding:10px 8px 22px}
.pc-sty .sty-a{background:color-mix(in srgb,var(--surface) 90%,transparent);color:var(--ink);box-shadow:0 0 0 .5px var(--line-strong),0 6px 16px -8px rgba(12,18,32,.35)}
.pc-sty .sty-s.side{transform:scale(.95);opacity:.5}

/* kart */
.pc-w{position:relative;display:flex;flex-direction:column}
.pc-card{flex:1;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:8px;min-height:372px;padding:16px 16px 14px;border-radius:22px;
  background:radial-gradient(120% 70% at 100% 0%,color-mix(in srgb,var(--ec) 15%,transparent),transparent 62%),var(--surface);
  box-shadow:0 0 0 .5px color-mix(in srgb,var(--ec) 30%,var(--line)),0 1px 2px rgba(12,18,32,.05),0 20px 40px -26px color-mix(in srgb,var(--ec) 45%,rgba(12,18,32,.5))}
.pc-no{position:absolute;right:14px;top:8px;z-index:2;font:700 62px/1 var(--f-round);letter-spacing:-.05em;color:color-mix(in srgb,var(--ec) 20%,transparent);pointer-events:none}
.pc-q{display:flex;align-items:center;gap:8px;min-width:0;min-height:24px;padding-right:66px}
.pc-qi{flex:none;display:grid;place-items:center;width:20px;height:20px;color:var(--ec)}
.pc-qi svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pc-qi svg .d{fill:currentColor;stroke:none}
.pc-qt{margin:0;min-width:0;font:600 14px/1.3 var(--f-body);letter-spacing:-.005em;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-q .pc-i{margin-left:2px;animation:none}
.pc-big{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;min-height:52px;margin-top:2px}
.pc-big > b{font-family:var(--f-round);font-size:50px;font-weight:650;letter-spacing:-.045em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.pc-big.txt > b{font-size:27px;letter-spacing:-.025em;line-height:1.12;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
.pc-u{font-size:15px;font-weight:600;color:var(--ink-2)}
.pc-pl{align-self:center;display:inline-flex;align-items:center;gap:4px;font-style:normal;font-size:12.5px;font-weight:550;padding:3px 9px;border-radius:999px;
  background:color-mix(in srgb,var(--ec) 13%,transparent);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.pc-pl b{font-weight:700;color:var(--ink)}
.pc-ctx{font-size:12.5px;line-height:1.5;color:var(--muted);min-height:19px}
.pc-ctx b,.pc-ctx .pv-n{color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}
.pc-ctx > i{font-style:normal;color:var(--faint);margin:0 1px}
.pc-lk{display:inline;padding:0;margin:0;border:0;background:none;font:inherit;font-weight:650;color:var(--accent-ink);cursor:pointer;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent);text-underline-offset:2px}
.pc-vis{flex:1 1 auto;display:flex;flex-direction:column;justify-content:flex-end;min-height:128px;min-width:0}
.pc-f{display:flex;margin-top:4px}
.pc-go{flex:1;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-radius:13px;cursor:pointer;
  background:color-mix(in srgb,var(--ec) 13%,var(--surface));color:var(--ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ec) 28%,transparent);
  font:650 14px/1 var(--f-body);text-align:left;transition:transform .2s var(--spring),background .15s}
.pc-go .n{font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.pc-go > i{margin-left:auto;font-style:normal;font-size:17px;color:var(--ec);transition:transform .25s var(--spring)}
.pc-go:hover{background:color-mix(in srgb,var(--ec) 20%,var(--surface))}
.pc-go:hover > i{transform:translateX(3px)}
.pc-go:active{transform:scale(.98)}
.pc-go:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* kart içi görseller */
/* kariyer / sezon CPX (VZ.career): başlık ve gösterge kalır, toplam büyük sayıda */
.pc-vis .pv-car{width:100%}
.pc-vis .vz-car{--vz-h:84px;--vz-gap:4px}
.pc-vis .vz-cap{display:flex;align-items:center;gap:6px 10px;font-size:11.5px;color:var(--muted);margin-bottom:2px}
.pc-vis .vz-cap .vz-sum{display:none}
.pc-vis .vz-cap .vz-t{font-weight:600;color:var(--ink-2)}
.pc-vis .vz-cap .vz-t .vz-y{display:none}
.pc-vis .vz-lg{margin-left:auto}
.pc-vis .vz-cg{padding-top:16px}
.pc-card[data-pc="rk"] .pc-vis .vz-car{--vz-c:var(--s4)}
/* kupa rafı */
.pc-pod{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;height:128px;align-items:end;padding-top:6px;border-bottom:1px solid var(--line-strong)}
.pc-pod > span{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%;min-width:0}
.pc-pod b{font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1}
.pc-pod i{display:block;width:72%;max-width:48px;height:calc(var(--f) * 82px);min-height:3px;border-radius:7px 7px 2px 2px;background:var(--mc);transform-origin:50% 100%}
.pc-pod em{position:relative;top:22px;margin-top:-17px;font-style:normal;font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.pc-pod .z b{color:var(--faint);font-weight:550}
.pc-pod .z i{background:var(--fill-2)!important}
.pc-pod .m1{--mc:var(--gold)}.pc-pod .m2{--mc:var(--silver)}.pc-pod .m3{--mc:var(--bronze)}
.pc-pod .m4{--mc:color-mix(in srgb,var(--ec) 70%,transparent)}.pc-pod .m5{--mc:color-mix(in srgb,var(--ec) 45%,transparent)}
.pc-card[data-pc="pod"] .pc-vis{padding-bottom:20px}
/* oran çubukları ve branş payları */
.pc-mt,.pc-mx{display:flex;flex-direction:column;gap:12px}
.pc-mt .r,.pc-mx .r{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "b b";align-items:baseline;gap:5px 10px}
.pc-mt .l,.pc-mx .l{grid-area:l;font-size:13px;font-weight:550;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-mt .v,.pc-mx .v{grid-area:v;display:inline-flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.pc-mt .v b,.pc-mx .v b{font-size:16px;font-weight:700;color:var(--ink)}
.pc-mt .v small,.pc-mx .v small{font-size:11.5px;color:var(--muted)}
.pc-mt .b,.pc-mx .b{grid-area:b;position:relative;height:9px;border-radius:5px;background:var(--fill);overflow:hidden}
.pc-mt .b i,.pc-mx .b i{position:absolute;inset:0;border-radius:inherit;background:var(--mc);transform:scaleX(var(--f));transform-origin:left}
.pc-mt .r.lo{opacity:.62}
.pc-mt .r.lo .b i{background:repeating-linear-gradient(135deg,var(--mc) 0 3px,transparent 3px 6px)}
/* en sık eşler */
.pc-rl{display:flex;flex-direction:column;gap:2px}
.pc-rl .r{position:relative;display:grid;grid-template-columns:18px minmax(0,1fr) auto;grid-template-areas:"k l v" "k b b";align-items:center;gap:3px 10px;min-height:40px;padding:4px 6px;margin:0 -6px;border:0;border-radius:10px;background:none;text-align:left;color:var(--ink);cursor:pointer}
.pc-rl .r:hover{background:var(--hover)}
.pc-rl .r:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pc-rl .k{grid-area:k;font-size:12px;font-weight:650;color:var(--faint);font-variant-numeric:tabular-nums;text-align:center}
.pc-rl .l{grid-area:l;font-size:13.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-rl .v{grid-area:v;font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.pc-rl .b{grid-area:b;position:relative;height:4px;border-radius:2px;background:var(--fill);overflow:hidden}
.pc-rl .b i{position:absolute;inset:0;border-radius:inherit;background:var(--ec);transform:scaleX(var(--f,0));transform-origin:left}
.pc-rl .r:first-child .b i{background:var(--ec)}
.pc-rl .r:not(:first-child) .b i{background:color-mix(in srgb,var(--ec) 55%,transparent)}
.pc-rl.skel .r{cursor:default}
.pc-rl.skel .l,.pc-rl.skel .v{height:12px;border-radius:6px;background:var(--fill)}
.pc-rl.skel .v{width:28px}
.pc-rl.skel .b i{transform:none;background:var(--fill-2)}
/* yükseklik merdiveni (VZ.height) */
.pc-vis .vz-lad{height:118px;margin:14px 46px 0 28px}
.pc-vis .vz-lx{margin:3px 46px 0 28px}
.pc-vis .vz-cur span{top:-14px}
/* açıklama penceresi */
.pc-md{display:flex;flex-direction:column;gap:10px}
.pc-md .pc-mp{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.pc-md .funnel{margin:0}

/* hareket: yalnız oynayan kartta (şerit kartı ekrana girince .play); bekleyen kartın bütün hareketleri durur, girişte baştan başlar */
.pc-w .pc-card:not(.play) *,.pc-w .pc-card:not(.play) *::before,.pc-w .pc-card:not(.play) *::after{animation-name:none!important}
.pc-card.play .pc-big{animation:pcUp .5s var(--spring) .05s backwards}
.pc-card.play .pc-ctx{animation:pcFade .45s var(--ease) .18s backwards}
.pc-card.play .pc-f{animation:pcUp .45s var(--spring) .3s backwards}
.pc-card.play .pc-pod i{animation:pcGrowY .62s var(--spring) backwards;animation-delay:calc(var(--i,0) * 60ms + .15s)}
.pc-card.play .pc-pod b{animation:pcFade .35s var(--ease) backwards;animation-delay:calc(var(--i,0) * 60ms + .45s)}
.pc-card.play .pc-mt .b i,.pc-card.play .pc-mx .b i,.pc-card.play .pc-rl .b i{animation:pcGrowX .7s var(--spring) backwards;animation-delay:calc(var(--i,0) * 80ms + .18s)}
.pc-card.play .pc-rl .r{animation:pcUp .4s var(--spring) backwards;animation-delay:calc(var(--i,0) * 50ms + .1s)}
.pc-card.play ~ .pc-no{animation:pcNo .8s var(--spring) both}
@media (prefers-reduced-motion:reduce){.pc-card *,.pc-no{animation:none!important;transition:none!important}}

/* ================================================================ DİKEY SORU-CEVAP KARTLARI (Genel) */
.pv2 .card.pc-qc{display:flex;flex-direction:column;gap:7px;padding:15px 18px 14px}
.pc-qc .pc-q{padding-right:0}
.pc-qc .pc-qt{font-size:14.5px;color:var(--ink);font-weight:650}
.pc-qc .pc-big{min-height:0;margin:0}
.pc-qc .pc-big > b{font-size:34px}
.pc-qc .pc-u{font-size:14px}
.pc-qb{margin-top:4px;min-width:0}
.pc-qc .pc-f{margin-top:6px}
.pc-qc .form10{margin-top:2px}
.pc-qc .flegend{margin-top:8px}
.pc-vzl{display:flex;flex-wrap:wrap;gap:2px 12px;margin:0 0 8px;font-size:12px;color:var(--muted)}
.pc-vzl > span{display:inline-flex;align-items:center;gap:5px}
.pc-vzl i{display:inline-block;width:12px;height:10px;border-radius:3px;background:var(--fill)}
.pc-vzl i.v{background:var(--good)}.pc-vzl i.a{background:none;box-shadow:inset 0 0 0 1.5px var(--good)}

/* ================================================================ KISA KÜNYE LEVHASI + BAŞPARMAK ÇUBUĞU (telefon) */
.pc-act{display:none}
@media (max-width:680px){
  /* levha: eylemler başparmak çubuğunda; künye tek satır (tamamı "Künye"de); rol çubuğunda yalnız diğer roller */
  .pv2 .prof-hero.pc-hero > .ha{display:none}
  .pv2 .prof-hero.pc-hero{--ky-l:1;padding-bottom:14px}
  .pv2 .prof-hero.pc-hero .pv-ky{margin-top:10px}
  .pv2 .prof-hero.pc-hero .pv-roles{margin-top:6px}
  .pv2 .prof-hero.pc-hero .pv-r.on{display:none}
  /* çubuk: alt menünün hemen üstünde (tek elle erişimin en kolay bandı); yapışkan, sayfanın sonunda yerine oturur.
     Cam zemin sözde öğede: çubuğun kendisinde backdrop-filter olsaydı ⋯ menüsünün (position:fixed) kapsayıcısı çubuk olurdu. */
  /* yapışma kenarı #main'in iç kutusunun altı (alt dolgu = --tb-b + 86 px; css/zzo-tam.css): -16 px = alt menünün 8 px üstü.
     Çubuklar çekikken (aşağı kaydırma, html.bars-off) alt menünün yerine iner: -86 px = alt kenardan --tb-b */
  .pc-act{position:sticky;bottom:-16px;z-index:8;isolation:isolate;display:flex;align-items:center;gap:6px;margin:16px 0 0;padding:6px;border-radius:19px;transition:bottom .32s var(--spring)}
  html.bars-off .pc-act{bottom:-86px}
  .pc-act::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--glass-strong);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
    box-shadow:var(--sh-glass),inset 0 0 0 .5px var(--glass-edge),0 0 0 .5px var(--glass-rim)}
  .pc-act [data-follow]{flex:1;min-width:0;justify-content:center;height:46px;padding:0 14px;border-radius:14px;font-size:15px;font-weight:650;
    background:var(--accent);color:var(--on-accent);box-shadow:0 8px 18px -10px color-mix(in srgb,var(--accent) 80%,transparent)}
  .pc-act [data-follow] svg{width:18px;height:18px}
  .pc-act [data-follow].on{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
  .pc-act [data-follow]:active{transform:scale(.98)}
  .pc-ib{flex:none;display:grid;place-items:center;width:46px;height:46px;padding:0;border:0;border-radius:14px;background:var(--fill);color:var(--ink);cursor:pointer}
  .pc-ib svg{width:20px;height:20px}
  .pc-ib.more svg{fill:currentColor;stroke:none}
  .pc-ib:active{transform:scale(.94)}
  .pc-ib:focus-visible,.pc-act [data-follow]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .pc-ib[data-roster].on{background:var(--accent-soft);color:var(--accent-ink)}
  .pc-act .menu-wrap{position:static}
  .pc-act .hmenu{bottom:calc(var(--tb-b,12px) + 138px)}
  html.bars-off .pc-act .hmenu{bottom:calc(var(--tb-b,12px) + 66px)}   /* v2026.10-zzzx: çubuk aşağı inince ⋯ menüsü de iner (80 px boşlukta havada kalıyordu) */
  /* çubuk varken bildirim ve "başa dön" düğmesi çubuğun üstünde */
  /* html.pc-bar: App.render çubuklu sayfada koyar (html:has(...) her DOM değişiminde kök stilini yeniden hesaplatıyordu) */
  html.pc-bar .toast{bottom:calc(var(--tb-b,12px) + 140px)}
  html.pc-bar .totop{bottom:calc(var(--tb-b,12px) + 140px)}
}

/* ================================================================ TELEFON / GENİŞ EKRAN ölçüleri */
@container main (max-width:680px){
  .pc-card{min-height:364px;padding:15px 15px 13px;border-radius:20px}
  .pc-big > b{font-size:46px}
  .pc-big.txt > b{font-size:25px}
  .pc-no{font-size:54px;right:12px}
  .pv2 .card.pc-qc{padding:14px 14px 13px}
  .pc-qc .pc-big > b{font-size:30px}
}
@container main (max-width:370px){
  .pc-big > b{font-size:40px}
  .pc-q{padding-right:54px}
  .pc-pod{gap:5px}
}
@container main (min-width:681px){
  .pc-card{min-height:386px}
}