/* Keyfi 101 — profil: yuvarlak avatar ve çerçevesi, profil sayfası, resim kırpma.

   Avatar her yerde aynı parça (bkz. ui.avatarHtml): başlıktaki kapsül,
   masadaki oyuncular, profil sayfası. Boyu --av ile verilir; çerçeve
   kutusu avatarın 1.82 katı, her yana %41 taşar (bkz. araclar/cerceve_ciz.py).
   Işıltılar yalnızca transform ve opacity ile oynar: masada taş sürüklerken
   sayfa yeniden boyanmasın. */

/* ————————————————————————————— avatar ve çerçeve */

.av {
  --av: 64px;
  position: relative; isolation: isolate;
  flex: none;
  display: block;
  width: var(--av); height: var(--av);
}
.av-resim {
  position: absolute; inset: 0;
  overflow: hidden;
  background: #20242c;
  border-radius: 50%;
  box-shadow: 0 0 0 max(1.5px, calc(var(--av) * .03)) rgba(242, 208, 137, .28), 0 4px 12px rgba(0, 0, 0, .45);
}
.av-resim img { display: block; width: 100%; height: 100%; object-fit: cover; }
.av-cer {
  position: absolute; inset: calc(var(--av) * -.41);
  pointer-events: none;
  background: var(--cer) center / 100% 100% no-repeat;
}
.av.cer-bronz { --cer: url(../img/cerceve/bronz.svg); }
.av.cer-gumus { --cer: url(../img/cerceve/gumus.svg); }
.av.cer-defne { --cer: url(../img/cerceve/defne.svg); }
.av.cer-kraliyet { --cer: url(../img/cerceve/kraliyet.svg); }
.av.cer-anka { --cer: url(../img/cerceve/anka.svg); }
.av[class*="cer-"] .av-resim { box-shadow: 0 4px 12px rgba(0, 0, 0, .45); }

