/* ══════════════════════════════════════════════════════════
   frames.css — Pena Market'te satılan avatar çerçevelerinin görselleri.

   YENİ ÇERÇEVE EKLEMEK İÇİN (index.html'e DOKUNMAN GEREKMİYOR):
     1) pena-market.js'teki MARKET_ITEMS'a frameId ile yeni bir satır ekle
        (mevcut frame_gold / frame_neon vb. satırlarından birini kopyala).
     2) /frames/frame_{id}.svg veya .png dosyasını sunucuya yükle
        (kare, ortası şeffaf).
     3) Buraya aşağıdaki kalıpta 2 bloktan oluşan yeni bir bölüm ekle
        (frame-{id} class'ı için) — inset oranını nasıl hesaplayacağını
        alttaki nota bakarak bul.

   INSET ORANI NASIL HESAPLANIR:
     Görseldeki halkanın çapı, tuvalin (görsel dosyasının) tam genişliğine
     göre ne kadar yer kaplıyorsa (örn. halka çapı tuvalin %57'si gibi),
     inset% = (1 / halka_çapı_oranı - 1) / 2 * 100
     Örn. halka çapı oranı 0.57 ise: (1/0.57 - 1)/2*100 ≈ 37.7
     Görsel simetrik değilse (örn. taç gibi bir çıkıntı varsa), halkanın
     ortalanması için önce görsel kare bir tuvale, halka tam ortada kalacak
     şekilde yeniden yerleştirilmeli (bu hesaplamaları ben yapıyorum,
     görseli attığında).
══════════════════════════════════════════════════════════ */

/* ── Altın Avatar Çerçevesi (frame_gold) ──────────────────────
   Bu SVG'nin altın halkası tuvalin (30x30) tamamını değil, ortasındaki
   ~%57'lik bir alanı kaplıyor (kenarlarda dal/yaprak süslemeleri için
   boşluk bırakılmış) — bu yüzden inset -38.2% kullanılıyor, böylece
   halkanın kendisi avatarla TAM aynı boyutta hizalanıyor ve süslemeler
   dışa taşıyor. (SVG dosyasının viewBox'ı da halkayı tam ortalayacak
   şekilde düzeltildi.) */
.welcome-avatar-wrap.frame-gold,
.ow-avatar-wrap.frame-gold,
._pena_preview_avatar-wrap.frame-gold {
  border-radius: 50%;
}
.welcome-avatar-wrap.frame-gold::after,
.ow-avatar-wrap.frame-gold::after,
._pena_preview_avatar-wrap.frame-gold::after {
  content: ''; position: absolute; inset: -38.2%; pointer-events: none;
  background: url('/frames/frame_gold.svg') center / contain no-repeat;
}

/* ── Neon Avatar Çerçevesi (frame_neon) ───────────────────────── */
.welcome-avatar-wrap.frame-neon,
.ow-avatar-wrap.frame-neon,
._pena_preview_avatar-wrap.frame-neon {
  border-radius: 50%;
}
.welcome-avatar-wrap.frame-neon::after,
.ow-avatar-wrap.frame-neon::after,
._pena_preview_avatar-wrap.frame-neon::after {
  content: ''; position: absolute; inset: -22%; pointer-events: none;
  background: url('/frames/frame_neon.svg') center / contain no-repeat;
}

/* ── Kış Çiçekleri Çerçevesi (frame_winter) ───────────────────────
   Bu görselde altın halka tuvalin (2000x2000) merkezine göre ölçülüp
   doğru inset hesaplandı: halka çapı ~%54.2, inset% ≈ 42.2 */
.welcome-avatar-wrap.frame-winter,
.ow-avatar-wrap.frame-winter,
._pena_preview_avatar-wrap.frame-winter {
  border-radius: 50%;
}
.welcome-avatar-wrap.frame-winter::after,
.ow-avatar-wrap.frame-winter::after,
._pena_preview_avatar-wrap.frame-winter::after {
  content: ''; position: absolute; inset: -42.2%; pointer-events: none;
  background: url('/frames/frame_winter.png') center / contain no-repeat;
}

