/* Profil (tasarim/profil.html), yerel geçmişten. Sahibi B3. Ekran kökü kayar. */
.e-profil { --yesil-yazi: #157A49; --kirmizi-yazi: #B02150; --sari-yazi: #8A6400; --y1: 14px; --y2: 17px; --y3: 22px; --y4: 30px; --y6: 84px; --sol: 440px; --bosluk: 28px; --ic: 32px; }
.e-profil .kap { width: min(1832px, 100% - 88px); margin: 0 auto; }
.e-profil .site-alt { margin: 0; }
.e-profil a { color: inherit; }
.pc-sil * { fill: var(--krem) !important; stroke: var(--krem) !important; stroke-width: var(--pk, 9px) !important; stroke-linejoin: round !important; stroke-linecap: round !important; opacity: 1 !important; }
.pr-ust { height: 96px; display: flex; align-items: center; gap: 24px; }
.pr-ust .logo-ok { color: #fff; }
.pr-ust nav { margin-left: auto; display: flex; gap: 4px; }
.pr-ust nav a { height: 46px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; color: #fff; font-weight: 800; font-size: 19px; text-decoration: none; }
.pr-ust nav a:hover { background: rgba(34, 24, 46, .12); }
.pr-ust :focus-visible { outline-color: #fff; }
.pr-ust .profil-dugme[aria-current="page"] { box-shadow: 0 4px 0 var(--zemin-koyu), inset 0 0 0 3px var(--murekkep); }

.e-profil .profil { display: grid; grid-template-columns: var(--sol) minmax(0, 1fr); gap: var(--bosluk); align-items: start; padding-bottom: 64px; }
.e-profil .sol { position: sticky; top: 20px; display: grid; gap: 18px; min-width: 0; }
.e-profil .govde { display: grid; gap: var(--bosluk); min-width: 0; }
.e-profil .panel { padding: 28px var(--ic) var(--ic); }
.e-profil .panel-bas { display: flex; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.e-profil .panel-bas h2 { margin: 0; font: 800 var(--y4)/1 var(--font); letter-spacing: -.025em; }
.e-profil .panel-bas .not { margin-left: auto; color: var(--murekkep-2); font-weight: 600; font-size: var(--y1); text-align: right; }
.e-profil h3 { margin: 0; }

/* Oyuncu kartı */
.okart { container-type: inline-size; position: relative; border-radius: 28px; padding: 14px; box-shadow: 0 8px 0 var(--murekkep); }
.okart .ic { position: relative; background: var(--krem); border-radius: 18px; box-shadow: inset 0 0 0 3px var(--murekkep); padding: 5cqi 5.5cqi 4.5cqi; display: grid; gap: 2.6cqi; }
.okart .kust { display: flex; align-items: flex-start; justify-content: space-between; }
.svy { display: grid; justify-items: center; line-height: 1; }
.svy b { font: 800 14cqi/0.9 var(--font); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.svy small { font: 800 max(12px, 3.3cqi) var(--font); color: var(--murekkep-2); margin-top: .6cqi; }
.nadir { height: 7.4cqi; padding: 0 3cqi; border-radius: 999px; display: inline-flex; align-items: center; font: 800 max(12px, 3.6cqi) var(--font); box-shadow: inset 0 0 0 2.5px var(--murekkep); }
.kyuz { position: relative; width: 62cqi; margin: -11cqi auto 0; }
.kyuz .tile { width: 62cqi; height: 62cqi; border-radius: 14cqi; overflow: hidden; box-shadow: 0 1.4cqi 0 var(--krem-3); }
.kyuz .tile svg { width: 100%; height: 100%; display: block; }
.kad { display: flex; align-items: center; justify-content: center; gap: 2cqi; margin-top: 1cqi; min-width: 0; flex-wrap: wrap; }
.kad h1 { margin: 0; font: 800 9cqi/1 var(--font); letter-spacing: -.035em; overflow-wrap: anywhere; text-align: center; }
.vip-rozet { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px 0 6px; border-radius: 999px; background: var(--gunes); color: var(--murekkep); font: 800 14px var(--font); white-space: nowrap; box-shadow: 0 0 0 2px var(--murekkep); }
.vip-rozet svg { width: 22px; height: auto; flex: none; }
.kunvan { text-align: center; font: 700 max(14px, 4cqi)/1.2 var(--font); color: var(--murekkep-2); margin-top: -1.2cqi; }
.kstat { display: grid; grid-template-columns: repeat(3, 1fr); margin: 1cqi 0 0; border-top: 2px dashed var(--krem-3); }
.kstat div { padding: 2.6cqi 0 0; text-align: center; }
.kstat dd { margin: 0; font: 800 6.8cqi/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 1cqi; }
.kstat dd svg { width: 6.4cqi; height: 6.4cqi; }
.kstat dt { font: 700 max(12.5px, 3.3cqi)/1.2 var(--font); color: var(--murekkep-2); margin-top: .8cqi; }
.kalt { display: flex; justify-content: space-between; font: 700 max(12px, 3.1cqi) var(--font); color: var(--murekkep-2); padding-top: 1.6cqi; }
.kimlik { padding: 22px 24px; display: grid; gap: 16px; }
.xp-bas { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--y1); }
.xp-bas b { font-size: var(--y2); font-weight: 800; }
.xp-bas span { color: var(--murekkep-2); font-weight: 700; font-variant-numeric: tabular-nums; }
.xp { height: 14px; border-radius: 999px; background: var(--krem-2); box-shadow: inset 0 0 0 2px var(--krem-3); overflow: hidden; margin: 6px 0 5px; }
.xp i { display: block; height: 100%; border-radius: 999px; background: var(--murekkep); transform-origin: 0 50%; }
.kimlik small { color: var(--murekkep-2); font-weight: 600; font-size: var(--y1); }
.katilma { display: flex; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 2px dashed var(--krem-3); font-size: var(--y1); color: var(--murekkep-2); font-weight: 600; }
.katilma b { color: var(--murekkep); font-weight: 800; }
.durust { display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: var(--krem-2); }
.durust .rozet-ik { grid-row: span 2; width: 40px; height: 40px; }
.durust b { font-weight: 800; font-size: var(--y2); line-height: 1.15; }
.durust span { font-size: var(--y1); color: var(--murekkep-2); font-weight: 600; line-height: 1.3; }
.durust.temiz { background: #E3F6EA; }
.durust.uyarili { background: #FFF0C2; grid-template-columns: 1fr; }
.durust .hakem { display: flex; gap: 16px; } .durust .hakem span { display: inline-flex; align-items: center; gap: 6px; color: var(--murekkep); font-weight: 800; font-size: var(--y2); }
.yerel-not { margin: 0; font-size: var(--y1); color: var(--murekkep-2); font-weight: 600; }
.e-profil .eylemler { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.e-profil .dugme { height: 56px; padding: 0 16px; font-size: 18px; border-radius: 18px; text-decoration: none; }
.e-profil .dugme.ikinci { background: var(--krem-2); box-shadow: 0 5px 0 var(--krem-3); }
.e-profil .dugme svg { width: 20px; height: 20px; }
.e-profil .kucuk { height: 38px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--krem); color: var(--murekkep); font: 800 15px var(--font); display: inline-flex; align-items: center; gap: 6px; box-shadow: inset 0 0 0 2px var(--krem-3); }
.e-profil .kucuk:disabled { opacity: .7; cursor: default; }

/* Karne */
.karne-ust { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 36px; align-items: stretch; }
.goz { display: flex; flex-direction: column; }
.goz .etk { font-weight: 700; font-size: var(--y2); color: var(--murekkep-2); }
.goz .buyuk { font: 800 var(--y6)/.95 var(--font); letter-spacing: -.05em; font-variant-numeric: tabular-nums; margin: 6px 0 12px; }
.goz p { margin: 0; color: var(--murekkep-2); font-weight: 600; max-width: 32ch; }
.e-profil .etiket { height: 30px; padding: 0 11px; border-radius: 999px; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; white-space: nowrap; }
.e-profil .etiket.iyi { background: #D9F5E6; color: var(--yesil-yazi); } .e-profil .etiket.kotu { background: #FBDDE6; color: var(--kirmizi-yazi); } .e-profil .etiket.notr { background: var(--krem-2); color: var(--murekkep-2); } .e-profil .etiket.koyu { background: var(--murekkep); color: var(--krem); }
.grafik { min-width: 0; display: flex; flex-direction: column; }
.grafik .gbas { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: var(--y1); color: var(--murekkep-2); font-weight: 600; }
.grafik .gbas b { color: var(--murekkep); font-size: var(--y2); font-weight: 800; }
.grafik-alan { flex: 1; min-height: 220px; }
.grafik svg { display: block; width: 100%; overflow: visible; }
.bos-grafik { flex: 1; display: grid; place-items: center; border-radius: 18px; background: var(--krem-2); color: var(--murekkep-2); font-weight: 600; min-height: 200px; text-align: center; padding: 20px; margin-top: 10px; }
.sayilar { display: grid; grid-template-columns: repeat(4, 1fr); margin: 28px 0 0; padding-top: 22px; border-top: 2px dashed var(--krem-3); }
.sayilar div { padding-left: 20px; border-left: 2px dashed var(--krem-3); }
.sayilar div:first-child { padding-left: 0; border-left: 0; }
.sayilar dt { font-size: var(--y1); font-weight: 700; color: var(--murekkep-2); }
.sayilar dd { margin: 2px 0 0; font: 800 var(--y4)/1.1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sayilar dd small { font: 700 var(--y1) var(--font); color: var(--murekkep-2); letter-spacing: 0; margin-left: 6px; }
.e-profil .ikili { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; margin-top: 28px; padding-top: 24px; border-top: 2px dashed var(--krem-3); }
.e-profil .ikili h3 { font: 800 var(--y3)/1.1 var(--font); letter-spacing: -.015em; }
.alt-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.alt-bas span { font-size: var(--y1); color: var(--murekkep-2); font-weight: 600; text-align: right; }
.katlar { list-style: none; margin: 0; padding: 0; display: grid; }
.katlar li { display: grid; grid-template-columns: 34px 118px minmax(0, 1fr) 62px; gap: 12px; align-items: center; min-height: 44px; }
.katlar .ik { width: 34px; height: 34px; border-radius: 50%; background: var(--krem-2); display: grid; place-items: center; }
.katlar .ik svg { width: 28px; height: 28px; }
.katlar .ad b { font-weight: 800; display: block; line-height: 1.15; }
.katlar .ad small { font-size: 13.5px; color: var(--murekkep-2); font-weight: 600; }
.katlar .cubuk { position: relative; height: 14px; border-radius: 999px; background: var(--krem-2); }
.katlar .cubuk i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--murekkep-2); }
.katlar li.en-iyi .cubuk i { background: var(--yesil); } .katlar li.en-kotu .cubuk i { background: var(--kirmizi); }
.katlar .deger { text-align: right; font: 800 var(--y2) var(--font); font-variant-numeric: tabular-nums; }
.lejant { display: flex; gap: 14px; align-items: center; margin-top: 10px; }
.e-profil .modlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.e-profil .mod { border-radius: 20px; background: var(--krem-2); overflow: hidden; display: grid; grid-template-rows: auto 1fr; position: relative; }
.e-profil .mod .ciz { height: 84px; display: grid; place-items: center; overflow: hidden; }
.e-profil .mod .ciz svg { width: 104px; height: auto; }
.e-profil .mod .yazi { padding: 10px 12px 12px; display: grid; gap: 1px; }
.e-profil .mod .yazi b { font-weight: 800; font-size: 15.5px; line-height: 1.15; }
.e-profil .mod .oran { font: 800 var(--y3)/1.1 var(--font); font-variant-numeric: tabular-nums; }
.e-profil .mod .oran small { font: 600 13.5px var(--font); color: var(--murekkep-2); margin-left: 4px; }
.e-profil .mod .alt { font-size: 13.5px; color: var(--murekkep-2); font-weight: 600; }
.e-profil .mod .etiket { position: absolute; top: 8px; left: 8px; height: 26px; font-size: 13px; }
.kilitli-satir { margin-top: 24px; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; background: var(--krem-2); font-weight: 600; color: var(--murekkep-2); }
.kilitli-satir svg { width: 24px; height: 24px; flex: none; }
.kilitli-satir a { margin-left: auto; font-weight: 800; color: var(--murekkep); white-space: nowrap; }

/* Anılar */
.anilar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ani { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 20px; padding: 12px; border-radius: 22px; background: var(--krem-2); }
.afoto { position: relative; border-radius: 14px; aspect-ratio: 4 / 3.4; background: var(--krem-3); overflow: hidden; }
.afoto .yedek { position: absolute; inset: 0; display: grid; place-items: center; }
.afoto .resim { position: absolute; inset: 0; background: center / cover no-repeat; }
.afoto .etiket { position: absolute; left: 10px; top: 10px; z-index: 2; box-shadow: 0 3px 0 rgba(34, 24, 46, .25); }
.ametin { display: flex; flex-direction: column; gap: 8px; padding: 6px 8px 6px 0; min-width: 0; }
.ametin .ust-bilgi { font-size: var(--y1); color: var(--murekkep-2); font-weight: 700; }
.ametin h3 { font: 800 var(--y3)/1.12 var(--font); letter-spacing: -.02em; overflow-wrap: anywhere; }
.karsi { margin: 4px 0 0; display: grid; gap: 4px; }
.karsi div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 10px; padding-bottom: 4px; border-bottom: 2px dashed var(--krem-3); }
.karsi dt { color: var(--murekkep-2); font-weight: 700; font-size: var(--y1); }
.karsi dd { margin: 0; font: 800 var(--y3) var(--font); font-variant-numeric: tabular-nums; }

/* Unvan kartları */
.ilk-hedef { margin: -8px 0 18px; color: var(--murekkep-2); font-weight: 600; }
.koleksiyon { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.bkart { position: relative; border-radius: 22px; background: var(--krem-2); padding: 10px 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.bkart .bamb { height: 116px; border-radius: 14px; display: grid; place-items: center; background: var(--krem); position: relative; }
.bkart .bamb svg { width: 88px; height: 88px; }
.bkart.kilitli .bamb > svg { filter: grayscale(1); opacity: .42; }
.bkart .kilit { position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; border-radius: 50%; background: var(--murekkep); color: var(--krem); display: grid; place-items: center; }
.bkart .kilit svg { width: 17px; height: 17px; }
.bkart .takili { position: absolute; left: 8px; top: 8px; }
.bkart h3 { font: 800 19px/1.15 var(--font); padding: 0 4px; }
.bkart p { margin: -4px 0 0; padding: 0 4px; font-size: 15px; line-height: 1.35; color: var(--murekkep-2); font-weight: 600; }
.bkart .bdurum { margin-top: auto; padding: 8px 4px 0; border-top: 2px dashed var(--krem-3); display: grid; gap: 6px; }
.bkart .tarih { font-size: var(--y1); font-weight: 700; color: var(--yesil-yazi); display: flex; align-items: center; gap: 6px; }
.bkart .tarih svg { width: 16px; height: 16px; }
.bkart .tarih .gun { margin-left: auto; color: var(--murekkep-2); font-variant-numeric: tabular-nums; }
.bkart .nadirlik { font-size: 13.5px; color: var(--murekkep-2); font-weight: 600; }
.ilerleme { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.ilerleme .iz { height: 10px; border-radius: 999px; background: var(--krem); box-shadow: inset 0 0 0 2px var(--krem-3); overflow: hidden; }
.ilerleme .iz i { display: block; height: 100%; background: var(--murekkep); border-radius: 999px; }
.ilerleme b { font-weight: 800; font-size: var(--y1); font-variant-numeric: tabular-nums; }
.bkart .beylem { display: flex; gap: 6px; padding: 0 4px; }
.bkart .beylem .kucuk { flex: 1; justify-content: center; }

/* Maç geçmişi */
.gecmis-tablo { display: grid; }
.gsatir, .gecmis-tablo summary { display: grid; grid-template-columns: 128px 220px 76px 74px minmax(0, 1fr) 28px; gap: 16px; align-items: center; }
.gbaslik { font-size: var(--y1); font-weight: 700; color: var(--murekkep-2); padding: 0 12px 10px; border-bottom: 2px solid var(--krem-3); }
.gecmis-tablo details { border-bottom: 2px dashed var(--krem-3); }
.gecmis-tablo summary { list-style: none; cursor: pointer; padding: 12px; border-radius: 16px; min-height: 64px; }
.gecmis-tablo summary::-webkit-details-marker { display: none; }
.gecmis-tablo summary:hover, .gecmis-tablo details[open] summary { background: var(--krem-2); }
.gecmis-tablo details[open] summary { border-radius: 16px 16px 0 0; }
.gecmis-tablo .tarih b { display: block; font-weight: 800; font-variant-numeric: tabular-nums; }
.gecmis-tablo .tarih small { color: var(--murekkep-2); font-weight: 600; font-size: var(--y1); }
.gecmis-tablo .mod-hucre { display: flex; align-items: center; gap: 10px; font-weight: 700; min-width: 0; }
.gecmis-tablo .mod-hucre .mik { width: 44px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; overflow: hidden; }
.gecmis-tablo .mod-hucre .mik svg { width: 44px; height: auto; }
.e-profil .sira-hap { display: inline-grid; place-items: center; min-width: 46px; height: 36px; padding: 0 8px; border-radius: 12px; background: var(--krem-2); font: 800 var(--y3) var(--font); font-variant-numeric: tabular-nums; }
.e-profil .sira-hap.birinci { background: var(--gunes); box-shadow: inset 0 0 0 2px var(--murekkep); }
.gecmis-tablo .kisi { font-weight: 700; color: var(--murekkep-2); }
.gecmis-tablo .manset { font-weight: 700; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.gecmis-tablo .ac { width: 28px; height: 28px; transition: transform .2s var(--ease-out); color: var(--murekkep-2); }
.gecmis-tablo details[open] .ac { transform: rotate(180deg); }
.gdetay { padding: 4px 12px 18px; background: var(--krem-2); border-radius: 0 0 16px 16px; display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: 10px 36px; align-items: end; }
.gdetay small { display: block; font-size: var(--y1); color: var(--murekkep-2); font-weight: 700; }
.gdetay b { font: 800 var(--y3) var(--font); font-variant-numeric: tabular-nums; }
.gdetay p { margin: 0; justify-self: end; color: var(--murekkep-2); font-weight: 600; font-size: var(--y1); }
.e-profil .daha { margin-top: 18px; }
.bos { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.bos svg.bos-ciz { width: 220px; height: auto; }
.bos h3 { font: 800 var(--y4)/1.1 var(--font); }
.bos p { margin: 8px 0 18px; color: var(--murekkep-2); font-weight: 600; max-width: 46ch; }
.bos .eylem { display: flex; gap: 12px; flex-wrap: wrap; }
.bos-satir { padding: 22px 12px; color: var(--murekkep-2); font-weight: 600; }

/* Avatarı düzenle penceresi */
.profil-avatar-pencere { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px 44px; }
.profil-avatar-pencere .karart { position: absolute; inset: 0; background: rgba(34, 24, 46, .55); }
.profil-avatar-pencere .pencere-ic { position: relative; width: min(1600px, 100%); height: min(900px, 100%); display: grid; }
.profil-avatar-pencere .avatar-govde { min-height: 0; }
.profil-avatar-pencere .pencere-kapat { position: absolute; right: -14px; top: -14px; z-index: 3; width: 52px; height: 52px; border: 0; border-radius: 50%; background: var(--krem); box-shadow: 0 0 0 3px var(--murekkep); display: grid; place-items: center; }
.profil-avatar-pencere .pencere-kapat svg { width: 22px; height: 22px; }

@media (max-width: 1599px) {
  .e-profil { --sol: 360px; --bosluk: 22px; --ic: 26px; --y6: 72px; }
  .e-profil .kap { width: calc(100% - 56px); }
  .karne-ust { grid-template-columns: 270px minmax(0, 1fr); gap: 26px; }
  .e-profil .ikili { grid-template-columns: 1fr; }
  .anilar { grid-template-columns: 1fr; }
  .ani { grid-template-columns: 300px minmax(0, 1fr); }
  .gsatir, .gecmis-tablo summary { grid-template-columns: 104px 180px 60px 64px minmax(0, 1fr) 24px; gap: 12px; }
  .pr-ust nav a { padding: 0 12px; }
}
@media (max-width: 1599px) and (max-height: 800px) {
  .e-profil { --sol: 300px; }
  .kimlik { padding: 16px 18px; gap: 12px; }
  .e-profil .eylemler .dugme { height: 48px; font-size: 15px; padding: 0 10px; }
  .profil-avatar-pencere { padding: 16px 24px; }
}
@media (max-height: 900px) { .e-profil .sol { position: static; } }