/* =========================================================================
   57th — CİLA KATMANI
   =========================================================================
   Bu dosya hiçbir düzeni (layout) DEĞİŞTİRMEZ. Yalnızca derinlik, hareket
   ve geri bildirim ekler. Böylece 60+ görünüm dosyasına dokunmadan bütün
   sayfalar birden iyileşiyor; bir şey ters giderse tek dosyayı çıkarmak
   yetiyor.

   KURALLAR
   - Var olan renk değişkenleri kullanılır, yeni palet uydurulmaz.
   - Hiçbir efekt bilgiyi gizlemez ya da tıklamayı engellemez.
   - `prefers-reduced-motion` açık olanda TÜM hareket kapanır (en altta).
   - Canvas, harita ve canlı konsol gibi sürekli çizilen alanlar efekt
     almaz — kare hızını düşürmesin.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) SAYFA BAŞLIĞI — ölü boşluğa derinlik
   Profil/maç sayfalarında başlık altındaki geniş alan tamamen düzdü.
   Çok yumuşak bir altın ışıma ve ince bir ayraç çizgisi koyuyoruz.
   ------------------------------------------------------------------------- */
.page-head {
  position: relative;
  overflow: hidden;
}
.page-head::before {
  content: '';
  position: absolute;
  inset: -60% -20% auto -20%;
  height: 320px;
  background: radial-gradient(ellipse at 20% 100%, rgba(200, 165, 91, .10), transparent 62%);
  pointer-events: none;
}
.page-head::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(200, 165, 91, .38) 22%, rgba(200, 165, 91, .38) 78%, transparent);
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   2) KARTLAR — üstte altın hairline, üzerine gelince yükselme
   ------------------------------------------------------------------------- */
.card {
  position: relative;
  transition: transform .22s cubic-bezier(.2, .7, .3, 1),
              box-shadow .22s ease,
              border-color .22s ease;
}
.card::before {
  content: '';
  position: absolute;
  left: 14px; right: 14px; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.card:hover::before { opacity: 1; }
.card:hover {
  transform: translateY(-2px);
  border-color: rgba(200, 165, 91, .28);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 0 1px rgba(200, 165, 91, .06);
}
/* Canlı çizim yapan kartlar sabit dursun — titreme olmasın */
.card:has(canvas):hover { transform: none; }

/* -------------------------------------------------------------------------
   3) İSTATİSTİK KUTULARI — asıl "wow" burada
   Sayılar tablo rakamı (tabular) olur ki sayarken genişlik zıplamasın.
   ------------------------------------------------------------------------- */
.stat, .tile, .kpi, .kv > div, .mc-stats > div {
  position: relative;
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), background .2s ease;
}
.stat:hover, .tile:hover, .kpi:hover, .mc-stats > div:hover { transform: translateY(-3px); }
.stat b, .stat .v, .stat strong, .tile b, .tile .vl, .kpi b,
.kv .v, .mc-stats span, .rp-score, .stat-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
/* Sayı sayarken hafif parlama */
.sayiyor {
  color: var(--gold-bright) !important;
  text-shadow: 0 0 18px rgba(200, 165, 91, .35);
  transition: color .4s ease, text-shadow .4s ease;
}

/* -------------------------------------------------------------------------
   4) GİRİŞ ANİMASYONU — içerik akarak gelsin
   JS `.reveal` sınıfını ekler, görünür olunca `.gorundu` gelir.
   JS çalışmazsa hiçbir şey gizli kalmaz (aşağıdaki .no-js kuralı).
   ------------------------------------------------------------------------- */