/* ── Taçlı Kraliyet Çerçevesi (frame_crown) ────────────────────────
   Taç üstte çıkıntı yaptığı için halka, tuvalin oldukça küçük bir
   bölümünü kaplıyor (~%42.7) — bu yüzden inset büyük (-67%). Kaynak
   görsel gri arka planı kaldırılıp halka ortalanacak şekilde kare
   tuvale yeniden yerleştirildi.
   NOT: bu çerçeve diğerlerinden belirgin şekilde daha büyük taşıyor —
   avatarların sık dizildiği yerlerde (Kim Online widget'ı gibi) komşu
   avatarlarla görsel çakışma olabilir. */
.welcome-avatar-wrap.frame-crown,
.ow-avatar-wrap.frame-crown,
._pena_preview_avatar-wrap.frame-crown {
  border-radius: 50%;
}
.welcome-avatar-wrap.frame-crown::after,
.ow-avatar-wrap.frame-crown::after,
._pena_preview_avatar-wrap.frame-crown::after {
  content: ''; position: absolute; inset: -67%; pointer-events: none;
  background: url('/frames/frame_crown.png') center / contain no-repeat;
}

/* ── Mandala Avatar Çerçevesi (frame_mandala) ─────────────────────────
   Kaynak görselde ortada dolgu bir daire + iç içe çiçek motifi vardı
   (avatar fotoğrafını tamamen kapatırdı) — SVG'nin tamamı bir clip-path
   ile sarılıp merkezdeki dairesel alan (r=151.256, 750x500 tuval
   üzerinde) tamamen şeffaf hale getirildi; sadece ince altın halka
   çizgisi ve yıldız uçlu mandala süslemeleri kaldı. Görsel kare
   olmadığı (750x500) için üstten/alttan boşluk eklenip halka kare
   tuvalin tam ortasına hizalandı. */
.welcome-avatar-wrap.frame-mandala,
.ow-avatar-wrap.frame-mandala,
._pena_preview_avatar-wrap.frame-mandala {
  border-radius: 50%;
}
.welcome-avatar-wrap.frame-mandala::after,
.ow-avatar-wrap.frame-mandala::after,
._pena_preview_avatar-wrap.frame-mandala::after {
  content: ''; position: absolute; inset: -74%; pointer-events: none;
  background: url('/frames/frame_mandala.png') center / contain no-repeat;
}

/* ── Kelebek Çelengi Çerçevesi (frame_wreath) ─────────────────────────
   Kaynak görsel (JPEG) düz siyah zeminliydi — parlaklık eşiği ile
   şeffaflaştırıldı. Halkanın iç boşluğu simetrik bir daire değil
   (çiçek/kelebek desenleri bazı yerlerde daha içeri taşıyor) — boşluk
   kalmaması için avatar, en dar noktaya göre değil en GENİŞ boşluğa
   göre ölçeklendi; bu yüzden bazı süslemelerin (çiçek/yaprak uçları)
   avatarın hafif altında kalması normal ve istenen bir görünüm. */
.welcome-avatar-wrap.frame-wreath,
.ow-avatar-wrap.frame-wreath,
._pena_preview_avatar-wrap.frame-wreath {
  border-radius: 50%;
}
.welcome-avatar-wrap.frame-wreath::after,
.ow-avatar-wrap.frame-wreath::after,
._pena_preview_avatar-wrap.frame-wreath::after {
  content: ''; position: absolute; inset: -24.9%; pointer-events: none;
  background: url('/frames/frame_wreath.png') center / contain no-repeat;
}

/* ── Ateş Ejderhası Çerçevesi (frame_dragon) ───────────────────────
   Kaynak görsel (512x512) açık gri damalı (checkerboard) bir zeminle
   geldi. İlk denemede geniş bir parlaklık eşiği kullanılınca damalı
   desenin gölgesi düşük-alfa "hayalet" leke olarak kalmıştı; dar bantlı
   sert bir eşik (gray>238 & doygunluk<18) + medyan filtre + hafif
   gaussian blur ile düzeltildi, artık arka plan tamamen (alpha=0) temiz.
   Halka merkezi tuvalin tam ortasına hizalandı.
   NOT: İlk inset hesabında ejderhanın dış sınırını (bbox) kullanmıştım
   ama bu yanlıştı — o değer fotoğrafın üstüne taşan bir çerçeveye yol
   açıyordu. Doğrusu, fotoğrafın oturacağı iç şeffaf boşluğun (deliğin)
   çapı: bağlı-bileşen analizi ile ölçülünce delik tuvalin sadece
   ~%58'i (0.578 genişlik / 0.590 yükseklik, merkezde) çıktı — ejderha
   gövdesi oldukça kalın bir halka. inset% = (1/0.584 - 1)/2*100 ≈ 35.6
   kullanılarak delik çapı avatar çapına eşitlendi, böylece ejderha
   tamamen fotoğrafın DIŞINA taşıyor. */
