/* PEKKA iç sayfa bileşenleri: sayfa başı, araç çubuğu, sıralanır liste, kart ızgarası, detay düzeni, küçük grafikler */

/* Sayfa başı: kırıntı, başlık, kısa açıklama, değerler; sağda dağınık görseller */
.ph{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:40px;align-items:center;min-height:300px;padding:30px 0 6px}
.ph.flat{grid-template-columns:minmax(0,1fr);min-height:0}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--faint)}
.crumb a{display:inline-flex;align-items:center;gap:8px;color:var(--dim)}
.crumb a:hover{color:var(--text)}
.crumb .gl{width:16px;height:16px}
.crumb .chev{width:6px;height:6px;color:var(--faint)}
.ph h1{margin:16px 0 0;max-width:22ch;font:700 40px/1.08 var(--font);letter-spacing:-.025em;text-wrap:balance}
.ph .lede{margin:14px 0 0;max-width:62ch;font-size:15.5px;line-height:1.6;color:var(--dim);text-wrap:pretty}
.kv{display:flex;flex-wrap:wrap;align-items:stretch;row-gap:14px;margin-top:26px}
.kv>div{display:flex;flex-direction:column;gap:8px;padding:2px 24px;border-left:1px solid var(--line)}
.kv>div:first-child{padding-left:0;border-left:0}
.kv b{display:flex;align-items:center;gap:6px;font:650 20px/1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.kv .k{font-size:12.5px;color:var(--faint)}
.scatter.ph-art{height:340px}

/* Araç çubuğu: bölümlü düğmeler, süzgeç, sayaç */
.tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:28px;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);box-shadow:inset 0 1px 0 var(--hi)}
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;background:var(--bg2);border-radius:var(--r2)}
.seg button{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:6px;color:var(--faint);font:500 13px/1 var(--font);white-space:nowrap;transition:color .15s,background-color .15s}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--surface3);color:var(--text);box-shadow:inset 0 1px 0 var(--hi)}
.seg .drop{width:12px;height:12px}
.fin{display:flex;align-items:center;gap:9px;width:240px;height:36px;padding:0 12px;border-radius:var(--r2);background:var(--bg2);color:var(--faint);transition:box-shadow .15s}
.fin:focus-within{box-shadow:0 0 0 1px oklch(0.72 0.135 252 / .55)}
.fin input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;color:var(--text);font:400 13.5px/1 var(--font)}
.fin input::placeholder{color:var(--faint)}
.tcount{margin-left:auto;padding:0 6px;font-size:13px;color:var(--faint);font-variant-numeric:tabular-nums}
.tcount b{font-weight:600;color:var(--dim)}

/* Sıralanır liste: başlık satırı + satırlar (sütunlar sayfada tanımlanır) */
.lst{margin-top:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);box-shadow:inset 0 1px 0 var(--hi);overflow:hidden}
.lh,.lr{display:grid;align-items:center;column-gap:16px;padding:0 20px}
.lh{height:44px;background:var(--bg2);border-bottom:1px solid var(--line);font:500 12.5px/1 var(--font);color:var(--faint)}
.lh .r,.lr .r{justify-self:end;text-align:right}
.sb{display:inline-flex;align-items:center;gap:6px;height:100%;color:var(--faint);font:inherit;transition:color .15s}
.sb:hover{color:var(--text)}
.sb::after{content:"";width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:0;transition:opacity .15s,transform .15s}
.sb:hover::after{opacity:.4}
.sb.on{color:var(--text)}
.sb.on::after{opacity:1}
.sb.asc::after{transform:rotate(180deg)}
.lr{min-height:58px;border-top:1px solid var(--line);transition:background-color .12s}
.lr:first-of-type{border-top:0}
.lr:hover{background:var(--surface2)}
.lr .num{font-variant-numeric:tabular-nums;color:var(--dim)}
.lr .strong{font:650 14.5px/1 var(--font);font-variant-numeric:tabular-nums}
.thumb{display:block;width:40px;height:48px;object-fit:contain}
.nmc{display:flex;align-items:center;gap:14px;min-width:0}
.nmc .nm b{font-size:14.5px;font-weight:600}
.mbars{display:flex;flex-direction:column;gap:7px}
.mbars .hb,.mbars .dv{height:4px}
.lmore{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-top:1px solid var(--line);color:var(--dim);font:500 13.5px/1 var(--font);transition:background-color .15s,color .15s}
.lmore:hover{background:var(--surface2);color:var(--text)}
.empty{padding:48px 20px;text-align:center;color:var(--faint)}
.empty b{display:block;margin-bottom:6px;font:600 15px/1.3 var(--font);color:var(--dim)}

/* Rozetler: nadirlik, biçim, küçük etiket */
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--r1);background:color-mix(in oklch,currentColor 14%,transparent);font:600 11.5px/1 var(--font);white-space:nowrap}
.pill.plain{background:var(--surface3);color:var(--dim)}
.r-common{color:oklch(0.8 0.03 250)}
.r-rare{color:oklch(0.78 0.13 62)}
.r-epic{color:oklch(0.72 0.16 312)}
.r-legendary{color:oklch(0.84 0.11 195)}
.r-champion{color:oklch(0.84 0.13 88)}
.f-e{color:var(--evo)}
.f-h{color:var(--hero)}