/* DİKKAT — BU BİR HATA DÜZELTMESİDİR (FOUC)
   Eskiden `.reveal` sınıfını JS ekliyordu. `defer` script HTML çizildikten
   SONRA çalıştığı için sıralama şöyle oluyordu:
       içerik görünür  →  JS gizliyor  →  animasyonla açılıyor
   Yani sayfa açılırken gözle görülür bir "yanıp sönme" vardı.

   Çözüm: gizlemeyi CSS'in daha ilk boyamada yapması. <head> içindeki
   minik satır içi betik <html> etiketine `cila` sınıfını ekliyor (sayfa
   boyanmadan önce), aşağıdaki kurallar da o sınıfa bakıyor. JS sonradan
   yalnızca `.gorundu` ekliyor.

   EMNİYET: satır içi betik 2,5 saniyelik bir ölü adam anahtarı kuruyor —
   polish.js herhangi bir sebeple çalışmazsa `cila` sınıfı kaldırılıyor ve
   içerik görünür oluyor. İçeriğin gizli kalması, animasyonun olmamasından
   çok daha kötü bir hata. */
/* :where() ÖNEMLİ — özgüllük (specificity) hatası düzeltmesi.
   Bu liste düz yazılınca `html.cila .page-head .container > *` kuralı
   (3 sınıf) `html.cila .gorundu` kuralını (2 sınıf) YENİYORDU: sayfa
   başlığındaki h1 ve p `.gorundu` sınıfını alıyor ama yine de opacity:0
   kalıyordu — başlık hiç görünmüyordu. `:where()` özgüllüğe 0 katkı
   yaptığı için gizleme kuralı artık göstermeden zayıf. */
html.cila :where(
  .card, .stat, .tile, .kpi, .kv, .tiles, .match-card,
  .page-head .container > *
) {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s cubic-bezier(.2, .7, .3, 1),
              transform .5s cubic-bezier(.2, .7, .3, 1);
  will-change: opacity, transform;
}
html.cila .gorundu {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* -------------------------------------------------------------------------
   5) BUTONLAR — basınca gerçekten basılmış hissi + ışık süpürme
   ------------------------------------------------------------------------- */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform .12s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:active { transform: translateY(1px) scale(.995); }
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .55s ease;
  pointer-events: none;
}
.btn-primary:hover::after { transform: translateX(120%); }

/* -------------------------------------------------------------------------
   6) TABLOLAR — satır vurgusu ve sol altın şerit
   ------------------------------------------------------------------------- */
.data tbody tr {
  transition: background .15s ease, box-shadow .15s ease;
}
.data tbody tr:hover {
  background: rgba(200, 165, 91, .045);
  box-shadow: inset 3px 0 0 var(--gold);
}

/* -------------------------------------------------------------------------
   7) BAĞLANTI ALTI ÇİZGİSİ — üstten değil, ortadan açılan
   ------------------------------------------------------------------------- */
/* DİKKAT — REGRESYON DÜZELTMESİ.
   Bu kural önce `::after` sözde-elemanıyla yazılmıştı. Ama `.brand` gibi
   bağlantılar `display:flex` olduğu için sözde-eleman ORAYA BİR FLEX ÖĞESİ
   olarak giriyor ve logonun yanında duran altın bir çizgi olarak çıkıyordu.
   Artık sözde-eleman yok: alt çizgi bir arka plan görseli ve `background-size`
   ile canlandırılıyor. Arka plan asla flex öğesi olamaz, o yüzden hiçbir
   düzeni bozamaz. Logo ve avatarlı bağlantılar da baştan hariç. */
.nav a:not(.btn):not(.brand):not(:has(img)),
.topnav a:not(.btn):not(.brand):not(:has(img)) {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 0% 1.5px;
  transition: background-size .25s cubic-bezier(.2, .7, .3, 1);
}
.nav a:not(.btn):not(.brand):not(:has(img)):hover,
.topnav a:not(.btn):not(.brand):not(:has(img)):hover { background-size: 100% 1.5px; }

/* -------------------------------------------------------------------------
   8) CANLI DURUM NOKTASI — nabız
   Sunucu "açık" göstergesi hareketsizken ölü görünüyordu.
   ------------------------------------------------------------------------- */
.status-dot.on, .dot.on, .live-dot {
  position: relative;
}
.status-dot.on::after, .dot.on::after, .live-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: .55;
  animation: nabiz 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes nabiz {
  0%   { transform: scale(.7); opacity: .6; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* -------------------------------------------------------------------------
   9) ODAK HALKASI — klavyeyle gezen görsün (erişilebilirlik)
   ------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}