.welcome-avatar-wrap.frame-dragon,
.ow-avatar-wrap.frame-dragon,
._pena_preview_avatar-wrap.frame-dragon {
  border-radius: 50%;
}
.welcome-avatar-wrap.frame-dragon::after,
.ow-avatar-wrap.frame-dragon::after,
._pena_preview_avatar-wrap.frame-dragon::after {
  content: ''; position: absolute; inset: -35.6%; pointer-events: none;
  background: url('/frames/frame_dragon.png') center / contain no-repeat;
}

/* ── Lacivert-Sarı Çelenk Çerçevesi (frame_fb_wreath) ──────────────
   Kaynak görsel, üstte dairesel bir amblem (kulüp logosu) içeriyordu —
   telif/marka nedeniyle amblem tamamen kaldırıldı (o alan şeffaf
   bırakıldı, çelengin geri kalanı bütünlüğünü koruyor). Zemin siyahtı,
   parlaklık eşiğiyle (gray<15) şeffaflaştırıldı + medyan filtre/hafif
   blur ile temizlendi. Halka merkezi tuvalin ortasına hizalandı.
   Çelengin (yaprak/kurdele) oluşturduğu iç boşluk elle ölçüldü (ince
   swirl çizgileri hariç, ana yaprak/kurdele hattı): yatay ~%54, dikey
   ~%65, ortalama ~%59 — inset% = (1/0.59 - 1)/2*100 ≈ 34.6. Alt ortadaki
   kar tanesi süsü kasıtlı olarak biraz içeri sarkıyor (diğer
   çerçevelerdeki asimetrik detaylar gibi, bkz. crown/wreath notları). */
.welcome-avatar-wrap.frame-fb_wreath,
.ow-avatar-wrap.frame-fb_wreath,
._pena_preview_avatar-wrap.frame-fb_wreath {
  border-radius: 50%;
}
.welcome-avatar-wrap.frame-fb_wreath::after,
.ow-avatar-wrap.frame-fb_wreath::after,
._pena_preview_avatar-wrap.frame-fb_wreath::after {
  content: ''; position: absolute; inset: -34.6%; pointer-events: none;
  background: url('/frames/frame_fb_wreath.png') center / contain no-repeat;
}

/* ══════ Öğrenci market panelindeki küçük renk/çerçeve göstergeleri ══════ */
.ow-item-swatch.frame-gold   { box-shadow: 0 0 0 3px #f0c14b; }
.ow-item-swatch.frame-neon   { box-shadow: 0 0 0 3px #35d0f0; }
.ow-item-swatch.frame-winter { box-shadow: 0 0 0 3px #6f8fc7; }
.ow-item-swatch.frame-crown  { box-shadow: 0 0 0 3px #b98a2f; }
.ow-item-swatch.frame-mandala { box-shadow: 0 0 0 3px #c9a24b; }
.ow-item-swatch.frame-wreath { box-shadow: 0 0 0 3px #d4af37; }
.ow-item-swatch.frame-dragon { box-shadow: 0 0 0 3px #ff4500; }
.ow-item-swatch.frame-fb_wreath { box-shadow: 0 0 0 3px #f0c419; }

/* ══════ Pena Market — kart üzerinde mini çerçeve önizlemesi ══════
   (Bu, çerçeveye özel değil — genel bir boyut kuralı, burada kalabilir) */
.welcome-avatar-wrap.market-icon-avatar {
  width: 48px; height: 48px; cursor: default;
}
.welcome-avatar-wrap.market-icon-avatar:hover { transform: none; }
.welcome-avatar-wrap.market-icon-avatar .welcome-avatar-img { width: 48px; height: 48px; }