/* Kart ızgarası */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;margin-top:14px}
.ct{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);text-align:center;transition:border-color .15s,transform .2s var(--ease),background-color .15s}
.ct:hover{z-index:2;border-color:var(--line2);background:var(--surface2);transform:translateY(-2px)}
.ct .card{width:76px}
.ct b{font:600 13.5px/1.2 var(--font)}
.ct small{display:flex;gap:8px;font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.ct small .good{color:var(--win)}
.ct .fx{position:absolute;top:10px;right:10px;display:flex;gap:4px}
.ct .fx i{width:7px;height:7px;border-radius:50%}
.ct .fx .e{background:var(--evo)}
.ct .fx .h{background:var(--hero)}

/* Detay düzeni: ana sütun + yan sütun */
.dl{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:20px;align-items:start;margin-top:28px}
.dmain,.dside{display:flex;flex-direction:column;gap:20px;min-width:0}
.facts2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.facts2>div{display:flex;flex-direction:column;gap:8px;padding:15px 20px;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts2>div:nth-child(4n+1){border-left:0}
.facts2 .lk{font-size:12.5px;color:var(--faint)}
.facts2 b{font:650 16px/1.2 var(--font);font-variant-numeric:tabular-nums}
.kvl{display:flex;flex-direction:column}
.kvl>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px;border-top:1px solid var(--line);font-size:13.5px}
.kvl .k{color:var(--faint)}
.kvl b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.note{margin:0;padding:12px 20px 16px;font-size:12.5px;line-height:1.55;color:var(--faint)}
.note a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.prose{padding:4px 20px 20px;font-size:14.5px;line-height:1.7;color:var(--dim)}
.prose p{margin:0 0 12px}
.prose b{color:var(--text);font-weight:600}

/* Haftalık sütun grafiği */
.wk{display:flex;align-items:flex-end;gap:6px;height:120px;padding:16px 20px 0}
.wk>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;height:100%;min-width:0}
.wk i{display:block;width:100%;max-width:34px;border-radius:4px 4px 1px 1px;background:color-mix(in oklch,var(--acc) 55%,var(--surface3));transform-origin:bottom;animation:growy .8s var(--ease) both}
.wk>div.last i{background:var(--acc)}
.wk small{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.wk em{font:600 11.5px/1 var(--font);font-style:normal;color:var(--dim);font-variant-numeric:tabular-nums}
.wkx{display:flex;gap:6px;padding:8px 20px 16px}
.wkx>span{flex:1;text-align:center;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}

/* Seviye tablosu */
.lvh,.lvr{display:grid;grid-template-columns:70px repeat(3,minmax(0,1fr));align-items:center;padding:0 20px}
.lvh{height:38px;background:var(--bg2);border-top:1px solid var(--line);font:500 12px/1 var(--font);color:var(--faint)}
.lvr{height:36px;border-top:1px solid var(--line);font-size:13.5px;font-variant-numeric:tabular-nums;color:var(--dim)}
.lvr.on{background:color-mix(in oklch,var(--acc) 9%,var(--surface));color:var(--text)}
.lvh>span:not(:first-child),.lvr>span:not(:first-child){text-align:right}
.lvr b{font-weight:600;color:var(--text)}

/* Sekmeler (alt çizgili) */
.tabs2{display:flex;gap:4px;padding:0 12px;border-bottom:1px solid var(--line)}
.tabs2 button{height:46px;padding:0 12px;margin-bottom:-1px;border-bottom:2px solid transparent;color:var(--faint);font:500 13.5px/1 var(--font);transition:color .15s,border-color .15s}
.tabs2 button:hover{color:var(--text)}
.tabs2 button.on{color:var(--text);border-bottom-color:var(--acc)}

/* Deste şeridi: 8 kart yan yana */
.d8{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.d8 .card{min-width:0}
.dcopy{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:var(--r2);background:var(--cr);color:oklch(0.17 0.03 252);font:600 13.5px/1 var(--font);transition:background-color .15s}
.dcopy:hover{color:oklch(0.17 0.03 252);background:var(--acc-ink)}
.dcopy.done{background:var(--win)}
.btn2{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px;border-radius:var(--r2);background:var(--surface2);border:1px solid var(--line);color:var(--text);font:500 13.5px/1 var(--font);transition:background-color .15s,border-color .15s}
.btn2:hover{color:var(--text);background:var(--surface3);border-color:var(--line2)}

@keyframes growy{from{transform:scaleY(0)}}
@media (max-width:1300px){.ph{grid-template-columns:minmax(0,1fr) 420px}.dl{grid-template-columns:minmax(0,1fr) 320px}}
@media (max-width:1100px){.ph{grid-template-columns:minmax(0,1fr)}.scatter.ph-art{width:500px;max-width:100%;justify-self:center}.dl{grid-template-columns:minmax(0,1fr)}.facts2{grid-template-columns:repeat(2,minmax(0,1fr))}.facts2>div:nth-child(4n+1){border-left:1px solid var(--line)}.facts2>div:nth-child(2n+1){border-left:0}}
@media (max-width:760px){.ph h1{font-size:32px}.scatter.ph-art{max-width:none;zoom:.62}.tools{flex-direction:column;align-items:stretch}.fin{width:100%}.tcount{margin-left:0}.d8{grid-template-columns:repeat(4,minmax(0,1fr))}}