/* -------------------------------------------------------------------------
   10) YÜKLENİYOR PARILTISI — boş kutular ölü durmasın
   ------------------------------------------------------------------------- */
.iskelet {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .03) 25%,
    rgba(255, 255, 255, .07) 37%,
    rgba(255, 255, 255, .03) 63%);
  background-size: 400% 100%;
  animation: parilti 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes parilti {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* -------------------------------------------------------------------------
   HAREKETİ AZALT — sistem ayarı açıksa her şey durur.
   Bu bir nezaket değil, erişilebilirlik gereği: hareket bazı kullanıcılarda
   baş dönmesi/mide bulantısı yapıyor.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.cila :where(.card, .stat, .tile, .kpi, .kv, .tiles, .match-card,
    .page-head .container > *) {
    opacity: 1 !important; transform: none !important; transition: none !important; }
  .card, .stat, .btn, .data tbody tr, .nav a { transition: none !important; }
  .card:hover, .stat:hover, .tile:hover, .kpi:hover, .mc-stats > div:hover { transform: none !important; }
  .status-dot.on::after, .dot.on::after, .live-dot::after { animation: none; opacity: .3; }
  .iskelet { animation: none; }
  .btn-primary::after { display: none; }
}

/* =========================================================================
   PROFİL SAYFASI — genişletilmiş bileşenler
   ========================================================================= */

/* --- Seviye / XP --- */
.lvl-card { border-color: rgba(200, 165, 91, .22); }
.lvl-rozet {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 11px;
  background: linear-gradient(150deg, rgba(200, 165, 91, .22), rgba(200, 165, 91, .06));
  border: 1px solid rgba(200, 165, 91, .4);
  color: var(--gold-bright);
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.lvl-bar {
  height: 7px; border-radius: 4px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
}
.lvl-bar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-bright));
  border-radius: 4px;
  transition: width .9s cubic-bezier(.2, .7, .3, 1);
}

/* --- Sıralama --- */
.siralama-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.sira-kutu {
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .015);
}
.sira-no {
  font-family: var(--font-display);
  font-size: 22px; color: var(--gold-bright);
  font-variant-numeric: tabular-nums;
  margin: 3px 0 7px;
}
.sira-no span { font-size: 12px; font-family: var(--font-body); margin-left: 4px; }
.sira-cubuk {
  height: 4px; border-radius: 3px;
  background: rgba(255, 255, 255, .07);
  overflow: hidden; margin-bottom: 5px;
}
/* Çubuk "ne kadar YUKARIDA" olduğunu gösterir: 1. sıra neredeyse dolu. */
.sira-cubuk > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
}

/* --- Başarımlar --- */
.basarim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 10px;
}
.basarim {
  text-align: center;
  padding: 12px 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .012);
  transition: border-color .2s, transform .2s, background .2s;
}
.basarim:hover { transform: translateY(-2px); border-color: rgba(200, 165, 91, .3); }
.basarim-ikon {
  position: relative;
  width: 42px; height: 42px; margin: 0 auto 7px;
  border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-soft);
  color: var(--dim);
}
.basarim.acik .basarim-ikon {
  border-color: rgba(200, 165, 91, .55);
  color: var(--gold-bright);
  background: radial-gradient(circle, rgba(200, 165, 91, .16), transparent 70%);
  box-shadow: 0 0 16px rgba(200, 165, 91, .18);
}
.basarim-ikon .kilit {
  position: absolute; right: -2px; bottom: -2px;
  font-size: 9px; line-height: 1;
  filter: grayscale(1); opacity: .6;
}
.basarim-ad { font-size: 11.5px; font-weight: 600; margin-bottom: 2px; }
.basarim.acik .basarim-ad { color: var(--gold-bright); }
.basarim-cubuk {
  height: 3px; border-radius: 2px; margin-top: 6px;
  background: rgba(255, 255, 255, .07); overflow: hidden;
}
.basarim-cubuk > i { display: block; height: 100%; background: var(--gold-deep); }