/* Kraliyet: arkada altın hale, tacın ve halkanın üstünde yanıp sönen yıldızlar. */
.av.cer-kraliyet::before, .av.cer-anka::before {
  content: "";
  position: absolute; z-index: -1;
  pointer-events: none;
  border-radius: 50%;
}
.av.cer-kraliyet::before {
  inset: calc(var(--av) * -.3);
  background: radial-gradient(circle, rgba(255, 214, 110, .38) 40%, rgba(255, 190, 60, 0) 70%);
  animation: av-nabiz 3.2s ease-in-out infinite;
}
.av-parilti { position: absolute; inset: calc(var(--av) * -.41); pointer-events: none; }
.av-parilti i {
  position: absolute;
  width: calc(var(--av) * .16); height: calc(var(--av) * .16);
  background: radial-gradient(circle, #fff 0 12%, rgba(255, 244, 200, .9) 18%, rgba(255, 230, 150, 0) 60%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  opacity: 0; scale: .3;
  animation: av-yildiz 2.6s ease-in-out infinite;
}
.av-parilti i:nth-child(1) { left: 22%; top: 4%; }
.av-parilti i:nth-child(2) { left: 68%; top: 13%; animation-delay: .9s; }
.av-parilti i:nth-child(3) { left: 78%; top: 66%; animation-delay: 1.7s; }
.av-parilti i:nth-child(4) { left: 12%; top: 58%; animation-delay: 2.2s; }
@keyframes av-yildiz {
  0%, 100% { opacity: 0; scale: .3; rotate: 0deg; }
  18% { opacity: 1; scale: 1; }
  40% { opacity: 0; scale: .4; rotate: 70deg; }
}
@keyframes av-nabiz { 0%, 100% { opacity: .65; scale: .96; } 50% { opacity: 1; scale: 1.04; } }

/* Anka: arkada dönen ateş halesi, çerçeve hafifçe titrer, yukarı kıvılcımlar uçar. */
.av.cer-anka::before {
  inset: calc(var(--av) * -.26);
  background:
    radial-gradient(circle, rgba(255, 150, 40, .5) 42%, rgba(255, 90, 20, 0) 68%),
    conic-gradient(from 0deg, rgba(255, 90, 20, 0), rgba(255, 170, 50, .55), rgba(255, 60, 20, 0) 25%,
      rgba(255, 210, 90, .5) 40%, rgba(255, 80, 20, 0) 55%, rgba(255, 140, 40, .55) 72%, rgba(255, 90, 20, 0) 88%);
  -webkit-mask: radial-gradient(circle, #000 52%, transparent 71%);
  mask: radial-gradient(circle, #000 52%, transparent 71%);
  will-change: transform;
  animation: av-don 7s linear infinite;
}
.av.cer-anka .av-cer { transform-origin: 50% 55%; animation: av-titre 1.9s ease-in-out infinite; }
@keyframes av-don { to { rotate: 360deg; } }
@keyframes av-titre { 0%, 100% { scale: 1; } 30% { scale: 1.015; } 60% { scale: .995; } }
.av-kivilcim { position: absolute; inset: calc(var(--av) * -.2); pointer-events: none; }
.av-kivilcim i {
  position: absolute; bottom: 30%;
  width: max(2px, calc(var(--av) * .045)); height: max(2px, calc(var(--av) * .045));
  background: #ffd46a;
  border-radius: 50%;
  box-shadow: 0 0 calc(var(--av) * .05) #ff8a22;
  opacity: 0;
  animation: av-kivilcim 2.4s ease-out infinite;
}
.av-kivilcim i:nth-child(1) { left: 6%; }
.av-kivilcim i:nth-child(2) { left: 90%; animation-delay: .6s; }
.av-kivilcim i:nth-child(3) { left: 16%; animation-delay: 1.2s; }
.av-kivilcim i:nth-child(4) { left: 82%; animation-delay: 1.8s; }
@keyframes av-kivilcim {
  0% { opacity: 0; translate: 0 0; }
  15% { opacity: 1; }
  100% { opacity: 0; translate: calc(var(--av) * .08) calc(var(--av) * -.9); }
}
@media (prefers-reduced-motion: reduce) {
  .av::before, .av .av-cer, .av-parilti i, .av-kivilcim i { animation: none !important; }
  .av-parilti i { opacity: .8; scale: .8; }
}

/* ————————————————————————————— başlıktaki kapsül */

/* Avatar sezon halkasının içinde; baş harf yerine resim. */
.me-avatar .av { --av: 100%; width: 100%; height: 100%; }
.me-avatar .av-resim { box-shadow: 0 0 0 1.5px #12151b; }

/* ————————————————————————————— profil sayfası

   Solda oyuncu kartı (büyük avatar, kimlik, hesap), sağda altın başlık,
   profil fotoğrafı seçimi ve çerçeveler. Mağazanın ve kedilerin dilinde. */
.pf-sayfa {
  flex: 1; min-height: 0;
  position: relative; isolation: isolate;
  display: flex; align-items: flex-start; justify-content: center; gap: 34px;
  padding: 26px 44px 30px;
  overflow-y: auto; scrollbar-width: thin;
}
.pf-sayfa::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: radial-gradient(70% 46% at 50% 110%, rgba(240, 180, 70, .24) 0%, rgba(215, 150, 50, .09) 45%, rgba(0, 0, 0, 0) 76%);
}

/* Oyuncu kartı */
.pf-kart {
  flex: 0 0 370px;
  display: flex; flex-direction: column; align-items: center;
  padding: 0 0 20px;
  overflow: hidden;
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, #2a2317, #16130d) padding-box,
    linear-gradient(160deg, #fff0b8 0%, #d7a53f 35%, #8a6416 62%, #f2d089 100%) border-box;
  border-radius: 18px;
  box-shadow: 0 0 26px rgba(242, 208, 137, .16), 0 14px 30px rgba(0, 0, 0, .5);
}
.pf-sahne {
  position: relative;
  width: 100%; height: 300px;
  display: grid; place-items: center;
  background:
    radial-gradient(52% 58% at 50% 52%, rgba(242, 193, 78, .32) 0%, transparent 72%),
    repeating-conic-gradient(from 0deg at 50% 52%, rgba(255, 240, 200, .05) 0 6deg, transparent 6deg 16deg),
    linear-gradient(180deg, #1b1712, #0f0d0a);
  border-bottom: 1px solid rgba(215, 165, 63, .25);
}
.pf-sahne .av { --av: 150px; }
/* Avatarın sağ altındaki kamera: resim yükler. */
.pf-kamera {
  position: absolute; left: calc(50% + 43px); top: calc(50% + 41px);
  z-index: 3;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  color: #2a1c00;
  background: linear-gradient(180deg, #ffe7a6, #d7a53f);
  border: 2px solid #1a150c;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .5);
  cursor: pointer;
  transition: transform .15s, filter .15s;
}
.pf-kamera:hover { transform: scale(1.08); filter: brightness(1.08); }
.pf-kamera svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.pf-kimlik { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 16px 18px 0; text-align: center; }
.pf-kimlik b { font-size: 24px; font-weight: 800; color: #fff4d6; word-break: break-word; }
.pf-kimlik b i { font-style: normal; margin-left: 2px; font-weight: 700; color: var(--gold); }
.pf-tur {
  padding: 3px 12px;
  font-size: 11px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--gold-hi);
  background: rgba(215, 165, 63, .12);
  border: 1px solid rgba(215, 165, 63, .4);
  border-radius: 999px;
}
.pf-tur.is-misafir { color: var(--txt-dim); background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); }

/* Üç küçük sayı: sezon seviyesi, kedi artışı, çerçeveler. */
.pf-istat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: calc(100% - 36px); margin-top: 14px; }
.pf-istat div {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 9px 4px 8px;
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
}
.pf-istat b { font-size: 17px; font-weight: 900; color: var(--gold-hi); }
.pf-istat span { font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: var(--txt-mute); }

/* Hesap: ad ve tag, e-posta, düğmeler. */
.pf-hesap { display: flex; flex-direction: column; gap: 10px; width: calc(100% - 36px); margin-top: 16px; }
.pf-alan { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pf-alan > span { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--txt-mute); }
.pf-girdi {
  display: flex; align-items: center;
  height: 40px; padding: 0 12px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  transition: border-color .15s;
}
.pf-girdi:focus-within { border-color: rgba(215, 165, 63, .7); }
.pf-girdi em { font-style: normal; font-weight: 800; color: var(--gold); margin-right: 3px; }
.pf-girdi input {
  flex: 1; min-width: 0; height: 100%;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--txt);
  background: none; border: 0; outline: none;
}
.pf-satir { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; }
.pf-eposta { font-size: 13px; color: var(--txt-dim); word-break: break-all; }
.pf-eposta .tag.ok { margin-left: 6px; }
.pf-hata { margin: 0; font-size: 12.5px; color: #ff8a80; }
.pf-hata[hidden] { display: none; }
.pf-dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.pf-dugmeler .mg-fiyat.is-kucuk { height: 42px; }
.pf-cikis {
  height: 42px;
  font-size: 13px; font-weight: 800; letter-spacing: 1px;
  color: var(--txt-dim);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.pf-cikis:hover { color: #ffb4ab; border-color: rgba(255, 120, 110, .5); background: rgba(196, 54, 46, .1); }

/* Sağ taraf */
.pf-ana { flex: 0 1 1060px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.pf-bolum {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 22px 22px;
  background: linear-gradient(180deg, rgba(38, 33, 24, .9), rgba(20, 18, 13, .9));
  border: 1px solid rgba(215, 165, 63, .32);
  border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 236, 170, .06), 0 12px 26px rgba(0, 0, 0, .4);
}
.pf-bolum-bas { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pf-bolum h3 { margin: 0; font-size: 15px; font-weight: 900; letter-spacing: 2px; color: var(--gold-hi); }

/* Profil fotoğrafı: önce yükle / senin resmin, sonra beş hazır avatar. */
.pf-avatarlar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.pf-secim {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 6px 11px;
  font-size: 14px; font-weight: 700; color: var(--txt-dim);
  background: rgba(0, 0, 0, .22);
  border: 2px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .15s;
}
.pf-secim:hover { border-color: rgba(215, 165, 63, .55); transform: translateY(-2px); }
.pf-secim .av { --av: 100px; }
.pf-secim.is-secili {
  color: var(--gold-hi);
  background: rgba(215, 165, 63, .1);
  border-color: #e0b24e;
  box-shadow: 0 0 16px rgba(242, 208, 137, .22);
}
.pf-tik {
  position: absolute; right: 7px; top: 7px;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: #2a1c00;
  background: linear-gradient(180deg, #ffe7a6, #d7a53f);
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.pf-tik svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; }
/* Resim yükleme gözü: resim yoksa kesikli çember ve kamera. */
.pf-yukle-bos {
  width: 100px; height: 100px;
  display: grid; place-items: center;
  color: var(--gold);
  background: rgba(215, 165, 63, .06);
  border: 2px dashed rgba(215, 165, 63, .55);
  border-radius: 50%;
  transition: background .15s;
}
.pf-secim:hover .pf-yukle-bos { background: rgba(215, 165, 63, .14); }
.pf-yukle-bos svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-kaldir {
  position: absolute; left: 7px; top: 7px; z-index: 2;
  width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center;
  font-size: 15px; line-height: 1;
  color: #fff;
  background: rgba(20, 20, 24, .85);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  cursor: pointer;
}
.pf-kaldir:hover { background: var(--red); }

/* Çerçeveler: beş kart, ucuzdan pahalıya; her kartta senin avatarın o çerçeveyle. */
.pf-cerceveler { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.pf-cer {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 10px 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #25211a, #17150f);
  border: 2px solid rgba(215, 165, 63, .28);
  border-radius: 14px;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.pf-cer:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--derece) 70%, #f2d089);
  box-shadow: 0 0 20px color-mix(in srgb, var(--derece) 28%, transparent), 0 14px 26px rgba(0, 0, 0, .45);
}
.pf-cer.is-takili {
  border-color: transparent;
  background:
    linear-gradient(180deg, #2c2414, #1a150c) padding-box,
    linear-gradient(160deg, #fff0b8 0%, #d7a53f 35%, #8a6416 62%, #f2d089 100%) border-box;
  box-shadow: 0 0 22px rgba(242, 208, 137, .25);
}
.pf-cer-sahne {
  width: calc(100% + 20px); height: 196px;
  display: grid; place-items: center;
  background:
    radial-gradient(52% 56% at 50% 54%, color-mix(in srgb, var(--derece) 34%, transparent) 0%, transparent 74%),
    linear-gradient(180deg, #1b1712, #100e0a);
  border-bottom: 1px solid rgba(215, 165, 63, .18);
}
.pf-cer-sahne .av { --av: 96px; }
.pf-derece {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  padding: 3px 8px;
  font-size: 9.5px; font-weight: 900; letter-spacing: 1.2px; text-transform: uppercase;
  color: #fff;
  background: color-mix(in srgb, var(--derece) 62%, #120a00);
  border: 1px solid color-mix(in srgb, var(--derece) 80%, #fff);
  border-radius: 999px;
}
.pf-cer .kd-rozet { top: 8px; right: 8px; padding: 3px 8px; font-size: 9.5px; z-index: 2; }
.pf-cer b { font-size: 16px; font-weight: 800; color: #fff4d6; text-align: center; }
.pf-cer .mg-fiyat.is-kucuk {
  align-self: stretch;
  height: 44px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 17px; letter-spacing: .3px;
}
.pf-cer .mg-fiyat .coin { width: 20px; height: 20px; flex: none; }
.pf-cer .mg-fiyat.is-yetmez { filter: saturate(.55) brightness(.85); }
.pf-cer .mg-fiyat.is-ikincil, .pf-cer .mg-fiyat.is-tak { font-size: 15px; letter-spacing: 1px; }

/* Satın alma penceresi: büyük önizleme, fiyat, bakiye. */
.pf-al { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 0 6px; }
.pf-al .av { --av: 120px; margin-bottom: 26px; }
.pf-al-ad { font-size: 22px; font-weight: 900; color: #fff4d6; }
.pf-al p { margin: 0; font-size: 14px; color: var(--txt-dim); text-align: center; }
.pf-al p em { font-style: normal; font-weight: 800; color: var(--gold-hi); }
.pf-al .pf-derece { position: static; }
.pf-al-fiyat { display: inline-flex; align-items: center; gap: 8px; font-size: 26px; font-weight: 900; color: var(--gold-hi); }
.pf-al-fiyat .coin { width: 26px; height: 26px; }

/* ————————————————————————————— resim kırpma */

.kirp { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.kirp-alan {
  position: relative;
  width: 280px; height: 280px;
  overflow: hidden;
  background: #0d0f13;
  border-radius: 14px;
  touch-action: none;
  cursor: grab;
}
.kirp-alan:active { cursor: grabbing; }
.kirp-alan canvas { display: block; width: 100%; height: 100%; }
/* Kırpılan kısım karenin içine oturan daire: dışı karartılır, kenarı altın çizgi. */
.kirp-alan::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(circle closest-side, transparent 98.6%, rgba(0, 0, 0, .62) 99.4%);
}
.kirp-alan::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  border: 2px solid rgba(242, 208, 137, .85);
  border-radius: 50%;
}
.kirp-yakin { display: flex; align-items: center; gap: 12px; width: 280px; color: var(--txt-mute); }
.kirp-yakin svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.kirp-yakin input { flex: 1; accent-color: var(--gold); }
.kirp p { margin: 0; font-size: 12.5px; color: var(--txt-mute); text-align: center; }