/* --- Dağılım çubukları (harita / mod) --- */
.dagilim-baslik {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 8px;
}
.dagilim { margin-bottom: 9px; }
.dagilim .d-ad { font-size: 12.5px; }
.dagilim .d-sayi { font-size: 11px; float: right; }
.d-cubuk {
  height: 4px; border-radius: 3px; margin-top: 5px;
  background: rgba(255, 255, 255, .06); overflow: hidden; clear: both;
}
.d-cubuk > i { display: block; height: 100%; background: var(--info); }
.d-cubuk.alt > i { background: var(--gold); }

/* --- 30 günlük grafik --- */
.gun-grafik {
  display: flex; align-items: flex-end; gap: 2px;
  height: 84px;
}
.gun-grafik > i {
  flex: 1; min-width: 0;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  border-radius: 2px 2px 0 0;
  opacity: .85;
  transition: opacity .15s;
}
.gun-grafik > i:hover { opacity: 1; }

/* --- "Yakında" kutusu ---
   Verisi olmayan bölüm boş kalmasın ama sahte sayı da göstermesin:
   ne olduğunu ve NEDEN olmadığını yazıyoruz. */
.yakinda {
  border: 1px dashed rgba(200, 165, 91, .28);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: rgba(200, 165, 91, .03);
}
.yakinda b { display: block; font-size: 12.5px; color: var(--gold-bright); margin-bottom: 3px; }
.yakinda span { font-size: 11.5px; color: var(--muted); line-height: 1.55; }

/* -------------------------------------------------------------------------
   PROFİL DÜZENİ — ana sütun + kenar sütun
   Tek bir ızgaraya 7 kart konunca sütunlar tarak gibi görünüyordu.
   Uzun/akan içerik solda, kutu tipi kısa kartlar sağda.
   ------------------------------------------------------------------------- */
.profil-duzen {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.profil-ana, .profil-yan {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
/* Kartların kendi alt boşluğu düzeni bozmasın — aralığı grid veriyor */
.profil-ana > .card, .profil-yan > .card { margin-bottom: 0; }

@media (max-width: 900px) {
  .profil-duzen { grid-template-columns: minmax(0, 1fr); }
}

/* Sıralama: tek kutu kaldığında bütün satırı kaplayıp devasa görünüyordu.
   Sütun genişliğine üst sınır koyup sola yasladık. */
.siralama-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 230px));
  justify-content: start;
}

/* Ana sütuna 3'ten az kart düşüyorsa (maç verisi olmayan profil) iki
   sütun anlamsız: sol taraf boş kalıyor. O zaman kartları tek akışa alıp
   yan yana sığdırıyoruz. */
.profil-duzen.tek-sutun {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  align-items: start;
}
.profil-duzen.tek-sutun .profil-ana,
.profil-duzen.tek-sutun .profil-yan {
  display: contents;
}

/* -------------------------------------------------------------------------
   PROFİL KART DÜZENLEYİCİ
   Kartlar artık `.kart-sar` sarmalayıcısının içinde. Sarmalayıcı normalde
   görünmez; yalnızca düzenleme modunda araç çubuğunu ve kenarlığı taşıyor.
   ------------------------------------------------------------------------- */
.kart-sar { min-width: 0; }
.kart-sar > .card { margin-bottom: 0; }

/* Gizlenen kart normalde hiç görünmez, düzenleme modunda soluk görünür —
   böylece geri açmak için sayfayı yenilemek gerekmiyor. */
.kart-gizli { display: none; }
body.duzen-modu .kart-gizli { display: block; opacity: .38; }
body.duzen-modu .kart-gizli > .card { border-style: dashed; }

/* DİKKAT — `display:flex` tarayıcının `[hidden]{display:none}` kuralını
   EZER. İlk yazışta bunu kaçırdım: `hidden` özniteliğine rağmen düzenleme
   çubuğu sayfa açılır açılmaz görünüyordu (Playwright'ta yakalandı).
   Bu iki kutuyu `hidden` ile açıp kapattığımız için kuralı geri koyuyoruz. */
.duzen-ac[hidden], .duzen-cubuk[hidden] { display: none !important; }

.duzen-ac { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.duzen-ac .btn svg { vertical-align: -2px; margin-right: 4px; }

.duzen-cubuk {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 14px; padding: 11px 15px;
  border: 1px solid rgba(201, 162, 77, .38);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(201, 162, 77, .10), rgba(201, 162, 77, .03));
  /* Uzun profillerde kaydırırken düğmeler kaybolmasın */
  position: sticky; top: 8px; z-index: 30;
  backdrop-filter: blur(9px);
}
.dc-metin b { display: block; font-size: 12.5px; color: var(--gold-bright); }
.dc-metin span { font-size: 11.5px; line-height: 1.5; }
.dc-dugmeler { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dc-durum { font-size: 11.5px; min-width: 0; }
.dc-durum.oldu     { color: #6fd08c; }
.dc-durum.hata     { color: #e2726e; }
.dc-durum.bekliyor { color: var(--gold-bright); }

/* Kartın üstündeki tutamak şeridi */
.kart-arac {
  display: flex; align-items: center; gap: 8px;
  /* Sürükleme bu şeridin TAMAMINDAN başlıyor (ok/göz düğmeleri hariç), o
     yüzden parmağa yetecek yükseklikte ve touch-action:none — yoksa
     telefonda sürüklerken tarayıcı sayfayı kaydırır, kart yerinde kalır. */
  min-height: 34px; touch-action: none; cursor: grab;
  padding: 5px 8px; margin-bottom: -1px;
  border: 1px solid rgba(201, 162, 77, .35);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: rgba(201, 162, 77, .09);
  font-size: 11.5px;
  cursor: grab;
  user-select: none;
}
.kart-arac:active { cursor: grabbing; }
.kart-arac .ka-tut { color: var(--gold-bright); letter-spacing: -2px; padding: 0 2px; }
/* Düğmeler sürükleme alanının dışında: imleç de öyle söylesin. */
.ka-dugmeler, .ka-dugmeler button { cursor: pointer; touch-action: auto; }
.kart-arac .ka-ad {
  flex: 1; min-width: 0; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ka-dugmeler { display: flex; gap: 3px; }
.ka-dugmeler button {
  width: 26px; height: 26px; line-height: 1;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 6px;
  background: rgba(255, 255, 255, .04); color: var(--text);
  font-size: 12px; cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
.ka-dugmeler button:hover:not(:disabled) {
  background: rgba(201, 162, 77, .18); border-color: rgba(201, 162, 77, .5);
}
.ka-dugmeler button:disabled { opacity: .28; cursor: default; }
.ka-dugmeler .ka-goz.kapali { color: var(--gold-bright); }

body.duzen-modu .kart-sar > .card {
  border-top-left-radius: 0; border-top-right-radius: 0;
}
.kart-sar.suruklenen { opacity: .5; }
.kart-sar.suruklenen .card,
.kart-sar.suruklenen .kart-arac { border-color: var(--gold-bright); }
/* Sürükleme sırasında metin seçilmesin, imleç her yerde "taşıyor" desin */
body.suruklerken { user-select: none; cursor: grabbing; }
body.suruklerken * { cursor: grabbing !important; }

body.duzen-modu [data-sutun] {
  min-height: 90px;
  border-radius: 12px;
  outline: 1px dashed rgba(255, 255, 255, .09);
  outline-offset: 7px;
  transition: outline-color .15s;
}
body.duzen-modu [data-sutun].sutun-hedef { outline-color: rgba(201, 162, 77, .65); }

/* Düzenlerken her zaman iki sütun göster: "tek-sutun" kaçış düzeni
   (kartlar tek akışta) sütun kavramını görünmez kılıyor, oyuncu neyi nereye
   taşıdığını göremiyordu. */
body.duzen-modu .profil-duzen.tek-sutun {
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
}
body.duzen-modu .profil-duzen.tek-sutun .profil-ana,
body.duzen-modu .profil-duzen.tek-sutun .profil-yan {
  display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
@media (max-width: 900px) {
  body.duzen-modu .profil-duzen.tek-sutun { grid-template-columns: minmax(0, 1fr); }
  .duzen-cubuk { position: static; }
}